new map + new origin points

src/App.vue

@@ -293,8 +293,8 @@ const closePointInfo = () => {
 
 const getAllCoordinates = (array, target) => {
   array.map(coordinate => {
-    let x = -coordinate.pose.robot_position.x;
-    let y = coordinate.pose.robot_position.y;
+    let x = coordinate.pose.robot_position.x;
+    let y = -coordinate.pose.robot_position.y;
     let id = coordinate.timestamp;
     let info = coordinate.esp_air_sensors;
 
@@ -313,8 +313,8 @@ const getWifiData = () => {
       obj.signal = w[k].signal
       obj.mac = k;
       obj.id = w.timestamp;
-      obj.x = -w.pose.robot_position.x;
-      obj.y = w.pose.robot_position.y;
+      obj.x = w.pose.robot_position.x;
+      obj.y = -w.pose.robot_position.y;
 
       if(obj.name) {
         wifiData.value.push(obj);
@@ -328,15 +328,15 @@ const getSpecificWifiCoordinates = () => {
   if(chosenNetwork.value) {
     newArr = wifiData.value.filter(d => d.name === chosenNetwork.value);
     wifiCoordinates.value = Object.values(newArr.reduce((acc, cur) => {
-    const key = `${cur.id}_${cur.name}`;
-    if (!acc[key]) {
-      acc[key] = cur;
-    }
-    if (acc[key].signal < cur.signal) {
-      acc[key].signal = cur.signal
-    }
-    return acc;
-}, {}));
+      const key = `${cur.id}_${cur.name}`;
+      if (!acc[key]) {
+        acc[key] = cur;
+      }
+      if (acc[key].signal < cur.signal) {
+        acc[key].signal = cur.signal
+      }
+      return acc;
+    }, {}));
   }
 }
 

src/components/Map.vue

@@ -19,10 +19,10 @@
             :class="{'isActive': pointID === coordinate.id}"
             v-for="(coordinate, index) in coordinates" 
             :key="index" 
-            :style="{top: coordinate.y ? `${1152 - convertValues(coordinate.y)}px` : '', left: coordinate.x ? `${1192 - convertValues(coordinate.x)}px` : '', opacity: coordinate.signal && `${coordinate.signal}%`}" 
+            :style="{top: coordinate.y ? `${originY + convertValues(coordinate.y)}px` : '', left: coordinate.x ? `${originX +  convertValues(coordinate.x)}px` : '', opacity: coordinate.signal && `${coordinate.signal}%`}" 
             @click="getPoint($event, coordinate.id)"
           />
-        <img src="../assets/owlcat_map_3_edit.png" alt="office map" />
+        <img src="../assets/owlcat_map_5.png" alt="office map" />
       </div>
     </div>
   </PinchScrollZoom>
@@ -32,18 +32,18 @@
           :class="{'isActive': pointID === coordinate.id}"
           v-for="(coordinate, index) in coordinates" 
           :key="index" 
-          :style="{top: coordinate.y ? `${1152 - convertValues(coordinate.y)}px` : '', left: coordinate.x ? `${1192 - convertValues(coordinate.x)}px` : '', opacity: coordinate.signal && `${coordinate.signal}%`}" 
+          :style="{top: coordinate.y ? `${originY + convertValues(coordinate.y)}px` : '', left: coordinate.x ? `${originX +  convertValues(coordinate.x)}px` : '', opacity: coordinate.signal && `${coordinate.signal}%`}" 
           @click="getPoint($event, coordinate.id)"
         />
-      <img src="../assets/owlcat_map_3_edit.png" alt="office map" />
+      <img src="../assets/owlcat_map_5.png" alt="office map" />
     </div>
   </div>
 </template>
 
 
 <script setup>
   
-  import {defineEmits, ref} from 'vue'
+  import {defineEmits, ref, computed} from 'vue'
   import PinchScrollZoom from '@coddicat/vue-pinch-scroll-zoom';
 
   const emit = defineEmits(["getPointID"]);
@@ -72,6 +72,15 @@
     return value / 0.01;
   }
 
+    // getting origin coordinate
+    const originX = computed(() => {
+      return 11.285 / 0.01;
+    })
+
+    const originY = computed(() => {
+      return  3202 - 21.03 / 0.01;
+    })
+
   function onEvent(name, e) {
     state.eventName = name;
     state.eventData = e;
@@ -81,16 +90,6 @@
     state.translateX = e.translateX;
     state.translateY = e.translateY;
 }
-
-function reset() {
-  zoomer.value?.setData({
-    scale: 1,
-    originX: 150,
-    originY: 200,
-    translateX: -100,
-    translateY: -50
-  });
-}
 </script>
 
 <style scoped>