package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@imengyu/vue3-context-menu": "^1.5.4",
         "@vueuse/core": "^14.2.1",
         "copy-to-clipboard": "^3.3.3",
         "electron-squirrel-startup": "^1.0.1",
@@ -1406,6 +1407,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@imengyu/vue-scroll-rect": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@imengyu/vue-scroll-rect/-/vue-scroll-rect-0.1.8.tgz",
+      "integrity": "sha512-Mg7rgHlsGPO0tcMFjp1kB2BZ3oRrRtFN8MoE52jTgQnlc+Y0N6ttFnbIxOh2fc9j82uhdQ8zgZcXlFHUXeGnCA==",
+      "license": "MIT"
+    },
+    "node_modules/@imengyu/vue3-context-menu": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@imengyu/vue3-context-menu/-/vue3-context-menu-1.5.4.tgz",
+      "integrity": "sha512-/a6Quyn3V320/Mi6UoH+6wSTBYrln70RovT3iyfoXQQpIHpC7ZPWObzS0BXQTRlWtyJB92XmGDT703UxSO8Tvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@imengyu/vue-scroll-rect": "^0.1.4"
+      }
+    },
     "node_modules/@inquirer/checkbox": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@inquirer/checkbox/-/checkbox-3.0.1.tgz",

package.json

@@ -30,6 +30,7 @@
     "vite": "^5.4.21"
   },
   "dependencies": {
+    "@imengyu/vue3-context-menu": "^1.5.4",
     "@vueuse/core": "^14.2.1",
     "copy-to-clipboard": "^3.3.3",
     "electron-squirrel-startup": "^1.0.1",

public/shablons/color.txt

@@ -39,9 +39,7 @@ def color_detection(data, print_type='str'):
         else:
             color = None
 
-#в MAIN для вызова функции должно быть:
-#color_sub = rospy.Subscriber('main_camera/image_raw', Image, 
-                            #lambda img: color_detection(img, print_type='rgb'), 
-                            #queue_size=1)
-#rospy.sleep(2)
-#color_sub.unregister()
+<<separator>>
+    color_sub = rospy.Subscriber('main_camera/image_raw', Image, lambda img: color_detection(img, print_type='rgb'), queue_size=1)
+    rospy.sleep(2)
+    color_sub.unregister()

public/shablons/emergency_and_navigate.txt

@@ -20,6 +20,7 @@ land = rospy.ServiceProxy('land', Trigger) #сервис для посадки
 rospy.init_node('flight')
 bridge = CvBridge()
 
+
 def navigate_wait(x=0, y=0, z=1, speed=0.5, frame_id='aruco_map', auto_arm=False, tolerance=0.2,sleep=2):
     """
     Летит в указанную точку и ждет, пока дрон туда ДОЛЕТИТ.
@@ -88,13 +89,14 @@ def signal_handler(sig, frame):
 signal.signal(signal.SIGINT, signal_handler)
 
 <<qr_function>>
+<<ColorDetect>>
 
 def main():
     navigate_wait(z=1,frame_id='body',auto_arm=True) #должно быть. включает моторы и поднимает дрон на метр вверх
     #в дальнейшем не передавать переменной auto_arm значение True
 
     
-<<navigate_wait>>
+<<main>>
  
 
     land() #посадка

src/App.vue

@@ -5,12 +5,13 @@ import {useEventListener} from "@vueuse/core";
 import MyDialog from "./components/MyDialog.vue";
 import MyDropMenu from "./components/MyDropMenu.vue";
 import copyToclipboard from "./copyToclipboard";
+import ContextMenu from '@imengyu/vue3-context-menu'
 
 const numbers = ref([]); // Инициализируем массив с пустыми строками
 const clickCount = ref(1); // Счетчик нажатий
 const listOfTrips = ref([]);
 const isModalVisible = ref(false);
-let finallyText = "";
+let finallyText = ref("");
 const qr_sub_text = `
   \tqr_sub = rospy.Subscriber('main_camera/image_raw',Image, qr_detection,queue_size=1)\n
   \trospy.sleep(2)\n
@@ -25,6 +26,8 @@ onMounted(() => {
             x: i % 10,
             y: 9 - Math.floor(i / 10),
             index: i,
+            isPlatform: false,
+            BgImg: 'images/ArUco-marker.jpg'
         });
     }
 });
@@ -37,8 +40,7 @@ function setNumber(item) {
         listOfTrips.value.push(item);
         clickCount.value++;
     } else {
-        //если нажимаем на ранее отмеченную клетку (не последнюю), то выводится ошибка
-        listOfTrips.value.push(item);
+        //если нажимаем на ранее отмеченную клетку, то выводится ошибка
         if (numbers.value[item.index].variable.at(-1) === clickCount.value - 1) {
             izitoast.error({
                 title: "Ошибка",
@@ -46,26 +48,39 @@ function setNumber(item) {
             });
             return;
         }
+        listOfTrips.value.push(item);
         numbers.value[item.index].variable.push(clickCount.value);
         clickCount.value++;
     }
 }
 
-function saveResult() {
-    let navigate_waites = "";
-    for (const item of listOfTrips.value) {
-    navigate_waites += `\tnavigate_wait(${item.x}, ${item.y})\n`;
-    if (item.x===1 && item.y === 1) {
-        navigate_waites += qr_sub_text
-        is_qr__head_used=1
-    }
+async function saveResult() {
+    finallyText.value = "";
+    const mainCode = ref("");
+    const colorDetectClass = ref("");
+    const colorDetectCode = ref("");
+    const isUsedPlatform = listOfTrips.value.some(item => item.isPlatform);
+
+    if (isUsedPlatform) {
+        const response = await fetch("/shablons/color.txt")
+        let textOfCode = await response.text()
+        textOfCode = textOfCode.split('<<separator>>')
+        colorDetectClass.value = textOfCode[0]
+        colorDetectCode.value += `\t${textOfCode[1].trim()}\n`;
     }
 
-    fetch("/shablons/emergency_and_navigate.txt")
-        .then((response) => response.text())
-        .then((textOfCode) => {
-            finallyText = textOfCode.replace("<<navigate_wait>>", navigate_waites);
-        });
+    for (const item of listOfTrips.value) {
+        mainCode.value += `\tnavigate_wait(${item.x}, ${item.y})\n`;
+        if (isUsedPlatform) {
+            mainCode.value += colorDetectCode.value + '\n'
+        }
+    }
+    const response = await fetch("/shablons/emergency_and_navigate.txt")
+    let textOfCode = await response.text()
+    finallyText.value = textOfCode.replace("<<main>>", mainCode.value);
+    if (isUsedPlatform) {
+        finallyText.value = finallyText.value.replace("<<ColorDetect>>", colorDetectClass.value);
+    }
     isModalVisible.value = true;
     if (is_qr__head_used === 1) {
         Qr_head() 
@@ -82,27 +97,22 @@ function Qr_head() {
 }
 
 function cancel() {
-    numbers.value[listOfTrips.value.at(-1).index].variable.pop();
-    listOfTrips.value.pop();
 
     if (clickCount.value === 1) {
         return;
     } else {
+        numbers.value[listOfTrips.value.at(-1).index].variable.pop();
+        listOfTrips.value.pop();
         clickCount.value--;
     }
 }
 
 function cleanResult() {
     clickCount.value = 1;
-    numbers.value = [];
     listOfTrips.value = [];
     for (let i = 0; i < 100; i++) {
-        numbers.value.push({
-            variable: [],
-            x: i % 10,
-            y: 9 - Math.floor(i / 10),
-            index: i,
-        });
+        numbers.value[i].variable = [];
+        numbers.value[i].BgImg = 'images/ArUco-marker.jpg'
     }
 }
 
@@ -125,10 +135,9 @@ function copyAndToast(text) {
 }
 
 function handleDownloadBtn() {
-    console.log(finallyText)
     // Создание файла
     const downloadUrl = ref('');
-    const blob = new Blob([finallyText], {type: 'text/plain'});
+    const blob = new Blob([finallyText.value], {type: 'text/plain'});
     downloadUrl.value = URL.createObjectURL(blob);
     // Задержка для избежания ошибок в некоторых браузерах
     setTimeout(() => {
@@ -147,18 +156,84 @@ function handleDownloadBtn() {
     })
     isModalVisible.value = false
 }
+
+function createPlatform(item, color) {
+    if (!item.isPlatform) {
+        listOfTrips.value.push(item)
+        numbers.value[item.index].variable.push(clickCount.value);
+    }
+    item['isPlatform'] = true
+    numbers.value[item.index].BgImg = `images/${color}-platform.jpg`
+    clickCount.value++
+}
+
+function deletePlatform(item) {
+    item['isPlatform'] = false
+    const index = listOfTrips.value.indexOf(item);
+    if (index !== -1) {
+        listOfTrips.value.splice(index, 1);
+    }
+    numbers.value[item.index].BgImg = 'images/ArUco-marker.jpg'
+    clickCount.value--
+}
+
+function onContextMenu(e, item) {
+    ContextMenu.showContextMenu({
+        theme: 'mac dark',
+        x: e.x,
+        y: e.y,
+        items: [
+            {
+                label: "Платформы",
+                children: [
+                    {
+                        label: "Белая",
+                        onClick: () => createPlatform(item, 'white'),
+                    },
+                    {
+                        label: "Синяя",
+                        onClick: () => createPlatform(item, 'blue'),
+                    },
+                    {
+                        label: "Красная",
+                        onClick: () => createPlatform(item, 'red'),
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => deletePlatform(item),
+                    },
+                ]
+            },
+            {
+                label: "QR код",
+                children: [
+                    {
+                        label: "Добавить",
+                        onClick: () => alert('Здесь ещё предстоит написать код')
+                    },
+                    {
+                        label: "Удалить",
+                        onClick: () => alert('Здесь ещё предстоит написать код')
+                    },
+                ],
+            },
+            {
+                label: "Отмена",
+                onClick: () => {
+                    alert('Здесь ещё предстоит написать код')
+                }
+            },
+        ]
+    });
+}
 </script>
 
 <template>
     <div class="wraper">
         <div class="grid">
-            <div
-                class="square"
-                v-for="(item, index) in numbers"
-                :data-key="index"
-                :key="index"
-                @click="setNumber(item)"
-            >
+            <div class="square" v-for="(item, index) in numbers" :data-key="index" :key="index"
+                 @click="setNumber(item)" @contextmenu.prevent="onContextMenu($event, item)"
+                 :style="{backgroundImage: `url(${item.BgImg})`}">
                 {{ numbers[index].variable.join(", ") }}
             </div>
         </div>
@@ -172,12 +247,8 @@ function handleDownloadBtn() {
     </div>
 
 
-    <MyDialog
-        v-show="isModalVisible"
-        @close="isModalVisible = false"
-        class="dialogWindow"
-        :is-success=listOfTrips.length
-    >
+    <MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
+              :is-success=Boolean(listOfTrips.length)>
         <template #header>
             <strong v-if="listOfTrips.length">Код готов!</strong>
             <strong v-else>Код не готов!</strong>
@@ -188,9 +259,9 @@ function handleDownloadBtn() {
         </template>
         <template #footer>
             <div v-if="listOfTrips.length">
-                <button type="button" @click="handleDownloadBtn">Скачать код</button>
-                <button type="button" @click="copyAndToast(finallyText)">Скопировать код</button>
-                <button type="button" @click="isModalVisible = false">ОК</button>
+                <button @click="handleDownloadBtn">Скачать код</button>
+                <button @click="copyAndToast(finallyText)">Скопировать код</button>
+                <button @click="isModalVisible = false">ОК</button>
             </div>
         </template>
     </MyDialog>
@@ -219,14 +290,11 @@ html {
 }
 
 .square {
-    width: var(--side); /* Ширина квадрата */
-    height: var(--side); /* Высота квадрата */
-    background-image: url("images/image.jpg");
+    width: var(--side);
+    height: var(--side);
     background-size: cover;
     border: 3px solid rgb(251, 251, 251);
-    background-color: #e0e0e0;
     cursor: pointer;
-    transition: background-color 0.3s;
     overflow-y: scroll;
 
     background-blend-mode: multiply;

src/renderer.js

@@ -28,5 +28,6 @@
 
 import { createApp } from 'vue';
 import App from './App.vue';
-
-createApp(App).mount('#app');
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import ContextMenu from '@imengyu/vue3-context-menu'
+createApp(App).use(ContextMenu).mount('#app');