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

Settings styles. Commands screen styles. Devices represented in UI.

This commit is contained in:
mmcwilliams 2018-01-09 13:01:19 -05:00
parent 4fb06761aa
commit 4b2df2896c
7 changed files with 187 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/css/app.css
View File

@ -545,6 +545,7 @@ button:focus {
.cmd { .cmd {
width: 240px; width: 240px;
text-align: center; text-align: center;
margin: 0 auto;
} }
.cmd i { .cmd i {
float: left; float: left;
@ -589,6 +590,58 @@ button:focus {
::-webkit-scrollbar-thumb:window-inactive { ::-webkit-scrollbar-thumb:window-inactive {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
} }
#settings > div {
width: 300px;
margin: 0 auto;
}
#settings > div > div {
width: 360px;
}
#settings input[type=text],
#settings select {
display: block;
border-radius: 5px;
border: 2px solid #fff;
text-align: center;
background: transparent;
color: #fff;
padding: 8px 0;
font-size: 12px;
font-weight: 400;
display: inline-block;
padding: 6px 12px;
font-size: 21px;
min-width: 300px;
}
#settings input[type=text] span,
#settings select span {
display: block;
font-size: 16px;
font-weight: 200;
}
#settings input[type=text]:active,
#settings select:active,
#settings input[type=text] .active,
#settings select .active {
background: #fff;
color: #272b30;
outline: none;
}
#settings input[type=text]:focus,
#settings select:focus {
outline: none;
}
#settings button {
margin-top: -1px;
float: right;
}
#settings input[type=radio] {
float: right;
margin-right: 20px;
}
#settings .spacer {
margin-top: 10px;
}
#log { #log {
position: fixed; position: fixed;
width: 100%; width: 100%;

24
app/index.html
View File

@ -11,7 +11,7 @@
<link href="./css/monokai.css" rel="stylesheet"> <link href="./css/monokai.css" rel="stylesheet">
<link href="./css/app.css" rel="stylesheet"> <link href="./css/app.css" rel="stylesheet">
</head> </head>
<body onload="init();"> <body onload="init();" style="background:#272b30;">
<nav id="toolbar"></nav> <nav id="toolbar"></nav>
<div id="screens"> <div id="screens">
<div id="sequencer" class="screen" style="display: block;"> <div id="sequencer" class="screen" style="display: block;">
@ -213,26 +213,40 @@
</footer> </footer>
</div> </div>
<div id="settings" class="screen"> <div id="settings" class="screen">
<div>
<div>
<h4>Devices</h4> <h4>Devices</h4>
<select id="devices"> <select id="devices">
<option>Not Set</option>
</select> </select>
<button title="Refresh devices"><i class="fa fa-refresh"></i></button> <button title="Refresh devices"><i class="fa fa-refresh"></i></button>
</div>
<div>
<h4>Projector</h4> <h4>Projector</h4>
<select id="projector_device"> <select id="projector_device">
<option>Not Set</option>
</select> </select>
</div>
<div>
<h4>Camera</h4> <h4>Camera</h4>
<select id="camera_device"> <select id="camera_device">
<option>Not Set</option>
</select> </select>
<input type="radio" name="camera_type" value="arduino" checked="checked" />
</div>
<div class="spacer">
<input type="text" id="intval" name="intval" placeholder="INTVAL3 URL"/> <input type="text" id="intval" name="intval" placeholder="INTVAL3 URL"/>
<input type="radio" name="camera_type" value="intval" />
</div>
<div>
<h4>Light</h4> <h4>Light</h4>
<select id="light_device"> <select id="light_device">
<option>Not Set</option>
</select> </select>
</div> </div>
</div> </div>
</div>
</div>
<div id="overlay" onclick="gui.overlay(false);gui.spinner(false);"></div> <div id="overlay" onclick="gui.overlay(false);gui.spinner(false);"></div>
<div id="spinner"></div> <div id="spinner"></div>
<script src="./js/app.js"></script> <script src="./js/app.js"></script>

1
app/less/app.less
View File

@ -6,6 +6,7 @@
@import "./seq.less"; @import "./seq.less";
@import "./cmd.less"; @import "./cmd.less";
@import "./scroll.less"; @import "./scroll.less";
@import "./settings.less";
#log{ #log{
position: fixed; position: fixed;

1
app/less/cmd.less
View File

@ -8,6 +8,7 @@
.cmd{ .cmd{
width: 240px; width: 240px;
text-align: center; text-align: center;
margin: 0 auto;
i{ i{
float: left; float: left;
margin-right: 5px; margin-right: 5px;

27
app/less/settings.less Normal file
View File

@ -0,0 +1,27 @@
#settings{
> div{
width: 300px;
margin: 0 auto;
}
> div > div{
width: 360px;
}
input[type=text], select{
.button();
display: inline-block;
padding: 6px 12px;
font-size: 21px;
min-width: 300px;
}
button{
margin-top: -1px;
float: right;
}
input[type=radio]{
float: right;
margin-right: 20px;
}
.spacer{
margin-top: 10px;
}
}

66
app/lib/ui/cmd.js
View File

@ -3,9 +3,11 @@ var cmd = {};
cmd.proj_forward = function (callback) { cmd.proj_forward = function (callback) {
'use strict'; 'use strict';
var res = function (ms) { var res = function (ms) {
$('#cmd_proj_forward').removeClass('active');
gui.updateState(); gui.updateState();
if (callback) { callback(ms); } if (callback) { callback(ms); }
}; };
$('#cmd_proj_forward').addClass('active');
if (!mcopy.state.projector.direction) { if (!mcopy.state.projector.direction) {
proj.set(true, function (ms) { proj.set(true, function (ms) {
setTimeout(function () { setTimeout(function () {
@ -21,9 +23,11 @@ cmd.proj_forward = function (callback) {
cmd.proj_backward = function (callback) { cmd.proj_backward = function (callback) {
'use strict'; 'use strict';
var res = function (ms) { var res = function (ms) {
$('#cmd_proj_backward').removeClass('active');
gui.updateState(); gui.updateState();
if (callback) { callback(ms); } if (callback) { callback(ms); }
}; };
$('#cmd_proj_backward').addClass('active');
if (mcopy.state.projector.direction) { if (mcopy.state.projector.direction) {
proj.set(false, function (ms) { proj.set(false, function (ms) {
setTimeout(function () { setTimeout(function () {
@ -38,15 +42,18 @@ cmd.proj_backward = function (callback) {
}; };
cmd.cam_forward = function (rgb, callback) { cmd.cam_forward = function (rgb, callback) {
'use strict'; 'use strict';
var off = [0, 0, 0];
var res = function (ms) { var res = function (ms) {
gui.updateState(); gui.updateState();
setTimeout(function () { setTimeout(function () {
light.display([0,0,0]); light.display(off);
light.set([0, 0, 0], function () { light.set(off, function () {
$('#cmd_cam_forward').removeClass('active');
if (callback) { callback(ms); } if (callback) { callback(ms); }
}); });
}, mcopy.cfg.arduino.serialDelay); }, mcopy.cfg.arduino.serialDelay);
}; };
$('#cmd_cam_forward').addClass('active');
if (!mcopy.state.camera.direction) { if (!mcopy.state.camera.direction) {
cam.set(true, function () { cam.set(true, function () {
setTimeout( function () { setTimeout( function () {
@ -70,17 +77,43 @@ cmd.cam_forward = function (rgb, callback) {
cmd.black_forward = function (callback) { cmd.black_forward = function (callback) {
'use strict'; 'use strict';
var off = [0, 0, 0]; var off = [0, 0, 0];
cmd.cam_forward(off, callback); var res = function (ms) {
$('#cmd_black_forward').removeClass('active');
gui.updateState();
};
$('#cmd_black_forward').addClass('active');
if (!mcopy.state.camera.direction) {
cam.set(true, function () {
setTimeout( function () {
light.display(off);
light.set(off, function () {
setTimeout( function () {
cam.move(res);
}, mcopy.cfg.arduino.serialDelay);
});
}, mcopy.cfg.arduino.serialDelay);
});
} else {
light.display(off);
light.set(off, function () {
setTimeout(function () {
cam.move(res);
}, mcopy.cfg.arduino.serialDelay);
});
}
}; };
cmd.cam_backward = function (rgb, callback) { cmd.cam_backward = function (rgb, callback) {
'use strict'; 'use strict';
var off = [0, 0, 0];
var res = function (ms) { var res = function (ms) {
gui.updateState(); gui.updateState();
light.display([0,0,0]); light.display(off);
light.set([0, 0, 0], function () { light.set(off, function () {
$('#cmd_cam_backward').removeClass('active');
if (callback) { callback(ms); } if (callback) { callback(ms); }
}); });
}; };
$('#cmd_cam_backward').addlass('active');
if (mcopy.state.camera.direction) { if (mcopy.state.camera.direction) {
cam.set(false, function () { cam.set(false, function () {
setTimeout(function () { setTimeout(function () {
@ -102,7 +135,28 @@ cmd.cam_backward = function (rgb, callback) {
cmd.black_backward = function (callback) { cmd.black_backward = function (callback) {
'use strict'; 'use strict';
var off = [0, 0, 0]; var off = [0, 0, 0];
cmd.cam_backward(off, callback); var res = function (ms) {
$('#cmd_black_backward').removeClass('active');
gui.updateState();
};
$('#cmd_black_backward').addlass('active');
if (mcopy.state.camera.direction) {
cam.set(false, function () {
setTimeout(function () {
light.display(off);
light.set(off, function () {
cam.move(res);
});
}, mcopy.cfg.arduino.serialDelay);
});
} else {
setTimeout(function () {
light.display(off);
light.set(off, function () {
cam.move(res);
});
}, mcopy.cfg.arduino.serialDelay);
}
}; };
module.exports = cmd; module.exports = cmd;

24
app/lib/ui/devices.js
View File

@ -8,22 +8,22 @@ devices.init = function () {
}; };
devices.listen = function () { devices.listen = function () {
'use strict'; 'use strict';
let opt
ipcRenderer.on('ready', function (event, arg) { ipcRenderer.on('ready', devices.ready);
opt = $('<option>')
opt.value = arg.camera
opt.text = arg.camera
$('#camera_device').empty()
$('#camera_device').append(opt)
console.dir(arg)
devices.ready();
return event.returnValue = true;
});
}; };
devices.ready = function () { devices.ready = function (event, arg) {
'use strict'; 'use strict';
let opt;
gui.spinner(false); gui.spinner(false);
gui.overlay(false); gui.overlay(false);
for (let i in arg) {
opt = $('<option>');
opt.val(arg[i]);
opt.text(arg[i]);
$(`#${i}_device`).empty();
$(`#${i}_device`).append(opt);
}
return event.returnValue = true;
}; };
module.exports = devices; module.exports = devices;