Develop #17
+1
-1
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Probody</title>
|
||||
<title>SkyVue</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/izitoast@1/dist/css/iziToast.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Generated
+12
-2
@@ -1,11 +1,11 @@
|
||||
{
|
||||
"name": "probody",
|
||||
"name": "SkyVue",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "probody",
|
||||
"name": "SkyVue",
|
||||
"version": "1.0.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -14,6 +14,7 @@
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
"izitoast": "^1.4.0",
|
||||
"prismjs": "^1.30.0",
|
||||
"vue": "^3.5.28"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -6832,6 +6833,15 @@
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/prismjs": {
|
||||
"version": "1.30.0",
|
||||
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
|
||||
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/proc-log": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/proc-log/-/proc-log-2.0.1.tgz",
|
||||
|
||||
+3
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "probody",
|
||||
"productName": "probody",
|
||||
"name": "SkyVue",
|
||||
"productName": "SkyVue",
|
||||
"version": "1.0.0",
|
||||
"description": "My Electron application description",
|
||||
"main": ".vite/build/main.js",
|
||||
@@ -35,6 +35,7 @@
|
||||
"copy-to-clipboard": "^3.3.3",
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
"izitoast": "^1.4.0",
|
||||
"prismjs": "^1.30.0",
|
||||
"vue": "^3.5.28"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
+144
-64
@@ -1,17 +1,28 @@
|
||||
<script setup>
|
||||
import {ref, onMounted, h} from "vue";
|
||||
import izitoast from "./shared/izitoast";
|
||||
import izitoast from "@/shared/izitoast";
|
||||
import {useEventListener} from "@vueuse/core";
|
||||
import MyDialog from "./components/MyDialog.vue";
|
||||
import MyDropMenu from "./components/MyDropMenu.vue";
|
||||
import copyToclipboard from "./shared/copyToclipboard";
|
||||
import MyDialog from "@/components/MyDialog.vue";
|
||||
import MyDropMenu from "@/components/MyDropMenu.vue";
|
||||
import copyToclipboard from "@/shared/copyToclipboard";
|
||||
import ContextMenu from "@imengyu/vue3-context-menu";
|
||||
import CodeView from "@/components/CodeView.vue";
|
||||
import emergencyAndNavigate from '@/shablons/emergency_and_navigate.js'
|
||||
import color from '@/shablons/color.js'
|
||||
import qr from '@/shablons/qr.js'
|
||||
import Preview from "@/components/UI/svg/Preview.vue";
|
||||
import Save from "@/components/UI/svg/Save.vue";
|
||||
import Trash from "@/components/UI/svg/Trash.vue";
|
||||
import Back from "@/components/UI/svg/Back.vue";
|
||||
|
||||
|
||||
const numbers = ref([]); // Инициализируем массив с пустыми строками
|
||||
const clickCount = ref(1); // Счетчик нажатий
|
||||
const listOfTrips = ref([]);
|
||||
const isModalVisible = ref(false);
|
||||
let finallyText = ref("");
|
||||
const isCodeViewVisible = ref(false);
|
||||
const finallyText = ref("");
|
||||
const dropMenu = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
@@ -49,7 +60,24 @@ function setNumber(item) {
|
||||
}
|
||||
}
|
||||
|
||||
async function saveResult() {
|
||||
function openPreview() {
|
||||
generateCode()
|
||||
if (!listOfTrips.value.length) {
|
||||
izitoast.error({
|
||||
title: 'Ошибка',
|
||||
message: 'Для предпросмотра нужно создать маршрут'
|
||||
})
|
||||
return
|
||||
}
|
||||
isCodeViewVisible.value = true;
|
||||
}
|
||||
|
||||
function saveResult() {
|
||||
isModalVisible.value = true;
|
||||
generateCode()
|
||||
}
|
||||
|
||||
function generateCode() {
|
||||
finallyText.value = "";
|
||||
const mainCode = ref("");
|
||||
const colorDetectClass = ref("");
|
||||
@@ -59,17 +87,18 @@ async function saveResult() {
|
||||
const isUsedPlatform = listOfTrips.value.some(item => item.isPlatform);
|
||||
const isUsedQR = listOfTrips.value.some(item => item.isQR);
|
||||
|
||||
if (!listOfTrips.value.length) {
|
||||
return
|
||||
}
|
||||
if (isUsedPlatform) {
|
||||
const response = await fetch("/shablons/color.txt")
|
||||
let textOfCode = await response.text()
|
||||
let textOfCode = color
|
||||
textOfCode = textOfCode.split('<<separator>>')
|
||||
colorDetectClass.value = textOfCode[0]
|
||||
colorDetectCode.value += `\t${textOfCode[1].trim()}\n`;
|
||||
}
|
||||
|
||||
if (isUsedQR) {
|
||||
const response = await fetch("/shablons/qr.txt")
|
||||
let textOfCode = await response.text()
|
||||
let textOfCode = qr
|
||||
textOfCode = textOfCode.split('<<separator>>')
|
||||
QRDetectClass.value = textOfCode[0]
|
||||
QRDetectCode.value += `\t${textOfCode[1].trim()}\n`;
|
||||
@@ -84,8 +113,7 @@ async function saveResult() {
|
||||
mainCode.value += QRDetectCode.value + '\n'
|
||||
}
|
||||
}
|
||||
const response = await fetch("/shablons/emergency_and_navigate.txt")
|
||||
let textOfCode = await response.text()
|
||||
let textOfCode = emergencyAndNavigate
|
||||
finallyText.value = textOfCode.replace("<<main>>", mainCode.value);
|
||||
if (isUsedPlatform) {
|
||||
finallyText.value = finallyText.value.replace("<<ColorDetect>>", colorDetectClass.value);
|
||||
@@ -97,13 +125,15 @@ async function saveResult() {
|
||||
} else {
|
||||
finallyText.value = finallyText.value.replace("<<qr_function>>", '');
|
||||
}
|
||||
isModalVisible.value = true;
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
if (clickCount.value === 1) {
|
||||
return;
|
||||
}
|
||||
if (listOfTrips.value.at(-1).variable.length === 1) {
|
||||
listOfTrips.value.at(-1).BgImg = 'images/ArUco-marker.jpg'
|
||||
}
|
||||
listOfTrips.value.at(-1).variable.pop();
|
||||
listOfTrips.value.pop();
|
||||
clickCount.value--;
|
||||
@@ -111,13 +141,17 @@ function cancel() {
|
||||
|
||||
function cleanResult() {
|
||||
clickCount.value = 1;
|
||||
listOfTrips.value.forEach(item => {
|
||||
numbers.value.forEach(item => {
|
||||
item.isPlatform = false;
|
||||
item.isQR = false;
|
||||
item.variable = [];
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
})
|
||||
listOfTrips.value = [];
|
||||
listOfTrips.value = []
|
||||
izitoast.info({
|
||||
title: 'Поле очищено',
|
||||
message: 'Поле очищено. Можно строить маршрут заново',
|
||||
})
|
||||
}
|
||||
|
||||
// Обрабатываем нажатие Ctrl + Z
|
||||
@@ -125,6 +159,15 @@ const handleKeydown = (event) => {
|
||||
if (event.ctrlKey && event.code === "KeyZ" && listOfTrips.value.length) {
|
||||
event.preventDefault();
|
||||
cancel();
|
||||
} else if (event.ctrlKey && event.code === "KeyS") {
|
||||
event.preventDefault();
|
||||
saveResult();
|
||||
} else if (event.ctrlKey && event.code === "KeyN") {
|
||||
event.preventDefault();
|
||||
dropMenu.value.open();
|
||||
} else if (event.code === "Delete") {
|
||||
event.preventDefault();
|
||||
cleanResult();
|
||||
}
|
||||
};
|
||||
useEventListener("keydown", handleKeydown);
|
||||
@@ -173,8 +216,10 @@ function createPlatform(item, color) {
|
||||
}
|
||||
|
||||
function deletePlatform(item) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isPlatform = false
|
||||
if (item.isPlatform) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isPlatform = false
|
||||
}
|
||||
}
|
||||
|
||||
function createQR(item) {
|
||||
@@ -189,8 +234,10 @@ function createQR(item) {
|
||||
}
|
||||
|
||||
function deleteQR(item) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isQR = true
|
||||
if (item.isQR) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
item.isQR = false
|
||||
}
|
||||
}
|
||||
|
||||
function deletePointMap(item) {
|
||||
@@ -214,6 +261,7 @@ function deletePointMap(item) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
}
|
||||
}
|
||||
|
||||
function createIcon(src) {
|
||||
return h('img', {
|
||||
src: src,
|
||||
@@ -223,6 +271,7 @@ function createIcon(src) {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function onContextMenu(e, item) {
|
||||
ContextMenu.showContextMenu({
|
||||
theme: 'mac dark',
|
||||
@@ -251,7 +300,7 @@ function onContextMenu(e, item) {
|
||||
{
|
||||
label: "Удалить",
|
||||
onClick: () => deletePlatform(item),
|
||||
icon: createIcon('icons/trash.webp'),
|
||||
icon: createIcon('icons/trash.svg'),
|
||||
},
|
||||
]
|
||||
},
|
||||
@@ -267,14 +316,14 @@ function onContextMenu(e, item) {
|
||||
{
|
||||
label: "Удалить",
|
||||
onClick: () => deleteQR(item),
|
||||
icon: createIcon('icons/trash.webp')
|
||||
icon: createIcon('icons/trash.svg')
|
||||
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Удалить",
|
||||
icon: createIcon('icons/trash.webp'),
|
||||
icon: createIcon('icons/trash.svg'),
|
||||
onClick: () => deletePointMap(item),
|
||||
},
|
||||
]
|
||||
@@ -283,63 +332,71 @@ function onContextMenu(e, item) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wraper">
|
||||
<div v-if="!isCodeViewVisible" class="wraper">
|
||||
<div class="grid">
|
||||
<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})`}">
|
||||
<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>
|
||||
|
||||
<div class="actions">
|
||||
<button @click="saveResult">Сохранить</button>
|
||||
<button @click="cleanResult">Очистить</button>
|
||||
<button @click="cancel">Отменить</button>
|
||||
<Save @click="saveResult"/>
|
||||
<Trash @click="cleanResult"/>
|
||||
<Back @click="cancel"/>
|
||||
<Preview @click="openPreview"/>
|
||||
</div>
|
||||
<MyDropMenu/>
|
||||
<MyDropMenu ref="dropMenu"/>
|
||||
<MyDialog v-model:show="isModalVisible" class="dialogWindow" :is-success=Boolean(listOfTrips.length)>
|
||||
<template #header>
|
||||
<strong v-if="listOfTrips.length">Код готов!</strong>
|
||||
<strong v-else>Код не готов!</strong>
|
||||
</template>
|
||||
<main>
|
||||
<p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
|
||||
<p v-else>Выстройте маршрут перед сохранением кода.</p>
|
||||
</main>
|
||||
<template #footer>
|
||||
<div v-if="listOfTrips.length">
|
||||
<button @click="isCodeViewVisible = true">Предпросмотр</button>
|
||||
<button @click="handleDownloadBtn">Скачать код</button>
|
||||
<button @click="copyAndToast(finallyText)">Скопировать код</button>
|
||||
</div>
|
||||
</template>
|
||||
</MyDialog>
|
||||
</div>
|
||||
|
||||
|
||||
<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>
|
||||
</template>
|
||||
<template #body>
|
||||
<p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
|
||||
<p v-else>Выстройте маршрут перед сохранением кода.</p>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div v-if="listOfTrips.length">
|
||||
<button @click="handleDownloadBtn">Скачать код</button>
|
||||
<button @click="copyAndToast(finallyText)">Скопировать код</button>
|
||||
<button @click="isModalVisible = false">ОК</button>
|
||||
</div>
|
||||
</template>
|
||||
</MyDialog>
|
||||
<CodeView v-model:show="isCodeViewVisible" :code="finallyText" :show="isCodeViewVisible"/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
html {
|
||||
background-image: radial-gradient(#383838e2, #222222);
|
||||
background-image: radial-gradient(#23aae3e2, #222222);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--side: 70px;
|
||||
--side: 75px;
|
||||
}
|
||||
|
||||
.wraper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0 80px 0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
padding: 3px;
|
||||
grid-template-columns: repeat(10, var(--side));
|
||||
gap: 10px;
|
||||
gap: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -356,11 +413,11 @@ html {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
text-shadow: -1px -1px 0 black,
|
||||
1px -1px 0 black,
|
||||
-1px 1px 0 black,
|
||||
1px 1px 0 black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.square:hover {
|
||||
@@ -380,19 +437,42 @@ html {
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: 10px;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 10px;
|
||||
background-color: #2f2f2f;
|
||||
|
||||
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||||
border: 2px solid rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.actions svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
.actions svg:hover {
|
||||
color: rgba(20, 104, 140, 0.89);
|
||||
}
|
||||
|
||||
.actions svg:active {
|
||||
transition: color 0s;
|
||||
color: #23aae3e2;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
border: 2px solid rgb(251, 251, 251);
|
||||
padding: 15px 30px;
|
||||
font-size: 15px;
|
||||
background-color: #383838;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
transition: 0.3s;
|
||||
padding: 20px 35px;
|
||||
/* background-color: red; */
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<pre><code class="language-python" v-html="highlighted"></code></pre>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, onMounted} from 'vue'
|
||||
import Prism from 'prismjs'
|
||||
import 'prismjs/components/prism-python'
|
||||
|
||||
const props = defineProps({
|
||||
code: {type: String, required: true},
|
||||
})
|
||||
|
||||
const highlighted = ref('')
|
||||
|
||||
function highlight() {
|
||||
// безопасно экранируем HTML и подсвечиваем через Prism
|
||||
const escaped = props.code
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
highlighted.value = Prism.highlight(escaped, Prism.languages['python'], 'python')
|
||||
}
|
||||
|
||||
onMounted(highlight)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
pre {
|
||||
padding-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import CustomButton from '@/components/UI/CustomButton.vue'
|
||||
import CodeBlock from "./CodeBlock.vue";
|
||||
import MovementButtons from "./MovementButtons.vue";
|
||||
const props = defineProps({
|
||||
code: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="code-view" v-if="show">
|
||||
<CustomButton
|
||||
@click.stop="$emit('update:show', false)">
|
||||
Вернуться к сохранению сгенерированного кода
|
||||
</CustomButton>
|
||||
<CodeBlock :code="code" />
|
||||
|
||||
<CustomButton
|
||||
@click.stop="$emit('update:show', false)">
|
||||
Вернуться к сохранению сгенерированного кода
|
||||
</CustomButton>
|
||||
<MovementButtons/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.code-view {
|
||||
background-color: #222222;
|
||||
overflow: auto;
|
||||
color: #eeeeee;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="movement-buttons">
|
||||
<button @click="scrollToTop" class="up">↑</button>
|
||||
<button @click="scrollToBottom" class="down">↓</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
function scrollToTop() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth' // Плавная прокрутка
|
||||
});
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
window.scrollTo({
|
||||
top: document.body.scrollHeight,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:root {
|
||||
--btnHeight: 50px;
|
||||
}
|
||||
.movement-buttons {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
right: 15px;
|
||||
bottom: calc(50% - 50px);
|
||||
}
|
||||
|
||||
.movement-buttons > button {
|
||||
width: auto;
|
||||
font-size: 15px;
|
||||
border: 2px solid #d0d0d0;
|
||||
color: white;
|
||||
background-color: #383838;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.movement-buttons > button {
|
||||
width: 30px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.up {
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
|
||||
.down {
|
||||
border-radius: 0 0 10px 10px;
|
||||
}
|
||||
</style>
|
||||
+72
-15
@@ -1,21 +1,22 @@
|
||||
<template>
|
||||
<transition name="modal-fade">
|
||||
<div class="modal-backdrop" @click="closeModal">
|
||||
<div class="modal-backdrop" v-if="show" @click.stop="onClose">
|
||||
<div class="modal" @click.stop>
|
||||
<header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
|
||||
<header :class="['modal-header', isSuccess ? 'modal-header-success' : 'modal-header-error']">
|
||||
<slot name="header">
|
||||
<strong>Заголовок по умолчанию</strong>
|
||||
</slot>
|
||||
<button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
|
||||
<button class="modal-btn-close" @click.stop="onClose"
|
||||
aria-label="Закрыть модальное окно">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<section class="modal-body">
|
||||
<slot name="body">Тело по умолчанию</slot>
|
||||
<slot>Тело по умолчанию</slot>
|
||||
</section>
|
||||
<footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
|
||||
<footer :class="['modal-footer', isSuccess ? 'modal-footer-success' : 'modal-footer-error']">
|
||||
<slot name="footer">
|
||||
<button @click="closeModal">Закрыть</button>
|
||||
<button @click.stop="onClose">Закрыть</button>
|
||||
</slot>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -24,20 +25,42 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const emit = defineEmits(['close'])
|
||||
const props = defineProps({
|
||||
import {defineEmits} from 'vue'
|
||||
import {useEventListener} from "@vueuse/core";
|
||||
|
||||
const emit = defineEmits({
|
||||
close: null,
|
||||
'update:show': false,
|
||||
})
|
||||
defineProps({
|
||||
isSuccess: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
default: true,
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
function closeModal() {
|
||||
emit('close');
|
||||
function onClose() {
|
||||
emit('update:show')
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
if (event.code === "Escape") {
|
||||
emit('update:show')
|
||||
}
|
||||
}
|
||||
useEventListener("keydown", handleKeydown);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--successColor: #4ee882
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -48,6 +71,7 @@ function closeModal() {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.modal {
|
||||
@@ -73,7 +97,7 @@ function closeModal() {
|
||||
}
|
||||
|
||||
.modal-header-success {
|
||||
color: #4AAE9B;
|
||||
color: var(--successColor);
|
||||
}
|
||||
|
||||
.modal-header-error {
|
||||
@@ -94,11 +118,17 @@ function closeModal() {
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid white;
|
||||
padding: 5px;
|
||||
color: white;
|
||||
color: black;
|
||||
font-size: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.modal-footer a {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.modal-footer-success button {
|
||||
background-color: #4AAE9B;
|
||||
background-color: var(--successColor);
|
||||
border: none;
|
||||
margin: 3px;
|
||||
}
|
||||
@@ -123,4 +153,31 @@ function closeModal() {
|
||||
color: red;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* Начало появления: ниже и прозрачный */
|
||||
.modal-fade-enter-from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Конец появления: на месте и видим */
|
||||
.modal-fade-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Начало исчезания: на месте и видим */
|
||||
.modal-fade-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Конец исчезания: выше и прозрачный */
|
||||
.modal-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Общие настройки анимации (скорость + плавность) */
|
||||
.modal-fade-enter-active,
|
||||
.modal-fade-leave-active {
|
||||
transition: transform 0.5s cubic-bezier(.22, .9, .31, 1), opacity 0.5s ease;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
</style>
|
||||
+160
-80
@@ -1,120 +1,200 @@
|
||||
<template>
|
||||
<div class="navigation-wrapper">
|
||||
<!-- Кнопка Бургер -->
|
||||
<button
|
||||
class="burger-btn"
|
||||
@click="toggleMenu"
|
||||
:class="{ 'is-active': isOpen }"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</button>
|
||||
<div class="navigation-wrapper">
|
||||
<!-- Кнопка Бургер -->
|
||||
<button class="burger-btn" @click="toggleMenu" :class="{ 'is-active': isOpen }" aria-label="Menu">
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</button>
|
||||
|
||||
<!-- Затемнение заднего фона (Overlay) -->
|
||||
<transition name="fade">
|
||||
<div v-if="isOpen" class="overlay" @click="closeMenu"></div>
|
||||
</transition>
|
||||
<!-- Затемнение заднего фона (Overlay) -->
|
||||
<transition name="fade">
|
||||
<div v-if="isOpen" class="overlay" @click="closeMenu"></div>
|
||||
</transition>
|
||||
|
||||
<!-- Выпадающая панель -->
|
||||
<transition name="slide">
|
||||
<aside v-if="isOpen" class="side-panel">
|
||||
<div class="menu-header">
|
||||
<h1>SkyVue</h1>
|
||||
</div>
|
||||
|
||||
<nav class="menu-content">
|
||||
<a href="https://clover.coex.tech/ru/simple_offboard.html" target="_blank">COEX Автономный полет</a>
|
||||
<slot>
|
||||
<p class="placeholder">Здесь будут ваши ссылки...</p>
|
||||
</slot>
|
||||
</nav>
|
||||
</aside>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- Выпадающая панель -->
|
||||
<transition name="slide">
|
||||
<aside v-if="isOpen" class="side-panel">
|
||||
<div class="menu-header">
|
||||
<h1>SkyVue</h1>
|
||||
</div>
|
||||
|
||||
<nav class="menu-content">
|
||||
<custom-button
|
||||
@click="openInfoCard(item)"
|
||||
v-for="item in informationForDirectory"
|
||||
>
|
||||
{{ item.title }}
|
||||
</custom-button>
|
||||
</nav>
|
||||
</aside>
|
||||
</transition>
|
||||
<MyDialog isSuccess v-model:show="isModalVisible" @close="handleOkBtn">
|
||||
<template #header>
|
||||
<strong>{{ infoCard.title }}</strong>
|
||||
</template>
|
||||
<main>
|
||||
<p>{{ infoCard.body }}</p>
|
||||
</main>
|
||||
<template #footer>
|
||||
<div class="navigation-wrapper__footer">
|
||||
<custom-button :to="infoCard.hrefToCourse" title="Посмотреть на Stepik">Курс</custom-button>
|
||||
<custom-button :to="infoCard.hrefToDoc" title="Посмотреть в официальной документации">Документация
|
||||
</custom-button>
|
||||
<custom-button @click="handleOkBtn">ОК</custom-button>
|
||||
</div>
|
||||
</template>
|
||||
</MyDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {ref} from 'vue';
|
||||
import MyDialog from "@/components/MyDialog.vue";
|
||||
import CustomButton from '@/components/UI/CustomButton.vue'
|
||||
import informationForDirectory from "../data/informationForDirectory";
|
||||
import {useEventListener} from "@vueuse/core";
|
||||
|
||||
const isOpen = ref(false);
|
||||
const isModalVisible = ref(false);
|
||||
const infoCard = ref({})
|
||||
|
||||
function handleOkBtn() {
|
||||
isModalVisible.value = false
|
||||
isOpen.value = true
|
||||
}
|
||||
|
||||
const toggleMenu = () => {
|
||||
isOpen.value = !isOpen.value;
|
||||
isOpen.value = !isOpen.value;
|
||||
};
|
||||
|
||||
const closeMenu = () => {
|
||||
isOpen.value = false;
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
function openInfoCard(obj) {
|
||||
isModalVisible.value = true
|
||||
isOpen.value = false
|
||||
infoCard.value = obj
|
||||
}
|
||||
|
||||
const handleKeydown = (event) => {
|
||||
if (event.code === "Escape" && isOpen.value) {
|
||||
event.preventDefault();
|
||||
closeMenu();
|
||||
}
|
||||
};
|
||||
useEventListener("keydown", handleKeydown);
|
||||
|
||||
// Экспортируем методы, если захотим управлять меню извне
|
||||
defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
|
||||
defineExpose({open: () => (isOpen.value = true), close: closeMenu});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.burger-btn {
|
||||
position: fixed; /* Она всегда на одном месте при скролле */
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.508);
|
||||
border: 1px solid #383838;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.508);
|
||||
border: 1px solid #383838;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
h1{
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #383838; /* Ярко-красный цвет для теста */
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #383838;
|
||||
/* Ярко-красный цвет для теста */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Анимация бургера в крестик */
|
||||
.is-active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
|
||||
.is-active .line:nth-child(2) { opacity: 0; }
|
||||
.is-active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
|
||||
.is-active .line:nth-child(1) {
|
||||
transform: translateY(6px) rotate(45deg);
|
||||
}
|
||||
|
||||
.is-active .line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.is-active .line:nth-child(3) {
|
||||
transform: translateY(-6px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* Боковая панель */
|
||||
.side-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
padding: 0 20px 20px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
background-image: radial-gradient(#23aae3e2, #222222);
|
||||
color: white;
|
||||
z-index: 2;
|
||||
padding: 0 20px 20px;
|
||||
overflow-y: scroll;
|
||||
overflow: auto;
|
||||
border-right: white 2px solid;
|
||||
}
|
||||
|
||||
/* Затемнение фона */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
background-color: #333333;
|
||||
opacity: 90%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.navigation-wrapper__footer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Анимации появления */
|
||||
.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
|
||||
.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: transform 0.39s ease;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
.slide-enter-from,
|
||||
.slide-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #00e44c;
|
||||
/* цвет текста */
|
||||
font-style: italic;
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.39s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
isSuccess: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
to: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a v-if="to" :href="props.to" target="_blank" class="btn">
|
||||
<slot />
|
||||
</a>
|
||||
<button v-else class="btn">
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
padding: 5px;
|
||||
background-color: #383838;
|
||||
color: white;
|
||||
width: 100%;
|
||||
font-size: 17px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: var(--successColor);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M7.29292 11.7071L2.58582 7L7.29292 2.29289L8.70714 3.70711L6.41424 6H14C17.866 6 21 9.13401 21 13C21 16.866 17.866 20 14 20H6V18H14C16.7614 18 19 15.7614 19 13C19 10.2386 16.7614 8 14 8H6.41424L8.70714 10.2929L7.29292 11.7071Z"
|
||||
fill="black"/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
|
||||
<g id="Reading_Mode" data-name="Reading Mode">
|
||||
<path d="M12,20C6,20,1.35,12.84,1.16,12.54a1,1,0,0,1,0-1.08C1.35,11.16,6,4,12,4s10.65,7.16,10.84,7.46a1,1,0,0,1,0,1.08C22.65,12.84,18,20,12,20ZM3.22,12c1.14,1.56,4.72,6,8.78,6s7.65-4.43,8.78-6C19.64,10.44,16.06,6,12,6S4.35,10.43,3.22,12ZM12,16a4,4,0,1,1,4-4A4,4,0,0,1,12,16Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,12,10Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg data-name="Livello 1" id="Livello_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
|
||||
<title/>
|
||||
<path d="M61.88,93.12h0a3,3,0,0,0,.44.36l.24.13a1.74,1.74,0,0,0,.59.24l.25.07h0a3,3,0,0,0,1.16,0l.26-.08.3-.09a3,3,0,0,0,.3-.16l.21-.12a3,3,0,0,0,.46-.38L93,66.21A3,3,0,1,0,88.79,62L67,83.76V3a3,3,0,0,0-6,0V83.76L39.21,62A3,3,0,0,0,35,66.21Z"/>
|
||||
<path d="M125,88a3,3,0,0,0-3,3v22a9,9,0,0,1-9,9H15a9,9,0,0,1-9-9V91a3,3,0,0,0-6,0v22a15,15,0,0,0,15,15h98a15,15,0,0,0,15-15V91A3,3,0,0,0,125,88Z"/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup>
|
||||
</script>
|
||||
<template>
|
||||
<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<title/>
|
||||
<g data-name="Layer 2" id="Layer_2">
|
||||
<path d="M20,29H12a5,5,0,0,1-5-5V12a1,1,0,0,1,2,0V24a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V12a1,1,0,0,1,2,0V24A5,5,0,0,1,20,29Z"/>
|
||||
<path d="M26,9H6A1,1,0,0,1,6,7H26a1,1,0,0,1,0,2Z"/>
|
||||
<path d="M20,9H12a1,1,0,0,1-1-1V6a3,3,0,0,1,3-3h4a3,3,0,0,1,3,3V8A1,1,0,0,1,20,9ZM13,7h6V6a1,1,0,0,0-1-1H14a1,1,0,0,0-1,1Z"/>
|
||||
<path d="M14,23a1,1,0,0,1-1-1V15a1,1,0,0,1,2,0v7A1,1,0,0,1,14,23Z"/>
|
||||
<path d="M18,23a1,1,0,0,1-1-1V15a1,1,0,0,1,2,0v7A1,1,0,0,1,18,23Z"/>
|
||||
</g>
|
||||
<g id="frame">
|
||||
<rect class="cls-1" height="32" width="32"/>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cls-1{fill:none;}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
export default [
|
||||
{
|
||||
title: 'ROS',
|
||||
body: 'ROS (Robot Operating System) — экосистема для программирования роботов. В приложении через ROS дрон получает команды, передает телеметрию и данные с камеры.',
|
||||
hrefToDoc: 'https://www.ros.org/',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
|
||||
},
|
||||
{
|
||||
title: 'OpenCV',
|
||||
body: 'OpenCV (Open Source Computer Vision Library) — библиотека компьютерного зрения. С её помощью дрон распознает цвета платформ и считывает QR-коды.',
|
||||
hrefToDoc: 'https://opencv.org/',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
|
||||
},
|
||||
{
|
||||
title: 'navigate_wait',
|
||||
body: 'Navigate_wait — функция из библиотеки Clover. Отправляет дрон в точку и ждёт, пока он туда долетит, и только потом выполняет следующую команду. Это важно, потому что обычная команда navigate не ждет: дрон ещё летит, а скрипт уже бежит дальше — из-за этого следующие команды могут выполняться раньше времени.',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
|
||||
},
|
||||
{
|
||||
title: 'Нода (Node)',
|
||||
body: 'Нода (Node/узел) в ROS - исполняемая программа, которая выполняет одну конкретную задачу. В сгенерированном коде вся логика полета и обработки камеры находится внутри одной ноды. Это позволяет запускать, останавливать и отлаживать программу как единое целое. ',
|
||||
hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
|
||||
},
|
||||
{
|
||||
title: 'Топик (Topic)',
|
||||
body: 'Топик (Topic) в ROS — канал обмена данными. Например, камера публикует изображение в топик, а ваш скрипт подписывается на него и получает кадры.',
|
||||
hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
|
||||
},
|
||||
{
|
||||
title: 'Издатель (Publisher)',
|
||||
body: 'Издатель (Publisher) в ROS — часть программы, которая отправляет данные в топик. Например, если нужно передать команду другому узлу или опубликовать координаты дрона — создается издатель, который публикует сообщения в нужный канал. Подписчики других узлов могут эти данные получать. ',
|
||||
hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
|
||||
},
|
||||
{
|
||||
title: 'Подписчик (Subscriber)',
|
||||
body: 'Подписчик (Subscriber) в ROS — часть программы, которая получает данные из топика. Например, чтобы дрон "видел" изображение с камеры или считывал свои координаты, создаётся подписчик на соответствующий топик. Как только в топике появляются новые данные, подписчик автоматически их обрабатывает.',
|
||||
hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
|
||||
},
|
||||
{
|
||||
title: 'Сервис',
|
||||
body: 'Сервис в ROS - способ вызвать функцию робота и сразу получить ответ. В отличие от топика, где данные идут постоянно, сервис работает по принципу "запрос — ответ". Например, команда navigate — это сервис: вы отправляете координаты, а робот отвечает "команда принята". Команда get_telemetry возвращает текущие координаты дрона.',
|
||||
hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
|
||||
},
|
||||
{
|
||||
title: 'Системы координат',
|
||||
body: 'Определяют, откуда отсчитывать координаты дрона. body — относительно самого дрона (вперед/назад/влево/вправо). aruco_map — относительно карты с ArUco-метками, где координаты привязаны к неподвижным маркерам. Выбор правильной системы координат позволяет дрону точно выполнять команды: лететь относительно себя для коротких маневров или по глобальной карте для точной навигации.',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
|
||||
},
|
||||
{
|
||||
title: 'ArUco-маркер',
|
||||
body: 'ArUco-маркер — квадратный визуальный маркер, который камера дрона может распознавать. Используется для навигации: по положению маркера дрон определяет свои координаты в пространстве.',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
|
||||
hrefToDoc: 'https://klever-doc.tech/ROS1/ru/aruco.html'
|
||||
},
|
||||
{
|
||||
title: 'Симулятор (Gazebo)',
|
||||
body: 'Симулятор (Gazebo) — виртуальная среда, где дрон ведет себя как в реальности. Позволяет безопасно тестировать полетные задания перед запуском на реальном дроне.',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2278310/step/1?unit=2312564',
|
||||
hrefToDoc: 'https://klever-doc.tech/ROS1/ru/simulation.html'
|
||||
},
|
||||
{
|
||||
title: 'unregister()',
|
||||
body: 'unregister() — метод, который отключает подписчика от топика. Используется, чтобы перестать получать данные, когда они больше не нужны (например, после сканирования QR-кода).',
|
||||
hrefToCourse: 'https://stepik.org/lesson/2272845/step/1?unit=2307058',
|
||||
hrefToDoc: 'https://docs.ros.org/en/diamondback/api/rospy/html/rospy.topics.Subscriber-class.html'
|
||||
},
|
||||
]
|
||||
@@ -15,10 +15,12 @@ const createWindow = () => {
|
||||
const mainWindow = new BrowserWindow({
|
||||
width: width,
|
||||
height: height,
|
||||
icon: './public/images/logo32x32.jpg',
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
},
|
||||
});
|
||||
mainWindow.menuBarVisible = false;
|
||||
|
||||
// and load the index.html of the app.
|
||||
if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
|
||||
|
||||
@@ -29,5 +29,9 @@
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
|
||||
import Prism from 'prismjs'
|
||||
import 'prismjs/themes/prism-okaidia.css'
|
||||
|
||||
|
||||
import ContextMenu from '@imengyu/vue3-context-menu'
|
||||
createApp(App).use(ContextMenu).mount('#app');
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
def color_detection(data, print_type='str'):
|
||||
export default `def color_detection(data, print_type='str'):
|
||||
'''определение цвета'''
|
||||
|
||||
frame = bridge.imgmsg_to_cv2(data, 'bgr8')
|
||||
@@ -34,7 +34,7 @@ def color_detection(data, print_type='str'):
|
||||
color = 'green'
|
||||
elif r > b + 20 and r > g + 20 and r > 100:
|
||||
color = 'red'
|
||||
elif r > 150 and g > 150 and g > 150:
|
||||
elif r > 150 and g > 150 and b > 150:
|
||||
color= 'white'
|
||||
else:
|
||||
color = None
|
||||
@@ -42,4 +42,4 @@ def color_detection(data, print_type='str'):
|
||||
<<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()
|
||||
color_sub.unregister()`
|
||||
@@ -1,4 +1,4 @@
|
||||
#!/usr/bin/env python3
|
||||
export default `#!/usr/bin/env python3
|
||||
|
||||
import rospy
|
||||
import time
|
||||
@@ -102,4 +102,4 @@ def main():
|
||||
land() #посадка
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
main()`
|
||||
@@ -1,4 +1,4 @@
|
||||
def qr_detection(data):
|
||||
export default `def qr_detection(data):
|
||||
cv_image = bridge.imgmsg_to_cv2(data, 'bgr8')
|
||||
barcodes = pyzbar.decode(cv_image)
|
||||
|
||||
@@ -9,4 +9,4 @@ def qr_detection(data):
|
||||
<<separator>>
|
||||
qr_sub = rospy.Subscriber('main_camera/image_raw', Image, qr_detection, queue_size=1)
|
||||
rospy.sleep(2)
|
||||
qr_sub.unregister()
|
||||
qr_sub.unregister()`
|
||||
@@ -1,7 +1,7 @@
|
||||
import iziToast from 'iziToast';
|
||||
|
||||
iziToast.settings({
|
||||
timeout: 3000,
|
||||
timeout: 2500,
|
||||
closeOnEscape: true,
|
||||
closeOnClick : true,
|
||||
resetOnHover: false,
|
||||
|
||||
Reference in New Issue
Block a user