Mercurial > code > home > repos > light9
changeset 1604:d372508bec98
WIP start new color picker
Ignore-this: e4abfb94ed6c1d2a68b64c11c590af73
| author | Drew Perttula <drewp@bigasterisk.com> |
|---|---|
| date | Sun, 04 Jun 2017 22:51:14 +0000 |
| parents | 5707e7b42de6 |
| children | 64c1bcff604e |
| files | light9/collector/web/index.html light9/web/colorpick_crosshair_large.png light9/web/colorpick_crosshair_small.png light9/web/colorpick_rainbow_large.png light9/web/colorpick_rainbow_small.png light9/web/live/index.html |
| diffstat | 6 files changed, 84 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/light9/collector/web/index.html Sun Jun 04 08:58:38 2017 +0000 +++ b/light9/collector/web/index.html Sun Jun 04 22:51:14 2017 +0000 @@ -27,7 +27,7 @@ break-inside: avoid-column; } h3 { - margin-top: 2px; + margin-top: 12px; margin-bottom: 0; } td.nonzero {
--- a/light9/web/live/index.html Sun Jun 04 08:58:38 2017 +0000 +++ b/light9/web/live/index.html Sun Jun 04 22:51:14 2017 +0000 @@ -18,6 +18,84 @@ <link rel="import" href="/resource-display.html"> </head> <body> + + <dom-module id="light9-color-picker"> + <template> + <style> + :host { + position: relative; + } + #smallRainbow, #largeRainbow { overflow: hidden; position: relative; } + #smallRainbow { + background: url(/colorpick_rainbow_small.png); + width: 150px; + height: 30px; + } + #largeRainbow { + background: url(/colorpick_rainbow_large.png); + width: 400px; + height: 200px; + } + #smallCrosshair, #largeCrosshair { + position: absolute; + left: -60px; + top: -62px; + pointer-events: none; + } + #smallCrosshair { + background: url(/colorpick_crosshair_small.png); + width: 200px; + height: 166px; + + } + #largeCrosshair { + background: url(/colorpick_crosshair_large.png); + width: 492px; + height: 409px; + + } + #largeRainbowComp { display: none; position: absolute; + z-index: 10; + left: -50px; + top: -110px; + } + </style> + <div id="smallRainbow" on-mouseenter="onEnterSmall"> <div id="smallCrosshair"></div></div> + <div id="largeRainbowComp"> + <canvas id="largeRainbow" + on-mousemove="onCanvasMove" + on-mouseup="onCanvasUp" + on-mouseleave="onCanvasLeave"></canvas> + <div id="largeCrosshair"></div> + </div> + </template> + <script> + HTMLImports.whenReady(function () { + Polymer({ + is: "light9-color-picker", + properties: { + }, + ready: function() { + }, + onEnterSmall: function() { + // not if we just closed the large one + this.$.largeRainbowComp.style.display = 'block'; + }, + onCanvasMove: function(ev) { + console.log('canvasmove'); + }, + onCanvasUp: function(ev) { + console.log('canvasup'); + this.$.largeRainbowComp.style.display = 'none'; + }, + onCanvasLeave: function(ev) { + console.log('canvasleave'); + this.$.largeRainbowComp.style.display = 'none'; + }, + }); + }); + </script> + </dom-module> <dom-module id="light9-live-control"> @@ -55,6 +133,7 @@ value="{{pickedColor}}"> <button on-click="goWhite">white</button> <button on-click="goBlack">black</button> + <light9-color-picker value="{{pickedColor}}"></light9-color-picker> </template> <template is="dom-if" if="{{deviceAttr.useChoice}}"> <select size$="{{deviceAttr.choiceSize}}" value="{{pickedChoice::change}}"> @@ -78,8 +157,6 @@ padding: 1px; background: #171717; /* deviceClass gradient added later */ break-inside: avoid-column; - border-top-right-radius: 15px; - overflow: hidden; } .deviceAttr { @@ -97,6 +174,10 @@ font-size: 110%; padding: 4px; } + .device, h2 { + border-top-right-radius: 15px; +} + #mainLabel { font-size: 120%; color: #9ab8fd;