From 4b2df2896c25b671ba5c087e7525ff043e8c1155 Mon Sep 17 00:00:00 2001 From: mmcwilliams Date: Tue, 9 Jan 2018 13:01:19 -0500 Subject: [PATCH] Settings styles. Commands screen styles. Devices represented in UI. --- app/css/app.css | 53 +++++++++++++++++++++++++++++++++ app/index.html | 52 +++++++++++++++++++++------------ app/less/app.less | 1 + app/less/cmd.less | 1 + app/less/settings.less | 27 +++++++++++++++++ app/lib/ui/cmd.js | 66 ++++++++++++++++++++++++++++++++++++++---- app/lib/ui/devices.js | 24 +++++++-------- 7 files changed, 187 insertions(+), 37 deletions(-) create mode 100644 app/less/settings.less diff --git a/app/css/app.css b/app/css/app.css index b0a1eab..e5c49b9 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -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%; diff --git a/app/index.html b/app/index.html index 23322dd..28d8275 100644 --- a/app/index.html +++ b/app/index.html @@ -11,7 +11,7 @@ - +
@@ -213,24 +213,38 @@
-

Devices

- - -

Projector

- -

Camera

- - -

Light

- +
+
+

Devices

+ + +
+
+

Projector

+ +
+
+

Camera

+ + +
+
+ + +
+
+

Light

+ +
+
diff --git a/app/less/app.less b/app/less/app.less index 9813cf7..e230c10 100644 --- a/app/less/app.less +++ b/app/less/app.less @@ -6,6 +6,7 @@ @import "./seq.less"; @import "./cmd.less"; @import "./scroll.less"; +@import "./settings.less"; #log{ position: fixed; diff --git a/app/less/cmd.less b/app/less/cmd.less index 5341c98..141b14f 100644 --- a/app/less/cmd.less +++ b/app/less/cmd.less @@ -8,6 +8,7 @@ .cmd{ width: 240px; text-align: center; + margin: 0 auto; i{ float: left; margin-right: 5px; diff --git a/app/less/settings.less b/app/less/settings.less new file mode 100644 index 0000000..2cc2ed3 --- /dev/null +++ b/app/less/settings.less @@ -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; + } +} \ No newline at end of file diff --git a/app/lib/ui/cmd.js b/app/lib/ui/cmd.js index a8b9a80..9e648e9 100644 --- a/app/lib/ui/cmd.js +++ b/app/lib/ui/cmd.js @@ -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; \ No newline at end of file diff --git a/app/lib/ui/devices.js b/app/lib/ui/devices.js index 4db67ae..25055c6 100644 --- a/app/lib/ui/devices.js +++ b/app/lib/ui/devices.js @@ -8,22 +8,22 @@ devices.init = function () { }; devices.listen = function () { 'use strict'; - let opt - ipcRenderer.on('ready', function (event, arg) { - opt = $('