Инструкция по работе виджета бегущей строки для новостей

Описание виджета

Данный виджет является функциональностью которая позволяет в режиме реального времени выводить информацию с новостных ресурсов. Виджет получает информацию с помощью URL-ссылки, которая является для него источником и выводит полученный на экран в виде новостного блока. С помощью внутренних настроек отображение новостного блока можно индивидуальным в зависимости от требований пользователя.

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

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

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

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

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

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

Пример отображения переноса виджета с помощью drag-n-drop

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

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

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

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

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

На главной странице виджета можно перейти в настройки параметров виджета. Это можно сделать с помощью клика по иконке в виде шестеренки.

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

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

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

• Выбор языка - позволяет выбрать на каком языке будет отображаться интерфейс виджета. В текущей реализации доступны два языка: русский и английский
• Ссылка на ресурс - позволяет указать URL - ссылку на новостной портал из которого будет использоваться новостной блок для виджета
• Слайдер цветов - позволяет пользователю выбрать цветовое сочетание с двумя вариантами градиентов для проигрывания новостей. (подробнее см. ниже). При наличии хотя бы одного слайдера цветов не работает "Фоновое изображения" (см. ниже) для новостей, так как заменяет данный блок слайдером
• Фоновое изображение - позволяет выбрать графический контент в качестве изображения для фона виджета. Не работает при наличии хотя бы одного слайдера цветов
• Анимация - позволяет пользователю выбрать анимацию при смене новостей. Доступно два вида анимации: fade (анимация с постепенно исчезающим фоном) и slide (скользящая анимация справа налево)
• Задержка смены контента - измеряется в секундах и позволяет пользователю указать числовое значение скорости смены новостей
• Чекбокс (галочка) отключить показ картинок - при активации позволяет отключить возможность отображать новость вместе с изображением. То есть при активации оставляет только текст от новости. Если же деактивировать данный чекбокс (галочку), то новость будет отображаться с изображением (при ее наличии у новости)
• Чекбокс (галочка) автоскролл - при активации позволяет использоваться автопролистывание новости если она большая по объему и не помещается на экран

Настройки для текстовой информации при отключенном режиме бегущей строки:

• Позиционирование для текста - позволяет пользователю выбрать в какой части экрана будет расположена бегущая строка. В текущей реализации доступно два варианта: по центру страницы или наверху страницы. Не работает в режиме бегущей строки
• Цвет текста в статичной новости - позволяет пользователю выбрать цвет текста, который будет использоваться для бегущей строки
• Размер шрифта текстовой новости - позволяет пользователю указать числовое значение, которое будет использоваться в качестве размера шрифта для бегущей строки
• Ширина картинки - измеряется в пикселях и позволяет пользователю указать ширину используемого для новости изображения в качестве числового значения
• Высота картинки - измеряется в пикселях и позволяет пользователю указать высоту используемого для новости изображения в качестве числового значения
• Отступ картинки - измеряется в пикселях и позволяет пользователю указать дистанцию отступа для изображения в качестве числового значения. Отступ работает от левой стороны экрана
• Тэг с rss канала - позволяет выбрать один из трех доступных тэгов, которые позволяют пользователю

Настройки для бегущей строки:

• Чекбокс (галочка) режима бегущей строки - при активации позволяет использовать пользователю бегущую строку для текстовой части новости. Убирает из новости изображение и прокручивает текущие новости одной строкой.
• Скорость бегущей строки - может принимать значения от "0" до "1000". Позволяет пользователю установить скорость появления и прокрутки бегущей строки
• Символ разделения новостей - позволяет пользователю указать символ, который будет использоваться в качестве разделителя новостей. Доступные символы ("."),(","),("/")
• Отступ между текстом новостей - позволяет пользователю указать расстояние в пикселях между новостями и символом разделения новостей. Расстояние актуально как для текущей проигрываемой новости, так и для следующей. Это значит что обе новости буду находиться на одинаковом расстоянии от символа разделения
• Цвет текста бегущей строки - позволяет пользователю выбрать цвет текста, который будет использоваться для бегущей строки
• Размер шрифта бегущей строки - позволяет пользователю указать числовое значение, которое будет использоваться в качестве размера шрифта для бегущей строки
• Направление движения бегущей строки - позволяет пользователю выбрать направление в котором будет двигаться бегущая строка. В текущей реализации доступно два варианта: слева направо и справа налево
• Отступ бегущей строки - измеряется в пикселях и позволяет указать числовым значением отступ при включенной бегущей строке относительно левой части экрана

Слайдер цветов

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

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

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

• Настраиваемый - от одной части экрана к другой. Данный градиент имеет возможность сменить направление градиента с помощью "крутилки" (также ей можно указать направление в градусах)

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

1. Палитры
2. HEX кода
3. Выставить числовые значения на RGB панели

Также пользователю доступен "ползунок" насыщенности цвета

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

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

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

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

Настройка виджета динамического отображения новостей через RSS

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

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

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

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