Веб-інтерфейс

SVITRIX використовує сучасний Single Page Application (SPA), побудований на Preact, як веб-інтерфейс. SPA зберігається у файловій системі LittleFS пристрою і взаємодіє з прошивкою через REST API.

Після підключення SVITRIX до вашої Wi-Fi мережі відкрийте IP-адресу пристрою у браузері (порт 80). IP-адреса відображається на матриці при кожному завантаженні.

Сторінки

Сторінка	Маршрут	Опис
Screen	/	Перегляд матриці 32x8 у реальному часі з навігацією між додатками, завантаженням PNG та записом GIF.
Settings	/settings	Налаштування пристрою, розділені на незалежні секції з окремими кнопками збереження: WiFi, мережа, MQTT, NTP/часовий пояс, автентифікація, дисплей, додатки, час і дата, звук, надсилання повідомлень та завантажувач іконок. Є перемикач темної/світлої теми.
Data Fetcher	/datafetcher	Налаштування зовнішніх HTTP-джерел даних, які автоматично отримують та відображають дані на матриці. Детальніше: Збирач даних.
Files	/files	Вбудований файловий менеджер для перегляду, завантаження, редагування та видалення файлів на пристрої (іконки, мелодії, додатки, палітри).
Backup	/backup	Завантаження всіх файлів пристрою як JSON-бекап або відновлення з раніше завантаженого бекапу.
Update	/update	Завантаження прошивки (.bin) для OTA-оновлення. Пристрій перезавантажується автоматично після успішного оновлення.

Перше налаштування (режим AP)

Коли SVITRIX не може підключитися до збереженої WiFi мережі, він створює власну точку доступу:

Параметр	Значення
Назва мережі	svitrix_XXXXX
Пароль	12345678

Підключіться до цієї мережі та відкрийте http://192.168.4.1 у браузері. З'явиться мінімальна сторінка налаштування WiFi зі сканером мереж та підключенням. Після підключення до домашнього WiFi пристрій перезавантажиться і повний SPA стане доступним.

Розгортання SPA

Веб-інтерфейс зберігається окремо від прошивки у розділі файлової системи LittleFS. Після прошивки firmware завантажте файли SPA на пристрій:

cd web && npm run upload

Це збирає SPA та завантажує його в кореневу директорію LittleFS на пристрої. SPA-бандл — приблизно 18 КБ (gzip) і включає всі 6 сторінок.

Порада

Після завантаження SPA зберігається між оновленнями прошивки. Перезавантажувати SPA потрібно лише при оновленні самого веб-інтерфейсу.

Налаштування — докладний опис

Сторінка налаштувань організована у незалежні секції. Більшість налаштувань зберігаються автоматично при зміні — перемикачі та селектори застосовуються миттєво, а слайдери та кольори чекають 500мс після останньої зміни перед збереженням.

Секції з ручним збереженням (потребують кнопку Save): WiFi, Мережа, MQTT, NTP, Автентифікація та API погоди — вони працюють з конфіденційними даними, де випадкове збереження може спричинити проблеми з підключенням.

Перемикач темної/світлої теми (☀/☽) розташований у правому куті панелі навігації. Ваш вибір зберігається у браузері.

Інформаційна панель

Панель у верхній частині сторінки з інформацією про пристрій у реальному часі: версія прошивки, вільна RAM, рівень WiFi-сигналу, освітленість (lux), час роботи, температура, вологість та поточна яскравість.

WiFi

Налаштуйте до 3 мереж WiFi. Пристрій по черзі намагається підключитися до кожної. Скануйте доступні мережі, виберіть мережу (або введіть вручну) та введіть пароль. Можна зберегти без перезавантаження або зберегти й перезавантажити, щоб застосувати зміни.

Мережа

Увімкніть Static IP для налаштування фіксованої IP-адреси, шлюзу, маски підмережі та DNS-сервера замість DHCP.

MQTT

Підключення до MQTT-брокера для інтеграції з Home Assistant та віддаленого керування:

• Broker — ім'я хоста або IP MQTT-брокера
• Port — за замовчуванням 1883
• Username / Password — облікові дані брокера
• Prefix — префікс MQTT-топіків (за замовчуванням: ID пристрою)
• Home Assistant Discovery — автоматичне виявлення пристрою в HA

NTP та часовий пояс

• NTP Server — сервер часу (за замовчуванням: time.cloudflare.com)
• Timezone — POSIX-рядок часового поясу (знайдіть свій на posix_tz_db)

API погоди

Налаштування джерела метеоданих для погодних додатків (Зовнішня темп., Зовнішня вологість, Тиск, Якість повітря, UV):

• API Key — ключ із weatherapi.com (безкоштовна реєстрація)
• Розташування — спосіб задання локації: за містом (назва), за координатами (широта/довгота), авто за IP або за станцією PWS (ID персональної метеостанції)
• Інтервал оновлення — як часто повторно отримуються дані
• Отримати зараз — кнопка для негайного оновлення й перевірки налаштувань

Автентифікація

Див. розділ Автентифікація нижче.

Нічний режим

Розклад режиму зниженої яскравості з одним кольором для нічного використання (напр. годинник у спальні):

• Enable Night Mode — увімкнути/вимкнути функцію
• Start / End — часовий діапазон (напр. 21:00 до 06:00, підтримує перехід через опівніч)
• Night Brightness — яскравість дисплею вночі (1–50)
• Night Color — колір тексту в нічному режимі (за замовчуванням: червоний — менше втомлює очі)
• Block Auto-Transition — якщо увімкнено, додатки не перемикаються автоматично; використовуйте кнопки для навігації

Під час запланованого часу дисплей затемнюється до налаштованої яскравості, а весь текст відображається обраним нічним кольором. Коли часове вікно закінчується, нормальні налаштування відновлюються автоматично.

Дисплей

• Matrix Power — увімкнути/вимкнути LED-матрицю
• Auto Brightness — автоматичне регулювання яскравості за освітленістю. Після увімкнення з'являються два додаткові повзунки, що задають діапазон: Min Brightness (1–50) та Max Brightness (0–255)
• Brightness — ручний рівень яскравості у відсотках (0–100 %)
• Gamma — гамма-корекція (0.5–3.0)
• Text Color — колір тексту за замовчуванням для всіх додатків
• Background Effect — візуальний ефект, що відображається позаду додатків (за замовчуванням None)
• Color Correction — глобальний відтінок, що множиться на все зображення (застосовується FastLED під час оновлення). Білий — нейтральне значення (без змін); може лише приглушувати канали кольору, але не додавати їх. Використовуйте для усунення колірного відтінку панелі. Кнопка Reset повертає до білого.
• Color Temperature — той самий тип глобального відтінку для зігрівання або охолодження зображення. Має кнопки Warm / Neutral / Cool; Neutral (білий) фактично вимикає ефект. Обирайте насичені кольори, щоб побачити результат.

Додатки

Сторінка Apps містить єдиний список ротації (drag-and-drop), що керує всім, що відображається на годиннику, в одному впорядкованому списку:

• Вбудовані додатки — Time, Date, Temperature, Humidity, Battery
• Погодні додатки — Зовнішня темп., Зовнішня вологість, Тиск, AQI, UV
• Користувацькі додатки — створені через MQTT, HTTP або Data Fetcher
• Ефекти — самостійні візуальні ефекти (без тексту)

Кожен елемент можна розгорнути (▼), щоб побачити індивідуальні налаштування:

• Toggle — увімкнути/вимкнути елемент
• Duration — тривалість показу, кроковий контроль −/+ (дотик = ±1 с, утримання = ±10 с). 0 = типова тривалість (налаштовується нижче)
• Color — власний колір тексту (0 = типовий колір)
• Icon — замінити іконку елемента ID або назвою файлу (недоступно для Time/Date; порожнє = типова іконка)
• Celsius — лише Temperature та Outdoor Temp: °C коли увімкнено, °F коли вимкнено
• Offset — лише Temperature: корекція показань внутрішнього сенсора (від −15 до +5°)
• Auto color — лише Air Quality (AQI) та UV: колір призначається динамічно за рівнем (перекриває фіксований колір/колір елемента)

Перетягуйте рядки, щоб змінити порядок. Зміни зберігаються миттєво й залишаються після перезавантаження.

Глобальна поведінка:

• Auto Transition — автоматичне перемикання між додатками
• Transition Effect — візуальний ефект перемикання (None, Slide, Dim, Zoom тощо)
• Transition Speed — швидкість анімації переходу (100–2000мс)
• Scroll Speed — швидкість прокрутки тексту
• Типова тривалість — секунди показу кожного додатку, коли його тривалість per-item = 0 (1–30 с; те саме, що ROTACION → APP у меню пристрою)
• Block Navigation — заблокувати перемикання додатків кнопками

Час і дата

• Time Format / Date Format — рядки формату strftime (напр., %H:%M, %d.%m.%y)
• Time Mode — стиль відображення, 7 варіантів: 1) Plain text (день знизу), 2) Calendar (день знизу), 3) Calendar (день зверху), 4) Calendar Alt (день знизу), 5) Calendar Alt (день зверху), 6) Big digits, 7) Binary. (Для форматів часу з секундами доступні лише Plain text і Binary.)
• Start on Monday — тиждень починається з понеділка
• Time / Date Color — індивідуальні кольори для часу та дати
• Show Weekday — показувати індикатор дня тижня
• Weekday Active / Inactive Color — кольори точок дня тижня
• Calendar Header / Text / Body Color — кольори блоку календаря

Звук

• Sound Enabled — увімкнути/вимкнути зуммер
• Volume — рівень гучності зуммера (0–30)

Надсилання повідомлення

Надіслати одноразове повідомлення на дисплей:

• Text — текст повідомлення (обов'язковий)
• Icon — ID іконки або назва файлу з /ICONS/
• Icon Layout — розташування іконки: зліва, справа або приховати
• Duration — тривалість показу повідомлення (1–60с)
• Rainbow — переливання тексту кольорами веселки
• Color — колір тексту (коли Rainbow вимкнено)
• Sound — відтворити звуковий файл з /MELODIES/
• RTTTL — відтворити мелодію у форматі RTTTL

Будильники

Вкладка Alarms дозволяє керувати будильниками та нагадуваннями:

• Додати / редагувати будильник — задайте час, дні тижня, необов'язкову назву, мелодію та опцію відкласти (snooze)
• Один раз — будильник спрацьовує одноразово й після цього вимикається
• Індикатор будильника — увімкнути/вимкнути невеликий індикатор на матриці, що показує наявність запланованого будильника

Будильники працюють навіть без WiFi завдяки годиннику реального часу (RTC).

Завантажувач іконок

Завантаження іконок з бібліотеки LaMetric:

1. Введіть номер ID іконки
2. Натисніть Preview для перегляду
3. Натисніть Download для збереження в папку /ICONS/ на пристрої

Дії

• Save All Settings — зберегти всі налаштування дисплею, MQTT та погоди одразу (корисно як ручне резервне збереження або якщо автозбереження не спрацювало)
• Reset Defaults — відновити всі налаштування до заводських (потребує підтвердження)
• Reboot — перезавантажити пристрій (потребує підтвердження)

Автентифікація

Ви можете встановити логін та пароль у Settings → Authentication. Після налаштування кожна сторінка, API-запит і застосунок SVITRIX вимагатимуть ці облікові дані. Залиште обидва поля порожніми для вимкнення автентифікації.

Увага

Не втрачайте облікові дані автентифікації — інакше доведеться повністю скинути пристрій.