Merge branch 'dev'

Author: Stanisław

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'}>