Инструкция по работе с виджетом «Цены для АЗС»/en

Situation Description

This widget allows users to display information about the cost of specific fuel types on devices. The instructions below explain how the widget works and how to configure it within the SmartPlayer platform.

Server Logic

This widget receives all data directly from the customer's server. After receiving it, the data is processed and displayed in the broadcast through the SmartPlayer personal account.

Adding the Widget to the Personal Account

To add this widget to the personal account, the user must request a zip archive with the content from a technical support specialist.

Example of the widget in .zip format

After that, the user must log into their personal account and go to the “Content” section.

Example of the “Content” section in the personal account

In the “Content” section, drag the widget from local storage into the personal account. Once the user uploads the widget, it will appear in the content list.

Example of the widget being added to the SmartPlayer personal account

Widget Configuration

After transferring the widget, the user must double-click the widget icon to access the main page for initial configuration.

Example of the widget's main page

On the widget’s main page, two buttons are available:

1. “API” button.
2. “Settings” button.

Example of the icon for accessing widget settings

“API” Button

Clicking the “API” button opens a modal window with information about the resources required for stable widget performance. The section also contains a general explanation of its purpose and principles of operation.

Example of the modal window content

The main parameters for the resources include:

• name — name of the resource;
• method — HTTP method used (GET);
• requires authorization — whether authorization is required;
• server address — URL of the server providing the data;
• API address — displays the JSON file name containing API and price information;
• “Check connection” button — checks the connection and displays a numeric status.

This window can be closed using the standard icon in the upper-right corner.

“Settings” Button

After opening the settings page, the user will see two blocks of parameters:

1. General widget settings.
2. Animation settings for the widget.

Example showing both parameter blocks for widget setup

General Widget Settings

The following parameters belong to general settings:

• language selection — choose from: Russian, English, Spanish, Portuguese;
• widget rotation — select rotation angle (90 or 270 degrees);
• proxy server address — enter the proxy server URL;
• “Use proxy” checkbox — enables/disables use of a proxy;
• for which diesel positions to show "ekto-winter" — input values (starting from 0, separated by ",");
• fuel type font size — specify size in pixels or adjust via slider;
• icon size — specify size in pixels or use the slider;
• price font size — specify in pixels or adjust via slider;
• line spacing — specify in pixels;
• font color — select custom color;
• font weight — choose from: thin, normal, semi-bold, bold;
• “Format values without trailing zero” checkbox — enable/disable zero removal;
• “Duplicate prices” checkbox — enable/disable price duplication;
• “Filter identical values” checkbox — enable/disable filtering;
• icon color — choose black or white;
• full API path for prices — enter full URL with identifier (last numeric value);

Example of correct identifier display

• data refresh interval — specify interval in seconds;
• use client app storage — enable/disable usage (Windows/Linux/Raspberry only);
• video — select background video from personal account;
• video identifier — cannot be edited, is auto-fetched from the selected video.

Example of the general widget settings list

Widget Animation Settings

Animation settings appear in a separate block on the right. Animations are split into steps (max 6). Each step includes:

• animation direction — select from: left-to-right, right-to-left, bottom-up, top-down;
• animation speed — set duration in seconds;
• animation delay — set delay time in seconds.

Example of animation settings block

Finalizing Widget Setup

Once configuration is complete, the user must click “Apply Settings” at the bottom and then “Save” just below.

Example showing buttons to finalize widget settings

Upload and Download Settings

During configuration, the user can upload or download widget settings via dedicated icons located at the bottom center of the widget.

Example of upload/download buttons

Adding the Configured Widget to a Broadcast

To create a broadcast with this widget, go to the “Broadcast” section and find the “Create” category.

Example of the “Broadcast” section and “Create” category in the personal account

Click “Add zone” and configure the zone dimensions — width and height in pixels — then click “Save”.

If the widget is used on a double-sided gas station screen, specify the total width for both screens.

Example of zone settings

Select the desired content (e.g. video) and add it to the zone, then also add the widget. A playlist for the zone will appear at the bottom.

Example showing content in the playlist

Align the widget and content to start at the same time.

Example showing start alignment

Then, click the content to copy its duration and paste it into the widget’s duration parameter to match playback.

Example of duration parameter display

Adding the Configured Widget to a Scheduled Broadcast

To fully explore this functionality, launch a scheduled broadcast and add the widget as content. To review the earlier setup steps, refer to the following Wiki SmartPlayer articles:

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

Video Tutorial

Instruction for Working with the “Fuel Prices” Widget

Additional Information

If this article doesn’t help you use the feature as intended or if you still have questions after reading it, you can ask them in the “Discussions” tab at the top of the page.

Example of the “Discussions” tab on the wiki page

You can also learn more from the page How the User Can Interact with the “Discussions” Section