MSP,

grafické uživatelské rozhraní

(GUI)

doc. Ing. Petr Bilík, Ph.D.

VŠB-TU Ostrava, katedra 450

VŠB-TU Ostrava, kat.450 doc. Ing. Petr Bilík

 Obsah

• K čemu slouží a co to je GUI

• Editor GUI

VŠB-TU Ostrava, kat.450 doc. Ing. Petr Bilík

 Co je a k čemu slouží GUI

• Kvalitní grafické uživatelské rozhraní je obvykle

klíčovým prvkem řady aplikací, kde je kladen důraz
na maximální jednoduchost a srozumitelnost
• Vizualizace probíhajících procesů umožňuje
uživateli lépe vnímat změny stavů a jejich vzájemné
vztahy
• Maximální přiblížení vzhledu uživatelského rozhraní
skutečnosti zpřístupňuje software i začínajícím
uživatelům

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Příklad GUI

LED Numeric Indicator Panel Strip Chart

Dekorace

Command
Button

Knob
knoflík

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Editor GUI v prostředí CVI

• Editor Uživatelského rozhraní je součástí

LabWindows/CVI
• Slouží k interaktivní tvorbě uživatelských
rozhraní aplikací
• Základní prvkem je panel (okno), na který se
umisťují další prvky
• Je možno vytvářet desítky typů prvků jako jsou:
tlačítka, otočné a posuvné knoflíky, přepínače,
grafy, roletová menu...
• Uživatelské rozhraní se ukládá do “.uir“ a
“.h“ souborů.

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Editor GUI v prostředí CVI

•Editor Grafického uživatelského rozhraní slouží k vytváření

GUI
•Po uložení GUI do souboru *.uir se automaticky vytvoří *.h

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Vytváření GUI

Panel

Numeric
Input
Command
Buttons

Graph

• Na obrázku je příklad jednoduchého GUI. Toto

uživatelské rozhraní obsahuje panel, numeric
control, 3x command button a graph.
VŠB-TU Ostrava, kat.450 Ing. Petr Bilík
 Vytváření panelů
• Jednoduché GUI je tvořeno jediným panelem
• Panel je vymezení plochy, na které se nacházejí
prvky panelu (tlačítka, grafy atd.)

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Vlastnosti panelu

Poklepáním levým tlačítkem myši na panelu se zobrazí stránka

vlastností panelu. Pro vazbu na kód C je důležitá sekce
„Source Code Connection“

Poklepání
levým
tlačítkem
myši

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Vytváření prvků na panelu

Prvky panelu
(tlačítka, grafy atd.)
se vytvářejí přes
menu CREATE

nebo kliknutím
levého tlačítka myši
na panelu

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Vlastnosti prvků panelu
Poklepáním levým tlačítkem myši na prvku se zobrazí
stránka vlastností prvku. Pro vazbu na kód C je důležitá
sekce „Source Code Connection“

Poklepání levým
tlačítkem myši

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

Popisy a zkratkové klávesy prvků

Podtržení Quit je
vytvořeno dvojitým
podtržítkem v poli
Label.

Pokud má kontrol
podtržené písmeno,
lze stiskem <Alt-
Písmeno> vyvolat
akci na tlačítku

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Módy prvků panelu
Základním
kritériem pro
mód prvků
panelu je zda
bude:
Indicator -
zobrazuje
informace z
programu ven,
(výstup ze SW)

Control – přijímá
informace od
uživatele
(vstup do SW)
VŠB-TU Ostrava, kat.450 Ing. Petr Bilík
Jak detekovat uživatelem vyvolanou akci
na panelu
• Úkol: po kliknutí myší na tlačítku KONEC
ukonči běh programu
• Řešení:
1. Cyklicky se SW dotazovat na stav tlačítka a
po změně stavu reagovat (pooling) – tato
technika je neefektivní
2. Použít mechanismus, který po jakékoliv akci
na tlačítku zavolá tzv. CALLBACK funkci,
která je tlačítku přiřazena

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Co je nutné splnit
aby prvek zavolal CALLBACK funkci?

• Ve vlastnostech prvku:
• V sekci „Source Code Connection“ musí být název
funkce, která bude zavolána po akci na prvku
• V sekci „Control Settings“ musí být vybrán jeden z
aktívních módů (hot, validate)

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Módy prvků panelu (režimy činnosti)

• Možné režimy činnosti („Control Settings“):

– Normal (aktivní, negeneruje EVENT_COMMIT)
– Hot (aktivní, generuje událost EVENT_COMMIT)
– Validate (aktivní, generuje událost EVENT_COMMIT a
kontroluje meze zadané hodnoty)
– Indicator (pasivní, je nastavitelný pouze programem)
• Akční tlačítka typu „OK“, „Cancel“ jsou vždy Hot,
ostatní prvky zpravidla Normal nebo Indicator

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Událostmi řízené
programování (event driven …)

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Zobrazení událostí
na prvku v UI editoru

Stiskem
tlačítka
„operator tool“
a manipulací
prvky myší

se zobrazují
vyvolané
události

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Seznam událostí
na prvku
Event Type Event panel control eventData1 eventData2
Control EVENT_COMMIT p c
and Menu
Events
Control EVENT_VAL_CHANGED p c
Event
Control EVENT_LEFT_CLICK p c x y
and Panel EVENT_LEFT_DOUBLE_CLICK p c x y
Event EVENT_RIGHT_CLICK p c x y
EVENT_RIGHT_DOUBLE_CLICK p c x y
EVENT_KEYPRESS p c key code ptr to key
EVENT_GOT_FOCUS p c code
EVENT_LOST_FOCUS p c
Panel EVENT_CLOSE p
Event EVENT_PANEL_SIZE p
EVENT_PANEL_MOVE p
Continuous EVENT_TIMER_TICK ptr to ptr to time
Event time since last
tick event
x = x souřadnice myši relativně k panelu y = y souřadnice myši relativně k panelu

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Často používané kontroly - I

String
Text

Numeric
Command Button
Text Box

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Často používané kontroly - II

LED

Binary Switch

Toggle Button

Ring
VŠB-TU Ostrava, kat.450 Ing. Petr Bilík
 Často používané kontroly - III

Dekorace

Graph

Timer
Strip Chart
VŠB-TU Ostrava, kat.450 Ing. Petr Bilík
 Knihovny fcí pro práci s GUI
Panely
nahrání panelu ze souboru do paměti LoadPanel
zobrazení již nahraného panelu DisplayPanel

Dialogové panely
zobrazení textové zprávy MessagePopup

Kontroly/Grafy/StripCharty: Obecné funkce

zapsání (nastavení) hodnoty na prvek SetCtrlVal
přečtení hodnoty z prvku GetCtrlVal

Správa uživatelského rozhraní (UI)

spuštění UI RunUserInterface
ukončení UI QuitUserInterface
VŠB-TU Ostrava, kat.450 Ing. Petr Bilík
 Hlavičkový soubor uživatelského
rozhraní

• Hlavičkový
soubor
uživatelského
rozhraní je
pojítkem mezi
UIR souborem a
kódem v C

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Generátor kódu

Vytvářeč
kódu v CVI
(Code
Builder)
usnadňuje a
zrychluje
vývoj
aplikace

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Generátor kódu

Select Code » Preferences » Default

Control Events
Vytvoří “Kostru kódu” s událostmi dle
zvolených preferencí

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Nahrání a zobrazení panelu

Zcela zásadní význam pro práci s GUI má pochopení tzv.

reference na panel (panelHandle) a mechanismus zobrazení
panelu.

static int panelHandle;

int main (int argc, char *argv[ ])
{
if ((panelHandle = LoadPanel (0, "1.uir", PANEL)) < 0)
return -1;
DisplayPanel (panelHandle);
RunUserInterface ();
DiscardPanel (panelHandle);
return 0;
}

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík

 Čtení hodnot z kontrolu a zápis do
kontrolu

• zapsání (nastavení) hodnoty na prvek SetCtrlVal

• přečtení hodnoty z prvku GetCtrlVal

VŠB-TU Ostrava, kat.450 Ing. Petr Bilík