diff --git a/app/css/app.css b/app/css/app.css index 3a2f6b3..98c3eea 100644 --- a/app/css/app.css +++ b/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; +} diff --git a/app/css/app.less b/app/css/app.less index e360063..4f2263e 100644 --- a/app/css/app.less +++ b/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; } \ No newline at end of file diff --git a/app/index.html b/app/index.html index 051f32c..07520b0 100644 --- a/app/index.html +++ b/app/index.html @@ -15,8 +15,20 @@
-
-
+
+
+
+
+
+
+ R
+ G
+ B +
+
+ Preview + +
diff --git a/app/js/app.js b/app/js/app.js index cef3b08..ef62513 100644 --- a/app/js/app.js +++ b/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(',')); - ipcRenderer.sendSync('light', color); + light.current = rgb; + 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(); diff --git a/app/main.js b/app/main.js index 2515b91..ea69ed3 100644 --- a/app/main.js +++ b/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); }); diff --git a/app/src/index.js b/app/src/index.js index d4937dd..14d1576 100644 --- a/app/src/index.js +++ b/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(',')); - ipcRenderer.sendSync('light', color); + light.current = rgb; + 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();