From 91faccfc2a19048decf9a5bcdda401b1913c8021 Mon Sep 17 00:00:00 2001
From: Ilia Miheev <imiheev774@gmail.com>
Date: Sat, 7 Mar 2026 21:05:15 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=B4=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=BB=D0=B0=D1=82?=
 =?UTF-8?q?=D1=84=D0=BE=D1=80=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  16 ++
 package.json                                  |   1 +
 .../images/ArUco-marker.jpg                   | Bin
 public/images/blue-platform.jpg               | Bin 0 -> 1233 bytes
 public/images/red-platform.jpg                | Bin 0 -> 1234 bytes
 public/images/white-platform.jpg              | Bin 0 -> 998 bytes
 public/shablons/color.txt                     |  15 +-
 public/shablons/emergency_and_navigate.txt    |   3 +-
 src/App.vue                                   | 150 ++++++++++++++----
 src/renderer.js                               |   5 +-
 10 files changed, 144 insertions(+), 46 deletions(-)
 rename src/Images/image.jpg => public/images/ArUco-marker.jpg (100%)
 create mode 100644 public/images/blue-platform.jpg
 create mode 100644 public/images/red-platform.jpg
 create mode 100644 public/images/white-platform.jpg

diff --git a/package-lock.json b/package-lock.json
index 97674a5..4f5c1ff 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index f0de7b3..dceac85 100644
--- a/package.json
+++ b/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",
diff --git a/src/Images/image.jpg b/public/images/ArUco-marker.jpg
similarity index 100%
rename from src/Images/image.jpg
rename to public/images/ArUco-marker.jpg
diff --git a/public/images/blue-platform.jpg b/public/images/blue-platform.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..bff4e73c65c4ac923ab513b92bb6d4440fb9806f
GIT binary patch
literal 1233
zcmeH_O-{rx427SQdfI8y;ta_!3pSjj5=bN9Qg8$o?6?hLF-PEM!%c#NDxo5#i0ug5
zn?zsY<oV_2{0_O^UTr}{xYR^`!v(A{r8FunZkVfz+qzyfzV+U<&UO7tx<2&I$y&m3
zOey)Jlg&DARx!nL30XZ;@sfENJJ-cOM}9<Tu*1$$fC*#+<tHS4DyG3@yL@08b$*4n
z1S3`edN{woodO5Ex=~4@d{^X76=_r_VsrXQgr5mZG|((zzKFeD7Q@(OFG0hZb{VGx
atMibI|2#ki)QvM<lV80y5;IOJ#LEYok2I_R

literal 0
HcmV?d00001

diff --git a/public/images/red-platform.jpg b/public/images/red-platform.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..6a7e75a8b0fedc927e8fccad87d1599de4a02e4b
GIT binary patch
literal 1234
zcmeH_F>b>!3`IXB%T_Gep;F1s(4{Bw5FluJsa_!m=xKruIYQeknR^M91`HGl8W&lE
zl3YYQiqa?Zdp?4n*PAtn2v6e32dto#8bYj)FxHr&Fm+Xx*4N&<+PS7(aMOm?Iqo>z
z#gvkt-!HqkT*MTIOGryiVP?k6V&j^4wdEax#U6W20V<FVl;4o#sW`Pt(w%(ZEMMCE
z39ku?H3Rgz``Vrs-tcKInnXTR1Y1$WicVzI!^=Q~-w93B(<GsOh>Kmye(Z9Qp#D+1
cj8lS^d2q(R-=G51yT*U++DJ@n(m;HC0~8}QE&u=k

literal 0
HcmV?d00001

diff --git a/public/images/white-platform.jpg b/public/images/white-platform.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..3fac667835ed7355d03caaef2b32601d4fced286
GIT binary patch
literal 998
zcmdr~J5B>J6r5+T6KCz+JTLZ=f(D6uY$T+Ja0+gML_>?X06oV*6gdK)hMSnT5J3Wj
zK%3`j{4~#F&p1Ei7x3w9J_8ZqL>BThj-i$6Ayo*BHKr&`IUEkGFTHoAb5-4NRfpO+
zZaM75l#(CsPue(XVv7ACq-CZsBV$Ifa#j3y<vRq61s0kDR3IHF-y_LYv0hf%@mm-9
z30@NvYX<0cx<0hSyK(Oae|70f{IKE@8Fg^pGs4ddP1Mn^4E4#_s50o5DjONp9g4~_
oBWTHkujfZQfaVXcxY-f_Zw=s`(ej&fE1x->eFWX{g}Ka+uZ$9x!~g&Q

literal 0
HcmV?d00001

diff --git a/public/shablons/color.txt b/public/shablons/color.txt
index 6571542..15781cc 100644
--- a/public/shablons/color.txt
+++ b/public/shablons/color.txt
@@ -43,12 +43,9 @@ class ColorDetect():
                 self.color = 'red'
             else:
                 self.color = None
-
-#в MAIN для вызова функции должно быть:
-# cd = ColorDetect()
-    #color_sub = rospy.Subscriber('main_camera/image_raw', Image, 
-                              #lambda img: cd.detect_color_callback(img, print_type='rgb'), 
-                              #queue_size=1)
-    # print(cd.getColor())
-    #rospy.sleep(2)
-    #color_sub.unregister()
+<<separator>>
+    cd = ColorDetect()
+    color_sub = rospy.Subscriber('main_camera/image_raw', Image, lambda img: cd.detect_color_callback(img, print_type='rgb'), queue_size=1)
+    print(cd.getColor())
+    rospy.sleep(2)
+    color_sub.unregister()
diff --git a/public/shablons/emergency_and_navigate.txt b/public/shablons/emergency_and_navigate.txt
index 5889c07..c0475f7 100644
--- a/public/shablons/emergency_and_navigate.txt
+++ b/public/shablons/emergency_and_navigate.txt
@@ -17,6 +17,7 @@ get_telemetry = rospy.ServiceProxy('get_telemetry', srv.GetTelemetry) #сеов
 navigate = rospy.ServiceProxy('navigate', srv.Navigate) #сервис для полета по указаным координатам
 land = rospy.ServiceProxy('land', Trigger) #сервис для посадки
 
+<<ColorDetect>>
 
 def navigate_wait(x=0, y=0, z=1, speed=0.5, frame_id='aruco_map', auto_arm=False, tolerance=0.2,sleep=2):
     """
@@ -91,7 +92,7 @@ def main():
     #в дальнейшем не передавать переменной auto_arm значение True
 
     
-<<navigate_wait>>
+<<main>>
  
 
     land() #посадка
diff --git a/src/App.vue b/src/App.vue
index 0ace86e..3acb136 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,17 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import {ref, onMounted} from "vue";
 import izitoast from "./izitoast";
-import { useEventListener } from "@vueuse/core";
+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("");
 
 onMounted(() => {
     for (let i = 0; i < 100; i++) {
@@ -19,6 +20,8 @@ onMounted(() => {
             x: i % 10,
             y: 9 - Math.floor(i / 10),
             index: i,
+            isPlatform: false,
+            BgImg: 'images/ArUco-marker.jpg'
         });
     }
 });
@@ -31,8 +34,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: "Ошибка",
@@ -40,46 +42,59 @@ 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`;
+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`;
+    }
+
+    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);
     }
-    fetch("/shablons/emergency_and_navigate.txt")
-        .then((response) => response.text())
-        .then((textOfCode) => {
-            finallyText = textOfCode.replace("<<navigate_wait>>", navigate_waites);
-        });
     isModalVisible.value = true;
 }
 
 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'
     }
 }
 
@@ -102,10 +117,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(() => {
@@ -124,13 +138,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)">
+                 @click="setNumber(item)" @contextmenu.prevent="onContextMenu($event, item)"
+                 :style="{backgroundImage: `url(${item.BgImg})`}">
                 {{ numbers[index].variable.join(", ") }}
             </div>
         </div>
@@ -140,12 +225,12 @@ function handleDownloadBtn() {
             <button @click="cleanResult">Очистить</button>
             <button @click="cancel">Отменить</button>
         </div>
-        <MyDropMenu />
+        <MyDropMenu/>
     </div>
 
 
     <MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
-        :is-success=Boolean(listOfTrips.length)>
+              :is-success=Boolean(listOfTrips.length)>
         <template #header>
             <strong v-if="listOfTrips.length">Код готов!</strong>
             <strong v-else>Код не готов!</strong>
@@ -189,12 +274,9 @@ html {
 .square {
     width: var(--side);
     height: var(--side);
-    background-image: url("images/image.jpg");
     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;
@@ -203,9 +285,9 @@ html {
 
     color: white;
     text-shadow: -1px -1px 0 black,
-        1px -1px 0 black,
-        -1px 1px 0 black,
-        1px 1px 0 black;
+    1px -1px 0 black,
+    -1px 1px 0 black,
+    1px 1px 0 black;
 }
 
 .square:hover {
diff --git a/src/renderer.js b/src/renderer.js
index af6c62c..4099886 100644
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -28,5 +28,6 @@
 
 import { createApp } from 'vue';
 import App from './App.vue';
-
-createApp(App).mount('#app');
\ No newline at end of file
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
+import ContextMenu from '@imengyu/vue3-context-menu'
+createApp(App).use(ContextMenu).mount('#app');