light9 Changeset - d372508bec98

Changeset - d372508bec98

Parent rev.

Child rev.

[Not reviewed]

default

0 2 4

Drew Perttula - 8 years ago 2017-06-04 22:51:14
drewp@bigasterisk.com

WIP start new color picker
Ignore-this: e4abfb94ed6c1d2a68b64c11c590af73

6 files changed with 84 insertions and 3 deletions:

light9/collector/web/index.html

light9/web/colorpick_crosshair_large.png

bin+new file

light9/web/colorpick_crosshair_small.png

bin+new file

light9/web/colorpick_rainbow_large.png

bin+new file

light9/web/colorpick_rainbow_small.png

bin+new file

light9/web/live/index.html

0 comments (0 inline, 0 general)

light9/collector/web/index.html

➞

Show inline comments

@@ @@ -27,7 +27,7 @@ @@
              break-inside: avoid-column;
+         }
          h3 {
-             margin-top: 2px;
+             margin-top: 12px;
              margin-bottom: 0;
+         }
          td.nonzero {

light9/web/colorpick_crosshair_large.png

➞

Show inline comments

		new file 100644
		binary diff not shown

Show images

light9/web/colorpick_crosshair_small.png

➞

Show inline comments

		new file 100644
		binary diff not shown

Show images

light9/web/colorpick_rainbow_large.png

➞

Show inline comments

		new file 100644
		binary diff not shown

Show images

light9/web/colorpick_rainbow_small.png

➞

Show inline comments

		new file 100644
		binary diff not shown

Show images

light9/web/live/index.html

➞

Show inline comments

@@ @@ -19,6 +19,84 @@ @@
   </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">
       <template>
@@ @@ -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;

0 comments (0 inline, 0 general)