Display light color from UI with state displayed

app/css/app.css

@@ -12,3 +12,28 @@
 .screen {
   display: none;
 }
+#colors-tabs {
+  width: 400px;
+}
+#colors-content {
+  width: 400px;
+}
+#light-status {
+  width: 400px;
+  float: right;
+}
+#light-status form {
+  float: left;
+  line-height: 30px;
+}
+#light-status form span {
+  width: 20px;
+  display: inline-block;
+}
+#color {
+  width: 100px;
+  height: 100px;
+  margin: 0 50px;
+  background-color: #000;
+  float: right;
+}

app/css/app.less

@@ -13,4 +13,31 @@
 
 .screen{
 	display: none;
+}
+
+#colors-tabs{
+	width: 400px;
+}
+#colors-content{
+	width: 400px;
+}
+#light-status{
+	width: 400px;
+	float: right;
+	form{
+		float: left;
+		line-height: 30px;
+		span{
+			width: 20px;
+			display: inline-block;
+		}
+	}
+}
+
+#color{
+	width: 100px;
+	height: 100px;
+	margin: 0 50px;
+	background-color: #000;
+	float: right;
 }

app/index.html

@@ -15,8 +15,20 @@
       <div id="controls" class="screen">
       </div>
       <div id="light">
-        <div id="colors"></div>
+        <div id="colors-tabs"></div>
-        <div id="colors-content"><div>
+        <div id="colors-content">
+          <div id="rgb"></div>
+        </div>
+        <div id="light-status">
+          <form>
+            <span>R</span><input type="text" value="0"/><br />
+            <span>G</span><input type="text" value="0"/><br />
+            <span>B</span><input type="text" value="0"/>
+          </form>
+          <div id="color"></div>
+          Preview
+          <input type="checkbox" name="preview" id="preview" class="effeckt-ckbox-ios7" />
+        </div>
       </div>
     </div>
     <script src="./js/app.js"></script>

app/js/app.js

@@ -126,8 +126,12 @@ log.info = function (action, service, status, time) {
 	console.log(obj);
 };
 
+//LIGHT
+light.preview = false;
+light.color = [0, 0, 0]; //preview status
+light.current = [0, 0, 0]; //last sent
 light.init = function () {
-	$('#colors').w2tabs({
+	$('#colors-tabs').w2tabs({
 		name: 'colors',
 		active: 'rgb',
 		tabs: [
@@ -139,15 +143,30 @@ light.init = function () {
 			$('#colors-content').html('Tab: ' + event.target);
 		}
 	});
+	$('#preview').on('change', function () {
+		light.preview = $(this).prop('checked');
+	});
 };
-
 //color = [0,0,0]
-light.set = function (color) {
+light.set = function (rgb) {
 	'use strict';
-	console.log('color: ' + color.join(','));
+	light.current = rgb;
-	ipcRenderer.sendSync('light', color);
+	console.log('color: ' + rgb.join(','));
+	ipcRenderer.sendSync('light', rgb);
 };
 
+light.display = function (rgb) {
+	'use strict';
+	for (var i = 0; i < 3; i++) {
+		rgb[i] = Math.floor(rgb[i]);
+		$('#light-status form input').eq(i).val(rgb[i]);
+	}
+	light.color = rgb;
+	$('#color').css('background-color', 'rgb(' + rgb.join(',') + ')');
+	if (light.preview) {
+		light.set(rgb);
+	}
+};
 
 var init = function () {
 	'use strict';
@@ -162,7 +181,7 @@ var init = function () {
 			{ type: 'button',  id: 'item5',  group: '1', caption: 'Settings', icon: 'fa-home' }
 		],
 		onClick : function (event) {
-			
+
 		}
 	});
 	log.init();

app/main.js

@@ -66,9 +66,10 @@ ipcMain.on('light', function(event, arg) {
 });
 
 var light = {};
-light.set = function (color) {
+
+light.set = function (rgb) {
 	'use strict';
-	var str = color.join(',');
+	var str = rgb.join(',');
 	mcopy.arduino.send(mcopy.cfg.arduino.cmd.light, function () {
 		log.info('Light set to ' + str, 'LIGHT', true, true);
 	});

app/src/index.js

@@ -64,8 +64,12 @@ log.info = function (action, service, status, time) {
 	console.log(obj);
 };
 
+//LIGHT
+light.preview = false;
+light.color = [0, 0, 0]; //preview status
+light.current = [0, 0, 0]; //last sent
 light.init = function () {
-	$('#colors').w2tabs({
+	$('#colors-tabs').w2tabs({
 		name: 'colors',
 		active: 'rgb',
 		tabs: [
@@ -77,15 +81,30 @@ light.init = function () {
 			$('#colors-content').html('Tab: ' + event.target);
 		}
 	});
+	$('#preview').on('change', function () {
+		light.preview = $(this).prop('checked');
+	});
 };
-
 //color = [0,0,0]
-light.set = function (color) {
+light.set = function (rgb) {
 	'use strict';
-	console.log('color: ' + color.join(','));
+	light.current = rgb;
-	ipcRenderer.sendSync('light', color);
+	console.log('color: ' + rgb.join(','));
+	ipcRenderer.sendSync('light', rgb);
 };
 
+light.display = function (rgb) {
+	'use strict';
+	for (var i = 0; i < 3; i++) {
+		rgb[i] = Math.floor(rgb[i]);
+		$('#light-status form input').eq(i).val(rgb[i]);
+	}
+	light.color = rgb;
+	$('#color').css('background-color', 'rgb(' + rgb.join(',') + ')');
+	if (light.preview) {
+		light.set(rgb);
+	}
+};
 
 var init = function () {
 	'use strict';
@@ -100,7 +119,7 @@ var init = function () {
 			{ type: 'button',  id: 'item5',  group: '1', caption: 'Settings', icon: 'fa-home' }
 		],
 		onClick : function (event) {
-			
+
 		}
 	});
 	log.init();