Kasutajaliideste areng

Elu ja tehnika meie ümber on täitunud arvutustehnikaga. Mikrokontrollereid võib leida isegi kohtadest kus nende olemasolu ei oska isegi kahtlustada. Füüsiliste nuppude asemel seadmete paneelidel on virtuaalsed nupud arvutiekraanil. Seepärast on sageli vajadus koostada seadmele graafilist kasutajaliidest.
Suurte süsteemide juhtimiseks kasutatakse keskjuhtimissüsteemi tarkvara (SCADA) kuid väiksemate seadmetele on sageli vaja kordades lihtsamat ja odavamat lahendust. Visualiseerimisrakenduste koostamiseks on saadaval väga mitmesuguseid kommertsprogramme kui ka vaba tarkvara.
Välimuselt küllaltki sarnased objektid võivad tehnilise ülesehituse poolest olla äärmiselt erinevad. Seepärast andmete otse teisendamine MFC, Qt, GTK+ jms. kasutajaliideste vahel enamasti ei õnnestu. Küll aga saab vajadusel teha kiiresti täiesti uue sarnase välimusega kasutuajaliidese teises keskkonnas ning sellega seejärel siduda oma rakendusprogrammi funktsioonid.
Graafiliste kasutajaliideste disain kui tehniline kunstiala upub mõnedes maades tarkvara- ja ärimeetodite patentide “mädasohu” milles sageli toimuvad pealtnäha hullumeelselt kallid ja täiesti ajuvabad lahingud. Kas see osa varast millest tarkust üha vähemaks jääb tuleks meilgi inglise keele eeskujul ümber nimetada pehmeks varaks (soft-ware)?

Teeme ise kasutajaliidese

Omatehtud rakenduste jaoks tuleb kasutajaliides üldjuhul ise koostada sest sobivat valmiskujul ei leia. Siinkohal heidame pilgu graafilise kasutajaliidese koostamisele GIMP Toolkit (GTK+) vahenditega. Programmeerimise lihtsustamiseks on tänapäeval kasutusel graafilised vahendid kasutajaliideste koostamiseks, üheks selliseks on Glade User Interface Designer.
Kui programmi sisu on läbimõeldud siis on võimalik koostada ja disainida sobiv kasutajaliides. Selleks on kaks võimalust:
a) Programmi käskudega,
b) Graafiliste töövahenditega.
Glade User Interface Designer koostab kasutajaliidese kohta XML vormingus faili mis laetakse hiljem kasutajaprogrammis.

Töö kasutajaliidese graafilises disainikeskkonnas võib toimuda näiteks järgnevalt

1. Kõige alla tuleb valida midagi alajaotisest “Toplevels”. Valige näiteks mõni lihtne aken (Window).
2. Määrata objekti miinimumsuurus tema töölehelt “Common” -> “Width reguest” ja “Height request”.
3. Paljudel juhtudel ollakse harjunud programmi peamenüüga akna ülaservas. Menüü ja olekuribade lisamine akna üla- ja alaserva eeldab et me jagame akna vertikaalselt mitmesse osasse. Muidugi on võimalik kasutajaliideseid teha ka ilma menüüdeta. Võimaliku kasutajaliidese funktsionaalsus on sellegipoolest sügavalt kinni kasutajate harjumustes mida on „peavoolu“ kommertsvara poolt meisse juurutatud.
4. Osadeks jagamiseks saab kasutada valikut “Box” alajaotisest “Containers”. Vaikimisi jagataksegi kolmeks vertikaalosaks. Vaikimisi jagatakse aken kolme osasse millest ülemist osa saab kasutada menüüribale ja alumist osa olekuribale.
5. Menüü leiab alajaotisest “Containers” nime alt “Menu Bar” (piktogrammil on kiri File).
6. Vaikimisi seadistustega menüüs on valikud “File”, “Edit”, “Help” koos vastavasisuliste alammenüüdega, ainsana puudub vaikimisi alammenüü menüüvalikul “View”. Menüüsid on seejärel võimalik vastavalt vajadusele muuta ja kohandada.
7. Akna alaserva sobiva olekuriba leiab alajaotisest “Control and Display” nime alt “Status bar”.

Menüüriba ja olekuriba plokkidel on kõrgus määratud (Height request), seega jääb muutuvaks üksnes akna keskmise osa kõrgus. Kujundamise paindlikkuse huvides lisame keskmisesse jaotisesse kaks üheelemendilist kasti “box” üksteise sisse. Mõlemal lülitame lehelt “Packing” sisse “Fill” ja “Expand”. Sellega täidab see kast kogu jaotise kasutatava pinna. Suuna muudame lehelt “General” esimesel kastil horisontaalseks (Horizontal) ja teisel kastil vertikaalseks (Vertical). Kastide nimedesse võib selguse huvides samuti lisada tähe “h” või “v”, näiteks “hkast1” või “vkast1”. Et aknal oleks servad, siis lehelt “Packing” seame mõlemale kastile vaheriba “Padding” laiuseks 10 ühikut.

Siinkohal oleme jõudnud järgneval joonisel toodud tulemuseni.

Joonis 1. Servadega aken GIMP toolkiti arenduskeskkonnas GLADE user interface designer

Kujundustraditsioonid

Nii nagu hoonete aknad võivad ka arvutiprogrammide “aknad” olla olla ühe või mitme aknaruuduga. Arvutiprogrammides tähendab see tavaliselt püst- või horisontaalriba kuvatavate objektide vahel (objektid ei pruugi seejuures olla üldsegi ruudukujulised). Akna “ruutudeks” jagamiseks on kasutusel objekt “Paned” (inglise k. aknaruuduga). Paljudes arendustöös kasutatavatest arvuti­programmides sh. tarkvaraarenduskeskkondades (IDE) ja raalprojekteerimis­programmides (CAD) on levinud kasutajaliidese lahendus milles ülemises “aknaruudus” kuvatakse graafilist infot ja alumises tekstiinfot. Sageli saab alumisest ruudust sisestada käske või nende tekstikujul parameetreid. Sarnast disainilahendust saab kasutada ka protsessijuhtimise kasutajaliidestes. Teksti kuvamine ekraani alaossa pole mingi uus lahendus, mõelge kasvõi subtiitrite kasutamisele kinoekraanidel. Tööstusautomaatikat vaadeldes võib leida isegi vedelkristallkuvareid mille üla- ja alaosa on täiesti eraldi sõltumatute elektriliste andmesignaalidega juhitavad.

Tükeldame ülesande sobivateks osadeks

Täiendame kasutajaliidest lisades aknaruuduobjekti “Paned” alajaotisest “Containers” ja muudame selle suuna vertikaalseks lehelt “General”. Seejärel lülitame sisse “Expand” ja “Fill” lehelt “Packing”. Aknaruudu servade kujundamiseks ja nendele info lisamiseks saab kasutada sildiga raamiobjekti “Frame” alajaotisest “Containers”. Raami varju (frame shadow) võib seada asendisse “Etched in”. Lehelt „Packing“ võib kokkusurutavuse välja lülitada  seades parameetri “Shrink” asendisse “No”.

Tekstiaknalt eeldame harilikult et sinna mahub rohkem kui korraga kuvatakse. Võimaldamaks teksti nähtava ala kerimist lisame kas kerimisriba (Scrollbar) või terve keritava akna (ScrolledWindow). Viimast võib kasutada ka ühe kerimisribaga või üldse ilma eraldiseisvate kerimisribadeta. Näiteks kui horisontaalset kerimisriba ei soovita siis saab seda “Horisontal Scrollbar Policy” asendisse “Never”.
Veel mõnede elementide lisamise järel oleme jõudnud järgneval joonisel toodud tulemuseni.

Joonis 2. Akna tükeldamine aknaruutudega programmis GLADE User Interface Designer

Nüüd tuleb veel kasutajalidese elementidele veidi värve lisada.

Keeltest ja programmeerimisoskusest

Lõpuks tuleb XML kujul kasutajaliides siduda kasutajaprogrammiga. Siinkohal ühest lahendust ei ole sest kasutajaliidese disainiprogramm on universaalne võimaldades kasutada väga mitmesuguseid programmeerimiskeeli (C, C++, C#, Vala, Java, Perl, Python, Scheme, PHP jt.). Erinevatel inimestel on programmeerimiskeelte ja tehnikaga sageli erinevad kogemused. Kooli informaatikatunnis omandanud programmeerimiskeel Pascal või Visual Basic aitab enamasti küllaltki lihtsalt suunduda ka C, C++, Java, PHP vms. programmeerimiskeeltele. Vaja on julgust ja veidike iseseisvat õppimisoskust – “julge pealehakkamine on pool võitu”. Iseseisva õppimise protsessis on asendamatuteks abilisteks Interneti otsingumootorid – nii saab silmaring areneda läbi enda või teiste poolt kogetud raskuste. Korduvalt on tõstatatud küsimus: “Õppurid ei oska Eesti keeltki rääkimata võõrkeeltest, kas sedasi on võimalik neilt nõuda programmeerimisoskust?”. Minu arvates ehnikahuviliste tee võõrkeelte juurde viib just läbi tehnika, sest keelteoskus parandab materjali kättesaadavust. Materjali parem kättesaadavus võõrkeeltes ei tähenda et kohalikku tehnikakeelt pole otstarbekas arendada. Vastupidi, arusaamine ja oskused tulevad läbi lahtimõtestamise mida suudab igaüks paremini oma igapäevakeeles.

Programmeerimiskeelte teegid

Valmisteekide linkimiseks omatehtud programmiga tuleb need eelnevalt arendustöös kasutatavasse arvutisse paigaldada.

Vastasel juhul saame veateate.

”fatal error: gtk/gtk.h: No such file or directory”.

Linuxil põhinevates süsteemides on GIMP Toolkiti puhul vajalik paigalda pakett “libgtk-3-dev” koos millega paigaldatakse automaatselt selle tööks vajalikud teised paketid.

Programmeerimiskeeled C ja C++

C keelse programmi kompileerimisel tuleb teekide kasutamiseks kompilaatorile seadistada mitmesuguseid võtmeid.

GIMP Toolkiti teegid tuleb programmiga siduda, ja seda saab C kompilaatori seadistustes teha võtmetega:

$(pkg-config –cflags –libs gtk+-3.0)

Graafiliste komponentide sündmusteohjurid tuleb siduda graafikateekidega mis paiknevad dünaamiliselt laetavates teekides, vastasel juhul need ei toimi. Selleks on vajalik programmi kompileerimisel lisada võti “-export-dynamic”. Kui see võti jätta lisamata siis programm küll kompileerub vigadeta aga graafilise kasutajaliidese nupud ja menüüd ei reageeri ei hiirele ega klaviatuurile. Samale probleemile võivad viidata ka teated kasutajaprogrammi käivitamisel:

“Gtk-WARNING **: Could not find signal handler“

Eelnevast punktist tulenevalt tuleb siis kui programmi kompileeritakse Windows keskkonnas kõigile sündmusi töötlevatele programmirutiinidele kirjutada ette makro “G_MODULE_EXPORT” ehk “__declspec(dllimport)”. Vastasel juhul ei toimi ei hiir ega klaviatuur sest kasutajaliidese funktsioonid paiknevad eraldiseisvates dünaamilistes teekides (DLL).
Graafilise objektiga seotud sündmuseohjuri deklareerimist programmeerimis­keeles C kirjeldab järgmine näide:

G_MODULE_EXPORT void abiinfo_kuvamine (GtkMenuItem *menuitem,gpointer user_data)
{
//…
}

Kui meie programm vajab tööks GALDE XML failist laetavat kasutajaliidest siis tuleb see esmalt ka mällu laadida.

Selleks on C programmis käsud:

builder = gtk_builder_new ();
if (!gtk_builder_add_from_file (builder, “kasutajaliides.glade”, NULL)){
      // Siia lisada veateatedialoog juhuks kui kasutajaliidese faili ei õnnestu avada
}

Märkusena olgu öeldud, et C++ programmides käib objektide loomine ja kustutamine teiste vahenditega.

Laetavat ja käivitatavat kasutajaliidese XML faili ei analüüsita automaatselt ei kompileerimisel ega kasutajaprogrammi käivitamisel. Kui kasutajaliidese XML failis toodud andmed ei lange kokku programmis tähistatud nimedega siis jäävad osad viidad soovitud objektidele lähtestamata ning osad programmi funktsioonid seetõttu mittetoimivaks.

Sel juhul ilmnevad programmi töö käigus hoiatus ja veateated.

“ Gtk-WARNING **: /build/buildd/gtk+3.0-3.4.2/./gtk/gtkliststore.c:530: Invalid type (null)”.

Kui XML fail on avatud, siis saab omistada kõik viidad meie kasutajaliidese objektidele programmis kasutatavatele viidamuutujatele, näiteks:

aken = GTK_WIDGET (gtk_builder_get_object (builder, “programmiaken”));

Kui aken on juba kuvatav, siis seadistatakse vastavate objektide sündmusteohjurid (signal handlers). Pärast kasutajaliidese lähtestamist läheb programmi töö üle GIMP Toolkiti (GTK+) teekidele käsuga “gtk_main ();” ja kasutajaprogrammi pöördutakse ainult eelseadistatud sündmusteohjurite kaudu.
Ühe toimiva kasutajaliidese näite võib leida Internetist. Seda näiteprogrammi on viimati värskendatud 2011 aastal, seega on see kasutajaliideste dünaamilise arengu tõttu tänaseks (2014 aasta mai) jälle vananenud. Arvutiprogrammide kasutajaliidesed ja riistvara ohjurid lihtsalt on asjad mis kiiresti vananevad. Graafikateekide objektide ja funktsioonide nimed on aegade jooksul mõnevõrra muutunud. Seetõttu ei pruugi kümmekond aastat tagasi tehtud programmid uute teekide või operatsioonisüsteemidega toimida. Sellegipoolest on võimalik programme kohandada juhul kui programmi lähtetekst on kättesaadav.

Kokkuvõte

Kui programmeerimine vabavaralistes rakendustes tundub liiga keeruline või võimalused liiga piiratud, siis soovitan proovida sarnase lahenduse valmistamist mõnes SCADA süsteemide jaoks väljatöötatud kommertskeskkonnas nt. paketis Intouch mida võib leida TTÜ elektrotehnika instituudi laborist.

Programmeerimisoskusest ei pääse nendestki. Head nuputamist ja julget fantaasialendu graafiliste nupupaneelidega!

Mõned õpetlikud videoviited