--- name: prtv-widgets description: Информеры в конструкторе вывесок PRTV (prtv.pro) — часы, погода, календарь, QR-код, таймер, курсы валют, промо-карточка, карты, соцсети, RSS и Google Таблицы / Календарь (информеры PRTV RSS и PRTV Google) на ТВ-слайде; нативные кнопки против открытых конструкторов на s.prtv.su через HTML-блок, правила адреса (цвет через %23, города кириллицей, encodeURIComponent), имена параметров, прозрачность в два слоя, размер резиновых виджетов, риски без сети на ТВ, приёмка. Использовать перед добавлением, переоформлением или отладкой любого информера на меню-борде или инфоэкране в prtv.pro; параметры каждого виджета — в prtv-widgets-catalog. Triggers (EN) widget, clock on screen, weather on TV, QR code on slide, countdown, currency rates. license: CC-BY-4.0 metadata: author: PRTV (prtv.pro) product: Конструктор цифровых вывесок PRTV (prtv.pro) version: "1.2" date: "2026-10-10" language: ru scope: интерфейс редактора + чтение состояния страницы из DOM; без вызовов внутреннего API --- # Информеры в конструкторе PRTV — общие правила Информер — живое содержимое на слайде: часы, погода, курсы валют, обратный отсчёт, QR-код, карточка акции, календарь, карта, лента соцсети. Здесь собрано то, что верно для всех; prtv-widgets-catalog перечисляет каждый информер с его видами и параметрами. Сам редактор описан в prtv-editor-overview, HTML-блоки — в prtv-html-block-animation. ## 1. Два способа поставить информер на слайд **А. Родные кнопки информеров** в левой панели (раздел «Информеры»: Часы, Погода, Качество воздуха, Курсы валют, Расписание транспорта, Пробки, Ресторанное меню; раздел «Социальные сети»: ВКонтакте, Одноклассники, Telegram, RSS). Один клик добавляет элемент с формой настроек в панели элемента. «Ресторанное меню» требует подключённой POS-системы в настройках аккаунта (`https://prtv.pro/settings`); элементу ВКонтакте там же нужно подключение сервиса ВК. **Б. Публичные конструкторы на s.prtv.su.** Каталог — `https://s.prtv.su/informery` (30 конструкторов, три страницы), каждый по адресу `https://s.prtv.su/informery/<имя>` — например `/chasy` (часы), `/openweather` (погода), `/qr-infomer`, `/countdown`, `/kalendar`, `/google-kalendar`. Конструктор выдаёт код `` Некоторые конструкторы выдают `//s.prtv.su/…`; писать `https://` явно. 2. В редакторе: левая панель → **HTML** → клик по новому блоку → вставить код в «Код HTML» (надёжный способ заполнить поле — в prtv-html-block-animation). 3. Панель элемента → цвет фона → альфа **0**. Без этого под информером белая плашка, что бы ни стояло в URL (§5). 4. Растянуть блок под пропорцию информера (§6). Выставить глубину. 5. Проверить в предпросмотре и на публичной странице ТВ (§8). ## 3. Три правила, без которых ничего не работает 1. **Цвета с решёткой, закодированной как `%23`.** `fon_table=%234CAF50` превращается в CSS в `#4CAF50`. `fon_table=4CAF50` даёт невалидное значение, браузер его игнорирует, и информер остаётся в цветах по умолчанию — без единой ошибки. 2. **Город — названием, кириллицей, из базы городов PRTV.** `city=Москва` работает; `city=3` (смещение) или `city=Moscow` — нет. Часы тогда молча показывают время UTC; погода выводит на слайд текст ошибки. Подтверждённые города базы: Москва, Санкт-Петербург, Казань, Краснодар, Сочи, Минск, Калининград, Екатеринбург, Новосибирск, Владивосток, Алматы, Ташкент, Дубай, Берлин, Мюнхен, Париж, Прага, Лондон. Не найдены: Франкфурт и любые написания латиницей. 3. **Текстовые значения через `encodeURIComponent`** — заголовки, слоганы, имена Wi-Fi, предложения, цены с ₽. Сырые `&`, `/`, `+` или `#` в значении ломают строку запроса. Даты в календарных информерах — `MM/YYYY` со слэшем в виде `%2F`; ISO-дата возвращает ошибку сервера. ## 4. Имена параметров у информеров разные — сначала определить тип **Единой конвенции имён нет.** Цвет цифр — `dig_color_font` в одних часах, `color_font1` в других, `font_text` в погоде, `color_text` в акциях. Многие типы часов добавляют к каждому параметру префикс типа (`neon_color_fon`, `rotate_city`). Подписи формы конструктора часто не совпадают с именами в URL (форма говорит `color_fon`, URL — `fon_table`). Перед чтением или сборкой ссылки информера прочитать **имя php-файла** в `src` (`clock_digital.php`, `weather_wide_flexible.php`, `calendar.php`, `qr.php`, `action.php` …) и взять блок параметров именно этого файла из prtv-widgets-catalog. Никогда не переносить имена параметров между типами. Поле города на страницах конструкторов — автодополнение: набрать название и выбрать подсказку; установка значения скриптом код не перегенерирует. ## 5. Прозрачность — два уровня, решает внешний У страницы информера свой фон (параметр `transpar=1`, часто в паре с `fon_table=transparent`), а у **HTML-блока, который его содержит, свой фон** в редакторе. Фон блока перекрывает фон iframe, поэтому информер с `transpar=1` всё равно стоит на белой плашке, пока альфа фона элемента не равна 0. Рецепт информера поверх фото или видео: `transpar=1`, убрать `fon_table`, подобрать цвета текста под фото **и** выставить альфу фона блока в 0 в панели элемента. Никогда не сочетать `transpar=1` с hex-цветом фона — они противоречат друг другу. Непрозрачность и фон из панели элемента работают для любого типа информера, включая те немногие, у которых собственный флаг прозрачности не действует. В новом семействе информеров (карточка акции, лунный календарь, «до конца рабочего дня») `transpar` должен быть `1` или **пустым** — пустое значение означает «взять `fon_table`»; конструкторы шлют его пустым. ## 6. Размер — бокс должен соответствовать информеру Три типа вёрстки: - **Фиксированная пропорция** (часы, циферблаты, финансовые таблицы): содержимое нарисовано под пропорцию — квадрат 1:1 у аналоговых циферблатов, куба и колец, широкий 2:1 у цифровых, перекидных, неоновых и глитч-часов. В неверной пропорции круг сплющивается, карточки вылезают за край. Давать блоку пропорцию информера. - **Резиновая вёрстка** (виды погоды, календари): шрифты масштабируются от ширины (`vw`), поэтому высота содержимого ≈ **k × ширина**, где k — константа вида. `width/height=100%` у iframe не ужимает содержимое под бокс; если бокс ниже k × ширины, низ обрезается. Значения k — в каталоге; высота бокса — `ceil(k × ширина) + 6 px`. - **Самоподгоняющиеся** (карточка акции, луна, рабочий день, QR): типографика на `clamp()` с flex-центрированием — вписываются в любой бокс без обрезки. **Измерить k самому** — открыть URL информера напрямую во вкладке браузера при ширине, близкой к целевой ширине бокса, и выполнить в консоли: ```js document.body.scrollHeight / window.innerWidth // надёжнее: document.querySelector('table').getBoundingClientRect().height / window.innerWidth ``` Не использовать `document.documentElement.scrollHeight`: он никогда не меньше окна, и для содержимого короче вьюпорта получится пропорция окна, а не содержимого. Признак такой ошибки — одинаковое «k» у информеров разной формы. Некоторые виды меняют вёрстку ниже определённой ширины (медиазапросы) — каталог их помечает; мерить на целевой ширине. ## 7. Два контекста рендера и пустые миниатюры - **Миниатюры полосы слайдов информеры не рендерят** — вместо них заглушка «iframe blocked». Никогда не оценивать слайд с информером по полосе. - **Холст редактора — превью в фиксированных пикселях**; резиновые информеры (погода) там сверстаны под базу 1200×300 и обрезают иконки. Публичная страница резиновая и правильная. Это известное ограничение превью, а не информера. ## 8. Приёмка 1. Предпросмотр (кнопка «глаз») — информер на месте, бокс не обрезан, цвета применились. 2. Публичная страница ТВ `https://prtv.pro/<номер ТВ>` — эталон для вёрстки информера: резиновые информеры правильно рендерятся только здесь. Ждать не меньше полной длительности слайда. 3. Часы: время равно реальному времени города. Погода: показаны название города и температура (текст «такого города не существует» значит, что строка города неверна). Календари: месяц отрисован (пустой блок — неверный набор параметров месяца, см. каталог). 4. Перезагрузить редактор и убедиться, что HTML блока на месте. 5. Хотя бы раз проверить на целевом телевизоре или приставке: телевизионные браузеры отличаются от десктопных (шрифты, эмодзи, смешанный контент, автозапуск). ## 9. Офлайн, сеть и внешние зависимости Ни один информер не переживает отключение телевизора от сети; живые (погода, курсы, календари, карты, ленты) требуют сети при каждом показе. Кроме того: - **Самодостаточные на s.prtv.su:** часы, циферблаты, обычный календарь, QR, обратный отсчёт, карточка акции, луна, рабочий день, праздники, курсы валют (ЦБ РФ / НБ РК), драгметаллы. Им нужен только s.prtv.su. Сюда же относятся PRTV RSS и PRTV Google: ленты, таблицы, календари и картинки читает сервер s.prtv.su, шрифты лежат там же, а при недоступном источнике экран держит прошлые данные. - **Зависят от сторонних сервисов с телевизора:** Google-календарь (Google API + CDN), карты и качество воздуха (тайл-серверы, API карт, aqicn), акции (скрипты с CDN), курсы НБ РБ (телевизор сам ходит на nbrb.by), Яндекс.Расписания (rasp.yandex.ru — может отвергать запросы из ЦОД и «ботов»), соцленты и RSS (сайты-источники и CDN). Если что-то из этого заблокировано в сети заведения, информер пуст без сообщения. Для необслуживаемых экранов предпочитать самодостаточные информеры; остальные проверять на месте. - **Смешанный контент:** часть тайлов карт и логотипов каналов отдаётся по `http://`; `https://`-плеер может их блокировать (карта без слоя погоды, логотипы пропали). Проверять на ТВ. - **Эмодзи:** фазы луны и «весёлые» фразы рабочего дня используют эмодзи; телевизор без эмодзи-шрифта покажет квадраты. - **Медленная сеть:** тайлы карт и ленты догружаются в кадре; таким слайдам давать ≥ 15 с. ## 10. Какой информер под какую задачу | Задача | Информер | |---|---| | Срочность акции (FOMO) | Таймер обратного отсчёта; карточка акции с таймером | | Триггер по времени суток | Календарь / Google-календарь — как логика показа, не как визуальный фокус кассового борда | | Контекстная уместность («жарко — берите холодное») | Погода | | Еженедельная свежесть без пересборки | Ежедневные (луна, праздники, рабочий день), события Google-календаря | | Социальное доказательство, живые новости | Соцленты, PRTV RSS, виджет отзывов Яндекса | | Цены, акции, стоп-лист без правки слайдов | PRTV Google — Google Таблица | | Афиша, расписание занятий, мероприятия | PRTV Google — Google Календарь | | Взаимодействие с гостем | QR (меню, Wi-Fi, чаевые, отзывы), голосование с QR | | Холл, зона ожидания | ТВ-программа, расписание, курсы валют | Правило дизайна: одна «горячая» живая точка на цикл слайд-шоу (обратный отсчёт *или* погодная акция *или* видео-hero) плюс один-два статичных содержательных слайда. Два анимированных информера на одном слайде конкурируют за внимание. Информеры — акценты; меню — содержание. Подписи рядом с информером (подпись под отсчётом, заголовок над погодой) — родные текстовые элементы в пространстве 1920: ≥ 40 px подпись, ≥ 110 px заголовок (prtv-element-layout §7). ## Чего не делать - Не писать цвет без `%23`. - Не передавать город числом или латиницей. - Не переносить имена параметров между типами; сначала читать php-имя. - Не ждать, что `transpar=1` сам уберёт белую плашку — выставить альфу блока в 0. - Не судить об информере по миниатюре или холсту редактора; смотреть публичную страницу. - Не класть резиновый информер в бокс ниже k × ширины. - Не ставить зависящий от сети информер на экран, чью сеть не проверяли. - Не ставить два живых информера на один слайд. - Не вставлять код конструктора с `//s.prtv.su` — писать `https://`. ## Связанные скиллы prtv-widgets-catalog · prtv-informer-rss · prtv-informer-google · prtv-design-mockups · prtv-editor-overview · prtv-html-block-animation · prtv-element-layout · prtv-slide-settings · prtv-agent-rules