From 7a03fc03adcfdb022d3da22c91fc6df5f8d3f89d Mon Sep 17 00:00:00 2001
From: Zhenbiao Huang <biao876990970@hotmail.com>
Date: Thu, 2 May 2024 16:02:09 +0800
Subject: [PATCH] modified navigation; add joystick visible switch

---
 src/components/amr-control/MapCreate.vue     |  4 +-
 src/components/amr-control/MapSelector.vue   |  6 +--
 src/components/amr-control/RobotRelocate.vue | 15 +++++-
 src/components/amr-control/RosMap2d.vue      | 52 ++++++++++----------
 src/components/amr-control/RosMapPixi.js     | 30 ++++++++++-
 src/components/ros/JoyStick.vue              | 25 ++++++----
 src/pages/AmrControl.vue                     |  4 --
 src/pages/JoystickPage.vue                   |  6 +--
 src/pages/RosService.vue                     |  4 --
 9 files changed, 88 insertions(+), 58 deletions(-)

diff --git a/src/components/amr-control/MapCreate.vue b/src/components/amr-control/MapCreate.vue
index 61ff4d0..9b9bd92 100644
--- a/src/components/amr-control/MapCreate.vue
+++ b/src/components/amr-control/MapCreate.vue
@@ -31,6 +31,6 @@ function saveMap () {
 </script>
 
 <template>
-  <q-btn key="mapping" v-if="mapState !== 'mapping'" rounded :label="$t('amr2d_createMap')" color="secondary" icon="explore" @click="mapCommand('start')"/>
-  <q-btn key="save-map" v-else rounded :label="$t('amr2d_saveMap')" color="secondary" icon="save" @click="saveMap"/>
+  <q-btn no-wrap key="mapping" v-if="mapState !== 'mapping'" rounded :label="$t('amr2d_createMap')" color="secondary" icon="explore" @click="mapCommand('start')"/>
+  <q-btn no-wrap key="save-map" v-else rounded :label="$t('amr2d_saveMap')" color="secondary" icon="save" @click="saveMap"/>
 </template>
diff --git a/src/components/amr-control/MapSelector.vue b/src/components/amr-control/MapSelector.vue
index d92b9a9..9da12fb 100644
--- a/src/components/amr-control/MapSelector.vue
+++ b/src/components/amr-control/MapSelector.vue
@@ -23,7 +23,7 @@ function selectMap () {
 </script>
 
 <template>
-  <q-btn rounded :label="$t('amr2d_loadMap')" color="primary" icon="download" @click="show">
+  <q-btn no-wrap rounded :label="$t('amr2d_loadMap')" color="primary" icon="download" @click="show">
     <q-dialog v-model="visible" persistent>
       <q-card>
         <q-card-section class="text-h6" style="min-width: 20rem">
@@ -50,7 +50,3 @@ function selectMap () {
     </q-dialog>
   </q-btn>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src/components/amr-control/RobotRelocate.vue b/src/components/amr-control/RobotRelocate.vue
index cb06563..654e527 100644
--- a/src/components/amr-control/RobotRelocate.vue
+++ b/src/components/amr-control/RobotRelocate.vue
@@ -12,19 +12,29 @@ watch(visible, value => {
 })
 
 const mapManager = inject('mapManager')
+
 // 重定位置
 mapManager.changePose = (pos) => {
   tempPose.value.position.x = pos.x
   tempPose.value.position.y = pos.y
-  mapManager.updateRobotPose(tempPose.value)
+  if (isNavigate.value) {
+    mapManager.updateTargetPose(tempPose.value)
+  } else {
+    mapManager.updateRobotPose(tempPose.value)
+  }
   clicked.value = true
 }
+
 // 重定方向
 mapManager.changeTheta = (pos) => {
   const theta = Math.atan2(pos.y - tempPose.value.position.y, pos.x - tempPose.value.position.x)
   tempPose.value.orientation.z = Math.sin(theta / 2)
   tempPose.value.orientation.w = Math.cos(theta / 2)
-  mapManager.updateRobotPose(tempPose.value)
+  if (isNavigate.value) {
+    mapManager.updateTargetPose(tempPose.value)
+  } else {
+    mapManager.updateRobotPose(tempPose.value)
+  }
   clicked.value = true
 }
 
@@ -66,6 +76,7 @@ const publish = inject('publish')
 function close () {
   mapManager.changeLocation = false
   mapManager.changeDirection = false
+  mapManager.removeTarget()
 
   if (clicked.value) {
     if (isNavigate.value) {
diff --git a/src/components/amr-control/RosMap2d.vue b/src/components/amr-control/RosMap2d.vue
index 144023b..6e90ad5 100644
--- a/src/components/amr-control/RosMap2d.vue
+++ b/src/components/amr-control/RosMap2d.vue
@@ -47,32 +47,34 @@ const robotRelocate = ref()
 </script>
 
 <template>
-  <q-page-sticky position="top" :offset="[15, 15]">
-    <div class="row q-gutter-sm q-pb-sm scrollable-row">
-      <q-btn key="no-focus" v-if="focusing"  rounded outline :label="$t('amr2d_no_focus')"
-             @click="mapManager.focusing = false; focusing = false" color="negative" icon="navigation"/>
-      <q-btn key="focusing" v-else rounded :label="$t('amr2d_focus')"
-             @click="mapManager.focusing = true; focusing = true" color="primary" icon="navigation"/>
+  <q-page-sticky position="top">
+    <q-scroll-area style="height: 3.5rem; width: 100vw" class="q-pa-sm">
+      <div class="no-wrap flex q-gutter-x-sm justify-center">
+        <q-btn key="no-focus" no-wrap v-if="focusing"  rounded outline :label="$t('amr2d_no_focus')"
+               @click="mapManager.focusing = false; focusing = false" color="negative" icon="navigation"/>
+        <q-btn key="focusing" no-wrap v-else rounded :label="$t('amr2d_focus')"
+               @click="mapManager.focusing = true; focusing = true" color="primary" icon="navigation"/>
 
-      <transition-group
-        appear
-        enter-active-class="animated zoomIn"
-        leave-active-class="animated zoomOut"
-      >
-        <q-btn key="navigation" v-if="!controlParam.requireMapState || mapState === 'navigation' && pageMode !== 'mapPose'" rounded
-               :label="$t('amr2d_navigation_relocate')" color="primary"
-               :outline="pageMode === 'navigation'" icon="label_important_outline"
-               @click="pageMode === 'navigation'?(pageMode = 'default'):(pageMode='navigation')"/>
-        <q-btn key="navigation-cancel" v-if="pageMode==='navigation'" :label="$t('cancel')" rounded color="warning"
-               @click="robotRelocate.cancel()"/>
-        <q-btn key="map-pose" v-if="mapState === 'navigation'  && pageMode !== 'navigation'" rounded
-               :label="$t('mapPose')" color="accent"
-               :outline="pageMode === 'mapPose'" icon="grain"
-               @click="pageMode === 'mapPose'?(pageMode = 'default'):(pageMode='mapPose')"/>
-        <map-create v-if="pageMode === 'default'" key="map-create"/>
-        <map-selector v-if="pageMode === 'default'" key="map-selector"/>
-      </transition-group>
-    </div>
+        <transition-group
+          appear
+          enter-active-class="animated zoomIn"
+          leave-active-class="animated zoomOut"
+        >
+          <q-btn key="navigation" no-wrap v-if="!controlParam.requireMapState || mapState === 'navigation' && pageMode !== 'mapPose'" rounded
+                 :label="$t('amr2d_navigation_relocate')" color="primary"
+                 :outline="pageMode === 'navigation'" icon="label_important_outline"
+                 @click="pageMode === 'navigation'?(pageMode = 'default'):(pageMode='navigation')"/>
+          <q-btn key="navigation-cancel" no-wrap v-if="pageMode==='navigation'" :label="$t('cancel')" rounded color="warning"
+                 @click="robotRelocate.cancel()"/>
+          <q-btn key="map-pose" no-wrap v-if="mapState === 'navigation'  && pageMode !== 'navigation'" rounded
+                 :label="$t('mapPose')" color="accent"
+                 :outline="pageMode === 'mapPose'" icon="grain"
+                 @click="pageMode === 'mapPose'?(pageMode = 'default'):(pageMode='mapPose')"/>
+          <map-create v-if="pageMode === 'default'" key="map-create"/>
+          <map-selector v-if="pageMode === 'default'" key="map-selector"/>
+        </transition-group>
+      </div>
+    </q-scroll-area>
   </q-page-sticky>
   <canvas ref="pixiContainer" class="full-width full-height"/>
   <RobotRelocate ref="robotRelocate"/>
diff --git a/src/components/amr-control/RosMapPixi.js b/src/components/amr-control/RosMapPixi.js
index 633aefb..083e515 100644
--- a/src/components/amr-control/RosMapPixi.js
+++ b/src/components/amr-control/RosMapPixi.js
@@ -52,6 +52,34 @@ export default function () {
     }
   }
 
+  mapRender.updateTargetPose = (pose) => {
+    if (mapRender.target) {
+      mapRender.target.x = pose.position.x
+      mapRender.target.y = -pose.position.y
+      mapRender.target.rotation = (90 + mapRender.quaternionToTheta(pose.orientation)) * Math.PI / 180
+    } else {
+      const targetImg = new Image()
+      targetImg.src = 'arrow.png'
+      targetImg.onload = function () {
+        const target = PIXI.Sprite.from(targetImg)
+        target.anchor.set(0.5)
+        target.alpha = 0.66
+        target.scale.set(controlParam.arrowScale / targetImg.width)
+        target.tint = getCssVar('positive')
+        target.x = pose.position.x
+        target.y = -pose.position.y
+        target.rotation = (90 + mapRender.quaternionToTheta(pose.orientation)) * Math.PI / 180
+        mapRender.target = target
+        mapRender.app.stage.addChild(mapRender.target)
+      }
+    }
+  }
+
+  mapRender.removeTarget = () => {
+    mapRender.app.stage.removeChild(mapRender.target)
+    mapRender.target = null
+  }
+
   mapRender.loadPoseList = function (poseList) {
     mapRender.poseContainer.removeChildren()
     const poseImg = new Image()
@@ -134,7 +162,7 @@ export default function () {
 
     // 当鼠标移动时，如果处于拖动状态，则移动画布
     app.view.addEventListener('pointermove', event => {
-      if (!mapRender.dragging) return
+      if (!mapRender.dragging || mapRender.focusing) return
       const { x, y } = event
       app.stage.x += x - mapRender.lastPosition.x
       app.stage.y += y - mapRender.lastPosition.y
diff --git a/src/components/ros/JoyStick.vue b/src/components/ros/JoyStick.vue
index 7529786..7193eec 100644
--- a/src/components/ros/JoyStick.vue
+++ b/src/components/ros/JoyStick.vue
@@ -6,11 +6,13 @@ import nipplejs from 'nipplejs'
 import SliderItem from 'components/setting/SliderItem.vue'
 
 const props = defineProps({
-  togglePosition: { type: String, default: 'bottom-right' }
+  togglePosition: { type: String, default: 'bottom-right' },
+  visibleSwitch: { type: Boolean, default: true }
 })
 
 const left = ref()
 const right = ref()
+const visible = ref(true)
 
 // Linear and Angular speed
 const linear = ref(0)
@@ -115,17 +117,19 @@ function initKeyboardCtrl () {
   }
 }
 
-/**
- * Create Timer to publish velocity
- */
-let timer
-onMounted(() => {
+function init () {
   initJoyStick()
   initKeyboardCtrl()
   timer = setInterval(() => {
     pubVel(linear.value, angular.value)
   }, controlParams.refreshInterval)
-})
+}
+
+/**
+ * Create Timer to publish velocity
+ */
+let timer
+onMounted(init)
 
 onUnmounted(() => {
   clearInterval(timer)
@@ -136,10 +140,10 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="left"/>
-  <div ref="right"/>
+  <div ref="left" v-show="visible"/>
+  <div ref="right" v-show="visible"/>
   <q-page-sticky v-show="$q.screen.gt.xs" :position="props.togglePosition" :offset="[15, 15]">
-    <q-btn-dropdown color="primary" :label="$t('joystick_params')" :menu-offset="props.togglePosition === 'bottom-right'?[0,10]:[65,10]">
+    <q-btn-dropdown v-show="visible" color="primary" :label="$t('joystick_params')" :menu-offset="props.togglePosition === 'bottom-right'?[0,10]:[65,10]">
       <q-card-section>
         <slider-item :label="$t('joystick_linear')" input-label="linear" color="secondary" v-model="controlParams.linearRatio" :min="0.05"
                      :max="parseInt(controlParams.linearMax)"
@@ -152,5 +156,6 @@ onUnmounted(() => {
         <q-toggle :label="$t('joystick_keyboard')" v-model="controlParams.keyboardMove" @click="initKeyboardCtrl"/>
       </q-card-section>
     </q-btn-dropdown>
+    <q-toggle v-if="props.visibleSwitch" v-model="visible" icon="sports_esports"/>
   </q-page-sticky>
 </template>
diff --git a/src/pages/AmrControl.vue b/src/pages/AmrControl.vue
index 7f5d1eb..a1ee54f 100644
--- a/src/pages/AmrControl.vue
+++ b/src/pages/AmrControl.vue
@@ -23,7 +23,3 @@ onUnmounted(() => {
     <joy-stick/>
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src/pages/JoystickPage.vue b/src/pages/JoystickPage.vue
index ddf5fbc..83fd765 100644
--- a/src/pages/JoystickPage.vue
+++ b/src/pages/JoystickPage.vue
@@ -18,10 +18,6 @@ onUnmounted(() => {
 
 <template>
   <div>
-    <joy-stick toggle-position="bottom"/>
+    <joy-stick toggle-position="bottom" :visible-switch="false"/>
   </div>
 </template>
-
-<style scoped>
-
-</style>
diff --git a/src/pages/RosService.vue b/src/pages/RosService.vue
index b2374c9..bdf74cc 100644
--- a/src/pages/RosService.vue
+++ b/src/pages/RosService.vue
@@ -56,7 +56,3 @@ async function call () {
     </q-splitter>
   </div>
 </template>
-
-<style scoped>
-
-</style>