Instructions for working with the news ticker widget
Widget Description
This widget is a feature that allows real-time display of information from news sources in two modes:
- Static news with graphical content
- Ticker mode
The widget receives information via a URL link, which serves as its source, and displays the retrieved news on the screen as a news block. Using the widget settings, users can customize the news display on the device to be unique and tailored to their specific needs. == Adding the Widget to the Personal Account == To add this widget to the personal account, the user needs to request the widget from the team specialist. It will be provided as a ".zip" archive.
Afterward, the user should log into the personal account and go to the "Content" section.
In the "Content" section, the user needs to drag and drop the widget from local storage into the "Content" section. Once the user adds the widget to the personal account, it will appear in the content list.
Widget Settings
After transferring the widget to the "Content" section, to configure the widget for the first time, the user needs to double-click the widget icon. This action will take them to the widget’s main page.
On the widget’s main page, the user can access the widget’s settings by clicking on the gear icon.
Widget Configuration Parameters
The following parameters can be used to configure the widget:
General settings block:
- Language selection – allows the user to choose the language in which the widget interface will be displayed. The current implementation supports two languages: Russian and English.
- Resource URL – allows specifying the URL link to the news portal from which the widget will retrieve the news block. This link should point to an RSS resource provided by the server in XML format.
- Color slider – allows the user to choose a color scheme with two gradient options for displaying news (more details below). If at least one color slider is active, the "Background image" option for the news will be disabled as it will be replaced by the slider.
- Background image – allows the user to select a graphic content as the widget’s background. This option does not work if at least one color slider is active.
- Animation – allows the user to choose the animation for news transitions. Two types of animations are available: fade (animation with a gradually disappearing background) and slide (sliding animation from right to left).
- Content change delay – measured in seconds, this allows the user to set the speed of the news change using a numerical value.
- Disable images checkbox – when activated, this disables the display of news with images, leaving only the text. If this checkbox is deactivated, the news will display with an image (if available).
- Autoscroll checkbox – when activated, autoscroll will be enabled for large news articles that do not fit on the screen.
Block "Settings for text information when ticker mode is disabled":
- Text positioning – allows the user to choose where the news text will be positioned on the screen. Currently, two options are available: centered or at the top of the page. This does not work in ticker mode.
- Static news text color – allows the user to select the color of the news text. The color can be specified using a HEX code available online.
- News text font size – allows the user to specify a numerical value for the news text font size.
- Image width – measured in pixels, this allows the user to specify the width of the news image.
- Image height – measured in pixels, this allows the user to specify the height of the news image.
- Image margin – measured in pixels, this allows the user to set the margin distance for the image. The margin applies from the left side of the screen.
- RSS channel tag – this setting points to the XML tag that the widget will use to retrieve the news text. Currently, three tags are supported: description, content, and title.
Block: "Settings for ticker mode":
- Ticker mode checkbox – when activated, this allows the user to enable ticker mode for the news text. It removes the news image and scrolls the current news in a single line.
- Ticker speed – can range from "0" to "1000", allowing the user to set the speed of the ticker’s appearance and scrolling.
News separator symbol – allows the user to specify a symbol that will be used to separate news articles. Recommended symbols include: (".") (",") ("/").
- News text spacing – allows the user to specify the pixel distance between news articles and the separator symbol. The spacing applies to both the current and next news articles, keeping them equidistant from the separator.
- Ticker text color – allows the user to select the color of the ticker text.
- Ticker font size – allows the user to specify a numerical value for the ticker font size.
- Ticker direction – allows the user to choose the direction of the ticker movement. Two options are available: left to right and right to left.
- Ticker margin – measured in pixels, this allows the user to set the margin for the ticker relative to the left and right sides of the screen.
Слайдер с палитрами
Слайдер цветов позволяет пользователю выбирать как будет отображаться фон для новостей и какое количество фонов будет использоваться для новостей.
Для того, чтобы добавить один фон пользователю необходимо нажать "Добавить цвет".
После добавленная на экране настроек палитра для слайдера позволяет пользователю создать отображение новости под свой нужды. Добавлять палитры можно без ограничений, но нужно понимать, что они будут меняться вместе с новостью.
Если у пользователя палитр меньше, чем количество новостей, то проигрывание использование палитра начнется заново.
Настройка цветового отображения
Все палитры для слайдеров имеют возможность делать градиентный переход. Пользователь может выставить любое количество точек градиента с помощью клика на панели градиента.
Выбрав нужную точку с помощью клика мыши, пользователь может установить ей определенный цвет. Когда точка не выбрана ее отображение - белый незакрашенный круг. Когда точка выбрана - ее отображение белый закрашенный круг.
Пользователю два вида отображения градиента:
- Снизу вверх - данный градиент имеет возможность сменить направление градиента с помощью "крутилки" (также ей можно указать направление в градусах)
- От центра к краю - данный градиент распространяет изменение цвета от центра к краю
После добавления одного модуля настройки слайдера пользователь сможет настроить цветовую схему для отображения фона. Цвета можно выбирать с помощью:
- Палитры - цвет выбирается на палитре с помощью мыши
- HEX кода - прописывается HEX-код нужного цвета можно узнать в сети
- RGB панель - необходимо выставить числовые значения на RGB панели для каждого из основных цветов можно узнать в сети
Также пользователю доступен "ползунок" яркости цвета позволяющий регулировать яркость и насыщенность цвета. В качестве альтернативы "ползунку" можно использовать параметр "Alpha", также отвечающий за яркость.
Добавление настроенного виджета в трансляцию
Чтобы полностью ознакомиться с работой данной функциональность пользователю необходимо запустить трансляцию с расписанием и добавить в качестве контента данный виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи из Wikipedia:
Видеоинструкция
Настройка виджета динамического отображения новостей через RSS
Дополнительная информация
Если данная статья не помогает использовать функционал по назначению или после ее прочтения остаются вопросы можно озвучить данные вопросы в разделе "Обсуждения" вверху страницы.
Также дополнительную информацию можно узнать на странице Как взаимодействовать пользователю с разделом "Обсуждения"
