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

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

The "Add Terminal" Button

After clicking the Add Terminal button, the user will be taken to the terminal settings section, which will appear on the panel after the interface changes.

Example of the settings panel after clicking the Add Terminal button

The terminal settings include the following parameters:

• Name — allows the user to specify the name of the new terminal;
• X Position — this field cannot be entered manually. The value is determined automatically after the user clicks the desired location on the map with the left mouse button;
• Y Position — this field cannot be entered manually. The value is determined automatically after the user clicks the desired location on the map with the left mouse button.

Example of the completed settings for a new terminal

After completing the terminal 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

After completing the configuration, the user will see the new terminal in the list. Added terminals can be edited or deleted using the dedicated icons available on this panel.

Example of configured terminals and the icons used to interact with them

The "Add Elevator" Button

After clicking the Add Elevator button, the user will be taken to the elevator settings section for the map, which will appear on the panel after the interface changes.

Example of the settings panel after clicking the Add Elevator button

The elevator settings include the following parameters:

• Name — allows the user to specify the name of the new elevator;
• X Position — this field cannot be entered manually. The value is determined automatically after the user clicks the desired location on the map with the left mouse button;
• Y Position — this field cannot be entered manually. The value is determined automatically after the user clicks the desired location on the map with the left mouse button;
• Elevator Enabled checkbox — enables or disables the use of the elevator during route calculation. If this parameter is enabled for elevators on both the starting and destination floors, the route will be built using elevator navigation.

Example of an elevator displayed on the map

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

Example of the Apply and Cancel buttons

After completing the configuration, the user will see the added elevators in the list. Elevators in the list can be edited or deleted using the dedicated icons available on this panel.

Example of configured elevators and the icons used to interact with them

The "Add Staircase" Button

After clicking the Add Staircase button, the user will be taken to the staircase settings section for the map, which will appear on the panel after the interface changes.

Example of the settings panel after clicking the Add Staircase button

The staircase settings include the following parameters:

• Name — allows the user to specify the name of the new staircase;
• X Position — this field cannot be entered manually. The value is determined automatically after the user clicks the desired location on the map with the left mouse button;
• Y Position — this field cannot be entered manually. The value is determined automatically after the user clicks the desired location on the map with the left mouse button;
• Staircase Enabled checkbox — enables or disables the use of the staircase during route calculation. If this parameter is enabled for staircases on both the starting and destination floors, the route will be built using stair navigation.

Example of a staircase displayed on the map

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

Example of the Apply and Cancel buttons

After completing the configuration, the user will see the added staircases in the list. Added staircases can be edited or deleted using the dedicated icons.

Example of configured staircases and the icons used to interact with them

The "Add Room" Button

After clicking the Add Room button, the user will be taken to the room settings section on the map, which will appear on the panel after the interface changes.

Example of the settings panel after clicking the Add Room button

The room settings include the following parameters:

• Name — allows the user to specify the room name;
• Search Name — allows the user to specify the name by which the room can be found using the search system;
• Add Image button — allows the user to select one of the images available in the SmartPlayer personal account for the room;
• Description — allows the user to provide additional information about the room;
• Font Size — allows the user to select an available font size from the list;
• Left Margin from the Map Edge — allows the user to specify the numerical offset from the left edge of the map;
• Top Margin from the Map Edge — allows the user to specify the numerical offset from the top edge of the map;
• Room Entrance Point X Coordinate — this field cannot be entered manually. The value is determined automatically after the user clicks the desired location on the map with the left mouse button;
• Room Entrance Point Y Coordinate — this field cannot be entered manually. The value is determined automatically after the user clicks the desired location on the map with the left mouse button;
• Categories — allows the user to select the category to which the room should be assigned;
• Display Room As — allows the user to choose how the room will be displayed. Two options are available: display the room name or hide it;
• Add Icon button — allows the user to select one of the icons available in the SmartPlayer personal account for the room;
• Link to Map button — allows the user to link the room to a zone added on the floor map;
• Display in Navigation Panel checkbox — enables or disables displaying the room in the navigation panel.

After completing the room 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

After completing the configuration, the user will see the added rooms in the list. Added rooms can be edited or deleted using dedicated icons. Each room also has a separate icon that allows the user to build a route to it. The position of a room in the list can be changed by dragging it while holding the left mouse button.

Example of configured rooms and the icons used to interact with them

Navigation Mode

After completing the preliminary widget configuration described in the previous sections, the user can verify that the configured widget is working correctly. To do this, click the Go to Navigation button in the lower-left corner of the widget.

Example of the Go to Navigation button on the widget's main page

After clicking the button, the widget preview page will open, where the user will see:

• a map with rooms and the terminal location;
• a list of categories on the right side of the screen;
• a list of floors above the category list.

The user can also use the on-screen keyboard and the language selection button to search for the required location on the map. These controls are located in the lower-right corner of the screen below the category list.

Example of the widget search system and the language selection button

To return to the widget settings, click the Return to Builder button in the lower-left corner of the screen.

Example of the Return to Builder button

Building a Route on the Preview Page

To build a route on the widget preview page, the user must click the desired location. The selected location will be highlighted, and the Route button will appear in the lower-right corner of the screen next to the search system.

Example of a highlighted location on the map and the Route button next to the search system

After clicking this button, the route will be built on the map. A textual route description will also appear on the right side of the screen instead of the category and floor lists. When building a route between different floors, the system will calculate the path through elevators or staircases according to the selected navigation settings.

Example of the route displayed on the map and the route description

If the user wants to build another route, they can click the End Route button. Once a route has been created, this button replaces the Route button and remains available until the current navigation session is finished. After the navigation is completed, the button changes back to Route.

Example of the End Route button

Broadcast Integration

To test this widget on a device, the user must create a broadcast, add the previously configured widget as content, configure a schedule, and assign the broadcast to a device. More information about these actions can be found in the following SmartPlayer Knowledge Base articles:

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

Additional Information

If this article does not help you use the functionality as intended or if you still have questions after reading it, you can ask them in the Discussions section at the top of the page.

Example of the Discussions tab on a wiki page

Additional information is also available on the page How Users Can Interact with the "Discussions" Section.