Add cmd buttons and styles. Add delay before registering devices when no serial devices are found.

This commit is contained in:
mmcwilliams 2018-01-02 09:46:05 -05:00
parent 15d0634896
commit 4791b7e59e
5 changed files with 86 additions and 15 deletions

View File

@ -538,6 +538,37 @@ button:focus {
background: black;
color: #fff;
}
#buttons > div {
width: 50%;
float: left;
}
.cmd {
width: 200px;
text-align: center;
}
.cmd i {
float: left;
}
.cmd.fwd i {
color: #00C4A0;
}
.cmd.bwd i {
color: #AB1A25;
}
.cmd:active.fwd,
.cmd .active.fwd {
background: #00C4A0;
border-color: #00C4A0;
}
.cmd:active.bwd,
.cmd .active.bwd {
background: #AB1A25;
border-color: #AB1A25;
}
.cmd:active i,
.cmd .active i {
color: #272b30;
}
#log {
position: fixed;
width: 100%;

View File

@ -83,22 +83,27 @@
</div>
<div id="buttons">
<div>
<button id="cmd_cam_forward" onclick="cmd.cam_forward(light.color);" class="cmd"><i class="fa fa-step-forward"></i>CAM FORWARD</button>
<div>
<button id="cmd_cam_forward" onclick="cmd.cam_forward(light.color);" class="cmd fwd"><i class="fa fa-step-forward"></i>CAM FORWARD</button>
</div>
<div>
<button id="cmd_cam_backward" onclick="cmd.cam_backward(light.color);" class="cmd bwd"><i class="fa fa-step-backward"></i>CAM BACKWARD</button>
</div>
<div>
<button id="cmd_black_forward" onclick="cmd.black_forward();" class="cmd fwd"><i class="fa fa-step-forward"></i>BLACK FORWARD</button>
</div>
<div>
<button id="cmd_black_backward" onclick="cmd.black_backward();" class="cmd bwd"><i class="fa fa-step-backward"></i>BLACK BACKWARD</button>
</div>
</div>
<div>
<button id="cmd_cam_backward" onclick="cmd.cam_backward(light.color);" class="cmd"><i class="fa fa-step-backward"></i>CAM BACKWARD</button>
<div>
<button id="cmd_black_forward" onclick="cmd.black_forward();" class="cmd"><i class="fa fa-step-forward"></i>BLACK FORWARD</button>
<div>
<button id="proj_forward" onclick="cmd.proj_forward();" class="cmd fwd"><i class="fa fa-step-forward"></i>PROJ FORWARD</button>
</div>
<div>
<button id="proj_backward" onclick="cmd.proj_backward();" class="cmd bwd"><i class="fa fa-step-backward"></i>PROJ BACKWARD</button>
</div>
</div>
<div>
<button id="cmd_black_backward" onclick="cmd.black_backward();" class="cmd"><i class="fa fa-step-backward"></i>BLACK BACKWARD</button>
</div>
</div>
<div>
<button id="proj_forward" onclick="cmd.proj_forward();" class="cmd"><i class="fa fa-step-forward"></i>PROJ FORWARD</button>
</div>
<div>
<button id="proj_backward" onclick="cmd.proj_backward();" class="cmd"><i class="fa fa-step-backward"></i>PROJ BACKWARD</button>
</div>
<footer>
<div id="log"></div>

View File

@ -20,7 +20,6 @@
display: none;
}
#w2ui-popup{
.swatch{
cursor: pointer;

View File

@ -0,0 +1,34 @@
#buttons{
> div{
width: 50%;
float: left;
}
}
.cmd{
width: 200px;
text-align: center;
i{
float: left;
}
&.fwd i{
color: @FORWARD;
}
&.bwd i{
color: @BACKWARD;
}
&:active,
.active{
&.fwd{
background: @FORWARD;
border-color: @FORWARD;
}
&.bwd{
background: @BACKWARD;
border-color: @BACKWARD;
}
i{
color: @BG;
}
}
}

View File

@ -40,7 +40,9 @@ mcopy.cfgStore = function () {
var enumerateDevices = function (err, devices) {
if (err) {
log.info(err, 'SERIAL', false, true)
distinguishDevices([])
setTimeout(() =>{
distinguishDevices([])
}, 1000)
} else {
log.info('Found ' + devices.length + ' USB devices', 'SERIAL', true, true)
distinguishDevices(devices)