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.
- 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) - 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
- zarządzanie pozycją widgetów (np. wyrównanie do lewej strony, wyrównanie do prawej strony itp.)
- eksport i import widgetu
- 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
- wyświetla listę wszystkich widoków utworzonych przez użytkownika (przydatne gdy mamy utworzonych dużo okien)
- opcja pozwalająca na wyświetlanie małych widgetów w menu widgetów
- filtrowanie widgetów (szybsze wyszukiwanie interesującego nas widgetu)
- lista z “kategoriami” widgetów
- menu z widgetami
- okno właściwości zaznaczonego widgetu na wizualizacji
- 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.
