Инструкция для настройки виджета навигации (ver. 2.0)

Материал из SmartPlayer

Описание ситуации

Один из важных и технически сложных продуктов реализованных компанией SmartPlayer — виджет работающей с навигацией в помещениях. Услышав пожелания заказчиков компания SmartPlayer решила переработать и улучшить данный виджет. Виджет был кардинально переработан и стал простым, понятным, быстрым и стабильным в своей работе. На этой странице будет описано как правильно настраивать и взаимодействовать с новой версией виджета навигации.

Добавление виджета в личный кабинет

Чтобы добавить данный виджет в личный кабинет пользователю необходимо запросить у специалиста технической поддержки виджет. Он будет предоставлен в формате zip-архива.

Пример виджета в формате zip-рхива

После пользователь должен авторизоваться в личном кабинете и перейти в раздел «Контент».

Пример отображения раздела «Контент» в личном кабинете

В разделе "Контент" необходимо перетянуть данный виджет из локального хранилища в раздел "Контент". После того как пользователь перенесет виджет в личный кабинет он отобразиться в списке с контентом.

Пример отображения переноса виджета с помощью drag-n-drop
Если у пользователя много различного контента в личном кабинете, то он может воспользоваться функцией сортировки и выбрать нужный тип контента «Виджет». Воспользовавшись данной функциональностью, он сможет просмотреть все добавленные в личный кабинет виджеты.
Пример отображения виджета и режима правильной сортировки, для более удобного поиска виджета

Главная страница виджета

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

Пример отображения главной страницы виджета навигации

На главной странице виджета пользователю будет показано множество настроек, но на текущем этапе начала настройки его интересует область для управления виджетом. В эту область входит:

  • кнопка «Настройки», которая позволит произвести общую настройку виджета;
  • иконка позволяющая растянуть виджет на весь экран;
  • иконка в виде «?» позволяющая ознакомиться с первоначальной инструкцией по настройке и работе виджета.
Пример отображения области управления виджетом

Порядок настройки элементов виджета

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

Общие настройки виджета

Чтобы перейти в общие настройки для всего виджета пользователю необходимо кликнуть на кнопку «Настройки» в левом верхнем углу.

Пример отображения кнопки «Настройки» в виджете навигации

После нажатия кнопки откроется страница со списком настроек виджета.

Пример отображения страницы настроек виджета

Список состоит из следующих параметров для настройки:

  • выбор языка — позволяет пользователю выбрать необходимый язык для работы виджета. Доступно пять языков: русский, английский, португальский, испанский, казахский;
  • время сессии пользователя — указать значения, которое будет использоваться для перехода в режим ожидания виджета. Указанное значение измеряется в секундах;
  • поле «Ключ тега для здания» — параметр для взаимодействия с устройством и его тегом в личном кабинете SmartPlayer. Прописать наименования здания, в котором будет установлен терминал;
  • поле «Ключ тега для этажа» — параметр для взаимодействия с устройством и его тегом в личном кабинете SmartPlayer. Прописать значение этажа, на котором будет установлен терминал и указать номер нужного этажа;
  • поле «Ключ тега для терминала» — параметр для взаимодействия с устройством и его тегом в личном кабинете SmartPlayer. Данные параметр необходимо настраивать только в случае если на этаже больше одного терминала. Если терминал один на этаже, то этот параметр можно не указывать (оставить пустым);
  • поле «Этаж с которого начинается отсчёт в здании» — прописать числовое значение для начала отсчёта по этажам;
  • элементы отображаемые в панели навигации — позволяет выбрать вариант отображения при навигации списка категорий или списка помещений (область со списком справа при навигации). Также позволяет не отображать списки с данными;
  • количество отображаемые элементов в ряд — изменяет отображение элементов из списка (параметр выше). Позволяет отображать 2 или 3 элемента в ряд;
  • чекбокс (галочка) «Отображать стартовую страницу» — включает и отключает отображение стартовой страницы;
  • цвет фона стартовой страницы — позволяет выбрать цвет фона для стартовой страницы виджета;
  • кнопки «Фоновое изображение стартовой страницы» — позволяет выбрать из контента в личном кабинета изображение для стартовой страницы;
  • позиция кнопки начала навигации — прописать числовое значение для смещения кнопки по оси Y;
  • поле «Текст кнопки начала навигации» — прописать наименование кнопки для запуска навигации;
  • цвет кнопки для начала навигации — позволяет выбрать цвет кнопки для запуска навигации в виджете;
  • чекбокс (галочка) «Отображать кнопку инструкции» — включает и отключает отображение кнопки для просмотра инструкции в виджете;
  • кнопка «Файл инструкции» — позволяет приложить документ в качестве инструкции из личного кабинета;
  • позиция кнопки инструкции — прописать числовое значение для смещения кнопки по оси Y;
  • цвет фона виджета — позволяет выбрать цвет фона для виджета;
  • цвет UI панелей навигации — позволяет выбрать цвет для UI панелей навигации;
  • цвет отображаемого маршрута — позволяет выбрать цвет для отображения маршрута;
  • цвет фона названия помещения на карте — позволяет выбрать цвет фона для наименования помещений;
  • цвет текста названия помещения на карте — позволяет выбрать цвет для названий помещений;
  • цвет фона активного помещения на карте — позволяет выбрать цвет фона для активного (выделенного) помещения;
  • цвет текста активного помещения на карте — позволяет выбрать цвет текста для выделенного помещения;
Во всех параметрах где используется палитра цвет можно указать с помощью HEX-кода. Значения всех кодов доступны в сети.
  • кнопка «Логотип» — по кнопке можно добавить изображение в качестве логотипа, которое будет изображено на карте из личного кабинета. Логотип необходимо предварительно загрузить в личный кабинет SmartPlayer;
  • позиция логотипа — выбрать вариант для расположения логотипа из списка: по центру, слева, справа;
  • расположение клавиатуры поиска — позволяет изменить место отображения клавиатуры для ручного поиска. Доступно два варианта: снизу и сверху;
  • карты этажей — позволяет загрузить из папки в личном кабинете карты этажей. Карты необходимо предварительно загрузить в личный кабинет SmartPlayer;
  • иконки категорий — позволяет загрузить из папки в личном кабинете иконки категорий для обозначения на картах в виджете. Иконки необходимо предварительно загрузить в личный кабинет SmartPlayer;
  • иконки помещений — позволяет загрузить из папки в личном кабинете иконки помещений для обозначения на картах в виджете. Иконки необходимо предварительно загрузить в личный кабинет SmartPlayer;
  • изображения помещений — позволяет загрузить из папки в личном кабинете изображения для обозначения помещений на картах в виджете. Изображения необходимо предварительно загрузить в личный кабинет SmartPlayer;
  • чекбокс (галочка) «Показывать текстовое описание маршрута» — активирует или деактивирует отображения описания в дополнении к отрисованному маршруту.

Загрузка и скачивание настроек

В процессе взаимодействия с настройками виджета пользователь может загрузить и выгрузить настройки виджета. Каждое из указанных действий можно сделать по отдельным иконкам в интерфейсе виджета. Иконки расположены в виджете внизу с правой стороны, под картой.

Пример отображения иконок загрузить и выгрузить настройки виджета

Завершив все настройки параметров виджета пользователю необходимо сначала нажать на кнопку внизу справа «Применить настройки». Если указанные настройки не соответствуют требованиями пользователя, он может их сбросить до настроек по умолчанию нажав на расположенную по соседству кнопку «Сбросить».

Пример отображения кнопок «Применить настройки» и «Сбросить» в виджете

После нажатия на кнопку применить настройку пользователю необходимо нажать на кнопку «Сохранить» расположенную внизу по центру экрана.

Пример отображения кнопки «Сохранить» в виджете»

Настройка здания

На главной в левой панели у пользователя будет отображён раздел здания, в котором можно сделать следующие действия:

  • выбор здания — необходимо выбрать вариант из списка доступных зданий;
  • название здания — прописать наименование здания в поле;
  • кнопка «Добавить здание» — открывает новую страницу в виджете для создания навигации;
  • кнопка «Удалить здание» — удаляет сущность здания из виджета. В процессе удаления появится модальное окно, для подтверждения процесса;
Пример отображения раздела «Здания» в виджете

Настройка этажей

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

  • выбора этажа — позволяет выбрать из списка настроенных ранее этажей;
  • кнопка «Добавить этаж» — позволяет добавить еще один этаж (сущность этажа) в виджет;
  • кнопка «Категории» — позволяет добавить категорию, для дальнейшей привязки помещений к списку категорий;
  • кнопка «Точки сглаживания» — позволяет настроить отображение нелинейного маршрута и сделать его более эстетически аккуратным;
  • кнопка «Параметры навигации» — открывает список настроек для навигации.
Пример отображения раздела «Этажи» в виджете

Кнопка «Категории»

Данная кнопка при нажатии меняет отображение правой панели и отображает настройки для категорий. При нажатии на кнопку «Добавить категорию» UI виджета снова изменится.

Пример отображения кнопки «Добавить категорию»

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

Пример отображения изменения UI и иконок для взаимодействия с категорией

При переходе в настройки категории пользователь может изменить следующие параметры:

  • имя — ввести текстом нужное наименование категории;
  • кнопка «Добавить иконку» — выбрать иконку для категории из личного кабинета.
Пример отображения параметров для настройки категории

Для завершения настройки категории необходимо нажать на кнопку «Применить» в нижней части панели. Если пользователь передумал вносить изменения, то нажат на кнопку «Отменить» рядом.

Пример отображения кнопок «Применить» и «Отменить» в панели настроек

Переход в навигацию

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

Пример отображения кнопки «Переход в навигацию» на главной странице виджета

После нажатия кнопки откроется страница предпросмотра виджета, где пользователь увидит:

  • карту с помещениями и точкой расположения терминала;
  • список категорий (в правой части экрана);
  • список этажей (над списком категорий).

Также пользователь может воспользоваться экранной клавиатурой с кнопкой выбора языка для поиска нужного объекта на карте. Эти элементы расположены в правой нижней части экрана под списком категорий.

Пример отображения системы поиска в виджете и кнопки выбора языка
Для возвращения к настройкам виджета можно нажать на кнопку «Вернуться в конструктор» в левой нижней части экрана
Пример отображения кнопки «Вернуться в конструктор»

Построение маршрута на странице предпросмотра

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

Пример отображения подсвечиваемого объекта на карте и кнопки «Маршрут» рядом с системой поиска

Нажав на эту кнопку пользователь запустит процесс построения маршрута на карте. Также в правой части экрана заместо категории и этажей будет выведена подсказка о маршруте. При построении маршрута через разные этажи система укажет маршрут до конечной точки через лифты или лестницы в зависимости от настроек системы.

Пример отображения маршрута на карте и подсказки

Если пользователь захочет построить другой маршрут он может нажать на кнопку «Завершить маршрут». Эта кнопка заменит кнопку «Маршрут» после построения навигации на карте пока построение маршрута активно. При завершении процесса построения навигации, кнопка снова изменится на «Маршрут».

Пример отображения кнопки «Завершить маршрут»

Интеграция в трансляцию

Чтобы полностью ознакомиться с работой данного виджета пользователю необходимо запустить трансляцию с расписанием и добавить в качестве контента настроенный ранее виджет. Чтобы ознакомиться с описанными ранее шагами рекомендуется ознакомиться со следующими статьями из Wikipedia:

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

Если данная статья не помогает использовать функционал по назначению или после ее прочтения остаются вопросы можно озвучить данные вопросы в разделе "Обсуждения" вверху страницы.

Пример отображения вкладки "Обсуждения" на wiki-странице

Также дополнительную информацию можно узнать на странице Как взаимодействовать пользователю с разделом "Обсуждения"