Instructions for setting up the navigation widget (ver. 2.0)

Description of the Situation

One of the most important and technically sophisticated products developed by SmartPlayer is the widget designed for indoor navigation. Taking customer feedback into account, the SmartPlayer team decided to redesign and improve this widget. The widget was completely reworked and became simpler, more intuitive, faster, and more stable. This page describes how to properly configure and use the new version of the navigation widget.

Widget Configuration Sequence

The new version of the widget provides a step-by-step configuration process consisting of the following stages:

1. Open the general widget settings by clicking the gear icon. After completing the configuration, click the Apply Settings and Save buttons located at the bottom center of the widget.
2. Click the Categories button to open the room category creation page. Existing categories can also be edited on this page.
3. Add a floor using the corresponding icon and click the Select Map button located on the right. The map must be uploaded to a separate folder in the SmartPlayer personal account beforehand.
4. Click the Configure Click Areas button and highlight the required rooms on the map.
5. Add a terminal using the corresponding button on the right panel.
6. Add the remaining building objects: elevators, staircases, and rooms.
7. Configure the walls on the map and the room entry points.
8. Repeat steps 2–7 until the required number of floors has been added.
9. After configuring all floors, click the Apply Settings and Save buttons located at the bottom center of the widget.
10. Reopen the widget and click the Go to Navigation button in the lower-left corner to verify that it is working correctly. If all parameters have been configured properly, it will be possible to build a route to the required room.
11. To modify the widget settings, click the Return to Constructor button in the lower-left corner.
12. If the route to a specific location is displayed as a zigzag instead of a straight path, it can be smoothed. To do this, open the settings page using the Smoothing Points button.
13. Configure the route smoothing points and click the Apply Settings and Save buttons located at the bottom center of the widget.

Adding the Widget to the Personal Account

To add this widget to the personal account, the user must request it from a SmartPlayer technical support specialist. The widget will be provided as a ZIP archive.

Example of the navigation widget provided as a ZIP archive

After that, the user must log in to the personal account and navigate to the Content section.

Example of the Content section in the personal account

In the Content section, drag and drop the widget from the local storage. After it is uploaded to the personal account, the widget will appear in the content list.

Example of uploading a widget using drag-and-drop

If the user's personal account contains a large amount of different content, they can use the sorting function and select the Widget content type. After that, all uploaded widgets will be displayed in the personal account.

Example of the navigation widget and the selected sorting mode for easier searching

Widget Main Page

After adding the widget to the personal account, the user can open it by double-clicking its icon. The widget's main page will then be displayed.

Example of the navigation widget main page

The main page provides numerous configuration options. At the initial stage, the user should focus on the widget control area. This area includes:

• the Settings button, which allows the user to configure the general widget settings;
• an icon for expanding the widget to full-screen mode;
• a ? icon that opens the initial guide describing how to configure and use the widget.

Example of the widget control area

Widget Element Configuration Order

This section sequentially describes the configuration procedure for all widget elements required for its proper operation.

Widget General Settings

To open the general widget settings, the user must click the Settings button located in the upper-left corner.

Example of the Settings button in the navigation widget

After clicking the button, a page containing the widget settings will open.

Example of the widget settings page

The following parameters are available for configuration:

• language selection — allows the user to select the widget interface language. Five languages are available: Russian, English, Portuguese, Spanish, and Kazakh;
• user session timeout — allows the user to specify the time after which the widget switches to standby mode. The value is specified in seconds;
• Building Tag Key field — allows the user to specify the device tag key whose value contains the name of the building where the terminal is installed;
• Floor Tag Key field — allows the user to specify the device tag key whose value contains the floor number where the terminal is installed;
• Terminal Tag Key field — allows the user to specify the device tag key used to identify the terminal. This parameter only needs to be configured if several terminals are installed on the same floor. If there is only one terminal on the floor, this field may remain empty;
• Starting Floor Number field — allows the user to specify the floor number from which the building floor numbering begins;
• navigation panel elements — allow the user to choose what will be displayed on the right side of the navigation interface: the category list or the room list. The user can also disable the display of these lists;
• number of displayed elements per row — allows the user to select how many list elements are displayed in a single row: two or three;
• Display Start Page checkbox — enables or disables the display of the start page;
• start page background color — allows the user to select the background color of the widget start page;
• Start Page Background Image button — allows the user to select an image from the SmartPlayer personal account for the start page;
• navigation start button position — allows the user to specify a numeric offset value along the Y-axis;
• Navigation Start Button Text field — allows the user to specify the text displayed on the navigation start button;
• navigation start button color — allows the user to select the color of the navigation start button;
• Display Instruction Button checkbox — enables or disables the instruction button in the widget;
• Instruction File button — allows the user to select a document from the SmartPlayer personal account to be used as the instruction manual;
• instruction button position — allows the user to specify a numeric offset value along the Y-axis;
• widget background color — allows the user to select the widget background color;
• navigation UI panel color — allows the user to select the color of the navigation panels;
• route color — allows the user to select the color of the generated route;
• room title background color on the map — allows the user to select the background color of the room title area;
• room title text color on the map — allows the user to select the text color of the room title;
• active room background color on the map — allows the user to select the background color of the selected room;
• active room text color on the map — allows the user to select the text color of the selected room title;

For all parameters that use a color palette, the color can be specified using a HEX code. The required HEX code can be selected using publicly available color palettes.

• Logo button — allows the user to select an image from the SmartPlayer personal account to be used as the logo displayed on the map. The image must be uploaded to the SmartPlayer personal account in advance;
• logo position — allows the user to select the logo position: center, left, or right;
• search keyboard position — allows the user to select the position of the on-screen keyboard used for manual search. Two options are available: top and bottom;
• floor maps — allow the user to select floor maps from a folder in the SmartPlayer personal account. The maps must be uploaded in advance;
• category icons — allow the user to select category icons from a folder in the SmartPlayer personal account for display on the widget maps. The icons must be uploaded in advance;
• room icons — allow the user to select room icons from a folder in the SmartPlayer personal account for display on the widget maps. The icons must be uploaded in advance;
• room images — allow the user to select room images from a folder in the SmartPlayer personal account for display on the widget maps. The images must be uploaded in advance;
• Display Route Text Description checkbox — enables or disables the display of a textual route description in addition to the generated route.

Uploading and Downloading Settings

When working with widget settings, the user can upload previously saved settings or download the current configuration. Each action has a dedicated icon in the widget interface. These icons are located in the lower-right corner of the widget below the map.

Example of the icons for uploading and downloading widget settings

After configuring the widget parameters, the user must click the Apply Settings button located in the lower-right corner of the screen. If the configured settings do not meet the user's requirements, they can be reset to their default values by clicking the adjacent Reset button.

Example of the Apply Settings and Reset buttons in the widget

After clicking the Apply Settings button, the user must click the Save button located at the bottom center of the screen.

Example of the Save button in the widget

Building Configuration

On the main page of the widget, the left panel contains the building configuration block, which includes the following elements:

• building selection — allows the user to select a building from the list of available buildings;
• building name — allows the user to specify the building name;
• Add Building button — creates a new building and opens the navigation configuration page;
• Delete Building button — deletes the selected building from the widget. A confirmation dialog will be displayed before deletion;

Example of the Buildings section in the widget

Floor Configuration

The left panel also contains a separate floor configuration block located below the building configuration block. It includes the following elements:

• floor selection — allows the user to select one of the previously configured floors;
• Add Floor button — allows the user to create a new floor and assign a map from the list of files uploaded to the SmartPlayer personal account;
• Categories button — allows the user to create categories for assigning rooms to them later;
• Smoothing Points button — allows the user to add route smoothing points to make the displayed route more accurate;
• Navigation Parameters button — opens the list of navigation parameters.

Example of the Floors section in the widget

The "Add Floor" Button

After clicking the Add Floor button, a new floor will be created in the widget. To assign a map to it, the user must click the Select Map button on the right panel.

Example of floor settings

More information about the map parameters located on the right panel is provided in the Floor Attribute Settings section.

Setting Boundaries on the Floor Map

For navigation in the widget to function correctly, the user must define the boundaries of all rooms on the floor. This action must be completed for every floor map.

After adding the floor and its map to the widget, the user must define the room boundaries. The widget interprets these boundaries as walls and takes them into account when generating routes.
To start drawing a boundary, the user must press and hold the left mouse button (LMB) and move the cursor in the desired direction. While moving the cursor, the boundary line will be displayed on the map.

Example of drawing boundaries on the floor map

When drawing boundaries, it is recommended to place the lines not only along the room walls but also to extend them slightly into the rooms at the entrance locations. This allows the navigation system to correctly generate and display routes to the entrance of the selected room.

Example of drawing boundaries while taking the room entrance into account

If the user draws a boundary incorrectly, they must press and hold the right mouse button (RMB) and move the cursor over the incorrect section to erase it.

If, after completing the configuration, the route is displayed incorrectly on any part of the map, it is most likely because a passage has been blocked by a boundary line. In this case, the user must return to the floor boundary configuration and remove the incorrect section.

The "Categories" Button

After clicking this button, the contents of the right panel will change to display the category settings. Clicking the Add Category button will modify the widget interface once again.

Example of the Add Category button

A new category entry will appear and must be configured. The category settings can be opened using the gear icon located to the right of its name. The category can also be deleted by clicking the cross icon located next to the settings icon.

Example of the updated interface and icons for interacting with a category

When opening the category settings, the user can modify the following parameters:

• name — allows the user to specify the category name;
• Add Icon button — allows the user to select a category icon from the files uploaded to the SmartPlayer personal account.

Example of the category configuration parameters

To complete the category configuration, click the Apply button at the bottom of the panel. If the user decides not to save the changes, click the adjacent Cancel button.

Example of the Apply and Cancel buttons on the settings panel

The "Smoothing Points" Button

When opening the route smoothing point configuration, the user is immediately presented with a brief guide describing how this functionality works. After reading the instructions, click the Add Points button.

Example of the smoothing points guide and the Add Points button

After clicking the Add Points button, a new smoothing point set will appear. The settings can be opened using the gear icon located to the right of its name. The smoothing point set can also be deleted by clicking the cross icon located next to the settings icon.

Example of the updated interface and icons for interacting with smoothing points

After clicking the settings icon, a page containing the map and a configuration panel on the left will open. The following parameters are available:

Example of the smoothing point configuration parameters

• smoothing point set name — allows the user to specify the name of the smoothing point set;
• Assign Rooms button — allows the user to assign rooms by selecting them in the modal window that opens. One or more rooms must be selected using the checkboxes, then the Select button must be clicked.

Example of the list of rooms available for assignment

Next, the user must place two points on the map using the left and right mouse buttons (LMB and RMB respectively): the red point using the LMB and the pink point using the RMB. The points should be positioned on the same straight line regardless of its direction. The imaginary line between these points must not intersect any walls; otherwise, this functionality will not work.

Example of smoothing points on the building map

To complete the smoothing point configuration, click the Apply button at the bottom of the panel. If the user decides not to save the changes, click the adjacent Cancel button.

Example of the Apply and Cancel buttons on the settings panel

The "Navigation Parameters" Button

After clicking this button, the interface will change: instead of the floor and building settings, the navigation settings list will be displayed. The following parameters are available:

• coordinate grid cell width — allows the user to specify the width of a coordinate grid cell in pixels;
• coordinate grid cell height — allows the user to specify the height of a coordinate grid cell in pixels;
• route rendering quality (DPI) — allows the user to specify the DPI value used to render the calculated route;
• floor transition method — allows the user to choose the method of moving between floors that will be taken into account when generating the route. Two options are available: By Stairs and By Elevator;
• display route as — determines how the route line is displayed on the map. Two options are available: points or dashed lines;
• Allow Diagonal Routing checkbox — enables or disables diagonal route generation;
• Automatically Zoom to Route checkbox — enables or disables automatic map zooming when a route is generated.

Example of the navigation parameters

To complete the navigation parameter configuration, click the Apply button at the bottom of the panel. If the user decides not to save the changes, click the adjacent Cancel button.

Floor Attribute Configuration

After completing the building and floor configuration on the left panel of the widget, the user must configure the parameters of the current floor using the right panel. The floor settings include:

• Replace Map button — allows the user to replace the selected floor map;
• Configure Click Areas button — allows the user to add a room area;
• Add Terminal button — allows the user to add a terminal to the floor map;
• Add Elevator button — allows the user to add an elevator marker to the floor map;
• Add Staircase button — allows the user to add a staircase marker to the floor map;
• Add Room button — allows the user to add a room to the floor map;
• Delete Floor button — allows the user to delete the current floor.

Example of the floor configuration functionality

After completing the floor configuration, the user must click the Apply button at the bottom of the panel to save the changes. If the applied changes do not meet the user's requirements, they can click the Reset button located to the left.

Example of the Apply and Reset buttons

The "Select/Replace Map" Button

It is recommended that the user prepare floor maps for the widget in SVG format in advance.

After clicking the Select/Replace Map button, a modal window will open where the user can select a map from the files previously uploaded to the SmartPlayer personal account. To select a new map, simply click it.

Example of the modal window for replacing a floor map

The button name depends on the action being performed. If the user is adding a map to a new floor, the button is called Select Map. If a map has already been assigned, the button is called Replace Map.

The "Configure Click Areas" Button

After clicking this button, the widget interface will change, and the user will see the list of available areas placed on the map if the widget has already been configured previously. Previously created areas will be displayed on the map. A text hint will also be displayed in the upper-right corner.

Example of the interface changes and the text hint

If no areas have been configured yet, the user must click the Add Area button. After clicking it, a new shape for defining an area will appear in the upper-right corner.

Example of the Add Area button and the shape used to define an area

If the areas were configured incorrectly or their positions have changed, any area can be deleted using the special icon that appears when the pointer is hovered over the corresponding area entry.

Example of the icon used to delete an area

To move the new area to the desired position on the map, press and hold it with the left mouse button and drag it. The area can also be resized by moving the pointer to one of its borders. The mouse cursor will change accordingly.

Example of moving and resizing an area

After completing the area configuration, the user must click the Apply button on the right panel. If the changes are not satisfactory, the user can click the Cancel button located to the left.

Example of the Apply and Cancel buttons

Кнопка «Добавить терминал»

После нажатия на кнопку «Добавить терминал» пользователь перейдёт в раздел настроек терминала, который отобразится на панели после изменения интерфейса.

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

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

• имя — позволяет указать название нового терминала;
• положение по оси X — поле недоступно для ручного ввода. Значение определяется автоматически после нажатия левой кнопкой мыши на карту в месте, где пользователь хочет установить терминал;
• положение по оси Y — поле недоступно для ручного ввода. Значение определяется автоматически после нажатия левой кнопкой мыши на карту в месте, где пользователь хочет установить терминал.

Пример отображения заполненных настроек нового терминала

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

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

По окончании настройки пользователь увидит новый терминал в списке. Добавленные терминалы можно отредактировать или удалить с помощью специальных иконок на данной панели.

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

Кнопка «Добавить лифт»

После нажатия на кнопку «Добавить лифт» пользователь перейдёт в раздел настроек лифта на карте, который отобразится на панели после изменения интерфейса.

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

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

• имя — позволяет указать название нового лифта;
• положение по оси X — поле недоступно для ручного ввода. Значение определяется автоматически после нажатия левой кнопкой мыши на карту в месте, где пользователь хочет установить лифт;
• положение по оси Y — поле недоступно для ручного ввода. Значение определяется автоматически после нажатия левой кнопкой мыши на карту в месте, где пользователь хочет установить лифт;
• чекбокс (галочка) «Лифт включён» — включает или отключает использование лифта при построении маршрута. Если данный параметр активирован для лифтов на исходном и конечном этажах, маршрут будет строиться с учётом перемещения на лифте.

Пример отображения лифта на карте

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

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

По окончании настройки пользователь увидит добавленные лифты в списке. Лифты из списка можно отредактировать или удалить с помощью специальных иконок на данной панели.

Пример отображения настроенных лифтов и иконок для взаимодействия с ними

Кнопка «Добавить лестницу»

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

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

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

• имя — позволяет указать название новой лестницы;
• положение по оси X — поле недоступно для ручного ввода. Значение определяется автоматически после нажатия левой кнопкой мыши на карту в месте, где пользователь хочет установить лестницу;
• положение по оси Y — поле недоступно для ручного ввода. Значение определяется автоматически после нажатия левой кнопкой мыши на карту в месте, где пользователь хочет установить лестницу;
• чекбокс (галочка) «Лестница включена» — включает или отключает использование лестницы при построении маршрута. Если данный параметр активирован для лестниц на исходном и конечном этажах, маршрут будет строиться с учётом перемещения по лестнице.

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

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

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

По окончании настройки пользователь увидит добавленные лестницы в списке. Добавленные лестницы можно отредактировать или удалить с помощью специальных иконок.

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

Кнопка «Добавить помещение»

После нажатия на кнопку «Добавить помещение» пользователь перейдёт в раздел настроек помещения на карте, который отобразится на панели после изменения интерфейса.

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

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

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

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

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

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

Пример отображения настроенных помещений и иконок для взаимодействия с ними

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

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

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

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

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

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

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

Чтобы вернуться к настройкам виджета, необходимо нажать на кнопку «Вернуться в конструктор» в левой нижней части экрана.

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

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

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

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

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

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

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

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

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

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

• Раздел "Устройства"
• Раздел "Контент на устройства"
• Раздел "Трансляции"
• Раздел "Расписание"

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

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

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

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