Display light color from UI with state displayed

This commit is contained in:
Matt 2016-04-13 00:44:52 -04:00
parent 680bd4ea3f
commit 923fb3c442
6 changed files with 119 additions and 16 deletions

View File

@ -12,3 +12,28 @@
.screen { .screen {
display: none; 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;
}

View File

@ -14,3 +14,30 @@
.screen{ .screen{
display: none; 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;
}

View File

@ -15,8 +15,20 @@
<div id="controls" class="screen"> <div id="controls" class="screen">
</div> </div>
<div id="light"> <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>
</div> </div>
<script src="./js/app.js"></script> <script src="./js/app.js"></script>

View File

@ -126,8 +126,12 @@ log.info = function (action, service, status, time) {
console.log(obj); console.log(obj);
}; };
//LIGHT
light.preview = false;
light.color = [0, 0, 0]; //preview status
light.current = [0, 0, 0]; //last sent
light.init = function () { light.init = function () {
$('#colors').w2tabs({ $('#colors-tabs').w2tabs({
name: 'colors', name: 'colors',
active: 'rgb', active: 'rgb',
tabs: [ tabs: [
@ -139,15 +143,30 @@ light.init = function () {
$('#colors-content').html('Tab: ' + event.target); $('#colors-content').html('Tab: ' + event.target);
} }
}); });
$('#preview').on('change', function () {
light.preview = $(this).prop('checked');
});
}; };
//color = [0,0,0] //color = [0,0,0]
light.set = function (color) { light.set = function (rgb) {
'use strict'; '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 () { var init = function () {
'use strict'; 'use strict';

View File

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

View File

@ -64,8 +64,12 @@ log.info = function (action, service, status, time) {
console.log(obj); console.log(obj);
}; };
//LIGHT
light.preview = false;
light.color = [0, 0, 0]; //preview status
light.current = [0, 0, 0]; //last sent
light.init = function () { light.init = function () {
$('#colors').w2tabs({ $('#colors-tabs').w2tabs({
name: 'colors', name: 'colors',
active: 'rgb', active: 'rgb',
tabs: [ tabs: [
@ -77,15 +81,30 @@ light.init = function () {
$('#colors-content').html('Tab: ' + event.target); $('#colors-content').html('Tab: ' + event.target);
} }
}); });
$('#preview').on('change', function () {
light.preview = $(this).prop('checked');
});
}; };
//color = [0,0,0] //color = [0,0,0]
light.set = function (color) { light.set = function (rgb) {
'use strict'; '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 () { var init = function () {
'use strict'; 'use strict';