Mercurial > code > home > repos > light9

changeset 1608:faa62d5e84d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
colorpick crosshairs and chrome workarounds Ignore-this: adb06d516e5709c2e0ddc9e7b5e8006e
author Drew Perttula <drewp@bigasterisk.com>
date Mon, 05 Jun 2017 08:25:28 +0000
parents 60b519af3d12
children 0bb3051fd6fd
files light9/web/colorpick_crosshair_large.png light9/web/colorpick_crosshair_large.svg light9/web/colorpick_crosshair_small.png light9/web/colorpick_crosshair_small.svg light9/web/live/index.html
diffstat 5 files changed, 293 insertions(+), 22 deletions(-) [+]
line wrap: on
line diff
Binary file light9/web/colorpick_crosshair_large.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/colorpick_crosshair_large.svg	Mon Jun 05 08:25:28 2017 +0000
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="1000"
+   height="1000"
+   viewBox="0 0 1000 1000"
+   version="1.1"
+   id="svg8"
+   inkscape:export-filename="/home/drewp/projects-local/light9/light9/web/colorpick_crosshair_large.png"
+   inkscape:export-xdpi="60.720001"
+   inkscape:export-ydpi="60.720001"
+   inkscape:version="0.92.1 unknown"
+   sodipodi:docname="colorpick_crosshair_large.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.7"
+     inkscape:cx="628.31802"
+     inkscape:cy="596.88994"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-global="true"
+     inkscape:bbox-paths="false"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1785"
+     inkscape:window-height="1286"
+     inkscape:window-x="855"
+     inkscape:window-y="211"
+     inkscape:window-maximized="0"
+     units="px"
+     viewbox-width="100"
+     viewbox-height="100"
+     inkscape:snap-page="true"
+     scale-x="1"
+     inkscape:showpageshadow="true"
+     inkscape:pagecheckerboard="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4487"
+       originx="84.666667"
+       originy="42.333326" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(84.666667,-398.3332)">
+    <ellipse
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.69199997;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="path4485"
+       cx="415.33334"
+       cy="898.33374"
+       rx="23.649397"
+       ry="23.649393" />
+    <path
+       style="opacity:0.531;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.6500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 391.02774,898.33321 H -84.666663"
+       id="path4489"
+       inkscape:connector-curvature="0" />
+    <ellipse
+       ry="13.000324"
+       rx="13.000322"
+       cy="898.33374"
+       cx="414.77835"
+       id="ellipse4497"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4509"
+       d="m 415.33329,874.02821 v 52.083"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.64999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.64999998;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 439.63886,898.33321 H 387.55552"
+       id="path4511"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4515"
+       d="M 915.33327,898.33321 H 439.63886"
+       style="opacity:0.531;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.6500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="opacity:0.531;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.6500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 415.33329,1398.3332 V 922.63921"
+       id="path4517"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4519"
+       d="M 415.33329,874.02821 V 398.33323"
+       style="opacity:0.531;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:3.6500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
Binary file light9/web/colorpick_crosshair_small.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/colorpick_crosshair_small.svg	Mon Jun 05 08:25:28 2017 +0000
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="400"
+   height="60"
+   viewBox="0 0 400 60"
+   version="1.1"
+   id="svg8"
+   inkscape:export-filename="/home/drewp/projects-local/light9/light9/web/colorpick_crosshair_small.png"
+   inkscape:export-xdpi="60.720001"
+   inkscape:export-ydpi="60.720001"
+   inkscape:version="0.92.1 unknown"
+   sodipodi:docname="colorpick_crosshair_small.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="44.8"
+     inkscape:cx="197.93986"
+     inkscape:cy="27.463198"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     showguides="true"
+     inkscape:snap-bbox="true"
+     inkscape:snap-global="true"
+     inkscape:bbox-paths="false"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1785"
+     inkscape:window-height="1286"
+     inkscape:window-x="945"
+     inkscape:window-y="735"
+     inkscape:window-maximized="0"
+     units="px"
+     inkscape:snap-page="true"
+     inkscape:snap-object-midpoints="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid4487"
+       originx="84.666667"
+       originy="42.333326" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(84.666667,-1014.75)">
+    <path
+       style="opacity:0.531;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2.54072428;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 106.75804,1044.7945 H -187.55665"
+       id="path4489"
+       inkscape:connector-curvature="0" />
+    <ellipse
+       ry="7.6999803"
+       rx="7.6999774"
+       cy="1044.7944"
+       cx="115.35117"
+       id="ellipse4497"
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.531;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1.78628826;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4509"
+       d="m 115.35115,1036.2014 v 17.1862"
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26794326;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.26794326;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 123.94429,1044.7946 H 106.75804"
+       id="path4511"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4515"
+       d="M 418.25895,1044.7945 H 123.94429"
+       style="opacity:0.531;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2.54072428;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path
+       style="opacity:0.531;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2.54072428;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 115.35115,1347.7023 V 1053.3876"
+       id="path4517"
+       inkscape:connector-curvature="0" />
+    <path
+       inkscape:connector-curvature="0"
+       id="path4519"
+       d="M 115.35115,1036.2014 V 741.88681"
+       style="opacity:0.531;fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:2.54072428;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>
--- a/light9/web/live/index.html	Mon Jun 05 04:37:23 2017 +0000
+++ b/light9/web/live/index.html	Mon Jun 05 08:25:28 2017 +0000
@@ -26,6 +26,7 @@
              position: relative;
          }
          #smallRainbowComp, #largeRainbowComp {
+             display: inline-block;
              overflow: hidden;
              position: relative;
          }
@@ -46,18 +47,22 @@
              pointer-events: none;
          }
          #smallCrosshair {
-             background: url(/colorpick_crosshair_small.png);
-             width: 200px; 
-             height: 166px;
+             background: url(/colorpick_crosshair_small.svg);
+             /* this can't be too tall, or chrome will cull it in the 
+                second column if its top goes above the top of the columns */
+             width: 400px; 
+             height: 60px;
          }
          #largeCrosshair {
-             background: url(/colorpick_crosshair_large.png);
-             width: 492px; 
-             height: 409px;
+             background: url(/colorpick_crosshair_large.svg);
+             width: 1000px; 
+             height: 1000px;
          }
          #largeRainbowComp {
              display: none;
              position: absolute;
+             border: 4px solid #545454;
+             box-shadow: 8px 11px 40px 0px rgba(0, 0, 0, 0.74);
              z-index: 10;
              left: -50px;
              top: -110px;
@@ -70,8 +75,8 @@
         <div id="largeRainbowComp">
           <div id="largeRainbow"
                   on-mousemove="onCanvasMove"
-                  on-mouseup="onCanvasUp"
-                  on-mouseleave="onCanvasLeave"></div>
+                  on-mouseup="hideLarge"
+                  on-mouseleave="hideLarge"></div>
           <div id="largeCrosshair"></div>
         </div>
       </template>
@@ -118,19 +123,35 @@
                    var data = this.ctx.getImageData(pos[0], pos[1], 1, 1).data;
                    return this._hexFromRgb(data[0], data[1], data[2]);
                }
+               _fullBrightness(r, g, b) {
+                   var high = Math.max(r, g, b);
+                   if (high == 0) {
+                       return [0, 0, 0];
+                   }
+                   return [Math.floor(255 * r / high),
+                           Math.floor(255 * g / high),
+                           Math.floor(255 * b / high)];
+               }
                posFor(color) {
                    let r = parseInt(color.substr(1, 2), 16),
                        g = parseInt(color.substr(3, 2), 16),
                        b = parseInt(color.substr(5, 2), 16);
 
-                   var bright = Math.max(r, g, b);
-                   r = Math.floor(255 * r / bright);
-                   g = Math.floor(255 * g / bright);
-                   b = Math.floor(255 * b / bright);
-                   var ep = 8;
-                   for (var dr = 0; dr < ep; dr = -dr + (dr > 0 ? 0 : 1)) {
-                       for (var dg = 0; dg < ep; dg = -dg + (dg > 0 ? 0 : 1)) {
-                           for (var db = 0; db < ep; db = -db + (db > 0 ? 0 : 1)) {
+                   let bright = this._fullBrightness(r, g, b);
+                   r = bright[0]; g = bright[1]; b = bright[2];
+                   
+                   // We may not have a match for this color exactly (e.g. on
+                   // the small image), so we have to search for a near one.
+                   
+                   // 0, 1, -1, 2, -2, ...
+                   let walk = function(x) { return -x + (x > 0 ? 0 : 1); }
+                   
+                   var radius = 8;
+                   for (var dr = 0; dr < radius; dr = walk(dr)) {
+                       for (var dg = 0; dg < radius; dg = walk(dg)) {
+                           for (var db = 0; db < radius; db = walk(db)) {
+                               // Don't need bounds check- out of range
+                               // corrupt colors just won't match.
                                color = this._hexFromRgb(r + dr, g + dg, b + db);
                                var pos = this.colorPos[color];
                                if (pos !== undefined) {
@@ -170,7 +191,20 @@
                    }
                    this.moveSmallCrosshair(pos);
                },
+               _floatLarge: function() {
+                   // Large might span multiple columns, and chrome won't
+                   // send events for those parts. Workaround: take it out of
+                   // the columns.
+                   let large = this.$.largeRainbowComp;
+                   let rect = this.$.smallRainbowComp.getBoundingClientRect();
+                   document.body.append(large);
+                   large.style.position = 'fixed';
+                   large.style.left = (rect.left - 100) + 'px';
+                   large.style.top = (rect.top - 50) + 'px';
+
+               },
                showLarge: function() {
+                   this._floatLarge();
                    this.$.largeRainbowComp.style.display = 'block';
                    try {
                        this.moveLargeCrosshair(this.large.posFor(this.value));
@@ -204,12 +238,6 @@
                    this.moveLargeCrosshair(pos);
                    this.value = this.large.colorAt(pos);
                },
-               onCanvasUp: function(ev) {
-                   this.hideLarge();
-               },
-               onCanvasLeave: function(ev) {
-                   this.hideLarge();
-               },
            });
        });
       </script>