ID – zrób to sam

Inteligentny dom stworzony własnymi rękami

Wizualizacja

1 VISUALISATION – wprowadzenie

Przed rozpoczęciem pracy należy zainstalować adapter ioBroker.icons-icons, który zawiera pakiet przydatnych obrazków, z których będziemy korzystać.

Aby uruchomić edytor wizualizacji należy w przeglądarce wpisać http://<IP_komputera>:8082 i z listy wybrać VIS EDITOR.

Okno edytora wizualizacji
  1. Główne menu:
    a – menu widoków (ekranów) wizualizacji
    b – widgety – menu elementów dodawanych na ekranach np. przyciski
    c – parametry urządzenia na jakim będzie uruchomiona wizualizacja np. rozdzielczość
    d – menu zarządzania projektami, wyglądem edytora. Znajdują się tam również funkcje do eksportu i importu projektów oraz pozwala na wybór projektu do edycji
    e – pomoc
    f – cofanie zmian (np. przypadkowego usunięcia elementu z wizualizacji)
  2. menu widoczne kiedy w menu [1] wybrano widgets. Belka zawiera rozwijaną listę dodanych widgetów oraz pozwala na ich usunięcie, skopiowanie lub wyświetlenie pomocy
  3. zarządzanie pozycją widgetów (np. wyrównanie do lewej strony, wyrównanie do prawej strony itp.)
  4. eksport i import widgetu
  5. menu pozwalające na otwarcie okna z wizualizacją w trybie runtime, przeładowanie wszystkich uruchomionych wizualizacji w trybie runtime (przydatne gdy wizualizacja pracuje na kilku tabletach) oraz zamknięcie edytora
  6. wyświetla listę wszystkich widoków utworzonych przez użytkownika (przydatne gdy mamy utworzonych dużo okien)
  7. opcja pozwalająca na wyświetlanie małych widgetów w menu widgetów
  8. filtrowanie widgetów (szybsze wyszukiwanie interesującego nas widgetu)
  9. lista z “kategoriami” widgetów
  10. menu z widgetami
  11. okno właściwości zaznaczonego widgetu na wizualizacji
  12. okno edytora, na którym budujemy własną wizualizację

Nowy projekt

Klikamy w menu Setup i wybieramy New project… i wpisujemy nazwę Projekt1.

Projekt zostanie utworzony z domyślnym oknem DemoView. Klikamy w menu Tools i z listy Resolution wybieramy HD – Landscape. Po wybraniu odpowiedniej rozdzielczości (wybieramy ją pod swoje urządzenia) w polu edycji wizualizacji pojawią się granice robocze w postaci zielono-czerwonej kreski.
Po ustaleniu rozdzielczości przechodzimy do menu Views i klikając w przycisk z + dodajemy nowy widok o nazwie Glowny.

Po prawej stronie okna mamy możliwość zmiany opcji widoku.

Możemy wybrać motyw (theme), określić dla jakich grup użytkowników widok będzie dostępny, wybrać jedno z domyślnych teł (pole wyboru none) lub ustawić swoje własne (kolor lub obrazek), oraz określić parametry czcionek. Jak widać znajomość CSS jest przydatna i warto poznać podstawy css.

ZOSTAW ODPOWIEDŹ

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *