Данная инструкция описывает процесс установки экземпляра программного обеспечения, предназначенного для добавления интерактивных элементов (булавок, векторных фигур и подсказок) на изображения, без необходимости кодирования.

Ниже приведены требования, подготовка, шаги установки, использование, рекомендации и устранение неполадок.

Для использования программы необходимо иметь:

• браузер, поддерживающий HTML5, CSS3 и JavaScript (рекомендуется использовать последние версии популярных браузеров: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari);

• операционная система: Windows, macOS, Linux (для локальной работы). Веб-приложение может работать на всех операционных системах через браузер.

Перед установкой программного обеспечения убедитесь, что у вас есть доступ к:

• исходным файлам программного обеспечения: HTML, CSS, JavaScript;

• интернет-соединению для загрузки изображений и подключения к серверу (если требуется).

3.1. Загрузка исходных файлов

1. Получите исходные файлы программного обеспечения, состоящие из:

○ index.html — основной HTML-файл;

○ style.css — файл стилей для визуализации;

○ script.js — JavaScript-файл, реализующий логику программы.

Эти файлы могут быть предоставлены вам в виде архива (например, .zip), или они могут быть размещены в репозитории GitHub/Bitbucket.

2. Если вам предоставлен архив:

○ разархивируйте его в удобную директорию на вашем компьютере.

Пример: если файл называется interactive-image.zip, вы можете разархивировать его в директорию, например, C:\InteractiveImage\.

3.2. Запуск на локальном сервере

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

3.3. Запуск без локального сервера

Если локальный сервер не требуется, достаточно открыть файл index.html в любом браузере.

1. Перейдите в директорию, где находятся исходные файлы.

2. Дважды щёлкните по файлу index.html, чтобы открыть его в браузере.

1. Загрузите изображение: на странице будет отображено изображение (предположительно файл с расширением .jpg, .png или другое поддерживаемое изображение).

2. Добавление интерактивных элементов:

○ для добавления булавки или подсказки просто кликните на изображение. Булавка появится в точке клика;

○ для создания векторных фигур (например, прямоугольников или кругов) используйте соответствующие кнопки, добавленные на страницу. Эти элементы можно будет разместить на изображении.

3. Сохранение состояния: программа автоматически сохраняет состояние (позиции булавок, фигуры и подсказки) в localStorage браузера, так что даже при перезагрузке страницы они будут восстановлены.

1. Поддержка браузеров: программа должна работать в современных браузерах. Для обеспечения лучшей совместимости используйте последние версии браузеров.

2. Регулярные обновления: при работе с программой можно периодически проверять обновления на сервере или в репозиториях, чтобы получить последние улучшения или исправления.

• ошибка загрузки страницы: убедитесь, что файлы находятся в правильной директории и что ваш браузер поддерживает нужные технологии;

• не загружается изображение: проверьте путь к изображению. Изображение должно быть доступно по указанному пути;

• невозможность добавить элементы: убедитесь, что JavaScript включён в вашем браузере. Для этого в настройках браузера убедитесь, что скрипты разрешены.

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