Hue shift slider, see tristen#13

thorn0 · Feb 11, 2018 · a9976db · a9976db
1 parent d0045a9
commit a9976db
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 18 deletions.
diff --git a/css/site.css b/css/site.css
@@ -178,7 +178,10 @@ input[type=range]::-moz-range-thumb {
   margin-right:auto;
   }
 .slider-output {
-  bottom:-25px;
+  position: absolute;
+  right: 101%;
+  margin-top: 10px;
+  white-space: nowrap;
   }
 .axis-select {
   position:absolute;
@@ -213,7 +216,7 @@ input[type=range]::-moz-range-thumb {
 .sidebar {
   background:#353535;
   width:145px;
-  height:460px;
+  height:500px;
   float:left;
   border-radius:0 2px 2px 0;
   position:relative;

diff --git a/index.html b/index.html
@@ -59,12 +59,16 @@ <h1>Colorpicker for data</h1>
         <div class='drag from'></div>
         <div class='drag to'></div>
       </div>
-      <input id='slider' class='slider col12' type='range' value='0' min='0' max='1' step='0.05' />
-
-      <div class='slider-output pin-bottomleft'>
+      <div class='slider-output'>
         <span class='quiet capitalize js-slider-title'></span>
         <span class='quiet js-slider-value'></span>
       </div>
+      <input id='slider' class='slider col12' type='range' value='0' min='0' max='1' step='0.05' />
+      <div class='slider-output'>
+        <span class='quiet capitalize js-slider-hue-title'>Hue Shift</span>
+        <span class='quiet js-slider-hue-value'></span>
+      </div>
+      <input id='slider-hue' class='slider col12' type='range' value='0' min='-180' max='180' step='1' />
     </div>
     <div class='sidebar'>
       <div class='output pad1'>

diff --git a/index.js b/index.js
@@ -4,9 +4,12 @@
 var clipboard = require('clipboard');
 var extend = require('xtend');
 var chroma = require('chroma-js');
+var debounce = require('lodash.debounce');
 var d3 = require('d3');
 d3.geo = require('d3-geo').geo;
 
+var HUE_SHIFT = 130;
+
 function autoscale(canvas) {
   var ctx = canvas.getContext('2d');
   var ratio = window.devicePixelRatio || 1;
@@ -27,7 +30,8 @@ function unserialize(hash) {
     steps: Number(parts[1]),
     zval: Number(parts[2]),
     from: chroma(parts[3]),
-    to: chroma(parts[4])
+    to: chroma(parts[4]),
+    hueShift: Number(parts[5]) || HUE_SHIFT
   };
 }
 
@@ -37,6 +41,7 @@ function Colorpicker(options) {
     scale: 2,
     handleSize: 15,
     axis: 'hlc',
+    hueShift: HUE_SHIFT,
     colorspace: {
       dimensions: [
         ['h', 'hue', 0, 360, 0],
@@ -53,9 +58,9 @@ function Colorpicker(options) {
     y: 'l',
     z: 'c',
     steps: 6,
-    zval: 1,
-    from: chroma(0x16534c),
-    to: chroma(0xe2e062)
+    zval: 64,
+    from: chroma(0x351b7e),
+    to: chroma(0xe0fe7e)
   };
 
   var hash = location.hash.slice(2) ? unserialize(location.hash.slice(2)) : {};
@@ -65,6 +70,9 @@ function Colorpicker(options) {
 Colorpicker.prototype = {
   init: function(options) {
     var initPosSet = false;
+    var slider = d3.select('#slider');
+    var sliderHue = d3.select('#slider-hue');
+
     updateAxis(options.axis);
     options.from = getXY(options.from);
     options.to = getXY(options.to);
@@ -137,6 +145,11 @@ Colorpicker.prototype = {
 
       for (var i = 0; i < options.colorspace.dimensions.length; i++) {
         var dim = options.colorspace.dimensions[i];
+        if (dim[0] === 'h') {
+          dim = dim.slice();
+          dim[2] -= options.hueShift;
+          dim[3] -= options.hueShift;
+        }
         if (dim[0] === options.x) {
           options.dx = i;
           options.xdim = dim;
@@ -149,16 +162,42 @@ Colorpicker.prototype = {
         }
       }
 
-      d3
-        .select('#slider')
+      slider
         .attr('min', options.zdim[2])
         .attr('max', options.zdim[3])
         .attr('step', options.zdim[3] > 99 ? 1 : 0.01)
         .attr('value', options.zval);
 
       d3.select('.js-slider-title').text(options.zdim[1]);
 
-      d3.select('.js-slider-value').text(options.zval);
+      d3.select('.js-slider-value').text(formatZValue());
+
+      sliderHue
+        .attr('min', -180)
+        .attr('max', 180)
+        .attr('value', options.hueShift);
+      d3.select('.js-slider-hue-value').text(options.hueShift);
+    }
+
+    function fixAngle(angle, min, max) {
+      while (angle < min) angle += 360;
+      while (angle >= max) angle -= 360;
+      return angle;
+    }
+
+    function fixAngleIfNeeded(value, dim) {
+      if (dim[0] === 'h') {
+        value = fixAngle(value, dim[2], dim[3]);
+      }
+      return value;
+    }
+
+    function formatZValue() {
+      var zval = options.zval;
+      if (options.zdim[0] === 'h') {
+        zval = fixAngle(zval, 0, 360);
+      }
+      return zval;
     }
 
     function setView(axis) {
@@ -170,14 +209,32 @@ Colorpicker.prototype = {
     function getXY(color) {
       // inverse operation to getColor
       var hcl = color.hcl();
-      return [hcl[options.dx], hcl[options.dy]];
+      return [
+        fixAngleIfNeeded(hcl[options.dx], options.xdim),
+        fixAngleIfNeeded(hcl[options.dy], options.ydim)
+      ];
     }
 
-    var slider = d3.select('#slider');
+    var DEBOUNCE_MILLISECONDS = 10;
+    var debouncedRenderColorSpace = debounce(
+      renderColorSpace,
+      DEBOUNCE_MILLISECONDS
+    );
+    var debouncedRenderUpdateAxisAndRenderColorSpace = debounce(function() {
+      d3.select('.js-slider-hue-value').text(options.hueShift);
+      updateAxis(options.axis);
+      renderColorSpace();
+    }, DEBOUNCE_MILLISECONDS);
+
     slider.on('mousemove', function() {
-      d3.select('.js-slider-value').text(this.value);
       options.zval = this.value;
-      renderColorSpace();
+      d3.select('.js-slider-value').text(formatZValue());
+      debouncedRenderColorSpace();
+    });
+
+    sliderHue.on('mousemove', function() {
+      options.hueShift = +this.value;
+      debouncedRenderUpdateAxisAndRenderColorSpace();
     });
 
     d3.select('.js-add').on('click', function() {
@@ -348,7 +405,9 @@ Colorpicker.prototype = {
         '/' +
         getColor(options.to[0], options.to[1])
           .hex()
-          .substr(1)
+          .substr(1) +
+        '/' +
+        options.hueShift
       );
     }
 

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "A colorpicker for Data",
   "main": "index.js",
   "scripts": {
-    "test": "eslint --no-eslintrc -c .eslintrc index.js src",
+    "test": "eslint --no-eslintrc -c .eslintrc index.js",
     "start": "budo index.js --serve=bundle.js --live",
     "build": "browserify index.js | uglifyjs -c -m > bundle.js"
   },
@@ -35,6 +35,7 @@
     "clipboard": "^1.5.10",
     "d3": "^3.5.16",
     "d3-geo": "0.0.0",
+    "lodash.debounce": "^4.0.8",
     "xtend": "^4.0.1"
   }
 }