wire up rgb->hue color converter prototype, add lights.js example

RockerObjects.js

@@ -0,0 +1,83 @@
+
+class RockerConfig {
+  constructor(authLocation, authAttempts, authTimeout) {
+    this.authLocation = authLocation;
+    this.authAttempts = authAttempts;
+    this.authTimeout = authTimeout;
+  }
+}
+
+class RockerAuthenticator {
+  constructor(networker) {
+    this.networker = networker;
+  }
+
+  authenticate(callback) {
+    var checkIfAuthenticated = function(authBlock, successCallback, failureCallback, numberOfAttempts) {
+    };
+
+    checkIfAuthenticated = function(authBlock, successCallback, failureCallback, numberOfAttempts) {
+      authBlock(function(result) {
+       rocker_log("Checked if user pressed button, result -- " + JSON.stringify(result, null));
+       if (result && result["responseJSON"] && result["responseJSON"][0] && result["responseJSON"][0]["success"] && result["responseJSON"][0]["success"]["username"]) {
+          successCallback(result["responseJSON"][0]["success"]["username"]); // username in response! continue...
+       } else {
+          if (numberOfAttempts-1>0) {
+            checkIfAuthenticated(authBlock, successCallback, failureCallback, numberOfAttempts-1);
+          } else {
+            failureCallback(); // unable to auth after attempts <= 0
+          }
+       }
+      }); 
+    };
+
+    var networker = this.networker;
+    checkIfAuthenticated(function(aCallback) {
+      networker.authenticateWithBridge(aCallback);
+    }, function(username) {
+      callback(username);
+    }, function() {
+      callback(null);
+    }, networker.config.authAttempts); // check n times
+  }
+}
+
+class RockerNetworker {
+  constructor(config){
+    this.config = config;
+  }
+
+  authenticateWithBridge(callback) {
+    var authLocation = this.config.authLocation + "/api/";
+    var authBody = {"devicetype" : "rocker#debug julian"};
+    setTimeout(function() {
+      $.ajax({
+        url: authLocation,
+        method: "POST",
+        data: JSON.stringify(authBody),
+        complete: function (data) {
+          callback(data);
+        }
+      });
+    }, this.config.authTimeout);
+  }
+
+  toggleLights(lightsOnOrOffState, bridgeUsername, xyVal) {
+    var lightsOffLocation = this.config.authLocation + "/api/" + bridgeUsername + "/groups/3/action";
+    rocker_log("Location =  " + lightsOffLocation);
+    var lightsOffBody = {"on": lightsOnOrOffState, "xy": xyVal};
+    var lightsOffString = JSON.stringify(lightsOffBody);
+
+    rocker_log("Body = " + lightsOffBody + " String = " + lightsOffString);
+
+    $.ajax({
+      url: lightsOffLocation,
+      data: lightsOffString,
+      method: "PUT",
+      complete: function (data) {
+        rocker_log("Attempted to toggle lights! " + data);
+      }
+    });
+  }
+}
+

cie_rgb_converter.js

@@ -0,0 +1,144 @@
+/*
+With these functions you can convert the CIE color space to the RGB color space and vice versa.
+
+The developer documentation for Philips Hue provides the formulas used in the code below:
+https://developers.meethue.com/documentation/color-conversions-rgb-xy
+
+I've used the formulas and Objective-C example code and transfered it to JavaScript.
+
+
+Examples:
+
+var rgb = cie_to_rgb(0.6611, 0.2936)
+var cie = rgb_to_cie(255, 39, 60)
+
+------------------------------------------------------------------------------------
+
+The MIT License (MIT)
+
+Copyright (c) 2017 www.usolved.net
+Published under https://github.com/usolved/cie-rgb-converter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+
+
+
+/**
+ * Converts CIE color space to RGB color space
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} brightness - Ranges from 1 to 254
+ * @return {Array} Array that contains the color values for red, green and blue
+ */
+function cie_to_rgb(x, y, brightness)
+{
+	//Set to maximum brightness if no custom value was given (Not the slick ECMAScript 6 way for compatibility reasons)
+	if (brightness === undefined) {
+		brightness = 254;
+	}
+
+	var z = 1.0 - x - y;
+	var Y = (brightness / 254).toFixed(2);
+	var X = (Y / y) * x;
+	var Z = (Y / y) * z;
+
+	//Convert to RGB using Wide RGB D65 conversion
+	var red 	=  X * 1.656492 - Y * 0.354851 - Z * 0.255038;
+	var green 	= -X * 0.707196 + Y * 1.655397 + Z * 0.036152;
+	var blue 	=  X * 0.051713 - Y * 0.121364 + Z * 1.011530;
+
+	//If red, green or blue is larger than 1.0 set it back to the maximum of 1.0
+	if (red > blue && red > green && red > 1.0) {
+
+		green = green / red;
+		blue = blue / red;
+		red = 1.0;
+	}
+	else if (green > blue && green > red && green > 1.0) {
+
+		red = red / green;
+		blue = blue / green;
+		green = 1.0;
+	}
+	else if (blue > red && blue > green && blue > 1.0) {
+
+		red = red / blue;
+		green = green / blue;
+		blue = 1.0;
+	}
+
+	//Reverse gamma correction
+	red 	= red <= 0.0031308 ? 12.92 * red : (1.0 + 0.055) * Math.pow(red, (1.0 / 2.4)) - 0.055;
+	green 	= green <= 0.0031308 ? 12.92 * green : (1.0 + 0.055) * Math.pow(green, (1.0 / 2.4)) - 0.055;
+	blue 	= blue <= 0.0031308 ? 12.92 * blue : (1.0 + 0.055) * Math.pow(blue, (1.0 / 2.4)) - 0.055;
+
+
+	//Convert normalized decimal to decimal
+	red 	= Math.round(red * 255);
+	green 	= Math.round(green * 255);
+	blue 	= Math.round(blue * 255);
+
+	if (isNaN(red))
+		red = 0;
+
+	if (isNaN(green))
+		green = 0;
+
+	if (isNaN(blue))
+		blue = 0;
+
+
+	return [red, green, blue];
+}
+
+
+/**
+ * Converts RGB color space to CIE color space
+ * @param {Number} red
+ * @param {Number} green
+ * @param {Number} blue
+ * @return {Array} Array that contains the CIE color values for x and y
+ */
+function rgb_to_cie(red, green, blue)
+{
+	//Apply a gamma correction to the RGB values, which makes the color more vivid and more the like the color displayed on the screen of your device
+	var red 	= (red > 0.04045) ? Math.pow((red + 0.055) / (1.0 + 0.055), 2.4) : (red / 12.92);
+	var green 	= (green > 0.04045) ? Math.pow((green + 0.055) / (1.0 + 0.055), 2.4) : (green / 12.92);
+	var blue 	= (blue > 0.04045) ? Math.pow((blue + 0.055) / (1.0 + 0.055), 2.4) : (blue / 12.92); 
+
+	//RGB values to XYZ using the Wide RGB D65 conversion formula
+	var X 		= red * 0.664511 + green * 0.154324 + blue * 0.162028;
+	var Y 		= red * 0.283881 + green * 0.668433 + blue * 0.047685;
+	var Z 		= red * 0.000088 + green * 0.072310 + blue * 0.986039;
+
+	//Calculate the xy values from the XYZ values
+	var x 		= (X / (X + Y + Z)).toFixed(4);
+	var y 		= (Y / (X + Y + Z)).toFixed(4);
+
+	if (isNaN(x))
+		x = 0;
+
+	if (isNaN(y))
+		y = 0;	 
+
+
+	return [x, y];
+}

index.html

@@ -1,11 +1,24 @@
 <html>
 <body>
 
+<form id="rocker" action="#">
+  <input type="text" name="red" id="red" value="78" placeholder="100">
+	<input type="text" name="green" id="green" value="100" placeholder="200">
+  <input type="text" name="blue" value="228" id="blue" placeholder="50">
+  <input type="submit" value="CHANGE COLOR">
+</form>
+
+<div id="content"></div>
+
 <script src="jquery-3.3.1.min.js"></script>
+<script src="cie_rgb_converter.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.js"></script>
+<script src="RockerObjects.js"></script>
 <script src="rocker.js"></script>
 <script>
 	rocker_main();
 </script>
 
+
 </body>
 </html>