4.3.7 Графический пользовательский интерфейс

Графический пользовательский интерфейс программы реализован с помощью языка описания разметки HTML5 и языка описания стилей CSS.

Элементы графического пользовательского интерфейса программы отображаются поверх элемента canvas, который используется для отрисовки трёхмерной графики.

Для упорядочивания элементов графического пользовательского интерфейса используется CSS Grid Layout [13].

Для масштабирования элементов графического пользовательского интерфейса в зависимости от высоты области просмотра браузера размер шрифта корневого элемента html устанавливается с помощью единицы измерения vh, которая обозначает проценты высоты области просмотра браузера, а размеры всех элементов графического пользовательского интерфейса устанавливаются с помощью единицы измерения rem, которая обозначает размер шрифта корневого элемента html.

4.3.8 Сохранение данных

Сохранение данных в программе реализовано с помощью Web Storage API [14], который позволяет сохранять данные в виде ключа и значения в файлах браузера.

Работа с Web Storage API реализована в модуле persistence.js, который содержит объект Persistence. Объект Persistence предназначен для загрузки и сохранения настроек геймпада и прогресса в режиме обучения. Доступ к сохранённым значениям реализован с помощью свойств. Так как Web Storage API позволяет хранить только строковые значения, то для загрузки и сохранения числовых значений используются функции loadNumber() и saveNumber().

Код функции loadNumber() представлен в листинге 7:

Листинг 7. Функция loadNumber().

function loadNumber(key, defaultValue) {

let value = localStorage.getItem(key);

if (value == null) return defaultValue;

return Number.parseInt(value);

}

Код функции saveNumber() представлен в листинге 8:

Листинг 8. Функция saveNumber().

function saveNumber(key, value)

localStorage.setItem(key, value);

}

Объект Window.localStorage обеспечивает доступ к Web Storage API и позволяет сохранять данные в файлах браузера с неограниченным сроком хранения.

4.3.9. Модули программы

Исходный код программы оформлен в виде модулей JavaScript.

Модули, которые не были описаны ранее в тексте работе:

- main.js;

- state.js;

- mode.js;

- tips.js.

Модуль main.js содержит основной скрипт программы, в котором выполняется загрузка файлов, создание, обновление и отрисовка трёхмерной сцены и реализуется логика работы программы (начало полёта заново, остановка полёта, продолжение полёта, проверка завершения уроков и выполнения заданий и т. д.).

Модуль state.js содержит объект State, который представляет перечисление состояний программы.

Модуль mode.js содержит объект Mode, который представляет перечисление режимов программы (режимы свободного полёта и обучения).

Модуль tips.js содержит объект Tips, который предназначен для хранения текста подсказок.

Диаграмма зависимостей модулей программы представлена на рис. 16:

Рисунок 16. Диаграмма зависимостей модулей программы.

3.4 Использование программы

Далее представлены скриншоты, которые показывают использование программы (рис. 17-22):

Рисунок 17. Режим свободного полёта

Рисунок 18. Режим обучения (область, в которой должен находиться воздушный змей, отображается жёлтым цветом)

Рисунок 19. Меню настройки скорости ветра и длины лееров в режиме свободного полёта.

Рисунок 20. Меню выбора урока в режиме обучения.

Рисунок 21. Меню настройки геймпада.

Рисунок 22. Меню управления прогрессом в режиме обучения.

В этой главе были представлены функциональные требования к программе, обоснован выбор технологий и инструментов реализации, описана реализация трёхмерной модели воздушного змея, трёхмерной сцены с помощью библиотеки three.js, физической модели воздушного змея с помощью математических возможностей библиотеки three.js, управления воздушным змеем с помощью Gamepad API, режимов свободного полёта и обучения, графического пользовательского интерфейса и сохранения данных с помощью Web Storage API. Также было описано назначение модулей программы и показаны примеры использования программы.

Заключение

В рамках работы были выполнены следующие задачи:

- проведён обзор и анализ подходов к моделированию воздушного змея в области преобразования энергии ветра с помощью летательных аппаратов (Airborne Wind Energy, [2], [3], [4]);

- проведён обзор и анализ существующих решений, которые могут быть использованы при обучении управлению спортивным воздушным змеем (анимации на сайте компании Prism и игра Stunt Kite Masters VR);

- выбрана физическая модель воздушного змея из работы [2], так как она может быть использована для спортивного воздушного змея;

- выбраны технологии и инструменты реализации (язык программирования JavaScript, язык описания разметки HTML5, язык описания стилей CSS, библиотека three.js, интегрированная среда разработки WebStorm и программа для трёхмерного моделирования Blender);

- создана трёхмерная модель воздушного змея с помощью программы Blender;

- реализована физическая модель воздушного змея с помощью классов Matrix4 и Vector4 библиотеки three.js;

- модифицирована физическая модель воздушного змея для реалистичного движения воздушного змея.

- выбраны параметры физической модели воздушного змея для реалистичной движения воздушного змея.

- созданы интерактивные уроки для обучения управлению воздушным змеем.

- разработана техническая документация к программе (техническая документация представлена в приложениях А-Г).

В результате работы был разработан симулятор спортивного воздушного змея с использованием веб-технологий. Программа позволяет управлять воздушным змеем с помощью геймпада с двумя аналоговыми стиками и поддерживает режимы свободного полёта и обучения. В режиме обучения доступны интерактивные уроки с заданиями и отображается область, в которой должен находиться воздушный змей. Прогресс в режиме обучения сохраняется в файлах браузера для продолжения обучения в любое время.

Возможными направлениями дальнейшей работы являются:

- добавление возможности выполнения трюков, которые требуют сильного ослабления лееров (требуется изменение модели воздушного змея);

- добавление возможности изменения внешнего вида воздушного змея;

- добавление возможности изменения внешнего вида трёхмерной сцены;

- добавление поддержки мобильных устройств и сенсорного управления воздушным змеем;

- добавление поддержки виртуальной реальности с помощью возможностей библиотеки three.js;

- создание установочных пакетов для конкретных платформ для использования программы не в браузере.

Список использованных источников

1.Two-line pilot's guide [Электронный ресурс] / Prism Kite Technology. Режим доступа: https://prismkites.com/wp-content/uploads/2016/04/Dual-Line-Manual.pdf, свободный (дата обращения 25.04.2020).

2.G. Sбnchez-Arriaga. Modelling and dynamics of a two-line kite / G. Sбnchez-Arriaga, M. Garcнa-Villalba, R. Schmehl // Applied Mathematical Modelling - 2017 - vol. 47 ? С. 473-486.

3.G. Sбnchez-Arriaga. A constraint-free flight simulator package for airborne wind energy systems / G. Sбnchez-Arriaga, A. Pastor-Rodrнguez, R. Borobia- Moreno, R. Schmehl // Journal of Physics Conference Series - 2018 ? vol. 1037 ? С. 062018.

4.G. Sбnchez-Arriaga. A lagrangian flight simulator for airborne wind energy systems / G. Sбnchez-Arriaga, A. Pastor-Rodrнguez, M. Sanjurjo-Rivo, R. Schmehl // Applied Mathematical Modelling ? 2019 ? vol. 69 ? С. 665-684.

5.Dual-line Trick Animations | Prism Kites | Prism Kite Technology [Электронный ресурс] / Prism Kite Technology. Режим доступа: https://prismkites.com/dual-line-trick-animations-prism-kites/, свободный (дата обращения 25.04.2020).

6.Stunt Kite Masters VR | Immersive Virtual Reality | HandyGames [Электронный ресурс] / HandyGames. Режим доступа: https://handy-games.com/en/games/stunt-kite-masters-vr/, свободный (дата обращения 25.04.2020).

7.three.js - JavaScript 3D library [Электронный ресурс] / three.js. Режим доступа: https://threejs.org/, свободный (дата обращения 25.04.2020).

8.WebGL: 2D and 3D graphics for the web - Web APIs | MDN [Электронный ресурс] / Mozilla. Режим доступа: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API, свободный (дата обращения 25.04.2020).

9.glTF Overview - The Khronos Group Inc [Электронный ресурс] / The Khronos Group Inc. Режим доступа: https://www.khronos.org/gltf/, свободный (дата обращения 25.04.2020).

10.Classic Skybox | 2D Sky | Unity Asset Store [Электронный ресурс] / Unity Technologies. Режим доступа: https://assetstore.unity.com/packages/2d/textures-materials/sky/classic-skybox-24923, свободный (дата обращения 21.05.2020).

11.JavaScript modules - JavaScript | MDN [Электронный ресурс] / Mozilla. Режим доступа: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules, свободный (дата обращения 25.04.2020).

12.Gamepad API - Web APIs | MDN [Электронный ресурс] / Mozilla. Режим доступа: https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API, свободный (дата обращения 25.04.2020).

13.CSS Grid Layout - CSS: Cascading Style Sheets | MDN [Электронный ресурс] / Mozilla. Режим доступа: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout, свободный (дата обращения 22.05.2020).

14.Web Storage API - Web APIs | MDN [Электронный ресурс] / Mozilla. Режим доступа: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API, свободный (дата обращения 22.05.2020).

Размещено на Allbest.ru