Tutorial: User Interface

Transkrypt

1 Tutorial: User Interface Niniejszy samouczek pokazuje w jaki sposób używać narzędzi NI LaVIEW w celu stworzenia interfejsu użytkownika. Uczy, jak projetować kontrolki i wskaźniki, używać etykiet i nagłówków, ustawiać wartość domyślną dla obiektów interfejsu użytkownika oraz w jaki sposób stosować kolory, aby podnieść atrakcyjność twojego interfejsu. Dostarcza także podstawowych wskazówek oraz narzędzi, aby pomóc ci stworzyć elegancki i funkcjonalny interfejs użytkownika, tak jak ten przedstawiony poniżej. KONCEPCJA (Concept) Interfejs użytkownika służy do przekazywania danych, zmiennych bezpośrednio do kodu źródłowego. Pozwala użytkownikowi zmieniać wartości domyślne oraz zobaczyć dane, obliczone przez działanie kodu programu. W LabVIEW interfejs użytkownika reprezentuje Front Panel (Panel główny). Ważne jest, aby zdefiniować wejścia i wyjścia dla oprogramowania już podczas fazy projektowania. Możesz wprowadzać dane wejściowe niezbędne do działania programu używając następujących metod: 1. Rejestrując je przy pomocy urządzenia zewnętrznego, np. multimetru. 2. Czytając je bezpośrednio z pliku 3. Używając kontrolek Możesz wyświetlić dane wyjściowe z użyciem takich obiektów jak grafy (graphs), charst albo możesz zapisać je do pliku. Możesz także wysłać sygnał do urządzenia typu generator. PROJEKTOWANIE KONTROLEK I WSKAŹNIKÓW (Designing Controls And Indicators) Podczas wyboru kontrolek i wskaźników upewnij się, że są one odpowiednie do danego zadania. Na przykład, kiedy chcesz wyznaczyć częstotliwość sygnału sinusoidalnego, wybierz kontrolkę potencjometru, a kiedy chcesz wyświetlić temperaturę wybierz wskaźnik termometru. str. 1

2 ETYKIETY I NAGŁÓWKI (Labels And Captions) Upewnij się, że w wystarczająco jasny sposób nadajesz nazwy kontrolek i wskaźników. Etykiety pomagają użytkownikowi zdefiniować przeznaczenie każdej kontrolki i wskaźnika. Przejrzyste etykietowanie pomaga ci także udokumentować twój kod na diagramie blokowym. Kontrolka i wskaźnik są powiązane z nazwami na diagramie blokowym. Nagłówki pomogą ci opisać kontrolkę głównego panelu. Nie pojawiają się one na diagramie blokowym. Dzięki nagłówkom możesz udokumentować interfejs użytkownika bez zaśmiecania diagramu blokowego dodatkowym tekstem. Otwórz nową kartę VI i utwórz etykietę lub nagłówek dla wskaźnika termometru. 1. Nanieś wskaźnik termometru na diagram blokowy. 2. Domyślnie, tylko etykieta jest widoczna. Aby zmienić etykietę kliknij 2 razy na nią i wpisz nową nazwę (krótszą lub lepiej opisującą wskaźnik). 3. Kliknij na wskaźnik termometru i za pomocą prawego przycisku wybierz Properties. str. 2

3 W okienku Properties zaznacz Visible w zakładce Appearance. Wpisz Indoor Temperature w Caption text box. Kliknij OK, aby zachować zmiany i zamknij okno. 4. Zauważ, że teraz nagłówek już pojawia się nad wskaźnikiem. Przełącz się do diagramu blokowego i zauważ, że pojawia się tylko etykieta. str. 3

4 OPCJE KONTROLEK I WSKAŹNIKÓW (Control And Indicator Options) Główny panel oferuje wiele opcji dla kontrolek i wskaźników, które możesz zobaczyć po wciśnięciu prawego przycisku na wskaźniku termometru i przeglądnięciu krótkiego menu i podmenu. Wykonaj poniższe kroki, aby utworzyć kontrolkę temperatury i ustawić wartość domyślną. 1. Nanieś numeryczną kontrolkę na główny panel pod wskaźnik termometru. Utwórz nagłówek o nazwie Indoor Temperature Control 2. Ustaw wartość. 3. Kliknij prawym przyciskiem i wybierz Data Operations>>Make Current Default ze skrótu do menu. 4. Ponieważ masz już odpowiedni nagłówek kontrolki temperatury, schowaj etykietę przez kliknięcie prawym przyciskiem na kontrolkę i wybranie Visible Items>>Label ze skrótu do menu. Zrób tak samo dla wskaźnika termometru. str. 4

5 UŻYWANIE KOLORU (Using Color) Właściwe użycie koloru może poprawić wygląd i funkcjonalność twojego interfejsu użytkownika. Używanie zbyt wielu kolorów jednakże może przynieść odwrotny skutek. LabVIEW dostarcza próbnik kolorów, który pomaga wyznaczyć odpowiednie kolory. Wybierz narzędzie Coloring z palety kolorów i kliknij prawym przyciskiem na obiekt albo obszar, aby wyświetlić pobieracz kolorów. Z otwartym próbnikiem kolorów możesz przesunąć kursor na inny kolor i obserwować, jak obiekt albo obszar zmienia kolor w miarę jak ty przesuwasz kursor po różnych kolorach. Góra próbnika kolorów zawiera szare spektrum i miejsce do zaznaczenia, którego możesz użyć, aby stworzyć transparentne obiekty. Drugie spektrum zawiera pomieszane kolory, które dobrze wyglądają jako tło i obiekty głównego panelu. Trzecie spektrum zawiera kolory odpowiednie dla świecących elementów. Przesuwanie kursorem poziomo po jednym z trzech spektrów pomoże ci wybrać odpowiednie kolory. ROZSTAWIENIE I SZEREGOWANIE (Spacing And Alignment) Biały obszar i uszeregowanie są najprawdopodobniej najważniejszymi technikami dla grupowania i dzielenia. Im więcej obiektów, które twoje oko widzi w jednej linii, tym bardziej wszystko jest przejrzyste. Kiedy obiekty znajdują się w jednej linii oko podąża wzdłuż tej linii od strony lewej do prawej albo od góry do dołu. Najczęściej jednak używa się układu pionowego. Kiedy projektujesz główny panel, zastanów się, w jaki sposób pogrupować kontrolki i wskaźniki. Jeśli kilka kontrolek jest powiązane ze sobą dodaj ramkę obejmującą je. str. 5

6 Wypośrodkowane elementy są mniej uporządkowane niż te pogrupowane do lewej lub do prawej strony. Obszar wolnego pola daje wrażenie uporządkowania. Wypośrodkowane elementy zazwyczaj mają nierówne krawędzie i użytkownik nie jest w stanie łatwo określić kolejności elementów. Rysunki poniżej przedstawiają omawianą sytuację. Umieszczanie obiektów głównego panelu zbyt blisko siebie może stwarzać problemy. Zostaw trochę miejsca pomiędzy obiektami. Ułatwi to czytelność panelu. Puste miejsca zapobiegają także nieumyślnemu i przypadkowemu naciśnięciu przycisku. Generalnie, użyj własnych zmysłów i poczucia stylu, aby stworzyć interfejs użytkownika. Odnieś się także do tych wskazówek, aby sworzyć przyjazny uzytkownikowi panel główny. Zauważ różnicę pomiędzy dwoma prostymi interfejsami użytkownika. Właściwe etykietowanie, szeregowanie i rozstawienie robi dużą różnicę. str. 6

7 WSKAZÓWKI I NARZĘDZIA POMOCNICZE UŻYTKOWNIKOWI INTERFEJSU (User Interface Tips And Tools) Niektóre, wbudowane w LabVIEW, narzędzia pomocne w tworzeniu przyjaznego dla użytkownika panelu zawierają etykiety i dekoracje. OKNO KONTROLEK (Tab Control) Fizyczne urządzenia zazwyczaj mają efektywny interfejs użytkownika. Użyj okna kontrolek, aby pokryć główny panel kontrolkami i wskaźnikami na mniejszej powierzchni. Aby dodać więcej stron do okna kontrolek, kliknij prawym przyciskiem na etykietę i wybierz Add Page Before albo Add Page After ze skrótu do menu. Jeszcze raz nadaj nazwę za pomocą Labeling i umieść obiekty głównego panelu na odpowiednich stronach. Wykonaj poniższe kroki aby stworzyć okno kontrolek ze wskaźnikiem termometru, kontrolką temperatury, prędkościomierzem i alarmem dla budynku z trzema sektorami. Zacznij z nowym VI. 1. Utwórz nowy VI przez wybranie File>>New VI z menu. 2. Dodaj jedną okrągłą ikonkę i nazwij ją Sector 1 Alarm, dodaj jeden wskaźnik termometru i nazwij go Sector Temperature oraz dodaj jedną tarczę i nazwij Fan Speed Control. Twój główny panel powinien tak wyglądać. (W tej części nie umieszczono przykładów z diagramami blokowymi). str. 7

8 3. Dodaj okno kontrolek z Controls, jak pokazano poniżej. 4. Rozszerz okno kontrolki i dodaj jedną dodatkową etykietę przez kliknięcie prawym przyciskiem w etykietę i wybranie Add Page After. Podpisz każdą etykietę przez podwójne kliknięcie i wpisanie nazwy dla każdego z trzech sektorów. 5. Dodaj różne kontrolki i wskaźniki do każdego okna. Pamiętaj, że możesz przytrzymać <Ctr> podczas klikania i przeciągnąć obiekt, aby go skopiować. Ułóż obiekty i przeskaluj je, jeśli trzeba. Twój VI powinien wyglądać następująco. str. 8

9 DEKORACJE (Decorations) Użyj elementów dekoracyjnych umieszczonych w podpalecie Decorations, aby pogrupować lub rozdzielić obiekty na głównym panelu ramkami, liniami lub pudełkami. Obiekty z palety Decorations nie wyświetlają danych, ani nie pokazują się na diagramie blokowym. Próbując dodawać dekoracje do głównego panelu po prostu je tam umieść. Ważne jest, aby stworzyć wizualnie przyciągający i zorganizowany interfejs użytkownika. Skoro interfejs użytkownika jest generalnie tym, na czym użytkownik pracuje, ważne jest by stworzyć go tak prostym i intuicyjnym, jak to tylko możliwe. str. 9