Informatyka. Wykład /2018z

Transkrypt

1 Informatyka Wykład /2018z

2 Plan Podstawy tworzenia wykresów Obiekty graficzne i ich hierarchia Interfejs graficzny - Graphical User Interface (GUI) Elementy GUI GUI Development Environment GUIDE Funkcje i przekazywanie zmiennych w GUI (Zasady projektowania efektywnych interfejsów graficznych)

3 Wizualizacja danych w MATLABIE Więcej na przykładowych wizualizacji na

4 Wykresy liniowe 2D - plot plot(x, y, LineSpec) Dane do wykreślenia Specyfikacja linii x=randn(20,2)*sqrt(2)+0.5; pos_x=cumsum(x); plot(pos_x(:,1), pos_x(:,2), '--ms'); LineSpec Line Specification string Styl linii Kolor Kształt znacznika

5 Specyfikacja Linii Symbol Styl Linii Symbol Kolor Symbol Znacznik '-' '--' ':' '-.' solid dashed dotted dash dot r g b c m y k w Red Green Blue Cyan Magenta Yellow Black White '+' 'o' '*' '.' 'x' 'square' or 's' 'diamond' or 'd' '^' 'v' Plus sign Circle Asterisk Point Cross Square Diamond Upward-pointing triangle Downward-pointing triangle '>' Right-pointing triangle '<' Left-pointing triangle 'pentagram' or 'p' Five-pointed star (pentagram) 'hexagram' or 'h' Six-pointed star (hexagram)

6 Specyfikacja Linii Symbol Styl Linii Symbol Kolor Symbol Znacznik '-' '--' ':' '-.' solid dashed dotted dash dot r g b c m y k w Red Green Blue Cyan Magenta Yellow Black White '+' 'o' '*' '.' 'x' 'square' or 's' 'diamond' or 'd' '^' 'v' Plus sign Circle Asterisk Point Cross Square Diamond Upward-pointing triangle Downward-pointing triangle plot(pos_x(:,1), pos_x(:,2), '--ms'); '>' Right-pointing triangle '<' Left-pointing triangle plot(pos_x(:,1), pos_x(:,2), 's--m'); % kolejność nie ma znaczenia 'pentagram' or 'p' Five-pointed star (pentagram) 'hexagram' or 'h' Six-pointed star (hexagram)

7 Inne parametry w plot plot(x, y, LineSpec, ParName1, ParVal1, ParName2, ParVal2, ) Para1: Nazwa - Wartość Para2: Nazwa - Wartość plot(pos_x(:,1),pos_x(:,2),'--ms','markersize', 7, 'MarkerEdge', 'k',... 'MarkerFace', 'g', 'LineWidth',2); Przypomnienie z Wykladu 3: s = struct( NazwaPola,wartosc1, nazwapola2, wartosc2)

8 Obiekty graficzne Wszystkie elementy graficzne w MATLABIE to obiekty graficzne: Okna Osie Tekst na wykresach Linie Każdy z obiektów ma pola/cechy, których wartości można sprawdzić i zmienić: Interaktywnie w oknie wykresu get(handle, ParName ) pobranie wartości pola (o tym za chwilę) set(handle, ParName, ParVal ) ustawienie wartości (o tym za chwilę)

9 Interaktywna modyfikacja wykresów Kliknąć kursor wyboru Wybrać obiekt i modyfikować Więcej cech

10 Interaktywna modyfikacja wykresów Można zapisać wykres: - *.bmp, *.jpg, *.tiff - *.fig wykres MATLAB Można wygenerować skrypt Wybrać obiekt i modyfikować Więcej cech

11 Opis wykresów title('bladzacy Student', 'FontSize',14,'FontWeight','bold') %tytul z parametrami axis([ ]) %ustawia zakresy osi xlabel('os X [m]','fontsize', 12) %ustawiaja tytul osi i ylabel('os Y [m]', 'FontSize', 12) %parametry legend('student 1','Location','northwest') %Generuje legende

12 Wyświetlanie kilku zestawów danych (1) Kilka krzywych na jednym wykresie plot(pos_x(:,1),pos_x(:,2),'--ms', pos_x2(:,1),pos_x2(:,2),':ob'); Student 1 Student 2 plot(pos_x(:,1),pos_x(:,2),'--ms','markersize',7, 'MarkerEdge','k 'MarkerFace', 'g','linewidth', 2); hold on plot(pos_x2(:,1), pos_x2(:,2), ':ob', 'MarkerSize', 7, 'MarkerEdge', 'k', 'MarkerFace', 'r', 'LineWidth', 2); hold off Hold on/off

13 Wyświetlanie kilku zestawów danych (2) Kilka wykresów w jednym oknie: subplot(liczbawierszy, LiczbaKolumn, NumerPozycji) (2,1,1) figure %otwiera nowe okno subplot(2,1,1); plot(pos_x(:,1),pos_x(:,2),'--ms','markersize',7,... 'MarkerEdge','k','MarkerFace','g','LineWidth',2); (2,1,2) subplot(2,1,2); plot(pos_x2(:,1),pos_x2(:,2),':ob','markersize',7,... 'MarkerEdge','k', 'MarkerFace','r','LineWidth',2);

14 Wykresy 2-wymiarowe (1) Punktowe i liniowe plot - wykres liniowy 2-wym. we współrzędnych kartezjańskich plotyy - wykres liniowy 2-wym. z dwoma osiami wartości semilogx - wykres liniowy 2-wym. z osią X w skali logarytmicznej semilogy - wykres liniowy 2-wym. z osią Y w skali logarytmicznej loglog - wykres liniowy 2-wym. z osiami X i Y w skali logarytmicznej line - dodaje linię do wykresu liniowego scatter - wykres punktowy (np. wizualizacja korelacji) polar - wykres we współrzędnych polarnych Slajd W. Dyrka, Informatyka Wykład2, 2012

15 Wykresy 2-wymiarowe (2) Wizualizacja danych area - wykres powierzchniowy bar, barh - wykres słupkowy wertykalny i horyzontalny bar3, bar3h - wykresy słupkowe przestrzenne pie, pie3 - wykres kołowy płaski i przestrzenny ribbon - wykres wstążkowy (liniowy przestrzenny) hist histogram stairs - wykres schodkowy dla danych dyskretnych stem - wykres łodyga liście dla danych dyskretnych Slajd W. Dyrka, Informatyka Wykład2, 2012

16 Wykresy pseudo 3D Funkcje pcolor, countour, contourf, są dwuwymiarowe, ale za pomocą barwy reprezentowany jest trzeci wymiar. Przygotowanie siatki do obliczeń x = (-2:.2:2); y = (-1.5:.2:1.5)'; [X,Y] = meshgrid(x, y); F = X.* exp(-x.^2 - Y.^2); figure subplot(1,3,1); pcolor(x,y,f), title('pcolor') subplot(1,3,2);contour(x,y,f), title('contour') subplot(1,3,3);contourf(x,y,f), title('contourf')

17 Wykresy 3D Wersje wykresów 2-wymiarowych plot3 - wykres liniowy 3-wym. we współrzędnych kartezjańskich scatter3 - wykres punktowy w przestrzeni 3-wym. stem3 - wykres łodyga liście dla danych dyskretnych (3-wym.) contour3 - wykres izoliniowy w przestrzeni 3-wym. Wykresy siatkowe i powierzchniowe mesh, meshz - wykres siatkowy i siatkowy z kurtyną meshc - wykres siatkowo-konturowy surf - wykres powierzchniowy surfc - wykres powierzchniowo-konturowy Slajd W. Dyrka, Informatyka Wykład2, 2012

18 Wykresy siatkowe i powierzchniowe x = (-2:.2:2); y = (-1.5:.2:1.5)'; [X,Y] = meshgrid(x, y); F = X.* exp(-x.^2 - Y.^2); Obliczenia takie jak przy wykresach pseudo3d subplot(2,2,1), mesh(x,y,f), title('mesh') subplot(2,2,2), meshz(x,y,f), title('meshz') subplot(2,2,3), surf(x,y,f), title('surf') subplot(2,2,4), surfc(x,y,f), title('surfc'), shading flat % shading flat % - usuwa linie siatki

19 Animacje alpha=10:5:80; g=10; V_0=20; t=0:0.1:5; % kat w stopniach %Przyspieszenie % Predkosc poczatkowa %Ustalenie czasu UWAGA! Kod celowo napisany w sposób nieefektywny! for k=1:length(alpha) V_0y(k) = sind(alpha(k))*v_0; %skladowa y (pionowa) predkosci poczatkowej, sind - sinus z argumentem w stopniach V_0x(k)= cosd(alpha(k)).*v_0; %skladowa x (pozioma) predkosci poczatkowej for w=1:length(t) y(w,k)=v_0y(k).*t(w)-(g*t(w).^2)/2; % ruch w kierunku osi y (wznoszenie i opadanie); end end x(w,k)=v_0x(k).*t(w); % ruch w kierunku osi x for k=1:length(alpha) plot(x(:,k),y(:,k)) axis([ ]); animacja(k) = getframe; % tworzy ramke z wykresu/rysunku end movie(animacja)

20 Obiekty graficzne Wszystkie elementy graficzne w MATLABIE to obiekty graficzne: Okna Osie Tekst na wykresach Linie Każdy z obiektów ma pola/cechy, których wartości można sprawdzić i zmienić: Interaktywnie w oknie wykresu get(handle, ParName ) pobranie wartości pola set(handle, ParName, ParVal ) ustawienie wartości handle -> uchwyt w MATLAB 2014a i starszych!!!

21 Obiekty graficzne Wszystkie elementy graficzne w MATLABIE to obiekty graficzne: Okna Osie Tekst na wykresach Linie Każdy z obiektów ma pola/cechy, których wartości można sprawdzić i zmienić: Interaktywnie w oknie wykresu get(object, ParName ) pobranie wartości pola object.parname set(object, ParName, ParVal ) ustawienie wartości object.parname=parval w MATLAB 2014b i nowszych!!!

22 Uchwyty do obiektów graficznych Do obiektów graficznych odwołujemy się przez uchwyty (ang. handles) Uchwyty to zmienne typu double Uchwyty są tworzone razem z obiektem Pozostają w pamięci przez czas istnienia obiektu W wersjach <= MATLAB 2014a N=50; krokixy = randn(n,2); posxy=[0 0 ; cumsum(krokixy)]; okno=figure; trj=plot(posxy(:,1),posxy(:,2),'-ms'); osie=gca; akt_okno=gcf; %otwarcie nowego okna; uchwyt okno % utworzenie wykresu; uchwyt trj % pobranie uchwytu osi (gca -> get current axes) % pobranie uchwytu aktualnego okna (gcf -> get current figure)

23 Uchwyty do obiektów graficznych Do obiektów graficznych odwołujemy się przez uchwyty (ang. handles) Uchwyty to zmienne typu double obiekt graficzny Uchwyty są tworzone razem z obiektem Pozostają w pamięci przez czas istnienia obiektu W wersjach >= MATLAB 2014b Uchwyty do obiektów SĄ TYMI OBIEKTAMI!!! N=50; krokixy = randn(n,2); posxy=[0 0 ; cumsum(krokixy)]; okno=figure; trj=plot(posxy(:,1),posxy(:,2),'-ms'); osie=gca; akt_okno=gcf; %otwarcie nowego okna; uchwyt okno % utworzenie wykresu; uchwyt trj % pobranie uchwytu osi (gca -> get current axes) % pobranie uchwytu aktualnego okna (gcf -> get current figure)

24 Modyfikowanie atrybutów obiektów (1) Funkcja get pobiera wartości atrybutów Funkcja set ustawia wartości atrybutów >> get(osie) %wyświetli wartości wszystkich atrybutów ActivePositionProperty = outerposition ALim = [0 1] ALimMode = auto AmbientLightColor = [1 1 1] FontAngle = normal FontName = Helvetica FontSize = [10] FontUnits = points Position = [ ] TickLength = [ ] TickDir = in >> set(osie) %wyświetlenie wszystkich atrybutów i możliwych wartości ActivePositionProperty: [ position {outerposition} ] ALim ALimMode: [ {auto} manual ] AmbientLightColor FontAngle: [ {normal} italic oblique ] FontName FontSize FontUnits: [ inches centimeters normalized {points} pixels ] FontWeight: [ light {normal} demi bold ] Position TickLength TickDir: [ {in} out ]

25 Modyfikowanie atrybutów obiektów (2) set i get przyjmują jako obowiązkowy argument wejściowy uchwyt do obiektu oraz dodatkowo: get przyjmuje nazwy atrybutów set przyjmuje nazwy i wartości do ustawienia shg %show graph wyświetla aktualnie aktywne okno get(okno) %wyswietla akutlanie ustawione wartosci pol set(okno,'name','przyklad 1 - Bladzacy Student',... 'NumberTitle', 'off') %ustawia wartosci wybranych pól set(trj,'linewidth',2,'markerface','blue') %ustawia parametry linii %WERSJA >= MATLAB 2014b okno%wyswietla akutlanie ustawione wartosci pol okno.name='przyklad 1 - Bladzacy Student' okno.numbertitle= 'off %itd

26 Hierarchia obiektów graficznych parents children

27 Hierarchia obiektów graficznych przykład1

28 Hierarchia obiektów graficznych przykład2 Przykład dla wersji <= MATLAB 2014a %Do wczesniejszych polecen dodajemy htext=text(0,0,'start') hlegend=legend('student 1') >> get(okno,'children') %zwraca uchwyty do potomków okna ans = %obiekt legenda jest potomkiem okna %obiekt osie jest potomkiem okna >> get(osie,'children') ans = %obiekt tekstowy Start jest potomkiem osi %linia trajektorii jest potomkiem osi >> get(trj,'parent') %zwraca uchwyt do rodzica ans = %rodzicem linii jest obiekt osie

29 Hierarchia obiektów graficznych przykład2 Przykład dla wersji <= MATLAB 2014a %Do wczesniejszych polecen dodajemy htext=text(0,0,'start') hlegend=legend('student 1') >> get(okno,'children') %zwraca uchwyty do potomków okna ans = %obiekt legenda jest potomkiem okna %obiekt osie jest potomkiem okna >> get(osie,'children') ans = %obiekt tekstowy Start jest potomkiem osi %linia trajektorii jest potomkiem osi >> get(trj,'parent') %zwraca uchwyt do rodzica ans = %rodzicem linii jest obiekt osie

30 Graficzny interfejs użytkownika - Graphical User Interface (GUI) Dane wyjściowe przyjazne dla użytkownika Dane wyjściowe aplikacji Interfejs graficzny (GUI) Rdzeń aplikacji: Obliczenia Symulacje Gromadzenie Danych Użytkownik Dane wejściowe przyjazne dla użytkownika Dane wejściowe odpowiednie dla aplikacji Aplikacja

31 Graficzny interfejs użytkownika - Graphical User Interface (GUI) Dane wyjściowe przyjazne dla użytkownika Dane wyjściowe aplikacji Interfejs graficzny (GUI) Rdzeń aplikacji: Obliczenia Symulacje Gromadzenie Danych Użytkownik Dane wejściowe przyjazne dla użytkownika Dane wejściowe odpowiednie dla aplikacji Aplikacja

32 GUI - przykład Elementy interfejsu: Okna Listy Przyciski Menu Obrazy

33 Zadania GUI Uproszczenie korzystania z aplikacji Poprawa wydajności korzystania z aplikacji Profilowanie aplikacji w zależności od potrzeb użytkownika

34 GUI w MATLABie Budowa interfejsu graficzny W MATLABie: programistycznie za pomocą komend za pomocą graficznego środowiska GUIDE

35 Programistyczna budowa GUI W M-pliku wpisywane są kolejne instrukcje, które: utworzą elementy interfejsu zdefiniują działanie tych elementów Podstawowe elementy GUI to obiekty: UIControl UITable UIMenu Elementy GUI są obiektami graficznymi takimi jak elementy wykresów - Posiadają uchwyty, atrybuty (nazwa + wartość)!

36 Programistyczna budowa GUI - przykład Menu Ilustracja Okna tekstowe Suwaki Przyciski

37 Programistyczna budowa GUI przykład tworzenie elementów %Fragmenty skryptu tworzącego interfejs, pełny skrypt do pobrania na stronie kursu f=figure; %utworzenie okna set(f,'position',[ ],'color',[ ], 'MenuBar', 'none', 'name','zadanie 4 - prawo Ohma','NumberTitle','off',) %parametry okna %SliderU - podaje napiecie slideru = uicontrol('style','slider','min',0,'max',10,'value',0, 'Position',[ ],'SliderStep',[ ]); %textu - wyswietla wartosci suwaka; text2u - podpis textu = uicontrol('style','text','position',[85,270,50,20],'backgroundcolor','white', 'String','0','FontWeight','Bold','FontSize',10); text2u = uicontrol('style','text','position',[70,295,80,20],'backgroundcolor','white', 'String','Napiecie','FontWeight','Bold','FontSize',10); %CIACH ( ) czesc programu nie pokazana %utworzenie Menu na pasku menuopt=uimenu(f,'label', 'Options') menuz=uimenu(menuopt,'label','zeruj','callback',pushb_z_callback) menuext=uimenu(menuopt,'label','exit','callback','close')

38 Programistyczna budowa GUI - CALLBACK programowanie zachowania elementów Atrybut Callback definiuje co się stanie przy interakcji użytkownika z obiektem W polu Callback umieszcza się łańcuch znaków, który jest uruchamiany jako komenda po interakcji %Callback slideru slideru_callback=['u = get(slideru,''value'');','set(textu,''string'',num2str(u))']; set(slideru,'callback',slideru_callback); %Callback sliderr set(sliderr,'callback','r=sliderr_callback(sliderr,textr)'); %w przypadku powyżej funkcja sliderr_callback jest zdefiniowana w innym pliku

39 Dostępne elementy GUI UIcontrol: Pushbutton Toglebutton Checkbox Radiobutton Listbox Popupmenu Slider Edit Text UImenu UItoolbar UIpushtool UItogletool UIcontextmenu UItable

40 GUIDE GUI Development Environment GUIDE to środowisko do graficznej budowy interfejsów Umożliwia projektowanie interfejsu za pomocą myszki generuje plik *.fig Automatycznie tworzy szablon funkcji do obsługi interfejsu plik *.m Uruchamianie GUIDE >>guide Na interfejs graficzny projektowany w GUIDE składają się dwa pliki: - Plik graficzny: nazwa.fig - Plik z oprogramowaniem nazwa.m

41 Graficzne projektowanie interfejsu (1) Tworzenie Menu Tworzenie przycisków na pasku UIcontrol UItable Axes

42 Graficzne projektowanie interfejsu (2) Tworzenie Menu Tworzenie przycisków na pasku

43 Graficzne projektowanie interfejsu najważniejsze atrybuty Podgląd atrybutów

44 Graficzne projektowanie interfejsu najważniejsze atrybuty Tag etykieta Jest nadawana automatycznie Dobrze jest ją modyfikować, tak aby miała znaczenie (domyslna nazwa) pushbutton1 (lepsza wlasna nazwa) poblicz Tag jest wykorzystywany w automatycznie generowanym pliku z kodem do obsługi interfejsu Style mówi o typie obiektu Niektóre pola są specyficzne dla danego typu obiektów np. SliderStep, ListboxTop Jaki rodzaj UIcontrol Jaka etykieta

45 Szablon obsługi interfejsu - *.m Szablon M-pliku do obsługi interfejsu generowany jest przy pierwszym zapisie projektu. Plik zawiera funkcje związane z: 1. uruchomieniem programu głównego GUI 2. inicjalizacją GUI 3. wartościami zwracanymi przez GUI 4. obsługą poszczególnych elementów GUI Własne tagi należy ustawić przed pierwszym zapisem lub zaraz po utworzeniu elementu GUI

46 Szablon obsługi interfejsu funkcja główna Uruchomieniem programu głównego GUI function varargout = GUIDE_Przyklad2(varargin) % GUIDE_PRZYKLAD2 MATLAB code for GUIDE_Przyklad2.fig % GUIDE_PRZYKLAD2, by itself, creates a new GUIDE_PRZYKLAD2 or raises the existing % CIACH ( ) % % Edit the above text to modify the response to help GUIDE_Przyklad2 % %Begin initialization code - DO NOT EDIT gui_singleton = 1; gui_state = struct('gui_name', mfilename,... %CIACH( ) Nazwa funkcji głównej jest taka jak nazwa budowanego interfejsu

47 Szablon obsługi interfejsu inicjalizacja i zwracane wartości % --- Executes just before GUIDE_Przyklad2 is made visible. function GUIDE_Przyklad2_OpeningFcn(hObject, eventdata, handles, varargin) % This function has no output args, see OutputFcn. % hobject handle to figure % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % varargin command line arguments to GUIDE_Przyklad2 (see VARARGIN) % --- Outputs from this function are returned to the command line. function varargout = GUIDE_Przyklad2_OutputFcn(hObject, eventdata, handles) % varargout cell array for returning output args (see VARARGOUT); % hobject handle to figure % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA)

48 Szablon obsługi interfejsu obsługa elementów GUI (1) % --- Executes on button press in pushbutton1. function pushbutton1_callback(hobject, eventdata, handles) % hobject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % --- Executes on selection change in listbox1. function listbox1_callback(hobject, eventdata, handles) % hobject handle to listbox1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) % Hints: contents = cellstr(get(hobject,'string')) returns listbox1 contents as cell array % contents{get(hobject,'value')} returns selected item from listbox1 Tag Rodzaj funkcji

49 Szablon obsługi interfejsu obsługa elementów GUI (2) Rodzaj funkcji

50 Szablon obsługi interfejsu obsługa elementów GUI (3) % --- Executes during object creation, after setting all properties. function listbox1_createfcn(hobject, eventdata, handles) % hobject handle to listbox1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles empty - handles not created until after all CreateFcns called % Hint: listbox controls usually have a white background on Windows. % See ISPC and COMPUTER. if ispc && isequal(get(hobject,'backgroundcolor'), get(0,'defaultuicontrolbackgroundcolor')) set(hobject,'backgroundcolor','white'); end

51 Funkcje Callback elementów GUI % --- Executes on button press in pushbutton1. function pushbutton1_callback(hobject, eventdata, handles) Wszystkie funkcje Callback (w tym CreateFcn, DeleteFcn, itd. ), przyjmują trzy argumenty: hobject uchwyt do elementu eventdata struktura zawierająca dane związane z aktywacją przycisku handles struktura z uchwytami do elementów GUI i danymi użytkownika

52 Struktura handles odwoływanie się do elementów GUI Struktura handles jest przekazywana do każdej funkcji callback generowanej automatycznie przez GUIDE Pozwala w callback u elementu odnosić się do innych elementów interfejsu: function pushbutton1_callback(hobject, eventdata, handles) % hobject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) set(handles.listbox1, 'BackgroundColor','red') %Ustawia czerwone tło w %obiekcie listbox1 param=get(handles.edit1,'string') %Pobiera do zmiennej param zawartość %okienka edit1

53 Struktura handles przekazywanie zmiennych Struktura handles służy również do przechowywania i przekazywania wartości zmiennych: 1. Trzeba zapisać zmienną w nowym polu w handles 2. Trzeba zapisać zmiany w handles za pomocą funkcji guidata!ważne function pushbutton1_callback(hobject, eventdata, handles) % hobject handle to pushbutton1 (see GCBO) % eventdata reserved - to be defined in a future version of MATLAB % handles structure with handles and user data (see GUIDATA) set(handles.listbox1, 'BackgroundColor','red') r=get(handles.edit1,'string'); polekola=obliczpolekola(r); % zmienna zniknie po zakonczeniu Callback'a handles.polekola=polekola; %utworzenie nowego pola w strukturze handles guidata(hobject, handles); %modyfikacja na stale struktury handles

54 Struktura eventdata dane związane z wydarzeniem Eventdata jest używana tylko w wybranych funkcjach callback np.: Dla UIControl KeyPressFnc przyciśnięcie przycisku klawiatury Dla UITable: CellEditCallback Edycja tabeli CellSelectionCallback zaznaczenie elementów tabeli Zawartość struktury jest szczegółowo opisana w komentarzu przy nagłówku wygenerowanej funkcji

55 Struktura eventdata przykład (1) function pushbutton1_keypressfcn(hobject, eventdata, handles) % hobject handle to pushbutton1 (see GCBO) % eventdata structure with the following fields (see UICONTROL) % Key: name of the key that was pressed, in lower case % Character: character interpretation of the key(s) that was pressed % Modifier: name(s) of the modifier key(s) (i.e., control, shift) pressed % handles structure with handles and user data (see GUIDATA) eventdata eventdata = Aby funkcja KeyPressFcn rejestrowała przyciśnięte klawisze klawiatury, odpowiedni obiekt interfejsu musi być zaznaczony ( keep focus ) Character: 'Z' Modifier: {'shift' 'alt'} Key: 'z'

56 Struktura eventdata przykład (2) % --- Executes when entered data in editable cell(s) in uitable1. function uitable1_celleditcallback(hobject, eventdata, handles) % hobject handle to uitable1 (see GCBO) % eventdata structure with the following fields (see UITABLE) % Indices: row and column indices of the cell(s) edited % PreviousData: previous data for the cell(s) edited % EditData: string(s) entered by the user % NewData: EditData or its converted form set on the Data property. Empty if Data was not changed % Error: error string when failed to convert EditData to appropriate value for Data % handles structure with handles and user data (see GUIDATA)

57 GUI - podsumowanie Interfejs graficzny jest warstwą oprogramowania pomiędzy użytkownikiem, a rdzeniem programu przekazuje dane od użytkownika do funkcji liczących przekazuje dane z funkcji liczących do użytkownika interfejs nie wykonuje obliczeń! W matlabie GUI można tworzyć programistycznie lub za pomocą GUIDE Każda funkcja callback otrzymuje uchwyt do aktywnego obiektu oraz struktury: Handles odwołania do innych elementów i przechowywania danych (guidata) Eventdata dane związane z wydarzeniem np. kolumny i wiersze zaznaczone w tabeli

58 Projektowanie interfejsów graficznych

59 Efektywny interfejs graficzny Efektywny GUI ułatwia zrozumienie złożonych informacji. Elementy istotne dla zrozumiałego przekazu: Rozkład elementów: Rozmiary, proporcje i siatki Rozmieszczenie 2D i 3D Typografia Wybór czcionek i rozmiarów Kolory i tekstura Symbolika Znaki, ikony i symbole od rzeczywistych do abstrakcyjnych Sekwencjonowanie Opowiadanie graficznej historii Wizualna tożsamość Zasady, które pozwalają zachować ogólną spójność interfejsu

60 Zasady projektowania efektywnego GUI Aranżacja dostarczenie użytkownikowi przejrzystej i spójnej struktury elementów (spójność, rozmieszczenie i grupowanie elementów, prowadzenie wzroku użytkownika) Funkcjonalność dostarczenie jak największej ilości informacji przy minimalnej liczbie wysyłanych sygnałów Komunikatywność dopasowanie sposobu prezentacji danych do użytkownika

61 Aranżacja - spójność Spójność wewnętrzna Do wszystkich elementów GUI stosowane są jednakowe konwencje i zasady Spójność zewnętrzna Jeżeli istnieją ogólnie przyjęte konwencje to nie należy ich łamać Spójność ze światem rzeczywistym Tworzone konwencje powinny być spójne z doświadczeniami użytkownika Innowacyjność Konwencje można łamać, ale tylko gdy przynosi to ewidentne korzyści

62 Aranżacja - rozmieszczenie elementów Podział ekranu użytkownika za pomocą siatki Sugeruje się 7±2 główne linie siatki (pionowe lub poziome) Elementy powiązane należy grupować przez: Kształt, Rozmiar, Kolorystykę i Lokalizację (ale nie koniecznie wszystko naraz) Chaotyczne grupowanie i rozmieszczenie elementów Prawidłowe grupowanie

63 Aranżacja prowadzenie wzroku Skupić uwagę na głównych elementach Skierować uwagę na elementy drugo- lub trzecio-rzędne Prowadzić wzrok przez całą zawartość strony/ekranu Brak kierowania uwagi Prawidłowe skupianie i prowadzenie uwagi

64 Funkcjonalność oszczędność Interfejs zawiera wyłącznie elementy niezbędne do przekazania informacji. Elementy ułożone w sposób czytelny.

65 Funkcjonalność - przejrzystość Elementy powinny być jednoznaczne

66 Funkcjonalność różnicowanie i wyróżnianie Cechy, które różnicują elementy powinny być łatwe do wychwycenia Najważniejsze elementy powinny być łatwe do zauważenia Elementy mniej istotne nie powinny się wyróżniać

67 Komunikatywność - czytelność Stosować czcionki drukowane Stosować wyrównania: Tekst do lewej strony Liczby do prawej Stosowanie różnych czcionek musi mieć uzasadnienie Stosować maksymalnie 3 rodzaje czcionek Stosować maksymalnie 3 rozmiary czcionek Unreadable: Design components to be easy to interpret and understand. Design components to be inviting and attractive. Readable Design components to be easy to interpret and understand. Design components to be inviting and attractive.

68 Komunikatywność reprezentacja danych Złożone dane wyświetlać na kilka sposobów Dane tabelaryczne wspierać wykresami Dopasowywać typ wykresu do rodzaju danych p1 19% p2 21% p3 15% p4 9% p5 19% p6 17%

69 Komunikatywność - KOLORYSTYKA Aranżacja Wzmocnienie spójności Grupowanie elementów Przyciąganie uwagi Funkcjonalność Maksymalnie 5±2 kolory Interfejs powinien działać prawidłowo jako czarno-biały Kolory stosuje się jako dodatkowe wzmocnienie przekazu Wyróżnianie należy ograniczać ilość kolorów przyciągających uwagę Moc kolorów może różnicować istotność Komunikatywność Używać kolorów różniących się barwą i nasyceniem W ciemnych pomieszczeniach: ciemne tło, jasne czcionki i linie W jasnych pomieszczeniach: jasne tło, ciemne czcionki i linie