Projektowanie interfejsu operatorskiego w WEcabin Designer
Po skonfigurowaniu aplikacji oraz utworzeniu tagów w WEcabin Designer, przyszła pora na prezentację na ekranie otrzymywanych informacji po protokole CAN. W tym celu należy przejść do zakładki:
Pages → Unified (zależnie od szablonu projektu) → Normal → Page
W obszarze roboczym wyświetla się puste, białe pole oraz dwie zakładki po prawej: Widget Gallery i Properties. Jeśli któraś z nich jest niewidoczna, wystarczy przejść do paska menu, do zakładki View → Toolbars and Docking Windows (Rys. 1) oraz zaznaczyć okna, które należy uwidocznić.
Rys. 1. Włączenie widoczności zakładek
Aby zbudować prosty interfejs wyświetlający dwie wartości, korzystamy z galerii widgetów, z której można przeciągać gotowe obiekty graficzne na stronę. Zaleca się samodzielne przejrzenie wszystkich kategorii oraz widgetów, aby dowiedzieć się, co program oferuje i mieć pełny obraz tego w przypadku budowy bardziej zaawansowanych aplikacji.
Korzystając z utworzonych zmiennych w poprzednim artykule, możemy wyświetlić na stronie wartości temperatury oraz ciśnienia oleju. Temperaturę można przykładowo przedstawić za pomocą obiektu „White square gauge outward ticks” w Widget Gallery → Meters → Gauges – Square, ciśnienie za pomocą „White horizontal gauge” w Widget Gallery → Meters → Gauges – Horizontal. Przytrzymując lewy przycisk myszy, przeciągamy wybrany widget w odpowiednie miejsce na stronie.
Rys. 2. Dodanie widgetów na stronę
Edycja właściwości elementów ekranu
Kolejnym etapem będzie edycja właściwości elementów ekranu. Po naciśnięciu tła interfejsu można zmienić jego właściwości, np. kolor lub zastosować predefiniowany szablon wyświetlany na wybranych stronach. Obiekty graficzne, takie jak wskaźniki, posiadają wiele właściwości konfiguracyjnych, takich jak grubość i kolor kreski podstawowej, kolor przedziału alarmowego, liczba działek głównych i pomocniczych czy kąt rozpoczęcia i zakończenia skali. Aby lepiej poznać możliwości konfiguracji, warto przejrzeć wszystkie dostępne właściwości i sprawdzić ich działanie.
Aby pokazać przykładową edycję graficzną, zostały skonfigurowane następujące elementy:
Page1 (tło):
Background – [62, 62, 62]
GaugeSquare1 (Wskaźnik temperatury):
Min – 60
Max – 160
Display:
Needle Thickness - 3
Major Tick Color – [255, 255, 255]
Minor Tick Color – [255, 210, 0]
Major Tick Thickness – 3
Minor Tick Thickness -2
Configure:
Alarm Min – 130
Alarm Max – 160
Major Ticks – 11
Minor Ticks – 2
Próg alarmowy (Alarm Min) ustawiono na 130°C, dzięki czemu użytkownik otrzyma wizualną informację o przekroczeniu bezpiecznej temperatury pracy.
Text:
Font Color – [255, 255, 255]
Oprogramowanie również oferuje dodatkową, jeszcze bardziej szczegółową edycję właściwości poprzez szybkie, pięciokrotne wciśnięcie danego elementu obiektu np. wartości numerycznej wskaźnika. Z tego powodu zostały skonfigurowane następujące elementy:
Można również dodać etykietę informacyjną dla wskaźnika ciśnienia i temperatury w postaci tekstu, który dodaje się poprzez zakładkę Widget Gallery → Basic → Text/Numeric Data Objects → Label .
Podpinanie zmiennych CAN pod widgety
Aby dany widget powiązać z konkretnym sygnałem, należy najpierw skonfigurować protokół sieciowy oraz utworzyć ramki CAN oraz zmienne VAR – zostało to wykonane w poprzednim artykule „Magistrala CAN i tagi w WEcabin Designer”. Następnie przechodzimy do właściwości widgetu, znajdujemy parametr „Value” oraz naciskamy obok ikonę „+”.
Rys. 5. Podpięcie zmiennej pod widget
Wybieramy zmienną, którą chcemy podpiąć pod dany widget.
Rys. 6. Wybór zmiennej do podpięcia
Tworzenie przycisków funkcyjnych
Przyciski funkcyjne wykonują określoną akcję po wykonaniu przez użytkownika odpowiedniego działania, np. naciśnięcia lub przytrzymania przycisku. Może to być np. przejście do innej strony, ustawienie bitu, usunięcie alarmów i wiele innych. Większość z tych akcji ma jeden lub więcej parametrów, ale są też takie, które mają jedne, konkretne zadanie np. wylogowanie się, bezpieczne usunięcie nośnika danych.
Przykładowo możemy dodać przycisk, który będzie miał za zadanie przejście do strony nr 2. W tym celu należy utworzyć nową stronę. Przechodzimy do zakładki Pages → Unified → Normal oraz naciskamy prawym przyciskiem zakładkę „Normal”, a następnie „Insert New Page”. Dodajemy obiekt „Rectangle blue button” na pierwszej stronie, zmieniamy jego wygląd zależnie od preferencji oraz przechodzimy do zakładki „Events” we właściwościach. Wybieramy opcję „OnMouseClick Action”, a po wyświetleniu okna – „LoadPage”. W parametrze pageName ustawiamy konkretną stronę, do której użytkownik ma przejść po naciśnięciu przycisku.
Rys. 7. Wybór i konfiguracja akcji przycisku
Ustawienie strony jako strony głównej
Rys. 8. Wybór strony głównej
Po zakończeniu konfiguracji powyższych widgetów ekran wygląda następująco:
Rys. 9. Wykonany interfejs
Przykładowy ekran w programie testowym w WEcabin Designer (Sample Program):
Rys. 10. Przykładowy, rozbudowany ekran
Podsumowanie
W artykule przedstawiono proces budowy prostego interfejsu operatorskiego w środowisku WEcabin Designer. Omówiono dodawanie widgetów, konfigurację ich właściwości, powiązanie z sygnałami magistrali CAN oraz tworzenie przycisków funkcyjnych umożliwiających nawigację pomiędzy ekranami. Opisane zagadnienia stanowią podstawę do projektowania bardziej rozbudowanych i funkcjonalnych aplikacji HMI.
