Renaming HUE* to hue*

Adding lowercased hueMediate, hueGamut, hueImage
ArndBrugman · Feb 15, 2015 · c805da1 · c805da1
1 parent eda6b63
commit c805da1
Show file tree

Hide file tree

Showing 6 changed files with 462 additions and 0 deletions.
diff --git a/hueGamut/index.html b/hueGamut/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>HUE Gamut</title>
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+    <meta name="viewport" content="width=device-width" />
+
+    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
+
+    <script src="../huepi.js" type="text/javascript"></script>
+  </head>
+
+  <body>
+    <script type="text/javascript" >
+      $(document).ready(function() {
+        HueCanvas = document.getElementById("HUECanvas");
+        HueContext = document.getElementById("HUECanvas").getContext("2d");
+
+        $("#HUECanvas").bind("mousedown", function(event) {
+          Px = event.offsetX / HueCanvas.width;
+          Py = 1 - (event.offsetY / HueCanvas.height);
+          HueGamutRedraw();
+        });
+
+        Px = 0.0;
+        Py = 0.0;
+        HueGamutRedraw();
+      });
+
+      function HueGamutRedraw() {
+        // For the hue bulb the corners of the triangle are:
+        var PRed = {x: 0.6750, y: 0.3220};
+        var PGreen = {x: 0.4091, y: 0.5180};
+        var PBlue = {x: 0.1670, y: 0.0400};
+
+        var Corrected = huepi.HelperGamutXYforModel(Px, Py, "LCT001");
+        var Cx = Corrected.x;
+        var Cy = Corrected.y;
+
+        HueContext.fillStyle = '#ffffff';
+        HueContext.fillRect(0, 0, HueCanvas.width, HueCanvas.height);
+
+        // Draw Gamut
+        HueContext.fillStyle = '#CC0';
+        HueContext.strokeStyle = '#777';
+        HueContext.lineWidth = 2;
+
+        HueContext.beginPath();
+        HueContext.moveTo(PRed.x * HueCanvas.width, HueCanvas.height - PRed.y * HueCanvas.height);
+        HueContext.lineTo(PGreen.x * HueCanvas.width, HueCanvas.height - PGreen.y * HueCanvas.height);
+        HueContext.lineTo(PBlue.x * HueCanvas.width, HueCanvas.height - PBlue.y * HueCanvas.height);
+        HueContext.lineTo(PRed.x * HueCanvas.width, HueCanvas.height - PRed.y * HueCanvas.height);
+        HueContext.stroke();
+        HueContext.closePath();
+
+        // Draw C P
+        HueContext.strokeStyle = '#F84';
+        HueContext.lineWidth = 2;
+        HueContext.beginPath();
+        HueContext.moveTo(Px * HueCanvas.width - 1, HueCanvas.height - Py * HueCanvas.height - 1);
+        HueContext.lineTo(Cx * HueCanvas.width + 1, HueCanvas.height - Cy * HueCanvas.height + 1);
+        HueContext.stroke();
+        HueContext.closePath();
+      }
+    </script>
+
+    <canvas id="HUECanvas" width=512 height=512 style="border:3px solid #112233" >It seems your device doesn't support the required HTML5 Canvas</canvas>
+
+  </body>
+</html>
diff --git a/hueImage/index.html b/hueImage/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>HUE Image</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+
+    <script src='../huepi.js' type='text/javascript'></script>
+
+  </head>
+  <body>
+    <script type="text/javascript" >
+      function GetUrlValue(VarSearch) {
+        var SearchString = window.location.search.substring(1);
+        var VariableArray = SearchString.split('&');
+        for (var i = 0; i < VariableArray.length; i++) {
+          var KeyValuePair = VariableArray[i].split('=');
+          if (KeyValuePair[0] === VarSearch) {
+            return KeyValuePair[1];
+          }
+        }
+      }
+
+      function HueImageRedraw() {
+        var HueCanvas = document.getElementById("HUECanvas");
+        var HueContext = document.getElementById("HUECanvas").getContext("2d");
+        var size = GetUrlValue('size');
+        if (size !== undefined)
+          HueCanvas.width = size;
+        else
+          HueCanvas.width = 512;
+        HueCanvas.height = HueCanvas.width;
+        var xhalf = HueCanvas.width / 2;
+        var yhalf = HueCanvas.height / 2;
+        HueContext.fillRect(0, 0, HueCanvas.width, HueCanvas.height); // Need to Fill Canvas otherwise its unable to be modified...
+        HueImagedata = HueContext.getImageData(0, 0, HueCanvas.width, HueCanvas.height);
+        for (var y = 0; y < HueCanvas.height; y++) { // Evey ScanLine
+          for (var x = 0; x < HueCanvas.width; x++) { // Every Pixel on ScanLine
+            var px = (x - xhalf) / xhalf; // [-1, 1]
+            var py = (y - yhalf) / yhalf; // [-1, 1]
+            var Hue = 360 - (Math.atan2(px, py) * 180 / Math.PI + 180); // [0..359]
+            var Brightness = 1;
+            var Saturation = 1;
+            if (Math.sqrt(px * px + py * py) < 0.5) // Inner Circle
+              Saturation = 2 * Math.sqrt(px * px + py * py);
+            if (Math.sqrt(px * px + py * py) > 0.5) // Outer Circle
+              Brightness = 1 - 2 * (Math.sqrt(px * px + py * py) - 0.5);
+            if (Math.sqrt(px * px + py * py) > 1) // Rest Of Square Outside Outer Circle
+              Brightness = 0;
+
+            var Color = huepi.HelperHueAngSatBritoRGB(Hue, Saturation, Brightness);
+
+            var Index = (x + y * HueCanvas.width) * 4; // Index of Pixel
+            HueImagedata.data[Index + 0] = Color.Red * 255;
+            HueImagedata.data[Index + 1] = Color.Green * 255;
+            HueImagedata.data[Index + 2] = Color.Blue * 255;
+          }
+        }
+        HueContext.putImageData(HueImagedata, 0, 0);
+        document.getElementById('HueImage').src = HueCanvas.toDataURL();
+      }
+
+      window.onload = function() {
+        window.onresize();
+      };
+
+      window.onresize = function() {
+        HueImageRedraw();
+      };
+
+    </script>
+    <div align="center">
+      <canvas style="border:1px solid #884422;display:none;" id="HUECanvas" width=256 height=256 >It seems your device doesn"t support the required HTML5 Canvas</canvas>
+      <img id="HueImage">
+    </div>
+
+  </body>
+</html>
diff --git a/hueMediate/images/HUE.png b/hueMediate/images/HUE.png
diff --git a/hueMediate/images/HUE128.png b/hueMediate/images/HUE128.png