From c21f4cfb717dbd0f26c1982f8a9876918b63cbce Mon Sep 17 00:00:00 2001 From: stsdc Date: Tue, 11 Sep 2018 12:52:41 +0200 Subject: [PATCH 01/14] add settings prefix to files --- client/src/js/view/components/settings/index.js | 10 +++++----- .../settings/{about.js => settings-about.js} | 0 .../settings/{debug.js => settings-debug.js} | 0 .../settings/{general.js => settings-general.js} | 0 .../{manipulator.js => settings-manipulator.js} | 0 .../settings/{network.js => settings-network.js} | 0 6 files changed, 5 insertions(+), 5 deletions(-) rename client/src/js/view/components/settings/{about.js => settings-about.js} (100%) rename client/src/js/view/components/settings/{debug.js => settings-debug.js} (100%) rename client/src/js/view/components/settings/{general.js => settings-general.js} (100%) rename client/src/js/view/components/settings/{manipulator.js => settings-manipulator.js} (100%) rename client/src/js/view/components/settings/{network.js => settings-network.js} (100%) diff --git a/client/src/js/view/components/settings/index.js b/client/src/js/view/components/settings/index.js index df3bbc4..7f29981 100644 --- a/client/src/js/view/components/settings/index.js +++ b/client/src/js/view/components/settings/index.js @@ -1,9 +1,9 @@ import { h } from 'hyperapp' -import {SettingsGeneral} from './general' -import { SettingsNetwork } from "./network"; -import { SettingsManipulator } from "./manipulator"; -import { SettingsDebug } from "./debug"; -import { SettingsAbout } from "./about"; +import {SettingsGeneral} from './settings-general' +import { SettingsNetwork } from "./settings-network"; +import { SettingsManipulator } from "./settings-manipulator"; +import { SettingsDebug } from "./settings-debug"; +import { SettingsAbout } from "./settings-about"; export const Settings = ({state, actions}) =>
diff --git a/client/src/js/view/components/settings/about.js b/client/src/js/view/components/settings/settings-about.js similarity index 100% rename from client/src/js/view/components/settings/about.js rename to client/src/js/view/components/settings/settings-about.js diff --git a/client/src/js/view/components/settings/debug.js b/client/src/js/view/components/settings/settings-debug.js similarity index 100% rename from client/src/js/view/components/settings/debug.js rename to client/src/js/view/components/settings/settings-debug.js diff --git a/client/src/js/view/components/settings/general.js b/client/src/js/view/components/settings/settings-general.js similarity index 100% rename from client/src/js/view/components/settings/general.js rename to client/src/js/view/components/settings/settings-general.js diff --git a/client/src/js/view/components/settings/manipulator.js b/client/src/js/view/components/settings/settings-manipulator.js similarity index 100% rename from client/src/js/view/components/settings/manipulator.js rename to client/src/js/view/components/settings/settings-manipulator.js diff --git a/client/src/js/view/components/settings/network.js b/client/src/js/view/components/settings/settings-network.js similarity index 100% rename from client/src/js/view/components/settings/network.js rename to client/src/js/view/components/settings/settings-network.js From 59f2522a2301b86cbe9fe8170784abea9da2993a Mon Sep 17 00:00:00 2001 From: stsdc Date: Tue, 11 Sep 2018 12:53:28 +0200 Subject: [PATCH 02/14] extend pip3 timeout --- utils/after-install.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/utils/after-install.sh b/utils/after-install.sh index f7bec22..5cfd7ea 100644 --- a/utils/after-install.sh +++ b/utils/after-install.sh @@ -1,6 +1,6 @@ #!/bin/sh -sudo pip3 install -r /opt/turtlerover/tcs/requirements.txt +sudo pip3 install --default-timeout=100 -r /opt/turtlerover/tcs/requirements.txt sudo ln -sf /opt/turtlerover/tcs/tcs /usr/bin/tcs sudo cp /opt/turtlerover/tcs/server/turtlerover-tcs.service /etc/systemd/system From 9dfaf1923498f353163f6d4b950ceb304aacb256 Mon Sep 17 00:00:00 2001 From: stsdc Date: Tue, 11 Sep 2018 13:42:48 +0200 Subject: [PATCH 03/14] do not show scrollbars; do not show background image for joystick --- client/src/js/actions/index.js | 2 +- client/src/js/view/components/joystick.js | 2 +- client/src/scss/partials/_controls-boxes.scss | 1 - client/src/scss/partials/_manipulator-control.scss | 8 +++++++- client/src/scss/partials/_wrapper.scss | 1 + 5 files changed, 10 insertions(+), 4 deletions(-) diff --git a/client/src/js/actions/index.js b/client/src/js/actions/index.js index afb2787..bb42d76 100644 --- a/client/src/js/actions/index.js +++ b/client/src/js/actions/index.js @@ -43,7 +43,7 @@ const actions = { let manager = nipplejs.create({ zone: el, mode: 'static', - position: {left: '50%', top: '50%'}, + position: {right: '55%', bottom: '55%'}, size: el.clientHeight, // dataOnly: true }); diff --git a/client/src/js/view/components/joystick.js b/client/src/js/view/components/joystick.js index c1a80f8..8ab6862 100644 --- a/client/src/js/view/components/joystick.js +++ b/client/src/js/view/components/joystick.js @@ -2,5 +2,5 @@ import { h } from 'hyperapp' export const Joystick = ({mode, joystick, motors}) =>
joystick({el, motors})}> - + {/* */}
diff --git a/client/src/scss/partials/_controls-boxes.scss b/client/src/scss/partials/_controls-boxes.scss index fa0dbc6..06d8e27 100644 --- a/client/src/scss/partials/_controls-boxes.scss +++ b/client/src/scss/partials/_controls-boxes.scss @@ -30,7 +30,6 @@ bottom: 0; display: flex; flex-flow: column; - background: rgba($background-color, 0.6); z-index: 1; @include small { diff --git a/client/src/scss/partials/_manipulator-control.scss b/client/src/scss/partials/_manipulator-control.scss index e2f9019..2b7b60a 100644 --- a/client/src/scss/partials/_manipulator-control.scss +++ b/client/src/scss/partials/_manipulator-control.scss @@ -1,7 +1,13 @@ .manipulatorControl { - position: relative; + position: absolute; display: flex; flex-flow: column; + background: rgba($background-color, 0.6); + padding-bottom: 30px; + width: 100%; + height: 100%; + bottom: 0; + right: 0; &-hide { visibility: hidden; diff --git a/client/src/scss/partials/_wrapper.scss b/client/src/scss/partials/_wrapper.scss index 7c45d14..76349ff 100644 --- a/client/src/scss/partials/_wrapper.scss +++ b/client/src/scss/partials/_wrapper.scss @@ -8,6 +8,7 @@ position: absolute; width: 100%; height: 100%; + overflow: hidden; &:before { background: transparent; From 55b33e773262a9c0cd4fa956665e6f63fd03df99 Mon Sep 17 00:00:00 2001 From: stsdc Date: Thu, 13 Sep 2018 21:38:07 +0200 Subject: [PATCH 04/14] fix moving thumb of range input on mobile devices --- client/src/js/app.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/js/app.js b/client/src/js/app.js index 51018c0..f80e7a5 100644 --- a/client/src/js/app.js +++ b/client/src/js/app.js @@ -21,4 +21,5 @@ core(wiredActions); // This disables bouncing in iOS // https://bugs.webkit.org/show_bug.cgi?id=182521 // https://stackoverflow.com/a/50856621/1589989 -window.addEventListener("touchmove", (event) => event.preventDefault(), {passive: false} ); +// this is commented out since its prevents from moving thumb on mobile devices +// window.addEventListener("touchmove", (event) => event.preventDefault(), {passive: false} ); From 270ed668eca06e2a6e6e1aa5bd1e30872dab90c6 Mon Sep 17 00:00:00 2001 From: stsdc Date: Thu, 13 Sep 2018 21:57:14 +0200 Subject: [PATCH 05/14] style controlboxes for smaller displays --- client/src/scss/partials/_controls-boxes.scss | 6 +++--- client/src/scss/partials/_gripper-control.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/src/scss/partials/_controls-boxes.scss b/client/src/scss/partials/_controls-boxes.scss index 06d8e27..6826542 100644 --- a/client/src/scss/partials/_controls-boxes.scss +++ b/client/src/scss/partials/_controls-boxes.scss @@ -12,7 +12,7 @@ } @include small2x { - width: 40vw * 2; + width: 40vw; } @include medium { @@ -38,8 +38,8 @@ } @include small2x { - width: 30vw * 2; - height: 30vw * 2; + width: 30vw; + height: 30vw; } @include medium { diff --git a/client/src/scss/partials/_gripper-control.scss b/client/src/scss/partials/_gripper-control.scss index f9594e2..1f5edff 100644 --- a/client/src/scss/partials/_gripper-control.scss +++ b/client/src/scss/partials/_gripper-control.scss @@ -14,7 +14,7 @@ } @include small2x { - height: 34px * 2; + height: (34px / 2); } @include medium { From 8a440b98ed77521513e20f829366bddf6f0a876f Mon Sep 17 00:00:00 2001 From: stsdc Date: Thu, 13 Sep 2018 22:01:27 +0200 Subject: [PATCH 06/14] =?UTF-8?q?statusbar=20=E2=86=92=20topbar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/{statusbar.js => topbar.js} | 24 +++++++++---------- client/src/js/view/index.js | 4 ++-- client/src/scss/helpers/_vars.scss | 6 ++--- client/src/scss/main.scss | 2 +- client/src/scss/partials/_settings.scss | 8 +++---- .../{_statusbar.scss => _topbar.scss} | 6 ++--- 6 files changed, 25 insertions(+), 25 deletions(-) rename client/src/js/view/components/{statusbar.js => topbar.js} (58%) rename client/src/scss/partials/{_statusbar.scss => _topbar.scss} (97%) diff --git a/client/src/js/view/components/statusbar.js b/client/src/js/view/components/topbar.js similarity index 58% rename from client/src/js/view/components/statusbar.js rename to client/src/js/view/components/topbar.js index 0903297..cf14ca7 100644 --- a/client/src/js/view/components/statusbar.js +++ b/client/src/js/view/components/topbar.js @@ -1,31 +1,31 @@ import { h } from 'hyperapp' -export const StatusBar = ({state, switchSettings}) => -
- -
+export const TopBar = ({state, switchSettings}) => +
+ +
-
- {/* */} +
+ {/* */} {/* */} - {/* */} + {/* */} {/* */} - {/* */} + {/* */}
-
switchSettings()}> -
+
switchSettings()}> +
const IndicatorBattery = ({batteryLevel}) => - + const IndicatorSignal = ({signalLevel}) => - + const batteryLevelIcon = (batteryLevel) => { diff --git a/client/src/js/view/index.js b/client/src/js/view/index.js index 393162d..2593b18 100644 --- a/client/src/js/view/index.js +++ b/client/src/js/view/index.js @@ -1,7 +1,7 @@ import { h} from 'hyperapp' import { BootScreen } from './bootscreen' -import { StatusBar } from './components/statusbar' +import { TopBar } from './components/topbar' import { Stream } from './components/stream' import { Settings } from "./components/settings" import { Manipulator } from "./components/manipulator"; @@ -13,7 +13,7 @@ const view = (state, actions) => (
- +
diff --git a/client/src/scss/helpers/_vars.scss b/client/src/scss/helpers/_vars.scss index 4aa80fb..d927a55 100644 --- a/client/src/scss/helpers/_vars.scss +++ b/client/src/scss/helpers/_vars.scss @@ -22,9 +22,9 @@ $log-font: monospace; $log-font-size: 9pt; $log-line-height: 1.5; -/* Statusbar */ -$statusbar-height-small: 34px; -$statusbar-height-medium: 68px; +/* topbar */ +$topbar-height-small: 34px; +$topbar-height-medium: 68px; /* Menu */ $menubar-color: white; diff --git a/client/src/scss/main.scss b/client/src/scss/main.scss index 3c33ca1..3a05bd0 100644 --- a/client/src/scss/main.scss +++ b/client/src/scss/main.scss @@ -9,7 +9,7 @@ @import "partials/wrapper"; @import "partials/custom"; @import "partials/disable-text-select"; -@import "partials/statusbar"; +@import "partials/topbar"; @import "partials/settings"; @import "partials/controls"; @import "partials/crosshair"; diff --git a/client/src/scss/partials/_settings.scss b/client/src/scss/partials/_settings.scss index 5445251..ed59d5c 100644 --- a/client/src/scss/partials/_settings.scss +++ b/client/src/scss/partials/_settings.scss @@ -28,19 +28,19 @@ } @include small { - padding-top: $statusbar-height-small; + padding-top: $topbar-height-small; width: 100vw; } @include medium { - padding-top: $statusbar-height-medium; + padding-top: $topbar-height-medium; width: 75vw; - height: calc(100vh - #{$statusbar-height-medium}); + height: calc(100vh - #{$topbar-height-medium}); } @include big { width: 60vw; - height: calc(100vh - #{$statusbar-height-medium}); + height: calc(100vh - #{$topbar-height-medium}); } &-hide { diff --git a/client/src/scss/partials/_statusbar.scss b/client/src/scss/partials/_topbar.scss similarity index 97% rename from client/src/scss/partials/_statusbar.scss rename to client/src/scss/partials/_topbar.scss index 5e09953..3f6ee91 100644 --- a/client/src/scss/partials/_statusbar.scss +++ b/client/src/scss/partials/_topbar.scss @@ -1,4 +1,4 @@ -.statusbar { +.topbar { height: 34px; position: fixed; top: 0; @@ -6,10 +6,10 @@ background-color: $background-color; z-index: 9; @include small { - height: $statusbar-height-small; + height: $topbar-height-small; } @include medium { - height: $statusbar-height-medium; + height: $topbar-height-medium; } &_logo { From ae60464dca23ddc12dc3c55d92f11bd98d65a969 Mon Sep 17 00:00:00 2001 From: stsdc Date: Fri, 14 Sep 2018 22:17:07 +0200 Subject: [PATCH 07/14] add fullscreen action --- client/src/js/actions/index.js | 2 +- client/src/js/view/components/topbar.js | 38 +++++++++++++++++++++++-- client/src/scss/partials/_wrapper.scss | 1 + 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/client/src/js/actions/index.js b/client/src/js/actions/index.js index bb42d76..8fe6e6b 100644 --- a/client/src/js/actions/index.js +++ b/client/src/js/actions/index.js @@ -24,7 +24,7 @@ const actions = { setBootScreenState: value => state => ({ showBootScreen: value }), setMode: value => state => save('', { mode: value }), - settings: { + settings: { setVisibility: value => state => save('settings', { isVisible: !state.isVisible }), setVisibleCategory: value => state => save('settings', {category: value }), }, diff --git a/client/src/js/view/components/topbar.js b/client/src/js/view/components/topbar.js index cf14ca7..ff74d2c 100644 --- a/client/src/js/view/components/topbar.js +++ b/client/src/js/view/components/topbar.js @@ -1,5 +1,5 @@ import { h } from 'hyperapp' - +import { fullscreen } from 'fullscreen-polyfill' export const TopBar = ({state, switchSettings}) =>
@@ -13,7 +13,7 @@ export const TopBar = ({state, switchSettings}) => {/* */} {/* */} {/* */} - {/* */} +
switchSettings()}> @@ -55,4 +55,36 @@ const signalLevelIcon = (signalLevel) => { return require("../../../img/ui/signal-0.svg") } } - \ No newline at end of file + +const ActionFullscreen = () => { + return toggleFullscreen(el.target)} + /> + +} + +const toggleFullscreen = (el) => { + + let main = document.documentElement; + // console.log(document.webkitFullscreenEnabled); + if (!document.fullscreenElement) { + if (main.mozRequestFullScreen) { + main.mozRequestFullScreen(); + } else { + main.webkitRequestFullScreen(); + } + } else { + console.log('lol'); + + if(document.exitFullscreen) { + document.exitFullscreen(); + } else if(document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if(document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } + } +} \ No newline at end of file diff --git a/client/src/scss/partials/_wrapper.scss b/client/src/scss/partials/_wrapper.scss index 76349ff..d5da600 100644 --- a/client/src/scss/partials/_wrapper.scss +++ b/client/src/scss/partials/_wrapper.scss @@ -9,6 +9,7 @@ width: 100%; height: 100%; overflow: hidden; + background-color: $background-color; &:before { background: transparent; From 11a6bbc0be0b523174f619c69b6797e109809d31 Mon Sep 17 00:00:00 2001 From: stsdc Date: Fri, 14 Sep 2018 22:18:32 +0200 Subject: [PATCH 08/14] rm some comments --- client/src/js/view/components/topbar.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/client/src/js/view/components/topbar.js b/client/src/js/view/components/topbar.js index ff74d2c..a00575e 100644 --- a/client/src/js/view/components/topbar.js +++ b/client/src/js/view/components/topbar.js @@ -67,9 +67,7 @@ const ActionFullscreen = () => { } const toggleFullscreen = (el) => { - let main = document.documentElement; - // console.log(document.webkitFullscreenEnabled); if (!document.fullscreenElement) { if (main.mozRequestFullScreen) { main.mozRequestFullScreen(); @@ -77,8 +75,6 @@ const toggleFullscreen = (el) => { main.webkitRequestFullScreen(); } } else { - console.log('lol'); - if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { From f0149b36bd1e796af9447c318d342704056ede28 Mon Sep 17 00:00:00 2001 From: stsdc Date: Fri, 14 Sep 2018 22:30:56 +0200 Subject: [PATCH 09/14] throttle setGripper --- client/src/js/view/components/gripper.js | 7 +++++-- client/src/js/view/components/manipulator.js | 4 ++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/client/src/js/view/components/gripper.js b/client/src/js/view/components/gripper.js index df2dd59..9223cf5 100644 --- a/client/src/js/view/components/gripper.js +++ b/client/src/js/view/components/gripper.js @@ -1,5 +1,6 @@ import { h } from 'hyperapp' import { RangeInput } from "./elements/range-input"; +import {throttle} from 'lodash' export const Gripper = ({state, action}) => @@ -9,7 +10,7 @@ export const Gripper = ({state, action}) => state={state} labelMax={IconGripperOpen} labelMin={IconGripperClose} - oninput={(value) => action.m.setGripper(value)} + oninput={(value) => setGripperThrottled(value, action)} onchange={action.gripper.setValue}/>
@@ -18,4 +19,6 @@ const IconGripperOpen = () => const IconGripperClose = () => - \ No newline at end of file + + +const setGripperThrottled = throttle((value, action) => action.m.setGripper(value), 100, { 'trailing': false }); diff --git a/client/src/js/view/components/manipulator.js b/client/src/js/view/components/manipulator.js index bc838b8..885d0b0 100644 --- a/client/src/js/view/components/manipulator.js +++ b/client/src/js/view/components/manipulator.js @@ -13,8 +13,8 @@ export const Manipulator = ({mode, state, action}) => setManipulator(state.axis1.value, value, action)} + oninput={(value) => setManipulatorThrottled(state.axis1.value, value, action)} onchange={action.axis2.setValue}/>
-const setManipulator = throttle((axis1, axis2, action) => action.m.setAxes(axis1, axis2), 100, { 'trailing': false }); +const setManipulatorThrottled = throttle((axis1, axis2, action) => action.m.setAxes(axis1, axis2), 100, { 'trailing': false }); From 0341d3f2584f13a0a489d8914b826ee04de62ce4 Mon Sep 17 00:00:00 2001 From: stsdc Date: Fri, 14 Sep 2018 22:54:00 +0200 Subject: [PATCH 10/14] sane joystick size from mobile devices --- client/src/scss/partials/_joystick.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/client/src/scss/partials/_joystick.scss b/client/src/scss/partials/_joystick.scss index df817fc..e59d889 100644 --- a/client/src/scss/partials/_joystick.scss +++ b/client/src/scss/partials/_joystick.scss @@ -2,7 +2,6 @@ position: absolute; right: 0; bottom: 0; - // background: $background-color; display: flex; justify-content: center; align-items: center; @@ -12,8 +11,8 @@ } @include small2x { - width: 30vw * 2; - height: 30vw * 2; + width: 30vw ; + height: 30vw ; } @include medium { From 31d3d56ebded4df10e836d6ab10982b27cd88b07 Mon Sep 17 00:00:00 2001 From: stsdc Date: Mon, 17 Sep 2018 15:22:05 +0200 Subject: [PATCH 11/14] fix settings layout for mobile devices --- client/src/scss/partials/_settings.scss | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/client/src/scss/partials/_settings.scss b/client/src/scss/partials/_settings.scss index ed59d5c..4106997 100644 --- a/client/src/scss/partials/_settings.scss +++ b/client/src/scss/partials/_settings.scss @@ -5,17 +5,22 @@ right: 0; top: 0; display: flex; + color: $grey_0; &_categories { list-style: none; margin: 0; padding: 0; - width: 30%; + width: auto; border-right: 1px solid $grey_4; &_category { text-transform: uppercase; font-size: 24px; padding: 25px; + @include small { + font-size: 18px; + } + &-selected { background-color: $grey_4; } @@ -23,13 +28,20 @@ } &_content { - padding: 25px; - width: 70%; + padding: 25px 37px 25px 25px; + width: 100%; + overflow-y: scroll; + margin-right: -15px; + + @include small { + padding: 25px; + } } @include small { padding-top: $topbar-height-small; width: 100vw; + height: 100vh; } @include medium { From 00baf3644c301b193aad12d6310942696b97b657 Mon Sep 17 00:00:00 2001 From: stsdc Date: Mon, 17 Sep 2018 16:26:59 +0200 Subject: [PATCH 12/14] bump 0.13.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cc5dc9a..926b163 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tcs", - "version": "0.13.3", + "version": "0.13.4", "description": "Turtle Control Software", "main": "index.js", "scripts": { From 45a4311a8c9860272e126a18000f12d561061c6b Mon Sep 17 00:00:00 2001 From: stsdc Date: Mon, 17 Sep 2018 16:31:05 +0200 Subject: [PATCH 13/14] remevo unused dep --- client/src/js/view/components/topbar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/js/view/components/topbar.js b/client/src/js/view/components/topbar.js index a00575e..1350b08 100644 --- a/client/src/js/view/components/topbar.js +++ b/client/src/js/view/components/topbar.js @@ -1,5 +1,4 @@ import { h } from 'hyperapp' -import { fullscreen } from 'fullscreen-polyfill' export const TopBar = ({state, switchSettings}) =>
From 2b7b444f530968671bcd7fc33f8e0c215ca5b69c Mon Sep 17 00:00:00 2001 From: stsdc Date: Mon, 17 Sep 2018 16:31:05 +0200 Subject: [PATCH 14/14] remove unused dep --- client/src/js/view/components/topbar.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/js/view/components/topbar.js b/client/src/js/view/components/topbar.js index a00575e..1350b08 100644 --- a/client/src/js/view/components/topbar.js +++ b/client/src/js/view/components/topbar.js @@ -1,5 +1,4 @@ import { h } from 'hyperapp' -import { fullscreen } from 'fullscreen-polyfill' export const TopBar = ({state, switchSettings}) =>