Инструкция по работе с комплексным виджетом: различия между версиями
Нет описания правки |
Нет описания правки |
||
| (не показано 9 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
<languages/> | |||
<translate> | |||
<!--T:1--> | |||
== '''Описание виджета''' == | == '''Описание виджета''' == | ||
Комплексный виджет — это решение, которое позволяет пользователям выводить в трансляцию свой контент и добавлять к нему информационные блоки. В качестве информационных блоков выступают другие виджеты, интегрированные в него как решение: | |||
* Время и дата (расположен в левом верхнем углу) | |||
* Погода (расположен в центральной части экрана) | |||
* RSS-лента (бегущая строка снизу) с информацией из сайта Лента.RU | |||
Также в правой верхней части экрана располагается логотип нужной компании. | |||
{{Note|Данный виджет реализован и работает на устройствах под управлением ОС Linux и Web OS. Также, виджет работает только на уровне личного кабинета, поэтому серверное приложение ему не нужно.|warn}} | |||
== '''Добавление виджета в личный кабинет''' == | == '''Добавление виджета в личный кабинет''' == | ||
Чтобы добавить данный виджет в личный кабинет пользователю необходимо запросить у специалиста команды технической поддержки виджет. Он будет предоставлен в формате ".zip" | Чтобы добавить данный виджет в личный кабинет пользователю необходимо запросить у специалиста команды технической поддержки виджет. Он будет предоставлен в формате ".zip" — архива. | ||
[[File:Комплексный_виджет.png|thumb|center| Пример виджета в формате ".zip" - архива|800px]] | [[File:Комплексный_виджет.png|thumb|center| Пример виджета в формате ".zip" - архива|800px]] | ||
После пользователь должен авторизоваться в личном кабинете и перейти в раздел "Контент". | После пользователь должен авторизоваться в личном кабинете и перейти в раздел "Контент". | ||
[[File:Раздел_контент_личного_кабиента.png|thumb|center| Пример отображения раздела "Контент" в личном кабинете |800px]] | [[File:Раздел_контент_личного_кабиента.png|thumb|center| Пример отображения раздела "Контент" в личном кабинете |800px]] | ||
В разделе "Контент" необходимо перетянуть данный виджет из локального хранилища в раздел "Контент". После того как пользователь перенесет виджет в личный кабинет он | В разделе "Контент" необходимо перетянуть данный виджет из локального хранилища в раздел "Контент". После того как пользователь перенесет виджет в личный кабинет он отобразится в списке с контентом. | ||
[[File:Перенос_виджета rss.png|thumb|center| Пример отображения переноса виджета с помощью drag-n-drop|800px]] | [[File:Перенос_виджета rss.png|thumb|center| Пример отображения переноса виджета с помощью drag-n-drop|800px]] | ||
{{Note|Если у пользователя много различного контента в личном кабинете, то он может воспользоваться функцией сортировки и выбрать нужный тип контента "Виджет". Воспользовавшись данной функциональностью, он сможет просмотреть все добавленные в личный кабинет виджеты. | {{Note|Если у пользователя много различного контента в личном кабинете, то он может воспользоваться функцией сортировки и выбрать нужный тип контента "Виджет". Воспользовавшись данной функциональностью, он сможет просмотреть все добавленные в личный кабинет виджеты. | ||
[[File:Нужный_виджет.png|thumb|center| Пример отображения правильной сортировки для более удобного поиска виджета |800px]]|warn}} | [[File:Нужный_виджет.png|thumb|center| Пример отображения правильной сортировки для более удобного поиска виджета |800px]]|warn}} | ||
== '''Настройка виджета''' == | == '''Настройка виджета''' == | ||
Для первичной настройки виджета пользователю необходимо дважды кликнуть по иконке | Для первичной настройки виджета пользователю необходимо дважды кликнуть по иконке виджета. Данное действие перенесет его на главную страницу виджета. | ||
[[File:Главная_страница_комплексногговиджета.png|thumb|center| Пример отображения главной страницы виджета|800px]] | [[File:Главная_страница_комплексногговиджета.png|thumb|center| Пример отображения главной страницы виджета|800px]] | ||
На главной странице виджета можно перейти в настройки параметров виджета. Это можно сделать с помощью клика по иконке в виде шестеренки в правом верхнем углу. | На главной странице виджета можно перейти в настройки параметров виджета. Это можно сделать с помощью клика по иконке в виде шестеренки в правом верхнем углу. | ||
| Строка 26: | Строка 31: | ||
# Погода | # Погода | ||
# Логотип | # Логотип | ||
Ниже будет | Ниже будет представлено подробное описание настроек и параметров. | ||
=== '''Основные''' === | === '''Основные''' === | ||
В основные настройки включены следующие параметры: | |||
* фон виджета — позволяет выбрать фон для виджета с помощью палитры. Цвет внутри палитры можно указать с помощью HEX-кода, который можно узнать в сети; | |||
* высота панели даты, времени, погоды и логотипа — позволяет выставить значение высоты. Измеряется в пикселях (px); | |||
* цвет панели даты, времени, погоды и логотипа — позволяет выбрать цвет панелей с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода можно узнать в сети. Также в палитре можно настроить прозрачность и градиент; | |||
* чекбокс «Отображать панель даты, времени, погоды и логотипа» — активирует/деактивирует отображение панели в виджете; | |||
* высота панели RSS-ленты — позволяет выставить значение высоты RSS-ленты. Измеряется в пикселях (px); | |||
* цвет панели RSS-ленты — позволяет выбрать цвет для rss-ленты с помощью панели. Цвет внутри палитры можно указать с помощью HEX -кода можно узнать в сети. Также в палитре можно настроить прозрачность и градиент; | |||
* чекбокс «Отображать панель RSS ленты» — активирует/деактивирует отображение панели в виджете; | |||
* расположение панелей — позволяет выбрать из списка порядок вывода информации. | |||
[[File:Блок_основные.png|thumb|center| Пример отображения настроек из блока «Основные»|800px]] | |||
=== '''Время и дата''' === | === '''Время и дата''' === | ||
В блок настроек «Время и дата» включены следующие параметры: | |||
* ширина блока времени и даты — позволяет выставить значение ширины блока. Измеряется в пикселях (px); | |||
* отступ слева — позволяет выставить значение отступа с левой стороны. Измеряется в пикселях (px) | |||
* адрес ntp-сервера — прописать URL-адрес сервера NTP; | |||
* чекбокс «использовать ntp-сервер» — активирует/деактивирует использование NTP-сервера; | |||
{{Note|NTP-сервер (Network Time Protocol) — это сервер, который передаёт точное время другим компьютерам по сети.<br>|warn}} | |||
* цвет элемента «Время» — позволяет выбрать цвет элемента «Время» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети; | |||
* цвет элемента «Место» — позволяет выбрать цвет элемента «Место» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети; | |||
* цвет элемента «Дата» — позволяет выбрать цвет элемента «Дата» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети; | |||
* цвет элемента «День недели» — позволяет выбрать цвет элемента «День недели» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети; | |||
* размер шрифта элемента «Время» — позволяет выставить размер шрифта элемента «Время». Доступно два способа: ползунок и ввод значения вручную; | |||
* размер шрифта элемента «Место» — позволяет выставить размер шрифта элемента «Место». Доступно два способа: ползунок и ввод значения вручную; | |||
* размер шрифта элемента «Дата» — позволяет выставить размер шрифта элемента «Дата». Доступно два способа: ползунок и ввод значения вручную; | |||
* размер шрифта элемента «День недели» — позволяет выставить размер шрифта элемента «День недели». Доступно два способа: ползунок и ввод значения вручную; | |||
* прозрачность блока — необходимо выставить значения 1 или 0. 1 — полностью непрозрачный, 0 — полностью прозрачный; | |||
* чекбокс «отображать время и дату» — активирует/деактивирует отображение панели в виджете. | |||
[[File:Блок_время_и_дата.png|thumb|center| Пример отображения настроек из блока «Время и дата»|800px]] | |||
=== '''Погода''' === | === '''Погода''' === | ||
=== '''Логотип'' === | В блок настроек «Погода» включены следующие параметры: | ||
* отступ блока погоды от левого края — позволяет ввести значение отступа. Измеряется в пикселях (px); | |||
* название города — позволяет ввести название города. Название города нужно указывать на английском языке; | |||
* ключ доступа к серверу погоды — ключ для подключения к сервису погоды Openweather; | |||
* цвет элемента «температура» — позволяет выбрать цвет элемента «Температура» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети; | |||
* цвет элемента «описание погоды» — позволяет выбрать цвет элемента «Описание погоды» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети; | |||
* цвет элемента «прогноз на сутки» — позволяет выбрать цвет элемента «Прогноз на сутки» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети; | |||
* размер шрифта элемента «температура» — позволяет выставить размер шрифта элемента «Температура». Доступно два способа: ползунок и ввод значения вручную; | |||
* размер шрифта элемента «описание погоды» — позволяет выставить размер шрифта элемента «Описание погоды». Доступно два способа: ползунок и ввод значения вручную; | |||
* размер шрифта элемента «прогноз на сутки» — позволяет выставить размер шрифта элемента «Прогноз на сутки». Доступно два способа: ползунок и ввод значения вручную; | |||
* прозрачность блока — необходимо выставить значения 1 или 0. 1 — полностью непрозрачный, 0 — полностью прозрачный; | |||
* чекбокс «отображать погоду» — активирует/деактивирует отображение панели в виджете. | |||
[[File:Блок_погода.png|thumb|center| Пример отображения настроек из блока «Погода»|800px]] | |||
=== '''Логотип''' === | |||
В блок настроек «Логотип» включены следующие параметры: | |||
* логотип — позволяет выбрать нужный логотип из контента, хранящегося в личном кабинете; | |||
* отступ логотипа от правого края в пикселях — позволяет ввести значение отступа. Измеряется в пикселях (px); | |||
* прозрачность блока — необходимо выставить значения 1 или 0. 1 — полностью непрозрачный, 0 — полностью прозрачный; | |||
* чекбокс «отображать логотип» — активирует/деактивирует отображение логотипа в виджете. | |||
[[File:Блок_логотип.png|thumb|center| Пример отображения настроек из блока «Логотип»|800px]] | |||
=== '''Лента новостей (бегущая строка)''' === | |||
В блок настроек «Лента новостей (бегущая строка)» включены следующие параметры: | |||
* ссылка на источник — необходимо прописать URL-адрес источника; | |||
* шрифты — необходимо выбрать тип шрифта, доступный из списка; | |||
* интервал обновления ленты — указать значение для обновления ленты, в минутах; | |||
* тэг с RSS-канала — необходимо выбрать тэг, который будет считываться и использоваться в виджете. Доступно три варианта: title, description, content. | |||
* скорость бегущей строки — ввести значение для контроля скорости прокрутки бегущей строки; | |||
* отступ между текстом новостей — позволяет ввести значение отступа. Измеряется в пикселях (px); | |||
* символ разделения новостей (в режиме бегущей строки) — необходимо ввести любой символ, который будет разделять обработанные новости; | |||
* цвет текста бегущей строки — позволяет выбрать цвет элемента «Описание погоды» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX-кода, который можно узнать в сети; | |||
* размер шрифта бегущей строки — позволяет ввести значение размера шрифта для бегущей строки. Измеряется в пикселях (px); | |||
* направление движения бегущей строки — выбрать доступный вариант из списка. Доступно два варианта: влево, вправо; | |||
* чекбокс «отображать RSS-ленту» — активирует/деактивирует отображение панели в виджете. | |||
[[File:Блок_лента_новостей.png|thumb|center| Пример отображения настроек из блока «Лента новостей (бегущая строка)»|800px]] | |||
== '''Настроенный виджет''' == | |||
После завершения настройки виджета, можно получить результат как на скриншоте ниже: | |||
[[File:Настроенный_комплексный виджет.png|thumb|center| Пример отображения настроенного виджета|800px]] | |||
== '''Завершение настройки виджета''' == | |||
{{Note|После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана. | |||
[[File:Применение_настрок.png|thumb|center| Пример отображения кнопки «Применить настройки»|800px]] | |||
Далее виджет растянется на весь экран и пользователь должен нажать на кнопку «Сохранить», внизу по центру экрана. | |||
[[File:Сохран.png|thumb|center| Пример отображения кнопки «Сохранить»|800px]]|warn}} | |||
== '''Загрузка и скачивание настроек''' == | |||
В процессе взаимодействия с настройками виджета пользователь может загрузить или выгрузить настройки виджета. Каждое из указанных действий можно сделать с помощью отдельных иконок в интерфейсе виджета. Иконки расположены в виджете снизу по центру. | |||
[[File:Иконки_загрузки.png|thumb|center| Пример отображения иконок в настройках виджета |800px]] | |||
== '''Добавление настроенного виджета в трансляцию''' == | == '''Добавление настроенного виджета в трансляцию''' == | ||
Чтобы полностью | Чтобы полностью разораться с работой данной функциональности пользователю необходимо запустить трансляцию с расписанием и добавить в качестве контента данный виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи: | ||
* [[Раздел "Устройства"]] | * [[Раздел "Устройства"]] | ||
* [[Раздел "Контент на устройства"]] | * [[Раздел "Контент на устройства"]] | ||
| Строка 38: | Строка 114: | ||
* [[Раздел "Расписание"]] | * [[Раздел "Расписание"]] | ||
== '''Видеоинструкция''' == | == '''Видеоинструкция''' == | ||
[https:// | [https://vkvideo.ru/video-227547238_456239084 Настройка комплексного виджета] | ||
== '''Дополнительная информация''' == | == '''Дополнительная информация''' == | ||
Если данная статья не помогает использовать функционал по назначению или после ее прочтения остаются вопросы можно озвучить данные вопросы в разделе "Обсуждения" вверху страницы. | Если данная статья не помогает использовать функционал по назначению или после ее прочтения остаются вопросы можно озвучить данные вопросы в разделе "Обсуждения" вверху страницы. | ||
[[File:Обсуждение_комплексного_виджета.png|thumb|center| Пример отображения вкладки "Обсуждения" на wiki-странице |800px]] | [[File:Обсуждение_комплексного_виджета.png|thumb|center| Пример отображения вкладки "Обсуждения" на wiki-странице |800px]] | ||
Также дополнительную информацию можно узнать на странице [[Как взаимодействовать пользователю с разделом "Обсуждения"]] | Также дополнительную информацию можно узнать на странице [[Как взаимодействовать пользователю с разделом "Обсуждения"]] | ||
</translate> | |||
Текущая версия от 12:38, 28 июля 2025
Описание виджета
Комплексный виджет — это решение, которое позволяет пользователям выводить в трансляцию свой контент и добавлять к нему информационные блоки. В качестве информационных блоков выступают другие виджеты, интегрированные в него как решение:
- Время и дата (расположен в левом верхнем углу)
- Погода (расположен в центральной части экрана)
- RSS-лента (бегущая строка снизу) с информацией из сайта Лента.RU
Также в правой верхней части экрана располагается логотип нужной компании.
Добавление виджета в личный кабинет
Чтобы добавить данный виджет в личный кабинет пользователю необходимо запросить у специалиста команды технической поддержки виджет. Он будет предоставлен в формате ".zip" — архива.

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

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


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

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

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

Все параметры для настройки можно разделить на четыре группы:
- Основные
- Время и дата
- Погода
- Логотип
Ниже будет представлено подробное описание настроек и параметров.
Основные
В основные настройки включены следующие параметры:
- фон виджета — позволяет выбрать фон для виджета с помощью палитры. Цвет внутри палитры можно указать с помощью HEX-кода, который можно узнать в сети;
- высота панели даты, времени, погоды и логотипа — позволяет выставить значение высоты. Измеряется в пикселях (px);
- цвет панели даты, времени, погоды и логотипа — позволяет выбрать цвет панелей с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода можно узнать в сети. Также в палитре можно настроить прозрачность и градиент;
- чекбокс «Отображать панель даты, времени, погоды и логотипа» — активирует/деактивирует отображение панели в виджете;
- высота панели RSS-ленты — позволяет выставить значение высоты RSS-ленты. Измеряется в пикселях (px);
- цвет панели RSS-ленты — позволяет выбрать цвет для rss-ленты с помощью панели. Цвет внутри палитры можно указать с помощью HEX -кода можно узнать в сети. Также в палитре можно настроить прозрачность и градиент;
- чекбокс «Отображать панель RSS ленты» — активирует/деактивирует отображение панели в виджете;
- расположение панелей — позволяет выбрать из списка порядок вывода информации.

Время и дата
В блок настроек «Время и дата» включены следующие параметры:
- ширина блока времени и даты — позволяет выставить значение ширины блока. Измеряется в пикселях (px);
- отступ слева — позволяет выставить значение отступа с левой стороны. Измеряется в пикселях (px)
- адрес ntp-сервера — прописать URL-адрес сервера NTP;
- чекбокс «использовать ntp-сервер» — активирует/деактивирует использование NTP-сервера;
- цвет элемента «Время» — позволяет выбрать цвет элемента «Время» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
- цвет элемента «Место» — позволяет выбрать цвет элемента «Место» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
- цвет элемента «Дата» — позволяет выбрать цвет элемента «Дата» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
- цвет элемента «День недели» — позволяет выбрать цвет элемента «День недели» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
- размер шрифта элемента «Время» — позволяет выставить размер шрифта элемента «Время». Доступно два способа: ползунок и ввод значения вручную;
- размер шрифта элемента «Место» — позволяет выставить размер шрифта элемента «Место». Доступно два способа: ползунок и ввод значения вручную;
- размер шрифта элемента «Дата» — позволяет выставить размер шрифта элемента «Дата». Доступно два способа: ползунок и ввод значения вручную;
- размер шрифта элемента «День недели» — позволяет выставить размер шрифта элемента «День недели». Доступно два способа: ползунок и ввод значения вручную;
- прозрачность блока — необходимо выставить значения 1 или 0. 1 — полностью непрозрачный, 0 — полностью прозрачный;
- чекбокс «отображать время и дату» — активирует/деактивирует отображение панели в виджете.

Погода
В блок настроек «Погода» включены следующие параметры:
- отступ блока погоды от левого края — позволяет ввести значение отступа. Измеряется в пикселях (px);
- название города — позволяет ввести название города. Название города нужно указывать на английском языке;
- ключ доступа к серверу погоды — ключ для подключения к сервису погоды Openweather;
- цвет элемента «температура» — позволяет выбрать цвет элемента «Температура» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
- цвет элемента «описание погоды» — позволяет выбрать цвет элемента «Описание погоды» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
- цвет элемента «прогноз на сутки» — позволяет выбрать цвет элемента «Прогноз на сутки» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
- размер шрифта элемента «температура» — позволяет выставить размер шрифта элемента «Температура». Доступно два способа: ползунок и ввод значения вручную;
- размер шрифта элемента «описание погоды» — позволяет выставить размер шрифта элемента «Описание погоды». Доступно два способа: ползунок и ввод значения вручную;
- размер шрифта элемента «прогноз на сутки» — позволяет выставить размер шрифта элемента «Прогноз на сутки». Доступно два способа: ползунок и ввод значения вручную;
- прозрачность блока — необходимо выставить значения 1 или 0. 1 — полностью непрозрачный, 0 — полностью прозрачный;
- чекбокс «отображать погоду» — активирует/деактивирует отображение панели в виджете.

Логотип
В блок настроек «Логотип» включены следующие параметры:
- логотип — позволяет выбрать нужный логотип из контента, хранящегося в личном кабинете;
- отступ логотипа от правого края в пикселях — позволяет ввести значение отступа. Измеряется в пикселях (px);
- прозрачность блока — необходимо выставить значения 1 или 0. 1 — полностью непрозрачный, 0 — полностью прозрачный;
- чекбокс «отображать логотип» — активирует/деактивирует отображение логотипа в виджете.

Лента новостей (бегущая строка)
В блок настроек «Лента новостей (бегущая строка)» включены следующие параметры:
- ссылка на источник — необходимо прописать URL-адрес источника;
- шрифты — необходимо выбрать тип шрифта, доступный из списка;
- интервал обновления ленты — указать значение для обновления ленты, в минутах;
- тэг с RSS-канала — необходимо выбрать тэг, который будет считываться и использоваться в виджете. Доступно три варианта: title, description, content.
- скорость бегущей строки — ввести значение для контроля скорости прокрутки бегущей строки;
- отступ между текстом новостей — позволяет ввести значение отступа. Измеряется в пикселях (px);
- символ разделения новостей (в режиме бегущей строки) — необходимо ввести любой символ, который будет разделять обработанные новости;
- цвет текста бегущей строки — позволяет выбрать цвет элемента «Описание погоды» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX-кода, который можно узнать в сети;
- размер шрифта бегущей строки — позволяет ввести значение размера шрифта для бегущей строки. Измеряется в пикселях (px);
- направление движения бегущей строки — выбрать доступный вариант из списка. Доступно два варианта: влево, вправо;
- чекбокс «отображать RSS-ленту» — активирует/деактивирует отображение панели в виджете.

Настроенный виджет
После завершения настройки виджета, можно получить результат как на скриншоте ниже:

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

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

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

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

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