Dashboardy#

Dashboardy to strony sterowania dostępne z przeglądarki - zaprojektowane pod tablety montowane na ścianie, ale działają też na telefonie i komputerze.

Jak to wygląda#

Każdy dashboard to siatka widgetów: przełączniki, suwaki, przyciski, temperatury, wykresy. Możesz mieć dowolną liczbę dashboardów - np. osobny na salon, kuchnię, ogród.

┌──────────────────────────────────────────┐
│  🏠 Dom         Salon 22°C  Kuchnia 21°C│  ← header
├──────────┬───────────┬───────────────────┤
│  💡      │  💡       │  🎬              │
│  Kanapa  │  Stol     │  Movie           │
│  [ON]    │  [OFF]    │  [TAP]           │
├──────────┴───────────┴───────────────────┤
│  ☀ Jasność  ████████░░░░░  75%          │  ← slider
├──────────┬───────────────────────────────┤
│  🌡 Salon│  📈 Temperatura (2h)         │
│  22.3°C  │  ~~~~/\~~~~/\~~~~            │  ← chart
│  ▁▂▃▅▆▅▃ │                              │
└──────────┴───────────────────────────────┘

Dashboard jest dostępny pod adresem http://vclu:8080/d/home (gdzie home to ID dashboardu).

Widget	Do czego	Przykład
Toggle	Włącz/wyłącz urządzenie	Lampa, gniazdko, wentylator
Button	Wykonaj akcję	Scena “Movie”, otwieranie bramy
Slider	Ustaw wartość	Jasność, temperatura docelowa
Status	Wyświetl wartość	Temperatura, wilgotność, status alarmu
Chart	Wykres historyczny	Temperatura z ostatnich 24h
Link	Otwórz stronę	Link do Grafany, do kamery

Tworzenie dashboardu#

Dashboardy definiuje się w Lua w katalogu modules/dashboards/. Oto prosty przykład:

-- modules/dashboards/home.lua
local r = _registry

Dashboard.new('home')
  :name('Dom')
  :icon('house-door')
  :columns(3)
  :auth('public')
  :section('Salon', 'lamp')
    :toggle('kanapa', 'Kanapa', 'lamp',
      function() return r:get("CLU220000592.DOU0789"):getValue() end,
      function(v)
        if v then r:get("CLU220000592.DOU0789"):switchOn()
        else r:get("CLU220000592.DOU0789"):switchOff() end
      end)
    :button('movie', 'Movie', 'film', function()
      r:get("scene:salon_movie"):execute()
    end)
  :section('Temperatura', 'thermometer-half')
    :status('temp', 'Salon', 'thermometer-half',
      function() return r:get("CLU220000592.ANA4201"):getValue() end, '°C')
  :build()

Po utworzeniu pliku dodaj go do modules/init.lua:

require("dashboards/home")

i przeładuj Lua (w panelu webowym lub przez MCP).

Agent AI może to zrobić za Ciebie. Powiedz agentowi np. “stwórz dashboard dla salonu z lampami i temperaturą” - agent przeczyta listę urządzeń, napisze kod, przetestuje w sandbox i wdroży. Używa do tego narzędzi vclu_draft_write, vclu_draft_test i vclu_draft_promote.

Autoryzacja#

Każdy dashboard ma własny tryb dostępu:

Tryb	Opis	Kiedy używać
`public`	Każdy w sieci ma dostęp	Tablet na ścianie w domu
`pin`	Wymaga PIN-u (klawiatura numeryczna)	Dashboard z alarmem, bramą
`session`	Wymaga zalogowania do vCLU	Panel administracyjny

-- Dashboard publiczny (domyślny dla tabletów)
Dashboard.new('home'):auth('public'):...

-- Dashboard z PIN-em
Dashboard.new('alarm'):auth('pin'):pin('1234'):...

-- Dashboard dla zalogowanych
Dashboard.new('admin'):auth('session'):...

PIN jest weryfikowany po stronie serwera. Po poprawnym wpisaniu cookie ważny 24h - nie trzeba wpisywać PIN-u za każdym razem.

Personalizacja wyglądu#

Możesz dostosować kolory i tło każdego dashboardu:

:theme({
  accent = '#27C2A8',                   -- kolor akcentu (przyciski, suwaki)
  background = '#1a1a2e',              -- kolor tła
  cardBg = 'rgba(22, 33, 62, 0.85)',   -- tło kart (półprzezroczyste)
  text = '#eee',                       -- kolor tekstu
  wallpaper = '/static/img/bg.jpg',    -- tapeta (opcjonalnie)
})

Gdy ustawisz tapetę, użyj rgba() w cardBg - karty będą półprzezroczyste i tapeta będzie widoczna w tle.

Opcjonalny pasek na górze dashboardu z kompaktowymi wartościami - np. temperatury w każdym pokoju:

local hdr = dash:header()
hdr:status('h_salon', 'Salon', 'thermometer-half',
  function() return r:get("CLU.ANA4201"):getValue() end, '°C')
hdr:status('h_kuchnia', 'Kuchnia', 'thermometer-half',
  function() return r:get("CLU.ANA5151"):getValue() end, '°C')

Header wyświetla wartości w jednej linii na górze - zawsze widoczne bez scrollowania.

Wykresy#

Dashboardy mogą wyświetlać wykresy z danych historycznych (system metryk). Dane pobierane bezpośrednio z API - nie obciążają Lua.

:chart('temp_24h', 'Temperatura (24h)', 'temp:salon',
  {unit = '°C', range = '24h', span = 2, fill = true})

Dostępne zakresy: 30m, 2h, 24h, 7d. Widget status może też pokazywać miniaturowy wykres (sparkline):

:status('salon', 'Salon', 'thermometer-half', getterFn, '°C',
  {spark = 'temp:salon', sparkRange = '2h'})

Ikony#

Dashboardy używają Bootstrap Icons. Nazwa ikony bez prefiksu bi-:

Kategoria	Ikony
Dom	`house`, `house-door`
Światła	`lamp`, `lightbulb`, `brightness-high`
Temperatura	`thermometer-half`, `thermometer-high`
Wentylacja	`fan`, `wind`
Bezpieczeństwo	`camera-video`, `shield-check`, `lock`
Media	`music-note`, `volume-up`, `film`, `tv`
Inne	`plug`, `cup-hot`, `tree`, `clock`, `wifi`

Pełna lista na stronie Bootstrap Icons.

Responsywność#

Tablet/desktop: siatka z ustawioną liczbą kolumn (:columns(3))
Telefon (< 600px): automatycznie 2 kolumny
Brak menu i pasków - cały ekran na widgety

Zarządzanie#

W panelu vCLU (/dashboards) widzisz listę wszystkich dashboardów z linkami, liczbą widgetów i typem autoryzacji.

Pełna dokumentacja Lua API dashboardów - wszystkie typy widgetów, opcje, API endpointy, caching - jest w sekcji Runtime & Lua / Dashboards.

Dashboardy