light9 Changeset - faa62d5e84d8

Changeset - faa62d5e84d8

Parent rev.

Child rev.

[Not reviewed]

default

2 1 2

Drew Perttula - 8 years ago 2017-06-05 08:25:28
drewp@bigasterisk.com

colorpick crosshairs and chrome workarounds
Ignore-this: adb06d516e5709c2e0ddc9e7b5e8006e

5 files changed with 293 insertions and 22 deletions:

light9/web/colorpick_crosshair_large.png

bin+del

light9/web/colorpick_crosshair_large.svg

127

light9/web/colorpick_crosshair_small.png

bin+del

light9/web/colorpick_crosshair_small.svg

116

light9/web/live/index.html

0 comments (0 inline, 0 general)

light9/web/colorpick_crosshair_large.png

➞

Show inline comments

		deleted file
		binary diff not shown

Show images

light9/web/colorpick_crosshair_large.svg

➞

Show inline comments

@@ new file 100644 @@
 <?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>

light9/web/colorpick_crosshair_small.png

➞

Show inline comments

		deleted file
		binary diff not shown

Show images

light9/web/colorpick_crosshair_small.svg

➞

Show inline comments

@@ new file 100644 @@
 <?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>

light9/web/live/index.html

➞

Show inline comments

@@ @@ -23,12 +23,13 @@ @@
       <template>
         <style>
          :host {
              position: relative;
+         }
          #smallRainbowComp, #largeRainbowComp {
              display: inline-block;
              overflow: hidden;
              position: relative;
+         }
          #smallRainbow {
              background: url(/colorpick_rainbow_small.png);
              width: 150px;
@@ @@ -43,38 +44,42 @@ @@
              position: absolute;
              left: -60px;
              top: -62px;
              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;
+         }
         </style>
         <div id="smallRainbowComp">
           <div id="smallRainbow" on-mouseenter="onEnterSmall"></div>
           <div id="smallCrosshair"></div>
         </div>
         <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>
       <script>
        HTMLImports.whenReady(function () {
            class RainbowCanvas {
@@ @@ -115,25 +120,41 @@ @@
                    return '#' + hex(r) + hex(g) + hex(b);
+               }
                colorAt(pos) {
                    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) {
                                    return pos;
+                               }
+                           }
@@ @@ -167,13 +188,26 @@ @@
                    } catch(e) {
                        this.moveSmallCrosshair([-999, -999]);
                        return;
+                   }
                    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));
                    } catch(e) {
                        this.moveLargeCrosshair([-999, -999]);
                        return;
@@ @@ -201,18 +235,12 @@ @@
                    var canvas = this.$.largeRainbow;
                    var pos = [ev.offsetX - canvas.offsetLeft,
                               ev.offsetY - canvas.offsetTop];
                    this.moveLargeCrosshair(pos);
                    this.value = this.large.colorAt(pos);
                },
                onCanvasUp: function(ev) {
                    this.hideLarge();
                },
                onCanvasLeave: function(ev) {
                    this.hideLarge();
                },
            });
        });
       </script>
     </dom-module>

0 comments (0 inline, 0 general)