Инструкция по работе виджета бегущей строки для новостей/en: различия между версиями

Материал из SmartPlayer
(Новая страница: «== 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 W...»)
(Новая страница: «== Additional Information == If this article does not help in using the functionality as intended or if there are any questions after reading, they can be asked in the "Discussions" section at the top of the page. thumb|center| Example of the "Discussions" tab on the wiki page |800px Additional information can also be found on the page Как взаимодействовать пользователю с разде...»)
 
(не показаны 2 промежуточные версии этого же участника)
Строка 11: Строка 11:
{{Note|If the user has a large amount of content in their personal account, they can use the sorting function and select the content type "Widget." Using this feature, the user will be able to view all widgets added to the personal account.  
{{Note|If the user has a large amount of content in their personal account, they can use the sorting function and select the content type "Widget." Using this feature, the user will be able to view all widgets added to the personal account.  
[[File:Виджеты.png|thumb|center| Example of proper sorting for easier widget search |800px]]|warn}}
[[File:Виджеты.png|thumb|center| Example of proper sorting for easier widget search |800px]]|warn}}
<div lang="ru" dir="ltr" class="mw-content-ltr">
== 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.  
После переноса виджета в раздел "Контент" для первичной настройки виджета пользователю необходимо дважды кликнуть по иконке виджета. Данное действие перенесет его на главную страницу виджета.
[[File:Стартовая_страница виджета.png|thumb|center| Example of the widget’s main page |800px]] On the widget’s main page, the user can access the widget’s settings by clicking on the gear icon.  
[[File:Стартовая_страница виджета.png|thumb|center| Пример отображения главной страницы виджета|800px]]
[[File:переход в настройки.png|thumb|center| Example of the settings icon for accessing the widget settings |800px]]
На главной странице виджета можно перейти в настройки параметров виджета. Это можно сделать с помощью клика по иконке в виде шестеренки.
=== Widget Configuration Parameters ===  
[[File:переход в настройки.png|thumb|center| Пример отображения иконки для перехода в настройки виджета|800px]]
{{Note|The general settings block applies to the entire widget regardless of the operating mode used. If the widget is intended to display news text with images (without ticker mode), the parameters from this category need to be configured (listed below). If the widget is to be used in ticker mode, the "Ticker mode" checkbox must be activated, and the accompanying settings block (listed below) must be used.|warn}}
=== '''Параметры для настройки виджета''' ===
The following parameters can be used to configure the widget:<br> '''General settings block:'''
{{Note|Блок общих настроек применяется на весь виджет вне зависимости от используемых режимов работы. Если виджет планируется настроить для вывода текста новости с изображением (без бегущей строки), то необходимо настраивать параметры из этой категории (указаны ниже в списке). Если же виджет планируется использовать в режиме бегущей строки, то необходимо активировать чекбокс/галочку режима бегущей строки и для ее настройки использовать прилагающийся блок настроек (указаны ниже в списке)|warn}}
* 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.
К действиям с помощью который можно настроить виджет относятся следующие параметры:<br>
* 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.
* Ссылка на ресурс - позволяет указать URL - ссылку на новостной портал, из которого будет использоваться новостной блок для виджета. В данном случае ссылка должна вести на RSS ресурс получаемый от сервера в виде XML разметки
* 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).
* Анимация - позволяет пользователю выбрать анимацию при смене новостей. Доступно два вида анимации: fade (анимация с постепенно исчезающим фоном) и  slide (скользящая анимация справа налево)
* Autoscroll checkbox – when activated, autoscroll will be enabled for large news articles that do not fit on the screen.
* Задержка смены контента - измеряется в секундах и позволяет пользователю указать числовое значение скорости смены новостей
[[File:Общие_настройки.png|thumb|center| Example of the general settings block |800px]]
* Чекбокс (галочка) отключить показ картинок - при активации позволяет отключить возможность отображать новость вместе с изображением. То есть при активации оставляет только текст от новости. Если же деактивировать данный чекбокс (галочку), то новость будет отображаться с изображением (при ее наличии у новости)
'''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.
[[File:Общие_настройки.png|thumb|center| Пример отображения блока общих настроек|800px]]  
* Static news text color – allows the user to select the color of the news text. The color can be specified using a HEX code [https://colorscheme.ru/html-colors.html 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.
* Цвет текста в статичной новости - позволяет пользователю выбрать цвет текста, который будет использоваться для бегущей строки. Цвет можно указать с помощью HEX-кода [https://colorscheme.ru/html-colors.html можно узнать в сети]
* 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.  
* Высота картинки - измеряется в пикселях и позволяет пользователю указать высоту используемого для новости изображения в качестве числового значения
[[File:Текст_отображение.png|thumb|center| Example of the settings block when ticker mode is disabled |800px]]
* Отступ картинки - измеряется в пикселях и позволяет пользователю указать дистанцию отступа для изображения в качестве числового значения. Отступ работает от левой стороны экрана
'''Block: "Settings for ticker mode":'''
* Тэг с rss канала - данная настройка указывает на XML-тэг, который позволяет виджету понять из какого XML-тега использовать текст для новости. В текущей реализации доступна три тега: discription, content и title.
* 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.
[[File:Текст_отображение.png|thumb|center| Пример отображения блока настроек при отключенном режиме "бегущей строки"|800px]]  
* 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.
* Скорость бегущей строки - может принимать значения от "0" до "1000". Позволяет пользователю установить скорость появления и прокрутки бегущей строки
* 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.
* Размер шрифта бегущей строки - позволяет пользователю указать числовое значение, которое будет использоваться в качестве размера шрифта для бегущей строки
[[File:Настройки_бегущей_строки.png|thumb|center| Example of the ticker mode settings block |800px]]
* Направление движения бегущей строки - позволяет пользователю выбрать направление, в котором будет двигаться бегущая строка. В текущей реализации доступно два варианта: слева направо и справа налево
=== Color Slider ===  
* Отступ бегущей строки - измеряется в пикселях и позволяет указать числовым значением отступ при включенной бегущей строке относительно левой и правой части экрана
The color slider allows the user to select how the background for the news will be displayed and how many backgrounds will be used for the news.<br> To add a background, the user needs to click "Add color."  
[[File:Настройки_бегущей_строки.png|thumb|center| Пример отображения блока настроек|800px]]
[[File:Добавить_слайдер_.png|thumb|center| Example of the "Add color" button for the slider |800px]]  
</div>
{{Note|The slider can be removed using the trash can icon on the right.  
<div lang="ru" dir="ltr" class="mw-content-ltr">
[[File:Удаление_слайдера.png|thumb|center| Example of the slider removal icon |800px]]|warn}}  
=== '''Слайдер с палитрами''' ===
Once added to the settings screen, the slider’s color palette allows the user to customize the news display to their needs. Palettes can be added without limitations, but they will change along with the news.<br> If the number of palettes is fewer than the number of news articles, the palette will restart when the news articles loop.
Слайдер цветов позволяет пользователю выбирать как будет отображаться фон для новостей и какое количество фонов будет использоваться для новостей.<br>
=== Color Display Settings ===  
Для того, чтобы добавить один фон пользователю необходимо нажать "Добавить цвет".
All slider palettes have the option to create a gradient transition. The user can set any number of gradient points by clicking on the gradient panel.  
[[File:Добавить_слайдер_.png|thumb|center| Пример отображения кнопки "Добавить цвет" для слайдера |800px]]
[[File:Количество_градиентов.png|thumb|center| Example of multiple gradient points on the palette |800px]]  
{{Note|Слайдер можно удалить по иконке справа в виде мусорной корзины.
By selecting the desired point with a mouse click, the user can assign it a specific color. When a point is not selected, it appears as an unfilled white circle. When selected, it appears as a filled white circle.  
[[File:Удаление_слайдера.png|thumb|center| Пример отображения иконки для удаления слайдера |800px]]|warn}}
[[File:Пример_кругов.png|thumb|center| Example of selected and unselected points |800px]]  
После добавленная на экране настроек палитра для слайдера позволяет пользователю создать отображение новости под свой нужды. Добавлять палитры можно без ограничений, но нужно понимать, что они будут меняться вместе с новостью.<br>
There are two types of gradient displays available to the user:
Если у пользователя палитр меньше, чем количество новостей, то проигрывание использование палитра начнется заново.
* Bottom to top – this gradient allows for changing the direction using a "rotator" (you can also specify the direction in degrees). [[File:Первый_вариант_.png|thumb|center| Example of the first gradient option |800px]]
=== '''Настройка цветового отображения''' ===
* Center to edge – this gradient spreads the color transition from the center outward. [[File:Второй_вариант 2.png|thumb|center| Example of the second gradient option |800px]]  
Все палитры для слайдеров имеют возможность делать градиентный переход. Пользователь может выставить любое количество точек градиента с помощью клика на панели градиента.
After adding one slider module, the user can customize the color scheme for the background. Colors can be selected using:
[[File:Количество_градиентов.png|thumb|center| Пример отображения нескольких точек для градиентов на палитре|800px]]  
# Palette – the color is chosen from the palette using the mouse.
Выбрав нужную точку с помощью клика мыши, пользователь может установить ей определенный цвет. Когда точка не выбрана ее отображение - белый незакрашенный круг. Когда точка выбрана - ее отображение белый закрашенный круг.
# HEX code – the user enters the desired color's HEX code [https://colorscheme.ru/html-colors.html available online].
[[File:Пример_кругов.png|thumb|center| Пример отображения выбранной и невыбранной точки|800px]]  
# RGB panel – numerical values for each primary color can be set using the RGB panel [https://colorscheme.ru/html-colors.html available online].
Пользователю два вида отображения градиента:
[[File:3_цвета.png|thumb|center| Example of all three color selection options on the palette |800px]]  
* Снизу вверх - данный градиент имеет возможность сменить направление градиента с помощью "крутилки" (также ей можно указать направление в градусах)  
The user also has access to a brightness slider that allows adjusting the brightness and saturation of the color. As an alternative to the slider, the "Alpha" parameter can be used, which also controls brightness.  
[[File:Первый_вариант_.png|thumb|center| Пример отображения градиента в первом варианте|800px]]
[[File:Альфа_и_ползунок.png|thumb|center| Example of the brightness slider and the "Alpha" parameter |800px]]
* От центра к краю - данный градиент распространяет изменение цвета от центра к краю
== Adding the Configured Widget to a Broadcast ==  
[[File:Второй_вариант 2.png|thumb|center| Пример отображения градиента во втором варианте|800px]]
To fully explore the functionality, the user needs to start a scheduled broadcast and add this widget as content. To review the steps mentioned earlier about creating a broadcast and schedule, it is recommended to read the following Wikipedia articles:
После добавления одного модуля настройки слайдера пользователь сможет настроить цветовую схему для отображения фона. Цвета можно выбирать с помощью:
# Палитры - цвет выбирается на палитре с помощью мыши
# HEX кода - прописывается HEX-код нужного цвета [https://colorscheme.ru/html-colors.html можно узнать в сети]
# RGB панель - необходимо выставить числовые значения на RGB панели для каждого из основных цветов [https://colorscheme.ru/html-colors.html можно узнать в сети]
[[File:3_цвета.png|thumb|center| Пример отображения всех трех видов настройки цвета на палитре |800px]]
Также пользователю доступен "ползунок" яркости цвета позволяющий регулировать яркость и насыщенность цвета. В качестве альтернативы "ползунку" можно использовать параметр "Alpha", также отвечающий за яркость.
[[File:Альфа_и_ползунок.png|thumb|center| Пример отображения ползунка насыщенности цвета и параметра "Alpha" |800px]]
== '''Добавление настроенного виджета в трансляцию''' ==
Чтобы полностью ознакомиться с работой данной функциональность пользователю необходимо запустить трансляцию с расписанием и добавить в качестве контента данный виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи из Wikipedia:
* [[Раздел "Устройства"]]
* [[Раздел "Устройства"]]
* [[Раздел "Контент на устройства"]]
* [[Раздел "Контент на устройства"]]
* [[Раздел "Трансляции"]]
* [[Раздел "Трансляции"]]
* [[Раздел "Расписание"]]
* [[Раздел "Расписание"]]
== '''Видеоинструкция''' ==
== Video Tutorial == [https://www.youtube.com/watch?v=FrXttSiJLyM Configuring the dynamic news display widget via RSS]
[https://www.youtube.com/watch?v=FrXttSiJLyM Настройка виджета динамического отображения новостей через RSS ]
</div>


<div lang="ru" dir="ltr" class="mw-content-ltr">
== Additional Information ==  
== '''Дополнительная информация''' ==
If this article does not help in using the functionality as intended or if there are any questions after reading, they can be asked in the "Discussions" section at the top of the page.  
Если данная статья не помогает использовать функционал по назначению или после ее прочтения остаются вопросы можно озвучить данные вопросы в разделе "Обсуждения" вверху страницы.
[[File:RSS_обсуждения.png|thumb|center| Example of the "Discussions" tab on the wiki page |800px]]  
[[File:RSS_обсуждения.png|thumb|center| Пример отображения вкладки "Обсуждения" на wiki-странице |800px]]
Additional information can also be found on the page [[Как взаимодействовать пользователю с разделом "Обсуждения"]].
Также дополнительную информацию можно узнать на странице [[Как взаимодействовать пользователю с разделом "Обсуждения"]]
</div>

Текущая версия от 12:27, 18 сентября 2024

Widget Description

This widget is a feature that allows real-time display of information from news sources in two modes:

  1. Static news with graphical content
  2. 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.

Example of the widget in ".zip" archive format

Afterward, the user should log into the personal account and go to the "Content" section.

Example of the "Content" section in the personal account

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.

Example of dragging and dropping the widget
If the user has a large amount of content in their personal account, they can use the sorting function and select the content type "Widget." Using this feature, the user will be able to view all widgets added to the personal account.
Example of proper sorting for easier widget search

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.

Example of 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.

Example of the settings icon for accessing the widget settings

Widget Configuration Parameters

The general settings block applies to the entire widget regardless of the operating mode used. If the widget is intended to display news text with images (without ticker mode), the parameters from this category need to be configured (listed below). If the widget is to be used in ticker mode, the "Ticker mode" checkbox must be activated, and the accompanying settings block (listed below) must be used.

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.
Example of the general settings block

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.
Example of the settings block when ticker mode is disabled

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.
Example of the ticker mode settings block

Color Slider

The color slider allows the user to select how the background for the news will be displayed and how many backgrounds will be used for the news.
To add a background, the user needs to click "Add color."

Example of the "Add color" button for the slider
The slider can be removed using the trash can icon on the right.
Example of the slider removal icon

Once added to the settings screen, the slider’s color palette allows the user to customize the news display to their needs. Palettes can be added without limitations, but they will change along with the news.
If the number of palettes is fewer than the number of news articles, the palette will restart when the news articles loop.

Color Display Settings

All slider palettes have the option to create a gradient transition. The user can set any number of gradient points by clicking on the gradient panel.

Example of multiple gradient points on the palette

By selecting the desired point with a mouse click, the user can assign it a specific color. When a point is not selected, it appears as an unfilled white circle. When selected, it appears as a filled white circle.

Example of selected and unselected points

There are two types of gradient displays available to the user:

  • Bottom to top – this gradient allows for changing the direction using a "rotator" (you can also specify the direction in degrees).
    Example of the first gradient option
  • Center to edge – this gradient spreads the color transition from the center outward.
    Example of the second gradient option

After adding one slider module, the user can customize the color scheme for the background. Colors can be selected using:

  1. Palette – the color is chosen from the palette using the mouse.
  2. HEX code – the user enters the desired color's HEX code available online.
  3. RGB panel – numerical values for each primary color can be set using the RGB panel available online.
Example of all three color selection options on the palette

The user also has access to a brightness slider that allows adjusting the brightness and saturation of the color. As an alternative to the slider, the "Alpha" parameter can be used, which also controls brightness.

Example of the brightness slider and the "Alpha" parameter

Adding the Configured Widget to a Broadcast

To fully explore the functionality, the user needs to start a scheduled broadcast and add this widget as content. To review the steps mentioned earlier about creating a broadcast and schedule, it is recommended to read the following Wikipedia articles:

== Video Tutorial == Configuring the dynamic news display widget via RSS

Additional Information

If this article does not help in using the functionality as intended or if there are any questions after reading, they can be asked in the "Discussions" section at the top of the page.

Example of the "Discussions" tab on the wiki page

Additional information can also be found on the page Как взаимодействовать пользователю с разделом "Обсуждения".