Инструкция по работе с комплексным виджетом: различия между версиями

Текущая версия от 12:38, 28 июля 2025

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

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

Время и дата (расположен в левом верхнем углу)
Погода (расположен в центральной части экрана)
RSS-лента (бегущая строка снизу) с информацией из сайта Лента.RU

Также в правой верхней части экрана располагается логотип нужной компании.

Данный виджет реализован и работает на устройствах под управлением ОС Linux и Web OS. Также, виджет работает только на уровне личного кабинета, поэтому серверное приложение ему не нужно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все параметры для настройки можно разделить на четыре группы:

Основные
Время и дата
Погода
Логотип

Ниже будет представлено подробное описание настроек и параметров.

Основные

В основные настройки включены следующие параметры:

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

Пример отображения настроек из блока «Основные»

Время и дата

В блок настроек «Время и дата» включены следующие параметры:

ширина блока времени и даты — позволяет выставить значение ширины блока. Измеряется в пикселях (px);
отступ слева — позволяет выставить значение отступа с левой стороны. Измеряется в пикселях (px)
адрес ntp-сервера — прописать URL-адрес сервера NTP;
чекбокс «использовать ntp-сервер» — активирует/деактивирует использование NTP-сервера;

NTP-сервер (Network Time Protocol) — это сервер, который передаёт точное время другим компьютерам по сети.

цвет элемента «Время» — позволяет выбрать цвет элемента «Время» с помощью палитры. Цвет внутри палитры можно указать с помощью 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-ленту» — активирует/деактивирует отображение панели в виджете.

Пример отображения настроек из блока «Лента новостей (бегущая строка)»

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

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

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

После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана.

Пример отображения кнопки «Применить настройки»

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

Загрузка и скачивание настроек

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

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

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

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

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

Настройка комплексного виджета

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

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

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

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

@@ Строка 1: / Строка 1: @@
+<languages/>
+<translate>
+<!--T:1-->
 == '''Описание виджета''' ==
-Комплексный виджет — это решение, которое позволяет пользователям выводить в трансляцию свой контент и добавлять к нему информационные блоки. В качестве информационных блоков выступают другие виджеты интегрированные в него как решение:
+Комплексный виджет — это решение, которое позволяет пользователям выводить в трансляцию свой контент и добавлять к нему информационные блоки. В качестве информационных блоков выступают другие виджеты, интегрированные в него как решение:
-* Время и дата (расположен слева-вверху)
+* Время и дата (расположен в левом верхнем углу)
 * Погода (расположен в центральной части экрана)
 * RSS-лента (бегущая строка снизу) с информацией из сайта Лента.RU
 Также в правой верхней части экрана располагается логотип нужной компании.
-{{Note|Данный виджет реализован и работает на устройствах под управлением ОС Linux и Web OS. Также, виджет работает только на уровне личного кабинета, поэтому серверное приложение ему ненужно.|warn}}
+{{Note|Данный виджет реализован и работает на устройствах под управлением ОС Linux и Web OS. Также, виджет работает только на уровне личного кабинета, поэтому серверное приложение ему не нужно.|warn}}
 == '''Добавление виджета в личный кабинет''' ==
-Чтобы добавить данный виджет в личный кабинет пользователю необходимо запросить у специалиста команды технической поддержки виджет. Он будет предоставлен в формате ".zip" - архива.
+Чтобы добавить данный виджет в личный кабинет пользователю необходимо запросить у специалиста команды технической поддержки виджет. Он будет предоставлен в формате ".zip" — архива.
 [[File:Комплексный_виджет.png|thumb|center| Пример виджета в формате ".zip" - архива|800px]]
 После пользователь должен авторизоваться в личном кабинете и перейти в раздел "Контент".
 [[File:Раздел_контент_личного_кабиента.png|thumb|center| Пример отображения раздела "Контент" в личном кабинете |800px]]
-В разделе "Контент" необходимо перетянуть данный виджет из локального хранилища в раздел "Контент". После того как пользователь перенесет виджет в личный кабинет он отобразиться в списке с контентом.
+В разделе "Контент" необходимо перетянуть данный виджет из локального хранилища в раздел "Контент". После того как пользователь перенесет виджет в личный кабинет он отобразится в списке с контентом.
 [[File:Перенос_виджета rss.png|thumb|center| Пример отображения переноса виджета с помощью drag-n-drop|800px]]
 {{Note|Если у пользователя много различного контента в личном кабинете, то он может воспользоваться функцией сортировки и выбрать нужный тип контента "Виджет". Воспользовавшись данной функциональностью, он сможет просмотреть все добавленные в личный кабинет виджеты.
 [[File:Нужный_виджет.png|thumb|center| Пример отображения правильной сортировки для более удобного поиска виджета |800px]]|warn}}
 == '''Настройка виджета''' ==
-Для первичной настройки виджета пользователю необходимо дважды кликнуть по иконке виджет. Данное действие перенесет его на главную страницу виджета.
+Для первичной настройки виджета пользователю необходимо дважды кликнуть по иконке виджета. Данное действие перенесет его на главную страницу виджета.
 [[File:Главная_страница_комплексногговиджета.png|thumb|center| Пример отображения главной страницы виджета|800px]]
 На главной странице виджета можно перейти в настройки параметров виджета. Это можно сделать с помощью клика по иконке в виде шестеренки в правом верхнем углу.
@@ Строка 31: / Строка 34: @@
 === '''Основные''' ===
 В основные настройки включены следующие параметры:
-* фон виджета — позволяет выбрать фон для виджета с помощью . Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
+* фон виджета — позволяет выбрать фон для виджета с помощью палитры. Цвет внутри палитры можно указать с помощью HEX-кода, который можно узнать в сети;
 * высота панели даты, времени, погоды и логотипа — позволяет выставить значение высоты. Измеряется в пикселях (px);
 * цвет панели даты, времени, погоды и логотипа — позволяет выбрать цвет панелей с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода можно узнать в сети. Также в палитре можно настроить прозрачность и градиент;
@@ Строка 44: / Строка 47: @@
 * ширина блока времени и даты — позволяет выставить значение ширины блока. Измеряется в пикселях (px);
 * отступ слева — позволяет выставить значение отступа с левой стороны. Измеряется в пикселях (px)
-* адрес ntp-сервера — прописатm URL-адрес сервера NTP;
+* адрес ntp-сервера — прописать URL-адрес сервера NTP;
 * чекбокс «использовать ntp-сервер» — активирует/деактивирует использование NTP-сервера;
 {{Note|NTP-сервер (Network Time Protocol) — это сервер, который передаёт точное время другим компьютерам по сети.<br>|warn}}
@@ Строка 51: / Строка 54: @@
 * цвет элемента «Дата» — позволяет выбрать цвет элемента «Дата» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
 * цвет элемента «День недели» — позволяет выбрать цвет элемента «День недели» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
-* размер шрифта элемента «Время» — позволяет выставить размер шрифта элемента «Время». Доступно два способа: ползунок и ввод значение вручную;
+* размер шрифта элемента «Время» — позволяет выставить размер шрифта элемента «Время». Доступно два способа: ползунок и ввод значения вручную;
-* размер шрифта элемента «Место» — позволяет выставить размер шрифта элемента «Место». Доступно два способа: ползунок и ввод значение вручную;
+* размер шрифта элемента «Место» — позволяет выставить размер шрифта элемента «Место». Доступно два способа: ползунок и ввод значения вручную;
-* размер шрифта элемента «Дата» — позволяет выставить размер шрифта элемента «Дата». Доступно два способа: ползунок и ввод значение вручную;
+* размер шрифта элемента «Дата» — позволяет выставить размер шрифта элемента «Дата». Доступно два способа: ползунок и ввод значения вручную;
-* размер шрифта элемента «День недели» — позволяет выставить размер шрифта элемента «День недели». Доступно два способа: ползунок и ввод значение вручную;
+* размер шрифта элемента «День недели» — позволяет выставить размер шрифта элемента «День недели». Доступно два способа: ползунок и ввод значения вручную;
 * прозрачность блока — необходимо выставить значения 1 или 0. 1 — полностью непрозрачный, 0 — полностью прозрачный;
 * чекбокс «отображать время и дату» — активирует/деактивирует отображение панели в виджете.
@@ Строка 62: / Строка 65: @@
 * отступ блока погоды от левого края — позволяет ввести значение отступа. Измеряется в пикселях (px);
 * название города — позволяет ввести название города. Название города нужно указывать на английском языке;
-* ключ доступа к сервер погоды —
+* ключ доступа к серверу погоды — ключ для подключения к сервису погоды Openweather;
 * цвет элемента «температура» — позволяет выбрать цвет элемента «Температура» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
 * цвет элемента «описание погоды» — позволяет выбрать цвет элемента «Описание погоды» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
 * цвет элемента «прогноз на сутки» — позволяет выбрать цвет элемента «Прогноз на сутки» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
-* размер шрифта элемента «температура» — позволяет выбрать цвет элемента «Температура» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
+* размер шрифта элемента «температура» — позволяет выставить размер шрифта элемента «Температура». Доступно два способа: ползунок и ввод значения вручную;
-* размер шрифта элемента «температура» — позволяет выставить размер шрифта элемента «Температура». Доступно два способа: ползунок и ввод значение вручную;
+* размер шрифта элемента «описание погоды» — позволяет выставить размер шрифта элемента «Описание погоды». Доступно два способа: ползунок и ввод значения вручную;
-* размер шрифта элемента «описание погоды» — позволяет выставить размер шрифта элемента «Описание погоды». Доступно два способа: ползунок и ввод значение вручную;
+* размер шрифта элемента «прогноз на сутки» — позволяет выставить размер шрифта элемента «Прогноз на сутки». Доступно два способа: ползунок и ввод значения вручную;
-* размер шрифта элемента «прогноз на сутки» — позволяет выставить размер шрифта элемента «Прогноз на сутки». Доступно два способа: ползунок и ввод значение вручную;
 * прозрачность блока — необходимо выставить значения 1 или 0. 1 — полностью непрозрачный, 0 — полностью прозрачный;
 * чекбокс «отображать погоду» — активирует/деактивирует отображение панели в виджете.
@@ Строка 75: / Строка 77: @@
 === '''Логотип''' ===
 В блок настроек «Логотип» включены следующие параметры:
-* логотип — позволяет выбрать нужный логотип из контента хранящегося в личном кабинете;
+* логотип — позволяет выбрать нужный логотип из контента, хранящегося в личном кабинете;
 * отступ логотипа от правого края в пикселях — позволяет ввести значение отступа. Измеряется в пикселях (px);
 * прозрачность блока — необходимо выставить значения 1 или 0. 1 — полностью непрозрачный, 0 — полностью прозрачный;
@@ Строка 85: / Строка 87: @@
 * шрифты — необходимо выбрать тип шрифта, доступный из списка;
 * интервал обновления ленты — указать значение для обновления ленты, в минутах;
-* тэг с RSS-канала — необходимо выбрать тэг, который будет считываться и использоваться в виджете. Доступно три варианта: title, discription, content.
+* тэг с RSS-канала — необходимо выбрать тэг, который будет считываться и использоваться в виджете. Доступно три варианта: title, description, content.
 * скорость бегущей строки — ввести значение для контроля скорости прокрутки бегущей строки;
 * отступ между текстом новостей —  позволяет ввести значение отступа. Измеряется в пикселях (px);
 * символ разделения новостей (в режиме бегущей строки) — необходимо ввести любой символ, который будет разделять обработанные новости;
-* цвет текста бегущей строки — позволяет выбрать цвет элемента «Описание погоды» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX -кода, который можно узнать в сети;
+* цвет текста бегущей строки — позволяет выбрать цвет элемента «Описание погоды» с помощью палитры. Цвет внутри палитры можно указать с помощью HEX-кода, который можно узнать в сети;
 * размер шрифта бегущей строки — позволяет ввести значение размера шрифта для бегущей строки. Измеряется в пикселях (px);
 * направление движения бегущей строки — выбрать доступный вариант из списка. Доступно два варианта: влево, вправо;
@@ Строка 98: / Строка 100: @@
 [[File:Настроенный_комплексный виджет.png|thumb|center| Пример отображения настроенного виджета|800px]]
 == '''Завершение настройки виджета''' ==
-{{Note|После завершения работ по настройки виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана.
+{{Note|После завершения работ по настройке виджета пользователь должен нажать на кнопку «Применить настройки» в правой нижней части экрана.
 [[File:Применение_настрок.png|thumb|center| Пример отображения кнопки «Применить настройки»|800px]]
-Далее виджет растянется на весь экран и пользователю должен нажать на кнопку «Сохранить», внизу по центру экрана.
+Далее виджет растянется на весь экран и пользователь должен нажать на кнопку «Сохранить», внизу по центру экрана.
 [[File:Сохран.png|thumb|center| Пример отображения кнопки «Сохранить»|800px]]|warn}}
 == '''Загрузка и скачивание настроек''' ==
-В процессе взаимодействия с настройками виджета пользователь может загрузить и выгрузить настройки виджета. Каждое из указанных действий можно сделать по отдельным иконкам в интерфейсе виджета. Иконки расположены в виджете снизу по центру.
+В процессе взаимодействия с настройками виджета пользователь может загрузить или выгрузить настройки виджета. Каждое из указанных действий можно сделать с помощью отдельных иконок в интерфейсе виджета. Иконки расположены в виджете снизу по центру.
-[[File:Иконки_загрузки.png|thumb|center| Пример отображения иконок загрузить и выгрузить настройки виджета |800px]]
+[[File:Иконки_загрузки.png|thumb|center| Пример отображения иконок в настройках виджета |800px]]
 == '''Добавление настроенного виджета в трансляцию''' ==
-Чтобы полностью ознакомиться с работой данной функциональности пользователю необходимо запустить трансляцию с расписанием и добавить в качестве контента данный виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи из Wikipedia:
+Чтобы полностью разораться с работой данной функциональности пользователю необходимо запустить трансляцию с расписанием и добавить в качестве контента данный виджет. Чтобы ознакомиться с описанными ранее шагами по созданию трансляции и расписания рекомендуется просмотреть следующие статьи:
 * [[Раздел "Устройства"]]
 * [[Раздел "Контент на устройства"]]
@@ Строка 112: / Строка 114: @@
 * [[Раздел "Расписание"]]
 == '''Видеоинструкция''' ==
-[https://www.youtube.com/watch?v=FrXttSiJLyM Настройка комплексного виджета]
+[https://vkvideo.ru/video-227547238_456239084 Настройка комплексного виджета]
 == '''Дополнительная информация''' ==
 Если данная статья не помогает использовать функционал по назначению или после ее прочтения остаются вопросы можно озвучить данные вопросы в разделе "Обсуждения" вверху страницы.
 [[File:Обсуждение_комплексного_виджета.png|thumb|center| Пример отображения вкладки "Обсуждения" на wiki-странице |800px]]
 Также дополнительную информацию можно узнать на странице [[Как взаимодействовать пользователю с разделом "Обсуждения"]]
+</translate>

Аноним

Поиск

Инструкция по работе с комплексным виджетом: различия между версиями

Пространства имён

Ещё

Действия на странице

Текущая версия от 12:38, 28 июля 2025

Содержание

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

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