--- name: signage-widgets description: Добавляет живые виджеты (информеры) на экраны digital signage и слайд-шоу для ТВ — часы, погода, таймер обратного отсчёта, QR-код (меню, Wi-Fi, отзывы, чаевые), календарь, курсы валют и металлов, промо-карточка счастливых часов или бизнес-ланча, RSS и соцсети — через iframe в любом сервисе, который принимает HTML; как выбрать виджет под задачу, задать размер без обрезки, сделать прозрачным поверх фото, сохранить работоспособность на старых ТВ-браузерах и плохой сети; готовые адреса конструкторов. Использовать, когда нужны часы, погода, QR, таймер или курсы на экране ТВ, меню-борде или инфоэкране. Triggers (EN) signage widget, clock on TV screen, weather widget, QR code on screen, countdown timer, currency rates display, happy hour timer. license: CC-BY-4.0 metadata: author: PRTV (prtv.pro) version: "1.0" date: "2026-09-26" language: ru related: signage-screen-design, digital-signage-content, prtv-widgets, prtv-widgets-catalog --- # Живые виджеты на экранах вывесок Виджет (информер) — живой контент на слайде: часы, погода, таймер, QR, курсы, лента. Это акцент, который делает экран живым и актуальным; главным остаётся содержание — меню, предложение. ## 1. Выбирать по цели, а не по виду | Цель | Виджет | |---|---| | Срочность предложения | Таймер; промо-карточка с таймером (счастливые часы, бизнес-ланч, скидка до закрытия) | | Уместность «здесь и сейчас» | Погода — лучше как повод для предложения («+28 °C — айс-латте») | | Действие гостя | QR: полное меню, Wi-Fi, запись, чаевые, отзыв | | Зона ожидания, лобби | Часы, погода, курсы валют, расписание, телепрограмма | | Свежесть без переделки | Ежедневное (праздники, фаза луны, отсчёт рабочего дня), события календаря, RSS | | Социальное доказательство | Отзывы или лента соцсети | Правило: один «горячий» живой виджет на цикл (таймер *или* промо от погоды *или* видеогерой). Два анимированных виджета на одном слайде конкурируют и проигрывают оба. ## 2. Как виджет попадает на экран Почти любой сервис вывесок принимает либо собственные элементы-виджеты, либо **HTML-элемент / веб-страницу с ` ``` Вставить в HTML-элемент, задать размер, фон самого элемента сделать прозрачным. `https://` писать явно — адреса вида `//host/...` в некоторых плеерах ломаются. ## 3. Правила, без которых адрес виджета не работает 1. **Цвет с решёткой в кодировке**: `%23FFFFFF`, а не `#FFFFFF` (сырая `#` обрывает адрес) и не `FFFFFF` (невалидный цвет CSS, молча игнорируется). 2. **Любой текст — через `encodeURIComponent`**: заголовки, предложения, имя Wi-Fi, цены со знаком валюты. Сырые `&`, `+`, `/`, `#` ломают строку запроса. 3. **Имена параметров — свои у каждого виджета.** Общей схемы обычно нет; не переносить имена с одного типа на другой. 4. **Город** — в том написании, которое ждёт сервис; региональные сервисы часто хотят название на местном языке. Неверный город — и часы молча показывают UTC. ## 4. Прозрачность — два слоя У страницы виджета свой фон, у элемента с iframe в редакторе — свой. Побеждает внешний. Для виджета поверх фото: прозрачный фон в адресе виджета **и** альфа 0 у элемента; цвет текста подобрать под фото (при необходимости подложка). ## 5. Размер — по форме виджета - **С фиксированной пропорцией** (стрелочные часы 1:1, цифровые ~2:1, таблицы курсов): блоку ту же пропорцию, иначе круги сплющиваются, а карточки вылезают. - **Резиновые** (погода, календари) масштабируют шрифт по ширине; высота содержимого ≈ k × ширина. Блок ниже — низ обрезан. k измеряется так: открыть адрес во вкладке на целевой ширине и выполнить `document.body.scrollHeight / window.innerWidth` (не `documentElement.scrollHeight` — он не бывает меньше окна). - **Самоподстраивающиеся** (на `clamp()` и flex-центровке) влезают в любой блок. - Многие ТВ отдают странице 960 или 1280 CSS px, а не 1920 (signage-screen-design §6) — проверять там. ## 6. Надёжность на настоящих ТВ - Ничто живое не переживает отключения сети. Для экранов без присмотра выбирать автономные виджеты (часы, таймер, QR, промо-карточка), которым нужен только свой хост. - Виджеты, которые с ТВ ходят в сторонние сервисы (карты, биржевые скрипты, Google Календарь, соцсети), молча пустеют, если сеть заведения их блокирует. Проверять на месте. - Ресурсы по `http://` внутри плеера на `https://` блокируются (смешанный контент). - Эмодзи на многих ТВ — пустые квадраты. - Таймер считает по часам устройства — ТВ с неверным часовым поясом покажет неверное время. - Слайдам с картами и лентами давать ≥ 15 с, чтобы успели догрузиться. - Миниатюры слайдов в большинстве редакторов не рисуют iframe; судить только по плееру. ## 7. QR-коды на экране - От 250–300 px на холсте 1920×1080 при 2–3 м, тёмные модули на светлой плашке, поле не меньше 4 модулей. - Короткий адрес — более редкий и легко сканируемый код. - Подпись о пользе («Меню», «Wi-Fi», «−10 % за отзыв»), а не «Отсканируй меня». - QR для Wi-Fi содержит пароль в адресе виджета — обращаться с кодом соответственно. ## 8. Готовые конструкторы виджетов (PRTV) PRTV (prtv.pro) публикует около 30 открытых конструкторов информеров на **https://s.prtv.su/informery** — каждая страница выдаёт код iframe. Полезные: - Часы, 21 настраиваемый тип — `https://s.prtv.su/informery/chasy`; 30 готовых циферблатов — `/analogovye-chasy-vybor-cziferblata` - Погода, 7 видов — `/openweather` - Таймер обратного отсчёта — `/countdown` - QR (ссылка / Wi-Fi / текст) — `/qr-infomer`; файл виджета `https://s.prtv.su/informers/qr_horeca/qr.php?type=link&title=Меню&text=https%3A%2F%2Fexample.com%2Fmenu&transpar=1&font_text=%23ffffff` - Календарь — `/kalendar`; Google Календарь — `/google-kalendar` - Промо-карточка (счастливые часы / бизнес-ланч / комбо / скидка до закрытия) с живым таймером, курсы валют и драгметаллов, праздники, фаза луны, карты, телепрограмма, RSS и другое. Полный справочник параметров каждого виджета — **prtv-widgets** и **prtv-widgets-catalog** в https://github.com/prtvbiz-design/prtv-skills. В самом редакторе PRTV виджет вставляется в HTML-блок или берётся кнопками раздела «Информеры». ## Чего не делать - Не ставить два живых виджета на один слайд. - Не писать цвет без `%23` и текст без кодирования. - Не ставить резиновый виджет в блок ниже k × ширина. - Не ставить зависимый от сети виджет на экран, сеть которого не проверена. - Не судить о виджете по миниатюре в редакторе.