Informatyka...Slajd W. Dyrka, Informatyka –Wykład2, 2012 •Wizualizacja danych •area - wykres...

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)


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


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


• 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


• 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

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



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)



% --- Executes on selection change in listbox1.

function listbox1_Callback(hObject, eventdata, handles)

% hObject handle to listbox1 (see GCBO)



% Hints: contents = cellstr(get(hObject,'String')) returns listbox1

contents as cell array

% contents{get(hObject,'Value')} returns selected item from listbox1

Tag Rodzaj funkcji


Rodzaj funkcji

% --- Executes during object creation, after setting all properties.

function listbox1_CreateFcn(hObject, eventdata, handles)

% hObject handle to listbox1 (see GCBO)


% 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


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.


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:





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





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)


% 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


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


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

Informatyka...Slajd W. Dyrka, Informatyka –Wykład2, 2012 •Wizualizacja danych •area - wykres...

Documents

Transcript of Informatyka...Slajd W. Dyrka, Informatyka –Wykład2, 2012 •Wizualizacja danych •area - wykres...