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

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

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

1. Статичной новости с графическим контентом
2. В режим бегущей строки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример отображения блока общих настроек

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

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

Пример отображения блока настроек при отключенном режиме "бегущей строки"

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

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

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

Слайдер с палитрами

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

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

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

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

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

Настройка цветового отображения

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

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

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

Пример отображения выбранной и невыбранной точки

Пользователю два вида отображения градиента:

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

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

• От центра к краю - данный градиент распространяет изменение цвета от центра к краю

Пример отображения градиента во втором варианте

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

1. Палитры - цвет выбирается на палитре с помощью мыши
2. HEX кода - прописывается HEX-код нужного цвета можно узнать в сети
3. RGB панель - необходимо выставить числовые значения на RGB панели для каждого из основных цветов можно узнать в сети

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

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

Пример отображения ползунка насыщенности цвета и параметра "Alpha"

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

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

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

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

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

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

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

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

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