Жива сторінка-еталон: підключає бойові CSS прошивки, тому завжди відображає актуальний стан.
Правила та план — у UI_STYLE_UNIFICATION_PLAN.md. Сторінка НЕ вбудовується у прошивку.
Єдине джерело правди — блок :root у global.css. У коді — тільки var(--rb-*).
| Заголовок модалки / сторінки | --rb-font-display, 700, --rb-green (.modal-premium .modal-title) |
| Заголовок секції налаштувань | .settings-section-title — 1.05rem, 700, зелений, лінія знизу |
| Секційний заголовок-капс | --rb-fs-caption (0.72rem), капс — шапки таблиць та блоків віджетів |
| Підпис поля форми | form-label fw-semibold + --rb-green |
| Дрібний текст віджетів (0.78rem) | --rb-fs-small + --rb-text-body |
| 23.5 °C | Цифрове значення показу — прямий (не курсив), 700, --rb-green, адаптивний clamp(1.4rem → 4rem); одиниця виміру дрібніша (≈0.8rem). Поточний шрифт (Fixel/системний), без вбудовування. |
.icon-btn без рамки (не btn-outline-*), єдиний вигляд на картках і в модалках.Помітні чіпи з пульсуючою точкою стану. Детальна інформація — у спливаючій підказці (наведіть курсор на чіп).
render_peripheral_value_inner_html(uid, raw) — і перший рендер, і живе оновлення
(data-widget-val-uid). Знак відділений пробілом від числа (- 40, не -40),
напрям показується графічно (▶︎ вперед · ◀︎ реверс · ■︎ стоп), одиниця — дрібніша. Джерело напряму одне для всіх
показів — vfd_resolve_dir(), розклад значення — vfd_value_parts(), HTML — render_vfd_value_html().
state == 1): у зупиненого скрипта це
збережений параметр, а не ціль процесу, і малювати його у віджеті означає видавати конфіг за стан. Діє — скрізь однаково:
22.8 ▶︎ 52 °C (факт, стрілка «прямує до», ціль,
одиниця одна на обидва числа; уставка приглушена, бо вторинна щодо факту) плюс SCADA-смуга: заливка = реальне значення,
зелений маркер = ціль. Смуга — той самий render_linear_gauge({ compact: true }) (лише доріжка, без верхнього числа й шкали),
діапазон — peripheral_gauge_range(uid, target). HTML — render_value_with_target_html(),
SVG-сцена — value_with_target_text(). Саму ціль дає лише peripheral_target_value(uid) з декларації
target: { place, param } у BASIC_SCRIPT_METADATA: джерело уставки — скрипт, що її тримає (шар 3), а не обчислення в UI.
Нова ціль = один рядок декларації, не код у місці показу.
render_gauge(cfg) і лінійний
render_linear_gauge(cfg) — єдиний уніфікований код, який у різних місцях виводить різні значення.
Місце застосування лише будує свій cfg (value / valueText / unit / min / max / target / status / extra / zones /
bottomArc / scada). Другої реалізації шкали (свій SVG, div-прогрес) не створюємо — бракує можливості, розширюємо cfg.
Живе оновлення — rb_gauge_update_fill() / rb_linear_gauge_update_fill().
render_script_gauge_html(item); периферія — render_peripheral_linear_gauge_html(UID, kind),
render_vfd_peripheral_gauge_html(UID)), і всі місця показу (картка, сторінка виконання, пульт оператора,
модалка) викликають саме її. Копія «майже такого самого» гейджа під окрему сторінку — заборонена; різниця подачі — параметр
(opts) тієї ж функції.
global_log_variables, стан скрипта/сценарію/периферії), і не обчислює похідних сам
(ні середніх, ні прогресу, ні ETA, ні «додуманої» цілі). Потрібна нова величина — її рахує скрипт і публікує
через set_global_log_variable / register_indicator; UI лише малює. Немає даних → --,
а не вигадане чи локально пораховане значення.
render_linear_gauge(cfg) — той самий cfg, що й render_gauge() (value / valueText / unit / min / max / target / scada), тож радіальний ↔ лінійний перемикаються без зміни даних. Число-величина + одиниця зверху, смуга із заливкою (частка у [min,max]) і glow, шкала min/max, опційний зелений маркер-ціль (уставка). Живий показ — через scada-атрибут (.gauge-value), як у радіального.
Принцип: кожен запис — окрема самостійна плитка (рядок або колонка), без вкладених таблиць і контейнерів-обгорток. Групи розділяються заголовком-капсом .rb-tile-caption.
.rb-tile-list (рядки) ↔ .rb-tile-list--cards (метрика-картка з крупним центрованим значенням). Перемкніть угорі. Числові сенсори — крупне число, дискретні виходи (реле/клапан) — кольоровий індикатор .rb-state.
.activeТермостатРівень води
Керування нагрівомТемператураПара колони
НасосПодача брагиЄдиний вигляд карток-елементів у всіх розділах: біле тло, золота рамка, радіус --rb-radius-lg, м'яка тінь, hover з підняттям. Картка з кольором пристрою — пастельні шапка й футер (--card-rgb), тіло біле.
Підтримання цільової температури
row-cols-1 sm-2 lg-3 xxl-4, скриптові row-cols-1 md-2 lg-3 (4 колонки лише ≥1400px — щоб на 13-14" не тісно).Використання: <div class="modal fade modal-premium"> — стилі content/header/title/footer застосовуються автоматично, інлайни не потрібні.
ID — вторинна технічна інформація: у тілі картки її не показуємо. У футері — іконка «ID» (id.svg) → модалка #idInfoModal (show_id_modal('peripheral'|'board', uid)) зі списком: периферія — Дескриптор / UID / Плата; плата — Повний ID / Тип / Модель. Кожен рядок — підпис + кнопка .rb-copy-id; по кліку rb_copy_id_feedback() змінює іконку на галочку на ~1.5 с, без notyf (щоб не засмічувати центр сповіщень-дзвінок). Прихованих copy-on-click (бейдж із onclick=copyToClipboard) не робимо.
.rb-id-row)
id.svg — відкриває модалку ідентифікаторів
Один шаблон build_script_card_html(item, opts) для обох розділів. Стиль як у периферії: пастельна шапка кольором пристрою (--card-rgb з палітри — вкладка «Загальні» налаштувань, script_color_<uid>), іконка без рамки, бейдж стану в шапці праворуч, центральна зона .sc-zone (етап + помітна дія .sc-action), розділений футер (конфіг ліворуч, ID/видалення праворуч). Аварія → червоний акцент (.sc-state-fault). Активні/аварійні — зверху. ID на картці не дублюється (він у модалці «ID»), а опис подається через блакитний бейдж довідки .rb-help у шапці (Bootstrap-popover, trigger="hover focus" — і наведення, і тап). Контент довідки — дата-керований за ідентифікатором (i18n help_<рід>-<тип>, майбутнє — портал); хелпер rb_help_badge_html(), ініт rb_init_help_popovers(). Той самий бейдж — і на картках периферії/плат/пультів. Картки пультів оператора — той самий .script-card--unified (шапка пастель за станом: активний зелений / ні золотий), у тілі — перелік елементів пульта (крапка стану + назва) через render_panel_elements_html(). Усі шапки карток — align-items-center (елементи центровані по висоті).
Уніфікована з картками скриптів. Шапка (верхня панель): іконка + назва + статус-бейджі праворуч — .rb-help (синій «?» — довідка-popover) і .rb-idbadge (золотий «ID»), що відкриває модалку ідентифікаторів (прогресивне розкриття; технічні дані — у модалці, не на картці). Робоча область (тіло): SCADA-віджет — якщо передбачено: круговий гейдж (VFD), число+одиниця (сенсори/аналог); для дискретних виходів — число, якщо є дані (напр. потужність нагрівача), інакше індикатор AD22. Нижня панель (футер): усі елементи керування разом із кнопкою редагування setting.svg — для VFD один рядок: ◀ ■ ▶ + степер; для дискретних — Bootstrap-перемикач (render_peripheral_bootstrap_switch_html); для аналогових — степер. ID-модалка містить технічні метадані (тип, інтерфейс, порт/канал, параметр) + дескриптор + UID (+ плата). Хелпер бейджа: rb_id_badge_html(kind, key, title).
var(--rb-*); нових hex у коді не з'являється..modal-premium; кнопки: золота основна + контурна другорядна..icon-btn без рамки; у JS будувати через rb_icon_btn(svg, onclick, title) — єдиний розмір (44px/34px) та hover скрізь.:focus-visible із золотим outline, aria-label на icon-only кнопках, @media (prefers-reduced-motion: reduce) вимикає пульсації..rb-tile (рядок або колонка), без вкладених таблиць і контейнерів-обгорток; групи розділяються .rb-tile-caption..rb-tile--safety / .rb-tile-caption--safety (пастельно-червоне тло).get_peripheral_display_html/text() (маска «ICON Тип Назва», UID — у title).is_operative_script_param().!important — лише з коментарем, чому без нього не можна..script-card / .peripheral-card / .cp-widget: єдина золота рамка, радіус, hover; колір пристрою — пастельна шапка через --card-rgb, тіло/футер білі.build_script_card_html() (.script-card--unified): шапка кольором з палітри + бейдж стану, центральна зона .sc-zone з пуск/стоп, розділений футер; колір у localStorage script_color_<uid>..rb-help у шапці (popover, hover+тап); ID на картці не дублюємо (він у модалці). Контент — за ідентифікатором (i18n help_<тип>, далі портал); хелпери rb_help_badge_html() / rb_init_help_popovers().xxl (≥1400); сенсори sm-2 lg-3 xxl-4, скриптові md-2 lg-3.id.svg) у футері → модалка #idInfoModal; копіювання лише через видиму .rb-copy-id з локальною галочкою (rb_copy_id_feedback), без notyf і без прихованих copy-on-click.