Wizualizacja w DOMIQ/Remote

Zakładka Display (Wizualizacja) to zaawansowany edytor graficzny wbudowany w konfigurator DOMIQ, który pozwala na tworzenie interaktywnych paneli sterowania domem. Jest ona znakiem rozpoznawczym systemu, umożliwiając sterowanie instalacją z poziomu aplikacji DOMIQ/Remote, paneli DOMIQ/Display oraz dowolnej przeglądarki internetowej.

1. Budowa interfejsu zakładki #

Edytor podzielony jest na kilka kluczowych obszarów ułatwiających projektowanie:

1. Pasek przycisków (Pod zakładką „Display„): Zawiera narzędzia do zarządzania całą wizualizacją, takie jak dodawanie nowych ekranów i warstw, kopiowanie/wklejanie elementów oraz funkcje Importu/Eksportu plików .xml. Znajdziesz tu również przycisk Zapisz, który przesyła gotową konfigurację do pamięci modułu Base.
2. Struktura (Lewa strona „Structure”): Wyświetla hierarchiczne drzewo Twojego projektu. Na głównym poziomie znajdują się Ekrany („Screen”), a wewnątrz nich mogą znajdować się Warstwy („Layer”) oraz poszczególne kontrolki.
3. Tabela atrybutów (Dół po lewej): Po kliknięciu w dowolny element na liście struktury lub bezpośrednio w edytorze, tutaj pojawią się jego szczegółowe parametry (np. współrzędne X/Y, przypisany kanał komunikacyjny, obrazek tła).
4. Edytor wizualizacji (Prawa strona): Interaktywny podgląd, w którym metodą „przeciągnij i upuść” (drag & drop) rozmieszczasz kontrolki na wybranym tle.

2. Kluczowe pojęcia: Ekrany i Warstwy #

1. Ekran (Screen): To podstawowy widok, odpowiadający pojedynczemu „pulpitowi” w aplikacji. Każdy ekran musi mieć unikalny identyfikator. Ekran o nazwie „main” jest wyświetlany jako pierwszy po uruchomieniu aplikacji sterującej. Dla każdego ekranu możesz ustawić własny obrazek tła (np. rzut kondygnacji o zalecanej rozdzielczości 800×600 px) lub adres URL do grafiki hostowanej na zewnętrznych serwerach. Jest to szczególnie przydatne, gdy chcesz użyć grafik o większych rozdzielcznościach i rozmiarach pliku.
2. Warstwa (Layer): Służy do grupowania kontrolek (np. „Oświetlenie”, „Ogrzewanie”). Warstwy są niezwykle przydatne, ponieważ można sterować ich widocznością zbiorczo – np. kliknięcie jednego przycisku na wizualizacji może wyświetlić lub ukryć całą grupę ikon, co poprawia czytelność interfejsu.

Widok Ekranu Dom (House) z Warstwami Światła (Lights) i Temperatura (Temperature):

3. Rodzaje dostępnych kontrolek #

Wizualizację budujesz z gotowych elementów, które przeciągasz z listy w Edytorze Wizualizacji (Visualization Editor) na obszar projektu:

1. Światło (Light): Najbardziej uniwersalna kontrolka. Może służyć do włączania/wyłączania lamp, sterowania roletami (tryb góra/dół/stop) lub wyświetlania stanu czujek ruchu.
2. Przełącznik (Switch): Jest to przycisk dwustanowy, który służy do sterowania dowolnym identyfikatorem na zasadzie włącz/wyłącz. W przeciwieństwie do zwykłego Przycisku, Przełącznik wyświetla na wizualizacji swój aktualny stan.
3. Toggle (Sposób kontroli): W edytorze wizualizacji „toggle” (Wł./Wył.) nie występuje jako osobna kontrolka na liście „Nowy”, ale jest kluczowym sposobem kontroli dla elementu Światło. Wybranie tej opcji sprawia, że każde naciśnięcie ikony na ekranie wysyła na przemian komendy on i off do przypisanego kanału.
4. Ściemniacz (Dimmer): Dedykowana kontrolka do obsługi wyjść ściemnialnych. Krótkie naciśnięcie działa jak przełącznik (włącz/wyłącz), natomiast długie przytrzymanie (powyżej sekundy) rozpoczyna płynną zmianę jasności. Na kontrolce wyświetlana jest procentowa wartość jasności.
5. Wartość (Value) / Temperatura (Temperature): Wyświetlają dane liczbowe, takie jak aktualna temperatura, wilgotność czy zużycie energii.
6. Tekst (Text): Pozwala na umieszczenie na wizualizacji dowolnej treści tekstowej. Może wyświetlać statyczny napis wpisany w konfiguracji lub dynamicznie pobierać zawartość z wybranego identyfikatora (np. wyświetlać nazwę aktualnie odtwarzanego utworu lub stan zmiennej logicznej).
7. RGBW: Zaawansowana kontrolka do sterowania oświetleniem kolorowym. Domyślnie pokazuje bieżący kolor światła, a po kliknięciu otwiera pełnoekranowy widok z pierścieniem wyboru barwy oraz suwakami jasności i nasycenia. Obsługuje cztery kanały: czerwony, zielony, niebieski oraz opcjonalnie biały.
8. Kamera (Camera): Pozwala na umieszczenie na wizualizacji okna z podglądem na żywo ze strumienia MJPEG.
9. Obrazek (Image): Służy do dodawania statycznych grafik (np. logotypów).

Szczegółowy opis interfejsu znajdziesz TUTAJ

4. Proces tworzenia (Krok po kroku) #

1. Przygotowanie zasobów: Najpierw wgraj grafiki tła i własne ikony w zakładce Zasoby. Aby wgrać pliki w tej zakładce, należy skorzystać z jednej z poniższych metod:
   1. Kliknięcie w Okno podglądu: Po wybraniu odpowiedniego folderu w strukturze plików (lewa strona), należy kliknąć bezpośrednio w Okno podglądu (duży obszar po prawej stronie ekranu). Spowoduje to otwarcie systemowego okna wyboru plików z dysku Twojego komputera.
   2. Metoda „przeciągnij i upuść” (Drag & Drop): Możesz również po prostu przeciągnąć wybrane pliki z folderu na swoim komputerze i upuścić je bezpośrednio na Okno podglądu w przeglądarce.
2. Dodanie ekranu: W zakładce Display kliknij + Ekran, nadaj mu nazwę i wybierz tło z listy.
3. Rozmieszczenie elementów: Przeciągnij kontrolki znajdujące się w oknie Edytora wizualizacji (np. Światło), na obraz tła.
4. Konfiguracja parametrów: W Tabeli atrybutów wpisz odpowiedni Kanał (np. LCN.relay.0.10.1), wybierz Motyw graficzny i określ Sposób kontroli (np. włącznik lub ściemniacz).
5. Zapis: Po zakończeniu prac kliknij Zapisz.

Efekt końcowy na iPad (iOS):

Dla użytkowników nowego modułu Base 2.0, zakładka ta działa znacznie szybciej dzięki zwiększonej mocy obliczeniowej urządzenia, a większa pamięć FLASH pozwala na przechowywanie znacznie bogatszych graficznie projektów bez obaw o wydajność systemu.