Event Broadcast Widget Guide

Материал из SmartPlayer

Description of the Situation

SmartPlayer has developed a widget that allows users to control a broadcast and the events within it using buttons on touch screens. This widget makes it possible to create control elements (buttons) to which reactions and events can be assigned. The configured widget can be used as a remote control for managing a broadcast.

Adding the Widget to the Personal Account

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

Example of the 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, the widget must be transferred from local storage to the personal account. Once the user uploads the widget, it will appear in the content list.

Example of transferring the widget to the SmartPlayer personal account

Widget Main Page

After transferring the widget to the personal account, the user must double-click the widget icon to perform the initial configuration. The widget's main page will then open.

Example of the widget's main page

On the widget's main page, the user can click the gear icon to open the widget settings.

Example of the icon used to open the widget settings

The "Settings" Button

After opening the widget settings, the user will see a list of configurable parameters on the left side of the screen. The right side contains the widget preview area, where all changes are displayed.

Example of the screen layout in the widget's Settings section

The widget settings include the following parameters:

  • Language Selection — allows the user to choose one of the available interface languages. The following languages are available: Russian, English, Portuguese, Spanish, and Kazakh;
  • Widget Font Size — allows the user to set the text font size using a slider or a numeric value;
  • Widget Background — allows the user to select the widget background color using a color palette. The color can also be specified using a HEX code selected from any publicly available color palette;
  • Widget Background Image — allows the user to select an image using the Select Image button. The required image must first be uploaded to the SmartPlayer personal account;
  • Button Scale — allows the user to set the size of the buttons created in the widget using a slider or a numeric value;
  • Button Type — allows the user to choose the button appearance. Two options are available: square corners or rounded corners;
  • Add Button — adds a clickable button to the widget;
  • Add Button Group — adds a button that can contain other buttons and expand when pressed.
Example of the widget configuration parameters

Настройки кнопок для событий трансляции

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

Добавить кнопку

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

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

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

  • название кнопки — указать текстовое название кнопки;
  • идентификатор трансляции — указать ID трансляции, к которой будет привязана кнопка. ID можно скопировать из адресной строки при просмотре уже созданной трансляции;
Пример отображения ID трансляции
  • имя события — неизменяемый параметр. По умолчанию установлено значение события «label»;
  • значение события — указать значение события, установленное при настройке трансляции;
  • изображение кнопки — после нажатия на кнопку «Выберите изображение» пользователь должен выбрать изображение кнопки из личного кабинета SmartPlayer. Рекомендуется загрузить изображение заранее.
Пример отображения настроек кнопки

Добавить группу кнопок

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

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

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

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

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

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

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

Далее виджет развернётся на весь экран, и пользователь должен нажать на кнопку «Сохранить», расположенную внизу по центру экрана.

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

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

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

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

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

При настройке параметров виджета, кнопок или групп кнопок, пользователь настраивает параметры, на которые реагирует серверное приложение SmartPlayer. Список параметров, на которые реагирует серверное приложение SmartPlayer:

  • идентификатор трансляции;
  • имя события;
  • значение события.
Пример отображения параметров, взаимодействующих с сервером
Обратите внимание: пользователю необходимо настроить событие по следующему пути: «Добавить событие» в трансляции или в списке событий → выбрать событие «Серверное приложение» → ключ по полезной нагрузке → значение, то есть числовое значение события.

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

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

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

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

Инструкция к виджету трансляции событий (Event Broadcast)

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

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

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

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