Joystick

Author: yuxiang-gao

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@quasar/extras": "^1.0.0",
     "core-js": "^3.6.5",
+    "lodash": "^4.17.21",
     "nipplejs": "^0.9.0",
     "quasar": "^2.0.0"
   },

src/components/Joy.vue

@@ -1,33 +1,44 @@
 <template lang="pug">
-div(ref="joyCon").fit.rounded-borders.joy-panel
+q-responsive(:ratio="1")
+  div(ref='joyCon')
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { colors } from 'quasar'
 import nipplejs from 'nipplejs';
 
+const emit = defineEmits(["event"])
+
 const joyCon = ref(null);
+var joystick;
+
+function bindNipple () {
+  joystick.on('start end dir:up dir:left dir:down dir:right', (evt, data) => {
+    emit("event", evt.type)
+  })
+}
 onMounted(() => {
   let options = {
     zone: joyCon.value,
-    mode: 'dynamic',
-    dynamicPage: true,
+    mode: 'static',
+    size: 200,
     position: { left: '50%', bottom: "50%" },
-    color: '#c9c3b2',
+    color: colors.getPaletteColor("white"),
     threshold: 0.25,
     fadeTime: 400,
-    maxNumberOfNipples: 1
+    maxNumberOfNipples: 1,
+    dynamicPage: true,
   };
-  const staticGamepad = nipplejs.create(options)
+  joystick = nipplejs.create(options);
+  bindNipple();
 });
 
 </script>
 
 <style lang="sass" scoped>
-
 .joy-panel
-  // border: 5px outset
-  background-color: $primary
-  min-height: 500px
+  max-width: 500px
+  // max-height: 500px
 </style>
 

src/pages/Controller.vue

@@ -1,98 +1,71 @@
 <template lang="pug">
-q-page(padding).flex
-  Joy
-  q-btn-toggle(
-    no-caps 
-    rounded 
-    unelevated
-    toggle-color="primary"
-    text-color="primary"
-    v-model="controlMode"
-    :options="[ \
-      { label: 'One', value: 'one' }, \
-      { label: 'Two', value: 'two' }, \
-      { label: 'Three', value: 'three' } \
-    ]")
+q-page(padding)
+  .q-pa-lg.row.q-gutter-md.flex-center
+    q-card(style='max-width: 500px').col
+      q-card-section(:style='state.modeStyle' )
+        Joy(@event="handleJoystick")
+      //- q-card-section
+      //-   q-input(label="cmd_vel topic" v-model="state.cmdVelTopic")
+      q-tabs(v-model="state.controlMode" )
+        q-tab(label="Base" name="base").text-primary
+        q-tab(label="Arm" name="arm").text-secondary
+      q-separator(inset)
+      q-card-actions(align="center")
+        q-btn(round icon='remove')
+        q-btn(round icon='add')
 </template>
 
 <script setup>
-// import Joy from 'components/Joy.vue'
-import { rosInterface } from 'src/utils/RosUtils'
+import _ from 'lodash';
 import { toRefs, ref, reactive, watch, computed, onMounted } from 'vue'
-import DPad from 'src/components/DPad.vue';
+import { getCssVar } from 'quasar'
+
+import { rosInterface } from 'src/utils/RosUtils'
+// import DPad from 'src/components/DPad.vue';
 import Joy from 'src/components/Joy.vue';
 
-const controlMode = ref("one")
+const controlStyles = {
+  base: getCssVar('primary'),
+  arm: getCssVar('secondary')
+}
+
 const state = reactive({
-  info: null,
-  panning: false,
-  direction: "stop",
+  controlMode: 'base',
+  modeStyle: computed(() => "backgroundColor: " + controlStyles[state.controlMode]),
+  touching: false,
+  direction: null,
   cmdVelTopic: rosInterface.cmdVelTopic.name,
   velocity: 0.5,
-  cmdVelMsg: computed(() => {
-    var msg = {
-      up: { linear: { x: state.velocity } },
-      down: { linear: { x: -state.velocity } },
-      left: { angular: { x: state.velocity } },
-      right: { angular: { x: -state.velocity } },
-      stop: { linear: { x: 0.0 }, angular: { x: 0.0 } }
-    };
-    return msg[state.direction];
-  })
 })
 
-function handlePan ({ evt, ...newInfo }) {
-  state.info = newInfo
-
-  // native Javascript event
-  // console.log(evt)
-
-  if (newInfo.isFirst) {
-    state.panning = true
+function handleJoystick (event) {
+  // console.log(event)
+  if (event === "start") {
+    state.touching = true;
+    console.log("Touch start.");
   }
-  else if (newInfo.isFinal) {
-    state.panning = false
-    state.direction = "stop"
+  else if (event === "end") {
+    state.touching = false;
+    console.log("Touch end.");
+  }
+  else if (_.startsWith(event, "dir:")) {
+    state.direction = _.split(event, ":")[1];
   }
-
-  state.direction = newInfo.direction
 }
 
-// watch topic and change publisher on change
-watch(() => state.cmdVelTopic, (topic) => { rosInterface.cmdVelTopic.name = topic; })
 // Publish 10Hz
 onMounted(() => {
   setInterval(() => {
-    if (state.panning) {
+    if (state.touching) {
       // console.log("pub message")
-      rosInterface.cmdVelTopic.publish(state.cmdVelMsg)
+      // rosInterface.cmdVelTopic.publish(state.cmdVelMsg)
+      console.log(state.direction)
     }
   }, 100)
 })
+// // watch topic and change publisher on change
+// watch(() => state.cmdVelTopic, (topic) => { rosInterface.cmdVelTopic.name = topic; })
 </script>
 
 <style lang="sass" scoped>
-.custom-area
-  width: 90%
-  height: 550px
-  border-radius: 3px
-  padding: 0px
-
-.touch-area
-  height: 85%
-
-.custom-info pre
-  width: 180px
-  font-size: 12px
-
-.touch-signal
-  position: absolute
-  top: 16px
-  right: 16px
-  width: 35px
-  height: 35px
-  font-size: 25px
-  border-radius: 50% !important
-  text-align: center
-  background: rgba(255, 255, 255, .2)
 </style>