Детальная информация

Тема выпускной квалификационной работы: «Построение пользовательского интерфейса на базе JavaScript на основе систем картографии для группового управления». Данная работа посвящена разработке современного веб-интерфейса, предназначенного для управления группами дронов с использованием картографических систем. Основой интерфейса выступают технологии HTML, CSS и JavaScript в связке с библиотекой Leaflet.js, обеспечивающей отображение объектов на карте, и Electron.js, позволяющей развернуть интерфейс как настольное приложение. В ходе исследования были поставлены и решены следующие задачи: 1. Проектирование и реализация пользовательского интерфейса с нуля; 2. Интеграция картографических сервисов и отображение объектов в реальном времени; 3. Разработка механизмов группового управления и командной логики; 4. Оптимизация визуального отображения и пользовательского взаимодействия; 5. Сравнительный анализ двух версий интерфейса, реализованных в HTML-файлах v12.html и finalv4.html. Работа выполнена с применением современных инструментов веб-разработки и демонстрирует возможности интерфейсного управления в системах с распределёнными объектами на примере дронов.

The subject of the final qualification work is:“Design of a JavaScript-based user interface using cartographic systems for group control”. This work is devoted to the development of a modern web-based interface for managing groups of drones via map visualization systems. The project utilizes HTML, CSS, and JavaScript technologies, with Leaflet.js used for map rendering and object tracking, and Electron.js employed to convert the web application into a desktop client. The main research tasks included: 1. Design and implementation of the interface from scratch; 2. Integration of mapping systems with real-time (or simulated) object display; 3. Development of group control functionality and command logic; 4. Optimization of UI layout and user experience; 5. Comparative analysis of the two interface versions: v12.html and finalv4.html. Modern frontend technologies were used throughout the work, showcasing a scalable solution for visual control of distributed drone systems.

• ВВЕДЕНИЕ
• 1 ЛИТЕРАТУРНЫЙ ОБЗОР
  • 1.1 Обзор технологий веб-картографии и визуализации
  • 1.2 Интерфейсы управления группами БПЛА
  • 1.3 Стандарты проектирования UI/UX
  • 1.4 Симуляционные сценарии и модель управления
  • 1.5 Сценарии управления дронами по Бредихину
• 2 ПОСТАНОВКА ПРОБЛЕМЫ
• 3 МЕТОДОЛОГИЯ ПРОЕКТИРОВАНИЯ ИНТЕРФЕЙСА
• 4. АРХИТЕКТУРА РАЗРАБАТЫВАЕМОЙ СИСТЕМЫ
  • Компонентная структура
  • 4.1 Структурная диаграмма интерфейса v12.html
    • Основные особенности:
    • Слой данных
    • Симуляция движения
  • Рисунок 2 — Архитектура пользовательского интерфейса v12.html: компоненты и взаимодействие
  • 4.2 Структурная диаграмма интерфейса finalv4.html
    • Основные особенности:
    • Соответствующая архитектура
    • UI-модуль (HTML, CSS, Leaflet.js)
    • Модуль логики (JavaScript)
    • Слой данных (JS-объекты состояния)
    • Модуль симуляции (таймер, анимация)
    • Обработка команд
  • Рисунок 4 — Архитектура пользовательского интерфейса finalv4.html: компоненты и взаимодействие
  • 4.3 Обработка пользовательского события: кнопка → карта → окно
  • 4.4 Алгоритм движения дрона при патрулировании
• 5. ИНТЕРФЕЙС: КОНЦЕПЦИЯ, ПРОТОТИПИРОВАНИЕ И ЛОГИКА ВЗАИМОДЕЙСТВИЯ
  • 5.1 Основные компоненты интерфейса
    • Индикаторы и визуализация:
  • Рисунок 12 — Отображение групповых маршрутов на карте.
  • 5.2 Примеры из finalv4.html и v12.html
  • 5.3 Логика взаимодействия
• 6. ФОРМУЛЫ И МАТЕМАТИЧЕСКИЕ МОДЕЛИ ДВИЖЕНИЯ
  • 6.1 Орбитальное (круговое) движение вокруг центра группы
  • 6.2. Выравнивание по направлению движения (ориентация)
    • Фрагмент кода:
  • 6.3 Экстренная остановка (Аварийное торможение)
    • Фрагмент кода
  • 6.4. Движение к нескольким целевым точкам (патрулирование)
    • Фрагмент кода
• 7 ГРУППОВОЕ УПРАВЛЕНИЕ ДРОНАМИ: СОЗДАНИЕ, ИЗМЕНЕНИЕ И УДАЛЕНИЕ
  • 7.1 Создание новой группы дронов (с обработчиком нажатия кнопки)
    • Фрагмент кода
  • 7.2 Добавление дрона в существующую группу
    • Фрагмент кода
  • 7.3 Перемещение дрона из одной группы в другую
    • Фрагмент кода
  • 7.4 Удаление дрона из группы
    • Фрагмент кода
  • 7.5 Обновление состояния кнопок интерфейса
    • Фрагмент кода
• 8 ВИЗУАЛИЗАЦИЯ: СЛОИ КАРТЫ И ПОЛЯ ЗРЕНИЯ КАМЕРЫ
• 9 КОМПОНЕНТЫ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА И ОБРАТНАЯ СВЯЗЬ
  • Фрагмент HTML (из finalv4.html)
  • Фрагмент CSS:
  • JavaScript логика отображения
• 10 АРХИТЕКТУРА ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА: ИЕРАРХИЯ КОМПОНЕНТОВ И СОБЫТИЙ
  • 10.1 Иерархия компонентов (расширенная)
  • 10.2 Событийная система взаимодействия
    • Фрагмент JavaScript (управление событиями):
• 11. ТЕСТОВЫЕ СЦЕНАРИИ И ПРИМЕРЫ ПОЛЬЗОВАТЕЛЬСКОГО ВЗАИМОДЕЙСТВИЯ
  • 11.1 Сценарий 1: Создание новой группы
  • 11.2 Сценарий 2: Перемещение дрона в другую группу
  • 11.3 Сценарий 3: Отображение поля зрения камеры
  • 11.4 Сценарий 4: Запуск всплывающего окна управления полётом
  • 11.5 Сценарий 5: Обратная связь при ошибке
• 12. ВЫВОДЫ И РЕКОМЕНДАЦИИ
  • 12.1 Основные достижения работы
  • 12.2 Рекомендации по дальнейшему развитию
  • 12.3 Потенциал расширения до полнофункциональной системы
    • Назначение компонентов на диаграмме:
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ