Merge branch 'dev'

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 }),
     },
@@ -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
         });

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} );

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}/>
 
     </div>
@@ -18,4 +19,6 @@ const IconGripperOpen = () =>
     <img src={require("../../../img/ui/gripper-opened.svg")} class="gripperControl_icons_icon"/>
 
 const IconGripperClose = () =>
-    <img src={require("../../../img/ui/gripper-closed.svg")} class="gripperControl_icons_icon"/>
+    <img src={require("../../../img/ui/gripper-closed.svg")} class="gripperControl_icons_icon"/>
+
+const setGripperThrottled = throttle((value, action) => action.m.setGripper(value), 100, { 'trailing': false });

client/src/js/view/components/joystick.js

@@ -2,5 +2,5 @@ import { h } from 'hyperapp'
 
 export const Joystick = ({mode, joystick, motors}) =>
     <div class={(mode==='drive') ? 'joystick' : 'joystick joystick-hide'} oncreate={(el) => joystick({el, motors})}>
-        <img class='joystick_image' src={require('../../../img/ui/right-krzyz.svg')}/>
+        {/* <img class='joystick_image' src={require('../../../img/ui/right-krzyz.svg')}/> */}
     </div>

client/src/js/view/components/manipulator.js

@@ -13,8 +13,8 @@ export const Manipulator = ({mode, state, action})  =>
         <RangeInput 
             name='AXIS 2' 
             state={state.axis2} 
-            oninput={(value) => setManipulator(state.axis1.value, value, action)} 
+            oninput={(value) => setManipulatorThrottled(state.axis1.value, value, action)} 
             onchange={action.axis2.setValue}/>
     </div>
 
-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 });

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})  => 
     <div class={(state.settings.isVisible===true) ? 'settings' : 'settings settings-hide'}>

client/src/js/view/components/topbar.js

@@ -0,0 +1,85 @@
+import { h } from 'hyperapp'
+
+export const TopBar = ({state, switchSettings})  => 
+    <section id="topbar" class="topbar">
+        <img class="topbar_logo" src={require("../../../img/ui/turtle-logo.svg")}/>
+        <div class="topbar_indicators">
+            <IndicatorBattery batteryLevel={state.batteryLevel}/>
+            <IndicatorSignal signalLevel={state.signalLevel}/>
+        </div>
+        <div id="topbar_actions" class="topbar_actions">
+            {/* <img class="topbar_actions_action" id="button-screenrecord" src={require("../../../img/ui/nav-bar-rec.svg")}/> */}
+                {/* <a id="snap-download-a">  */}
+            {/* <img class="topbar_actions_action" id="button-screenshot" src={require("../../../img/ui/nav-bar-snap.svg")}/> */}
+                {/* </a>  */}
+            <ActionFullscreen/>
+        </div>
+
+        <div class="topbar_menu" onmousedown={() => switchSettings()}>
+            <div class="topbar_menu_bar"></div>
+        </div>
+    </section>
+
+const IndicatorBattery = ({batteryLevel}) => 
+    <img id="indicator-battery" class="topbar_indicators_indicator" src={batteryLevelIcon(batteryLevel)}/>
+
+const IndicatorSignal = ({signalLevel}) =>
+    <img id="indicator-signal" class="topbar_indicators_indicator" src={signalLevelIcon(signalLevel)}/>
+
+
+const batteryLevelIcon = (batteryLevel) => {
+    if (19.5 <= batteryLevel==batteryLevel < 21.5) {
+        return require("../../../img/ui/battery-1.svg")
+    } else if (21.5 <= batteryLevel==batteryLevel < 23) {
+        return require("../../../img/ui/battery-2.svg")
+    } else if (23 <= batteryLevel==batteryLevel < 24) {
+        return require("../../../img/ui/battery-3.svg")
+    } else if (batteryLevel >= 24) {
+        return require("../../../img/ui/battery-4.svg")
+    } else {
+        return require("../../../img/ui/battery-0.svg")
+    }
+}
+
+const signalLevelIcon = (signalLevel) => {
+    if (80 <= signalLevel==signalLevel < 85) {
+        return require("../../../img/ui/signal-1.svg")
+    } else if (85 <= signalLevel==signalLevel < 90) {
+        return require("../../../img/ui/signal-2.svg")
+    } else if (90 <= signalLevel==signalLevel < 95) {
+        return require("../../../img/ui/signal-3.svg")
+    } else if (signalLevel >= 95) {
+        return require("../../../img/ui/signal-4.svg")
+    } else {
+        return require("../../../img/ui/signal-0.svg")
+    }
+}
+
+const ActionFullscreen = () => {
+    return <img 
+                class="topbar_actions_action"
+                id="button-fullscreen" 
+                src={require("../../../img/ui/nav-bar-fullscreen.svg")}
+                onmouseup={(el) => toggleFullscreen(el.target)}
+                />
+
+}
+
+const toggleFullscreen = (el) => {
+    let main = document.documentElement; 
+    if (!document.fullscreenElement) {
+        if (main.mozRequestFullScreen) {
+            main.mozRequestFullScreen();
+        } else {
+            main.webkitRequestFullScreen();
+        }
+      } else {
+        if(document.exitFullscreen) {
+            document.exitFullscreen();
+          } else if(document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+          } else if(document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+          }
+      }
+}

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) => (
     <main>
         <BootScreen state={state.showBootScreen}/>
         <div id="wrapper" class="wrapper">
-            <StatusBar state={state.telemetry} switchSettings={actions.settings.setVisibility}/>
+            <TopBar state={state.telemetry} switchSettings={actions.settings.setVisibility}/>
             <Settings state={state} actions={actions}/>
             <div class="crosshair"></div>
             <div class="dots"></div>

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;

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";

client/src/scss/partials/_controls-boxes.scss

@@ -12,7 +12,7 @@
     }
 
     @include small2x {
-        width: 40vw * 2;
+        width: 40vw;
     }
 
     @include medium {
@@ -30,7 +30,6 @@
     bottom: 0;
     display: flex;
     flex-flow: column;
-    background: rgba($background-color, 0.6);
     z-index: 1;
 
     @include small {
@@ -39,8 +38,8 @@
     }
 
     @include small2x {
-        width: 30vw * 2;
-        height: 30vw * 2;
+        width: 30vw;
+        height: 30vw;
     }
 
     @include medium {

client/src/scss/partials/_gripper-control.scss

@@ -14,7 +14,7 @@
             }
 
             @include small2x {
-                height: 34px * 2;
+                height: (34px / 2);
             }
 
             @include medium {

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 {

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;