16mm
/
mcopy
1
0
Fork 0
Code Issues 14 Pull Requests Projects 2 Releases 13 Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/css/app.css
View File

@ -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;
}

27
app/css/app.less
View File

@ -14,3 +14,30 @@
.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;
}

16
app/index.html
View File

@ -15,8 +15,20 @@
<div id="controls" class="screen">
</div>
<div id="light">
<div id="colors"></div>
<div id="colors-content"><div>
<div id="colors-tabs"></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>

29
app/js/app.js
View File

@ -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';

5
app/main.js
View File

@ -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);
});

29
app/src/index.js
View File

@ -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';