From 4791b7e59e4965854cb33d03f11736a6aabc4faa Mon Sep 17 00:00:00 2001
From: mmcwilliams <hi@mmcwilliams.com>
Date: Tue, 2 Jan 2018 09:46:05 -0500
Subject: [PATCH] Add cmd buttons and styles. Add delay before registering
 devices when no serial devices are found.

---
 app/css/app.css   | 31 +++++++++++++++++++++++++++++++
 app/index.html    | 31 ++++++++++++++++++-------------
 app/less/app.less |  1 -
 app/less/cmd.less | 34 ++++++++++++++++++++++++++++++++++
 app/main.js       |  4 +++-
 5 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/app/css/app.css b/app/css/app.css
index a5f4cfa..a9762b0 100644
--- a/app/css/app.css
+++ b/app/css/app.css
@@ -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%;
diff --git a/app/index.html b/app/index.html
index a9676a3..9ada48c 100644
--- a/app/index.html
+++ b/app/index.html
@@ -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>
diff --git a/app/less/app.less b/app/less/app.less
index 48666ff..6f238f5 100644
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -20,7 +20,6 @@
 	display: none;
 }
 
-
 #w2ui-popup{
 	.swatch{
 		cursor: pointer;
diff --git a/app/less/cmd.less b/app/less/cmd.less
index e69de29..5cfd89f 100644
--- a/app/less/cmd.less
+++ b/app/less/cmd.less
@@ -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;
+		}
+	}
+}
\ No newline at end of file
diff --git a/app/main.js b/app/main.js
index 2cae84b..c3fc969 100644
--- a/app/main.js
+++ b/app/main.js
@@ -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)