Frontend: migrate to Polymer-based color picker

homeassistant/components/frontend/www_static/polymer/bower.json

@@ -35,7 +35,6 @@
     "google-apis": "GoogleWebComponents/google-apis#0.8-preview",
     "moment": "^2.10.3",
     "layout": "Polymer/layout",
-    "color-picker-element": "~0.0.3",
     "paper-styles": "polymerelements/paper-styles#^1.0.0",
     "lodash": "~3.9.3",
     "pikaday": "~1.3.2"

homeassistant/components/frontend/www_static/polymer/components/ha-color-picker.html

@@ -0,0 +1,169 @@
+<link rel='import' href='../bower_components/polymer/polymer.html'>
+
+<dom-module id='ha-color-picker'>
+  <style>
+    canvas {
+      cursor: crosshair;
+    }
+  </style>
+  <template>
+    <canvas width='[[width]]' height='[[height]]'></canvas>
+  </template>
+</dom-module>
+
+<script>
+
+/**
+ * Color-picker custom element
+ * Originally created by bbrewer97202 (Ben Brewer). MIT Licensed.
+ * https://github.com/bbrewer97202/color-picker-element
+ *
+ * Adapted to work with Polymer.
+ */
+
+(function() {
+  /**
+   * given red, green, blue values, return the equivalent hexidecimal value
+   * base source: http://stackoverflow.com/a/5624139
+   */
+  var componentToHex = function(c) {
+    var hex = c.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+
+  var rgbToHex = function(color) {
+    return "#" + componentToHex(color.r) + componentToHex(color.g) +
+           componentToHex(color.b);
+  };
+
+  Polymer({
+      is: 'ha-color-picker',
+
+      properties: {
+          width: {
+              type: Number,
+              value: 300,
+          },
+          height: {
+              type: Number,
+              value: 300,
+          },
+          color: {
+            type: Object,
+          },
+      },
+
+      listeners: {
+        'mousedown': 'onMouseDown',
+        'mouseup': 'onMouseUp',
+        'touchstart': 'onTouchStart',
+        'touchend': 'onTouchEnd',
+        'tap': 'onTap',
+      },
+
+      onMouseDown: function(e) {
+          this.onMouseMove(e);
+          this.addEventListener('mousemove', this.onMouseMove);
+      },
+
+      onMouseUp: function(e) {
+          this.removeEventListener('mousemove', this.onMouseMove);
+      },
+
+      onTouchStart: function(e) {
+          this.onTouchMove(e);
+          this.addEventListener('touchmove', this.onTouchMove);
+      },
+
+      onTouchEnd: function(e) {
+          this.removeEventListener('touchmove', this.onTouchMove);
+      },
+
+      onTap: function(e) {
+        e.stopPropagation();
+      },
+
+      onTouchMove: function(e) {
+        var touch = e.touches[0];
+        this.onColorSelect(e, {x: touch.clientX, y: touch.clientY});
+      },
+
+      onMouseMove: function(e) {
+        e.preventDefault();
+        if (this.mouseMoveIsThrottled) {
+          this.mouseMoveIsThrottled = false;
+          this.onColorSelect(e);
+          this.async(
+            function() { this.mouseMoveIsThrottled = true; }.bind(this), 100);
+        }
+      },
+
+      onColorSelect: function(e, coords) {
+        if (this.context) {
+          coords = coords || this.relativeMouseCoordinates(e);
+          var data = this.context.getImageData(coords.x, coords.y, 1, 1).data;
+
+          this.setColor({r: data[0], g: data[1], b: data[2]});
+        }
+      },
+
+      setColor: function(rgb) {
+        //save calculated color
+        this.color = {hex: rgbToHex(rgb), rgb: rgb};
+
+        this.fire('colorselected', {
+          rgb: this.color.rgb,
+          hex: this.color.hex
+        });
+      },
+
+      /**
+       * given a mouse click event, return x,y coordinates relative to the clicked target
+       * @returns object with x, y values
+       */
+      relativeMouseCoordinates: function(e) {
+        var x = 0, y = 0;
+
+        if (this.canvas) {
+          var rect = this.canvas.getBoundingClientRect();
+          x = e.clientX - rect.left;
+          y = e.clientY - rect.top;
+        }
+
+        return {
+            x: x,
+            y: y
+        };
+      },
+
+      ready: function() {
+        this.setColor = this.setColor.bind(this);
+        this.mouseMoveIsThrottled = true;
+        this.canvas = this.children[0];
+        this.context = this.canvas.getContext('2d');
+
+        var colorGradient = this.context.createLinearGradient(0, 0, this.width, 0);
+        colorGradient.addColorStop(0, "rgb(255,0,0)");
+        colorGradient.addColorStop(0.16, "rgb(255,0,255)");
+        colorGradient.addColorStop(0.32, "rgb(0,0,255)");
+        colorGradient.addColorStop(0.48, "rgb(0,255,255)");
+        colorGradient.addColorStop(0.64, "rgb(0,255,0)");
+        colorGradient.addColorStop(0.80, "rgb(255,255,0)");
+        colorGradient.addColorStop(1, "rgb(255,0,0)");
+        this.context.fillStyle = colorGradient;
+        this.context.fillRect(0, 0, this.width, this.height);
+
+        var bwGradient = this.context.createLinearGradient(0, 0, 0, this.height);
+        bwGradient.addColorStop(0, "rgba(255,255,255,1)");
+        bwGradient.addColorStop(0.5, "rgba(255,255,255,0)");
+        bwGradient.addColorStop(0.5, "rgba(0,0,0,0)");
+        bwGradient.addColorStop(1, "rgba(0,0,0,1)");
+
+        this.context.fillStyle = bwGradient;
+        this.context.fillRect(0, 0, this.width, this.height);
+      },
+
+  });
+
+})();
+</script>

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-light.html

@@ -1,7 +1,7 @@
 <link rel='import' href='../bower_components/polymer/polymer.html'>
 <link rel='import' href='../bower_components/paper-slider/paper-slider.html'>
 
-<link rel='import' href='../bower_components/color-picker-element/dist/color-picker.html'>
+<link rel='import' href='../components/ha-color-picker.html'>
 
 <dom-module id='more-info-light'>
   <style>
@@ -41,7 +41,7 @@
         </paper-slider>
       </div>
 
-      <color-picker on-colorselected='colorPicked' width='350' height='200'>
+      <ha-color-picker on-colorselected='colorPicked' width='350' height='200'>
       </color-picker>
     </div>
   </template>