Сцены и компоненты

Экран собирается из сцен, а сцены — из компонентов. В этой статье разберём, как устроены обе сущности и как их настраивать.

Сцены

Сцена — это один «кадр» экрана. Сцены проигрываются по кругу, поэтому из нескольких сцен получается слайд-шоу: например, сцена с меню, затем сцена с акцией, затем сцена с расписанием.

В карточке «Сцены» каждый кадр показан тайлом с его длительностью, типом перехода и числом слоёв. Кнопка «Добавить сцену» создаёт новый кадр, а меню ⋮ на тайле позволяет открыть настройки сцены, дублировать или удалить её. В настройках сцены задаются:

• Название и длительность показа в секундах.
• Переход к следующей сцене: Cut (мгновенно), Fade (плавно), Slide (сдвигом).
• Тип фона: сплошной цвет (Solid) или CSS-градиент (Gradient).

Компоненты

Компоненты добавляются в активную сцену кнопкой «+ Компонент» в карточке «Слои».

Доступные компоненты:

• Анимация — анимированные эффекты.
• Бегущая строка — горизонтально прокручивающийся текст.
• Виджет — встраиваемый виджет.
• Текст — статичная надпись.
• Часы — текущее время с выбором формата и часового пояса.
• Сейчас играет — название и обложка играющего трека.
• QR-код — код со ссылкой (например, на меню или акцию).
• Изображение — статичная картинка.
• Видео — видеофон или ролик.
• Стикер — декоративный элемент.
• Каталог — витрина из музыкального каталога.

Управление слоями

Каждый слой в списке можно перетащить (изменить порядок наложения), скрыть, заблокировать или удалить. Слои наверху списка отображаются поверх остальных.

Настройки компонента

Выберите слой и нажмите «Настроить» — откроется панель с параметрами этого компонента. Например, у бегущей строки настраиваются текст, цвет, насыщенность шрифта, позиция (наверху/внизу), скорость и пауза между повторами.

У каждого компонента свой набор полей: у часов — формат и часовой пояс, у QR-кода — ссылка и оформление, у «Сейчас играет» — что показывать и как. Положение и размер слоя меняются прямо на холсте предпросмотра — с помощью сетки и привязки удобно выравнивать элементы.