informatyka...slajd w. dyrka, informatyka –wykład2, 2012 •wizualizacja danych •area - wykres...
Post on 23-Aug-2020
1 Views
Preview:
TRANSCRIPT
InformatykaWykład 4
2017/2018z
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)
Wizualizacja danych w MATLABIE
Więcej na przykładowych wizualizacji na http://www.mathworks.com/discovery/gallery.html
Wykresy liniowe 2D - plot
• plot(x, y, LineSpec)
• LineSpec – Line Specification string• Styl linii
• Kolor
• Kształt znacznika
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');
Specyfikacja LiniiSymbol Styl Linii'-' solid
'--' dashed
':' dotted
'-.' dash dot
Symbol Kolorr Red
g Green
b Blue
c Cyan
m Magenta
y Yellow
k Black
w White
Symbol Znacznik'+' Plus sign
'o' Circle
'*' Asterisk
'.' Point
'x' Cross
'square' or 's' Square
'diamond' or 'd' Diamond
'^' Upward-pointing triangle
'v' Downward-pointing triangle
'>' Right-pointing triangle
'<' Left-pointing triangle
'pentagram' or 'p' Five-pointed star (pentagram)
'hexagram' or 'h' Six-pointed star (hexagram)
Specyfikacja Linii
plot(pos_x(:,1), pos_x(:,2), '--ms');
plot(pos_x(:,1), pos_x(:,2), 's--m'); % kolejność nie ma znaczenia
Symbol Styl Linii'-' solid
'--' dashed
':' dotted
'-.' dash dot
Symbol Kolorr Red
g Green
b Blue
c Cyan
m Magenta
y Yellow
k Black
w White
Symbol Znacznik'+' Plus sign
'o' Circle
'*' Asterisk
'.' Point
'x' Cross
'square' or 's' Square
'diamond' or 'd' Diamond
'^' Upward-pointing triangle
'v' Downward-pointing triangle
'>' Right-pointing triangle
'<' Left-pointing triangle
'pentagram' or 'p' Five-pointed star (pentagram)
'hexagram' or 'h' Six-pointed star (hexagram)
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)
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ę)
Interaktywna modyfikacja wykresów
Kliknąć „kursor wyboru”
Wybrać obiekti modyfikować
Więcej cech
Interaktywna modyfikacja wykresów
Wybrać obiekti modyfikować
Więcej cech
• Można zapisać wykres:- *.bmp, *.jpg, *.tiff …- *.fig – wykres MATLAB• Można wygenerować
skrypt
Opis wykresów
title('Bladzacy Student',…'FontSize',14,'FontWeight','bold') %tytul z parametramiaxis([0 14 -2 16]) %ustawia zakresy osixlabel('Os X [m]','FontSize', 12) %ustawiaja tytul osi iylabel('Os Y [m]', 'FontSize', 12) %parametry legend('Student 1','Location','northwest') %Generuje legende
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
• Kilka wykresów w jednym oknie:
Wyświetlanie kilku zestawów danych (2)
figure %otwiera nowe okno
subplot(2,1,1); plot(pos_x(:,1),pos_x(:,2),'--ms','MarkerSize',7,...'MarkerEdge','k','MarkerFace','g','LineWidth',2);
subplot(2,1,2); plot(pos_x2(:,1),pos_x2(:,2),':ob','MarkerSize',7,...'MarkerEdge','k', 'MarkerFace','r','LineWidth',2);
subplot(liczbaWierszy, LiczbaKolumn, NumerPozycji)
(2,1,1)
(2,1,2)
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
• 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
Wykresy 2-wymiarowe (2)
Slajd W. Dyrka, Informatyka – Wykład2, 2012
Wykresy pseudo 3D
• Funkcje pcolor, countour, contourf, są dwuwymiarowe, ale za pomocą barwy reprezentowany jest trzeci wymiar.
x = (-2:.2:2);y = (-1.5:.2:1.5)';[X,Y] = meshgrid(x, y);F = X .* exp(-X.^2 - Y.^2);
figuresubplot(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')
Przygotowanie siatki do obliczeń
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
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);
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
Obliczenia takie jak przy wykresach pseudo3D
Animacjealpha=10:5:80; % kat w stopniachg=10; %Przyspieszenie V_0=20; % Predkosc poczatkowat=0:0.1:5; %Ustalenie czasu
for k=1:length(alpha)V_0y(k) = sind(alpha(k))*V_0; %skladowa y (pionowa) predkosci poczatkowej, sind - sinus z argumentem w stopniachV_0x(k)= cosd(alpha(k)).*V_0; %skladowa x (pozioma) predkosci poczatkowejfor 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);x(w,k)=V_0x(k).*t(w); % ruch w kierunku osi x
endend
for k=1:length(alpha)plot(x(:,k),y(:,k))axis([0 40 0 20]);animacja(k) = getframe; % tworzy ramke z wykresu/rysunku
endmovie(animacja)
UWAGA! Kod celowo napisany w sposób nieefektywny!
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 2014ai starszych !!!
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 2014bi nowszych !!!
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
N=50;krokiXY = randn(N,2);posXY=[0 0 ; cumsum(krokiXY)];okno=figure; %otwarcie nowego okna; uchwyt „okno”trj=plot(posXY(:,1),posXY(:,2),'-ms'); % utworzenie wykresu; uchwyt „trj”osie=gca; % pobranie uchwytu osi (gca -> get current axes)akt_okno=gcf; % pobranie uchwytu aktualnego okna (gcf -> get current figure)
W wersjach <= MATLAB 2014a
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
N=50;krokiXY = randn(N,2);posXY=[0 0 ; cumsum(krokiXY)];okno=figure; %otwarcie nowego okna; uchwyt „okno”trj=plot(posXY(:,1),posXY(:,2),'-ms'); % utworzenie wykresu; uchwyt „trj”osie=gca; % pobranie uchwytu osi (gca -> get current axes)akt_okno=gcf; % pobranie uchwytu aktualnego okna (gcf -> get current figure)
W wersjach >= MATLAB 2014bUchwyty do obiektów SĄ TYMI OBIEKTAMI !!!
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ówActivePositionProperty = outerpositionALim = [0 1]ALimMode = autoAmbientLightColor = [1 1 1]…FontAngle = normalFontName = HelveticaFontSize = [10]FontUnits = points…Position = [0.13 0.11 0.775 0.815]TickLength = [0.01 0.025]TickDir = in
>> set(osie) %wyświetlenie wszystkich atrybutów i możliwych wartościActivePositionProperty: [ position | {outerposition} ]ALimALimMode: [ {auto} | manual ]AmbientLightColor…FontAngle: [ {normal} | italic | oblique ]FontNameFontSizeFontUnits: [ inches | centimeters | normalized | {points} | pixels ]FontWeight: [ light | {normal} | demi | bold ]PositionTickLengthTickDir: [ {in} | out ]
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 oknoget(okno) %wyswietla akutlanie ustawione wartosci polset(okno,'Name','Przyklad 1 - Bladzacy Student',...
'NumberTitle', 'off') %ustawia wartosci wybranych pólset(trj,'LineWidth',2,'MarkerFace','blue') %ustawia parametry linii
%WERSJA >= MATLAB 2014bokno%wyswietla akutlanie ustawione wartosci polokno.Name='Przyklad 1 - Bladzacy Student'okno.NumberTitle= 'off’%itd…
Hierarchia obiektów graficznych
https://www.mathworks.com/help/matlab/creating_plots/graphics-objects.html
children
parents
Hierarchia obiektów graficznych – przykład1
Hierarchia obiektów graficznych – przykład2
%Do wczesniejszych polecen dodajemy htext=text(0,0,'Start')hlegend=legend('Student 1')
>> get(okno,'Children') %zwraca uchwyty do potomków oknaans =
355.0011 %obiekt legenda jest potomkiem okna348.0011 %obiekt „osie” jest potomkiem okna
>> get(osie,'Children')ans =
350.0011 %obiekt tekstowy „Start” jest potomkiem osi349.0016 %linia trajektorii jest potomkiem osi
>> get(trj,'Parent') %zwraca uchwyt do rodzicaans =
348.0011 %rodzicem linii jest obiekt „osie”
Przykład dla wersji <= MATLAB 2014a
Hierarchia obiektów graficznych – przykład2
%Do wczesniejszych polecen dodajemy htext=text(0,0,'Start')hlegend=legend('Student 1')
>> get(okno,'Children') %zwraca uchwyty do potomków oknaans =
355.0011 %obiekt legenda jest potomkiem okna348.0011 %obiekt „osie” jest potomkiem okna
>> get(osie,'Children')ans =
350.0011 %obiekt tekstowy „Start” jest potomkiem osi349.0016 %linia trajektorii jest potomkiem osi
>> get(trj,'Parent') %zwraca uchwyt do rodzicaans =
348.0011 %rodzicem linii jest obiekt „osie”
Przykład dla wersji <= MATLAB 2014a
Graficzny interfejs użytkownika - Graphical User Interface (GUI)
Interfejs graficzny
(GUI)
Rdzeń aplikacji:ObliczeniaSymulacje
Gromadzenie Danych
…
UżytkownikDane wejściowe„przyjazne” dla użytkownika
Dane wejścioweodpowiednie dla aplikacji
Dane wyjścioweaplikacji
Dane wyjściowe„przyjazne” dla użytkownika
Aplikacja
Graficzny interfejs użytkownika - Graphical User Interface (GUI)
Interfejs graficzny
(GUI)
Rdzeń aplikacji:ObliczeniaSymulacje
Gromadzenie Danych
…
UżytkownikDane wejściowe„przyjazne” dla użytkownika
Dane wejścioweodpowiednie dla aplikacji
Dane wyjścioweaplikacji
Dane wyjściowe„przyjazne” dla użytkownika
Aplikacja
GUI - przykład
Elementy interfejsu:OknaListyPrzyciskiMenuObrazy…
Zadania GUI
• Uproszczenie korzystania z aplikacji
• Poprawa wydajności korzystania z aplikacji
• Profilowanie aplikacji w zależności od potrzeb użytkownika
GUI w MATLABie
• Budowa interfejsu graficzny W MATLABie:• programistycznie za pomocą komend
• za pomocą graficznego środowiska GUIDE
http://www.mathworks.com/help/matlab/creating_guis/about-the-simple-guide-gui-example.html
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ść)!
Programistyczna budowa GUI - przykład
Suwaki
Przyciski
Okna tekstowe
Ilustracja
Menu
Programistyczna budowa GUI – przykład –tworzenie elementów
%Fragmenty skryptu tworzącego interfejs, pełny skrypt do pobrania na stronie kursuf=figure; %utworzenie oknaset(f,'position',[100 100 800 600],'color',[1 1 0.5], 'MenuBar', 'none' ,…'name','Zadanie 4 - prawo Ohma','NumberTitle','off',) %parametry okna
%SliderU - podaje napieciesliderU = uicontrol('Style','Slider','Min',0,'Max',10,'Value',0,…'Position',[100 65 20 200],'SliderStep',[0.01 0.2]);
%textU - wyswietla wartosci suwaka; text2U - podpistextU = 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);
%utworzenie Menu na paskumenuOpt=uimenu(f,'Label', 'Options')menuZ=uimenu(menuOpt,'Label','Zeruj','Callback',pushb_z_Callback)menuExt=uimenu(menuOpt,'Label','Exit','Callback','close')
%CIACH (…) – czesc programu nie pokazana
Programistyczna budowa GUI - CALLBACKprogramowanie zachowania elementów
• Atrybut „Callback” definiuje co się stanie przyinterakcji użytkownika z obiektem
• W polu Callback umieszcza się łańcuch znaków, który jest uruchamiany jako komenda po interakcji
%Callback sliderUsliderU_Callback=['U = get(sliderU,''Value'');','set(textU,''String'',num2str(U))'];set(sliderU,'Callback',sliderU_Callback);
%Callback sliderRset(sliderR,'Callback','R=sliderR_Callback(sliderR,textR)');%w przypadku powyżej funkcja sliderR_Callback jest zdefiniowana w innym pliku
Dostępne elementy GUI
• UIcontrol:• Pushbutton
• Toglebutton
• Checkbox
• Radiobutton
• Listbox
• Popupmenu
• Slider
• Edit
• Text
• UImenu
• UItoolbar
• UIpushtool
• UItogletool
• UIcontextmenu
• UItable
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
>>guideNa interfejs graficzny projektowany w GUIDE składają się dwa pliki:- Plik graficzny: nazwa.fig- Plik z oprogramowaniem nazwa.m
Graficzne projektowanie interfejsu (1)
UIcontrolUItableAxes
Tworzenie „Menu”
Tworzenie przycisków na pasku
Graficzne projektowanie interfejsu (2)
Tworzenie „Menu” Tworzenie przycisków na pasku
Graficzne projektowanie interfejsu –najważniejsze atrybutyPodgląd atrybutów
Graficzne projektowanie interfejsu –najważniejsze atrybuty
Jaki rodzaj UIcontrol
Jaka etykieta
• Tag – etykieta• Jest nadawana automatycznie• Dobrze jest ją modyfikować, tak aby
miała znaczenie
• 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
(domyslna nazwa) pushbutton1 (lepsza wlasna nazwa) pOblicz
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
Szablon obsługi interfejsu – funkcja główna
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 EDITgui_Singleton = 1;gui_State = struct('gui_Name', mfilename, ...%CIACH(…)
• Uruchomieniem programu głównego GUI
Nazwa funkcji głównej jest taka jak nazwa budowanego interfejsu
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)
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
Szablon obsługi interfejsu – obsługa elementów GUI (2)
Rodzaj funkcji
% --- 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
Szablon obsługi interfejsu – obsługa elementów GUI (3)
Funkcje „Callback” elementów GUI
• 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
% --- Executes on button press in pushbutton1.
function pushbutton1_Callback(hObject, eventdata, handles)
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
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
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
!WAŻNE
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
Struktura eventdata – przykład (1)
eventdata =
Character: 'Z'Modifier: {'shift' 'alt'}
Key: 'z'
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
Aby funkcja KeyPressFcn rejestrowała przyciśnięte klawisze klawiatury, odpowiedni obiekt interfejsu musi być zaznaczony – („keep focus”)
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)
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
Projektowanie interfejsów graficznych
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
Zasady projektowania efektywnego GUI
• Aranżacjadostarczenie 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
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
http://web.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html
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 htt
p:/
/web
.cs.
wp
i.ed
u/~
mat
t/co
urs
es/c
s56
3/t
alks
/sm
arti
n/i
nt_
des
ign
.htm
l
Prawidłowe grupowanie
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
htt
p:/
/web
.cs.
wp
i.ed
u/~
mat
t/co
urs
es/c
s56
3/t
alks
/sm
arti
n/i
nt_
des
ign
.htm
l
Funkcjonalność – oszczędność
• Interfejs zawiera wyłącznie elementy niezbędne do przekazania informacji.
• Elementy ułożone w sposób czytelny.
htt
p:/
/web
.cs.
wp
i.ed
u/~
mat
t/co
urs
es/c
s56
3/t
alks
/sm
arti
n/i
nt_
des
ign
.htm
l
Funkcjonalność - przejrzystość
• Elementy powinny być jednoznaczne
htt
p:/
/web
.cs.
wp
i.ed
u/~
mat
t/co
urs
es/c
s56
3/t
alks
/sm
arti
n/i
nt_
des
ign
.htm
l
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ć
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. htt
p:/
/web
.cs.
wp
i.ed
u/~
mat
t/co
urs
es/c
s56
3/t
alks
/sm
arti
n/i
nt_
des
ign
.htm
l
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%
Komunikatywność - KOLORYSTYKA
• Aranżacja• Wzmocnienie spójności• Grupowanie elementów• Przyciąganie uwagi
• Funkcjonalność• Maksymalnie 5±2 kolory• 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
Interfejs powinien działać prawidłowo jako czarno-biały
Kolory stosuje się jako dodatkowe wzmocnienie przekazu
top related