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

View File

@ -545,6 +545,7 @@ button:focus {
.cmd {
width: 240px;
text-align: center;
margin: 0 auto;
}
.cmd i {
float: left;
@ -589,6 +590,58 @@ button:focus {
::-webkit-scrollbar-thumb:window-inactive {
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 {
position: fixed;
width: 100%;

View File

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

View File

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

View File

@ -8,6 +8,7 @@
.cmd{
width: 240px;
text-align: center;
margin: 0 auto;
i{
float: left;
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;
}
}

View File

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

View File

@ -8,22 +8,22 @@ devices.init = function () {
};
devices.listen = function () {
'use strict';
let opt
ipcRenderer.on('ready', function (event, arg) {
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;
});
ipcRenderer.on('ready', devices.ready);
};
devices.ready = function () {
devices.ready = function (event, arg) {
'use strict';
let opt;
gui.spinner(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;