Settings styles. Commands screen styles. Devices represented in UI.
This commit is contained in:
parent
4fb06761aa
commit
4b2df2896c
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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,26 +213,40 @@
|
|||
</footer>
|
||||
</div>
|
||||
<div id="settings" class="screen">
|
||||
<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>
|
||||
<div id="spinner"></div>
|
||||
<script src="./js/app.js"></script>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
@import "./seq.less";
|
||||
@import "./cmd.less";
|
||||
@import "./scroll.less";
|
||||
@import "./settings.less";
|
||||
|
||||
#log{
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
.cmd{
|
||||
width: 240px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
i{
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue