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

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

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

Серверная логика

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

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

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

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

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

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

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

Пример отображения переноса виджета в личном кабинете SmartPlayer

Настройка виджета

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

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

На главной странице виджета пользователю доступно две кнопки:

1. Кнопка "API".
2. Кнопка «Настройки»

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

Кнопка "API"

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

Пример отображения информации в модальном окне

Основными параметрами для ресурсов являются:

• имя — указано имя ресурса;
• метод — используемый тип метода (GET);
• требует авторизации — информация об обязательности авторизации;
• адрес сервера — URL-адрес сервера, с которого берутся данные;
• адрес API — отображается название JSON-файла в котором присутствует информация об API и ценах;
• кнопка «Проверить соединение» — при нажатии проводит проверку соединения и отображает вывод с указанием числового статуса.

Закрыть данное окно можно по стандартной иконке в правом верхнем углу.

Кнопка «Настройки»

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

1. Общие настройки виджета.
2. Настройки анимации для виджета.

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

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

К общим настройкам виджета можно отнести следующие параметры:

• выбор языка — выбрать доступный вариант из списка: русский, английский, испанский, португальский;
• поворот виджета — выбрать из списка значение для поворота виджета при отображении (90 и 270 градусов);
• адрес прокси-сервера — указать URL-ссылку для прокси-сервера;
• чекбокс «Использовать прокси» — включает/отключает использование прокси сервера для виджета;
• для каких позиций ДТ отображать 'экто-зима' — введите значения позиций (начинайте с 0 и ставьте разделителем ",");
• размер шрифта типа топлива — прописать значение для шрифта (в пикселях) или настроить с помощью ползунка;
• размер иконок — прописать значение размера иконок (в пикселях) или настроить с помощью ползунка;
• размер шрифта цен — прописать значение для шрифта (в пикселях) или настроить с помощью ползунка;
• отступы между строками — прописать значение для отступа (считается в пикселях);
• цвет шрифта — палитра, позволяющая создать индивидуальный цвет для шрифта;
• насыщенность шрифта — выберите один вариант начертания из списка: тонкое, нормальное, полужирное, жирное;
• чекбокс «Форматировать значения без нуля на конце» — включает/отключает форматирование нецелых значений с нулём на конце;
• чекбокс «Дублировать цены» — включает/отключает дублирование цен;
• чекбокс «Фильтровать одинаковые значения» — включает/отключает фильтрацию по идентичным значениям;
• цвет отображаемых иконок — выбрать один из доступных цветов для иконок: белый или чёрный;
• полный путь в API получения цен — прописывается полноценная URL-ссылка со значением идентификатора (идентификатор последнее числовое значение);

Пример отображения правильного идентификатора

• частота обновления данных — указать значения для промежутка обновления данных (в секундах);
• использовать хранилище клиентского приложения — включает/отключает использование клиентского приложения (применимо только к устройствам на ОС Windows, Linux, Raspberry);
• видео — позволяет выбрать видео из личного кабинета, которое будет проигрываться на фоне цен;
• идентификатор видео — поле, которое нельзя настроить. Автоматически определяет идентификатор выбранного видео из личного кабинета.

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

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

Настройки анимации виджета идут отдельным блоком и расположены в правой части экрана. Все анимации разделены на шаги (максимальное количество - 6). Каждый шаг включает в себя следующие параметры:

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

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

Завершение настройки виджета

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

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

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

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

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

Добавление настроенного виджета в трансляцию

Чтобы создать трансляцию с виджетом, необходимо перейти в раздел «Трансляция» личного кабинета и найти категорию «Создать».

Пример отображения раздела «Трансляция» и категории «Создать» в личном кабинете.

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

Если виджет используется для двухсторонней стелы АЗС необходимо указать общую ширину для двух экранов.

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

Выбрать нужный контент (например видео) и перенести в необходимую зону и также перенести в эту же зону виджет. В нижней части экрана отобразится плейлист для зоны.

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

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

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

Далее с помощью клика по контенту копируем продолжительность и вставляем скопированное значение в параметр продолжительности в виджете, тем самым уравнивая длительность проигрывания его с контентом.

Пример отображения параметра продолжительностьв

Добавление настроенного виджета в трансляцию

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

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

Видеоинструкция

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

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

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

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

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