Če razvijate elektronske naprave in pri tem uporabljate in programirate mikrokontroler (embedded procesor), ter uporabljate UART ASCII konzolno komunikacijo z osebnim računalnikom, imate dovolj predznanja, da v nekaj korakih izdelate GUI vmesnik na Android tablici ali telefonu in sicer brez dodatnega znanja objektnih programskih jezikov ter kompleksnih orodij.
Avtor: Janez Pirc
GUI-O je namenjen vsem, tako tistim, ki so naredili nekaj osnovnih programov z enostavnim mikrokontrolerjem, kot profesionalnim razvijalcem za hiter in učinkovit razvoj izdelkov.
GUI-O je zaključen program na Android napravi, ki interpretira vaše ukaze iz mikrokontrolerja. Vse, kar potrebujete, se skriva v nekaj stringih, s katerimi nastavite GUI-O, oddajate podatke iz naprave in spremljate odzive uporabnika. Če ne verjamete, da je to pravilna rešitev, si preberite nekaj teorije v spodnjem poglavju, sicer pa lahko teorijo preskočite in začnete z uporabo.
Ta vsebina je samo za naročnike
Če želite odkleniti to vsebino, se naročite.
Če niste Arduino uporabnik, brez skrbi. GUI-O lahko uporabljate na vseh mikrokontrolerjih s prostim UART portom in tudi na ostalih razvojnih sistemih. Na internetni strani https://www.gui-o.com/ so primeri s pred programiranimi ESP moduli. Hiter pregled strani vam da vtis, kot da je GUI-O le ena od mnogih rešitev v Arduino okolju, pa ni. SW na ESP modulih za sam začetek ni bistven in za delovanje GUI-O ni potreben. ESP modul na primerih, kot je komunikacijski in funkcionalni krmilnik, lahko uporabite samo kot komunikacijski most do vašega krmilnika, kar bom opisal v naslednjem članku. Tudi telefon ali tablico lahko uporabite kot komunikacijski vmesnik do interneta, kar prikazuje slika 9 spodaj v članku. Predlagam, da na začetku uporabite enega od enostavnejših, že programiranih Bluetooth modulov, na primer HC-06. Lahko uporabite tudi katerikoli drug modul, ga priključite na svoj krmilnik, naredite povezavo in začnete spoznavati GUI-O protokol. Na napravi je lahko katerikoli mikrokontroler: PIC, ATMEL, STM, NXP…
GUI-O je drugačen
Danes večina naprav poganja mikrokontroler. Včasih so imele naprave stikala, potenciometre, signalne lučke, LED-ice in analogne kazalčne prikazovalnike. Z razvojem tehnike so se pojavili vrstični alfa numerični prikazovalniki, kasneje pa tudi preprosti matrični točkovni prikazovalniki. Seveda uporabniki izbirajo izdelke tudi na osnovi videza naprave in grafičnega uporabniškega vmesnika (GUI), zato so naprave z lepim GUI konkurenčnejše. Cena zmogljivih barvnih prikazovalnikov je vedno nižja, po drugi strani pa kompleksnost razvojnih orodij in platform za izdelavo GUI raste.
Kompleksnejše naprave so v večini primerov krmiljene z mikrokontrolerjem, ki skrbi za funkcionalnost same naprave v realnem času. Za nekoliko kvalitetnejše GUI v večini primerov skupaj z prikazovalnikom kupimo ločen namenski krmilnik. Še zahtevnejše GUI pa poganja računalnik. Računalnik ni primeren za krmiljenje procesov v realnem času, bistveno lažje pa skrbi za GUI ter ostale višjenivojske funkcije.
Zaradi kompleksnosti in razlik samih podsistemov, tako mikrokontrolerja, kot računalnika, se inženirji razvijalci specializirajo vsak na svojem področju, in celo večkrat delajo v različnih podjetjih na istem izdelku. Za izdelavo oddaljenega dostopa do naprave (IoT) in prilagojenega GUI pa običajno sodeluje še tretji strokovnjak. Če dodamo še grafičnega oblikovalca, imamo že lepo razvojno ekipo. Tako se sami kompleksnosti razvojnih orodij doda še velik obseg tehničnega in organizacijskega usklajevanja na razvoju same naprave. Tovrstne zahteve izdelek dražijo, ker pa denarja ni dovolj, je slaba končna kakovost kar nekako običajna.
Tehnologija specialistom posameznih področij danes omogoča hitro sestavljanje zahtevanih funkcionalnosti. Večina razvojnega časa se porabi za učenje in spoznavanje novih razvojnih okolij, kasneje pa ta orodja omogočajo hitro izdelavo končnega izdelka. Na samem projektu pa se večino časa porabi za organizacijo in tehnično usklajevanje. To pomeni, da morajo vsi člani razvojne ekipe poznati funkcionalnost naprave, smiselno deliti naloge, ter določiti komunikacijske protokole.
Če funkcionalnost delovanja naprave ni skladna s samim delovanjem GUI oziroma če uporabnikova izkušnja ne kaže pravih funkcionalnosti, so nastali problemi kasneje težko rešljivi. Pomanjkljivo razumevanje delovanja naprave večkrat pripelje do podvajanja nadzora nad funkcionalnostjo tudi na strani GUI. Tak pristop ustvari več problemov, kot koristi. Sama funkcionalnost naprave sodi na nivo mikrokontrolerja, ki krmili HW. Mikrokontroler upravlja napravo in mora imeti hkrati tudi popoln nadzor nad stanjem GUI. Če komunikacijski protokol odraža tako stanje, potem na nek način razvojna ekipa načrtuje pravilen komunikacijski protokol in bo v končni obliki zelo podoben GUI-O protokolu. Pri tehničnem usklajevanju je poleg omenjenega protokola potrebno doreči tudi parametre in izgled elementov GUI, da jih bo lahko GUI specialist kreiral. Ta organizacijski postopek usklajevanja je pri uporabi GUI-O na nek način poenostavljen. Vsi tehnični podatki usklajevanja so preoblikovani v elemente in parametre GUI-O protokola.
Neoptimalno in nepotrebno je, da bi te parametre za vsak projekt nastavljal ločen strokovnjak. Tudi neoptimalno je, da se lokalni GUI in oddaljeni GUI kreirata in krmilita z različnimi orodji, in različnimi komunikacijskimi vmesniki. Z uporabo GUI-O orodja strokovnjak za izdelavo lokalnega GUI in strokovnjak za izdelavo oddaljenega GUI ter IoT tehnologijo nista več potrebna.
GUI-O ponuja lepo standardno grafično podobo predprogramiranih elementov za začetek kateregakoli projekta. Elementi vsebujejo vrsto parametrov za pozicijo, velikost, orientacijo, funkcionalnost in bogato grafično oblikovanje. Kot primer, vmesnik na sliki 4 je sestavljen iz predprogramiranih elementov, ki jim s parametri nastavimo lastnosti, torej ne vsebuje dodatnih grafičnih predlog. Ko to ni dovolj, se poljubno elementi sestavljajo, prekrivajo s poljubnimi slikami in animacijami standardnih formatov ter kombinirajo s funkcionalnostjo pred programiranih elementov. Vse to sicer omogočajo bogata orodja za izdelavo GUI, vendar GUI-O uporabo teh orodij preslika na komunikacijski protokol ter vso moč hitre izdelave ponudi v upravljanje programerju mikrokontrolerja. Seveda grafični izgled GUI ni odvisen le od dovršenosti orodij in protokolov, temveč od ustvarjalnosti grafičnega oblikovalca. Žal je dober grafični oblikovalec, ki pripravi grafične predloge, še vedno zaželen.
Na opisan način GUI-O prihrani vsaj polovico razvojnih stroškov, izdelek pa v zaključni fazi vsebuje pol manj napak. Vzdrževanje je enostavnejše, potrebne spremembe se vnesejo samo na strani mikrokontrolerja in potem popravki na lokalnem GUI in vseh oddaljenih GUI delujejo brez menjave SW. GUI-O je univerzalen, zaključen program. Deluje kot internet brskalnik. Posluša in izvaja ukaze mikrokontrolerja. GUI-O je za programerja procesorja bogato orodje in mu omogoča, da GUI nastaja in raste skupaj s samo funkcionalnostjo naprave. GUI-O v nekaterih funkcijah celo nadgradi ali celo zamenja standardno UART (konzolno, diagnostično, servisno) komunikacijo na PC.
Povezava HC-06 na mikrokontroler
Povezavo med mikrokontrolerjem in na drugi strani tablico ali telefonom nastavite preko enega od standardnih vmesnikov (Bluetooth, BLE, USB, Ethernet, Wi-Fi). Vmesniki skrbijo za prenos podatkov, sama GUI-O aplikacija pa kreira in hrani vse potrebne podatke za varen komunikacijski kanal. Vsi vmesniki prenašajo enake ASCII znakovne nize za inicializacijo in komunikacijo. Kasneje bomo opisali specifike vmesnikov, sedaj pa je bistveno to, da z najmanj truda naredite nekaj delujočega, in naslednji koraki bodo lažji.
HC-06 priključite na komunikacijska pina Rx in Tx ter seveda na GND in napajanje. Najenostavneje je uporabiti napajanje vašega mikrokontrolerja. Poraba HC-06 je pod 10 mA. Ne pozabite, da se priključi Rx modula na Tx krmilnika in obratno. Nivo signala modula in krmilnika mora biti enak, običajno 3,3 V ali 5 V, sicer morate poskrbeti za pretvorbo tega nivoja. Startna hitrost novega modula je običajno 9600bps, kasneje predlagam, da jo dvignete na recimo 115200 Bd. Hitrost spremenite z oddajo komande v sam modul na UART AT+BAUDxrn , kjer je x od 1 do 9.
Na ekranu (slika 8) vidite tudi preklopnik ,IoT autoconnect’. Tudi tega lahko upravljate z ukazom @gse IOTAC:1rn. Ta preklopnik pustite izklopljen, sicer pa se uporablja za sledečo funkcionalnost: Telefon, ali še primerneje tablica, nam lahko služi kot lokalni GUI za našo napravo in hkrati ta tablica tudi poskrbi za povezovanje na internet (MQTT server) za dostop do oddaljenih uporabnikov z enakim ali drugačnim GUI. Upravljanje oddaljenih uporabnikov se izvede z dodajanjem parametra PUB:”ime_uporabnika”rn v vse komunikacijske stringe. Ta način uporabe je podrobneje opisan v članku Svet elektronike september, oktober, november 2021 oziroma na forumu https://forum.gui-o.com/topic/8/upravljanje-ogrevanja-preko-interneta .
4 pomeni 9600 Bd, 8 pa 115200 Bd. Proizvajalcev modulov je več. Nekatere izvedenke spremenijo hitrost z drugačno komando, in sicer z AT+UART=115200,0,0rn. Več podrobnosti ne boste potrebovali, sicer jih najdete v dokumentaciji proizvajalca modula. Ko je modul priključen na napajanje, na modulu utripa LED, kar pomeni da nima Bluetooth povezave. UART komunikacijo lahko preverite z oddajo ATrn in če UART komunikacija deluje, modul vrne OK.
Naložite aplikacijo GUI-O na telefon ali tablico
GUI-O aplikacijo naložite na telefon ali tablico iz https://play.google.com. Aplikacija je plačljiva, vendar plačilo izvedete kadarkoli kasneje, ko jo boste spoznali in jo želeli nadgraditi. Ko jo naložite na telefon, je le ta sicer DEMO, vendar podpira polno funkcionalnost ter omogoča izdelavo GUI do 6 standardnih elementov. To je dovolj za hobi, test uporabnosti in zmogljivosti. Plačilo izvedete kasneje na sami aplikaciji Settings -> Unlock pro. Glede na kompleksnost aplikacije je cena sprejemljiva in je trenutno pod 10 Evri. Licenca je vezana na Google račun in časovno ni omejena. Ko je aplikacija naložena, jo odprite in prikaže se ekran (slika 6) z nekaj navodili. Ko pritisnemo Get started so tipke na sliki 7 aktivne.
Prva komunikacijska povezava
GUI-O podpira več možnih načinov povezovanja, zato je potrebno ob prvi povezavi nekaj več manipulacije.
S komando + in dalje ,Bluetooth’ ali ,Settings -> Connections -> Bluetooth’ prožite iskanje ,Available devices’ – slika 30. Izberete HC-06, ob prvi povezavi vnesete PIN 1234. Kasneje ob ponovnem povezovanju je postopek krajši. Na ekranu (slika 7) izberete ikono na levi strani ,connect’ in dalje HC-06. Tudi to že krajšo manipulacijo ob startu kasneje lahko preskočimo. Ko na telefonu zaženemo aplikacijo, se mora pokazati GUI, ki ga bomo postavili z našo inicializacijo. Funkcionalnost aktiviramo s preklopnikom Autoconnect (slika 8). V primeru, da imamo vpisanih več naprav, aplikacija ob startu ponudi izbor vseh naprav.
Če pa delamo aplikacijo za končno stranko, pa uporabnika ne obremenjujemo z navodili, kako aktivirati ukaz ,Autoconnect’ preko ,Settings -> Connections -> Bluetooth’, temveč za to poskrbimo mi ob prvi inicializaciji iz procesorja, kjer dodamo ukaz @gse BTAC:1rn. Podrobnejši opis ukazov sledi kasneje.
Na modulu HC-06 lahko spremenite ime, na primer vpišete ime krmiljene naprave SWITCH. Lahko spremenite tudi PIN kodo za prvi dostop. Ti podatki so seveda podatki samega modula in spremembo vpišete preko UART porta po navodilih proizvajalca modula. Spremenjeni podatki povečujejo varnost in bodo v pomoč ob prvem povezovanju. Ko ste naredili povezavo med GUI-O in HC-06, se LED na modulu prižge, kar pomeni, da je povezava postavljena. Ko pritisnete na startni gumb oziroma ,connect’, GUI-O aplikacija naredi povezavo in proti mikrokontrolerju pošlje zahtevo za inicializacijo @initrn. Ker od krmilnika ni odgovora, vas aplikacija opozori, da je nekaj narobe. Če na krmilniku, kot odziv na zahtevo @initrn, oddate enostaven string za inicializacijo, na primer |TG UID:tg1 X:50 Y:25rn , se na ekranu pojavi prvi element: slika 40 zgoraj.
Izdelava GUI brez omejitev
GUI-O protokol podpira široko paleto standardnih grafičnih gradnikov, ki v kombinaciji z enostavnimi gradniki, kot so okvirji, podlage, liki itd. zadostuje za večino aplikacij. Pri učenju protokola je v pomoč priročnik: https://www.gui-o.com MANUAL, kjer najdete vse potrebno. Na začetku lepo strukturiranega priročnika je hiter pregled vseh gradnikov s slikami in v naslednji tabeli so minimalni (obvezni) ukazi, sledi razlaga delovanja preko ukazov za nastavitev aplikacije, nastavitve komunikacijskih vmesnikov in še kaj. Potem pa sledi obsežnejši opis vsakega gradnika skupaj z vsemi parametri za oblikovanje ter primer uporabe. Tako hitro najdete sliko želenega gradnika (WIDGETS OVERVIEW), obvezen inicializacijski string (WIDGETS CHEATSHEET) ter vse podrobnosti v celotni razlagi vseh možnih parametrov. Na sliki 11 je primer nekaj standardnih gradnikov.
Ko pa želimo ustvariti dovršen GUI, se moramo posvetiti izdelavi grafik. Umetnost grafičnega oblikovanja je pri uporabi GUI-O enako zahtevna, kot pri klasični izdelavi GUI na kateremkoli orodju. GUI-O proces poenostavlja le v toliko, da omogoča uporabo slik in animacij standardnih formatov. Slik ne hranimo na krmilniku, temveč le definiramo dostop do slik iz interneta ali spomina Android naprave. Izvirnost GUI-O programske rešitve je tudi v natančnem sestavljanju elementov in slik od roba do roba, ne glede na format ekrana, kar omogoča načrtovanje GUI za lokalni prikaz in oddaljene uporabnika na različnih napravah. O tej rešitvi nekoliko kasneje. Ko želimo, da grafike dobijo funkcionalnost, standardne elemente, ki jim vpišemo transparentnost, lepimo preko grafik ter na ta način brez omejitev izdelamo najzahtevnejše GUI. Standardni elementi so tudi kompleksnejši, kot so video, koledar in grafi. Vsak element je mogoče prilagoditi s parametri, kot so velikost, orientacija, barva ozadja, transparentnost, barva ospredja, 3D učinek… GUI-O na podoben način, kot so podprti grafični elementi, omogoča tudi branje podatkov vgrajenih senzorjev ter generiranje zvokov.
Komunikacijski protokol
Zgoraj je že zapisano, da se ob zagonu aplikacije izvede povezava med GUI-O in komunikacijskim modulom ,connect’, ASCII komunikacija pa se prične z oddajanjem sporočila proti procesorju @initrn. S tem stringom GUI-O sporoča, da deluje in čaka na inicializacijo oziroma navodila krmilnika. Odziv krmilnika je običajno nekoliko večji inicializacijski blok podatkov, dalje pa se komunikacija v obe smeri izvaja glede na dogodke v napravi in GUI. V grobem lahko komunikacijo ločimo na dva tipa ukazov. Inicializacijski ukazi se začnejo z rezerviranim znakom ,pipa’ | , komunikacijska sporočila pa z rezerviranim znakom @. Za znakom | sledi koda elementa na primer za gumb (button) |BT ter dalje obvezen parameter, ki določa ime elementa UID:bt1. Med tipom parametra in samim parametrom oziroma vsebino parametra je znak : . Obvezen parameter vsakega elementa je tudi pozicija (npr. X:50 Y:50). Vsi komunikacijski stringi se vedno zaključijo z rn. Ime (UID:ime) je lahko poljuben govoreč string, na primer UID:ventil, a se v praksi uporablja z malimi črkami in zaporedno številko zapisana koda elementa: bt1, bt2, bt3 itd. Obvezna parametra X in Y določata položaj elementa na zaslonu in sicer v procentih velikosti zaslona X od leve proti desni in Y od vrha proti dnu. Tako se bo gumb ,button’ (|BT UID:bt1 X:50 Y:50rn) pojavil v sredini ekrana. Seveda lahko dodajamo tudi druge parametre, ki spremenijo lastnosti in obliko elementa. Tipični parametri so za rotacijo, na primer obrnemo gumb za 90 stopinj (ROT:90) ali spremenimo velikost W:6 kjer 6 pomeni 6% velikosti (širine) ekrana itd. Nekateri elementi, kot so izpisi na ekran |LB ali |TI, vsebujejo parameter TXT:“tekst“, kjer zapišemo string na ekran. Torej kreiramo inicializacijski string, ki vsebuje parameter z vsebino string za izpis. Ker se običajno v programskih rutinah za izpis oziroma oddajanje na UART narekovaj uporabi tudi kot začetek in konec stringa, je potrebno oba znaka ločiti. V rutini za izpis se znak prenese na sam izpis, če pred njim postavimo “ in tako bo inicializacija izpisa na sredino ekrana izgledala nekako tako:
sendstring(“|LB UID:lb1 X:50 Y:50
TI:“poljuben tekst“rn“);
Če vam programiranje z uporabo “ povzroča težave, lahko znak “ zamenjate z enojnim narekovajem (‘), zvezdico (*) ali tilda (~). To izvedete z ukazom na začetku inicializacije @gse TSC:xxrn kjer je xx ASCII koda zamenjanega znaka. Ko nanizamo ukaze in inicializiramo več elementov, nastane daljši blok vrstic zaključenih z rn. Inicializacijski blok procesor odda, kot odziv na sprejet @initrn. Inicializacija se izvede ob vsakem zagonu GUI-O aplikacije. Aplikacija deluje kot tolmač ter je ista za dostop do različnih naprav. Ob startu moramo aplikaciji podati še nekaj dodatnih ukazov, da bo delovanje zanesljivo in pravilno na vseh različnih napravah.
sendstring(“@slsrn“);
// ob inicializaciji ne prikazuj do komande @hls
sendstring(“@clsrn“);
// briši vse elemente
sendstring(“@clhrn“);
// briši vse inicializacije senzorjev (HW elementi)
sendstring(“@guis BGC:#FFFFFF ASR:0.449671 rn“);
// barva ozadja, format ekrana (razmerje stranic)
sendstring(“@gse BTAC:1rn“);
// aktiviraj autoconnect na Bluetooth vmesniku
sendstring(“|LB UID:lb1 X:50 Y:30 TI:“PEČ“rn“);
// izpis na ekran
sendstring(“|TG UID:tg1 X:50 Y:50rn“);
// preklopnik z obveznimi parametri
//inicializacijski blok ukazov za vse ostale elemente sledi tu
sendstring(“@hls 250rn“);
// prikaz celega ekrana, animacija 250mS
Če prepišete zgornji blok v svojo izvorno kodo ter ga ob sprejemu @init pošljete na UART, boste na ekranu takoj po pritisku na ,connect’ videli izpis PEČ nekoliko nad sredino ekrana in preklopnik na sredini ekrana. Ozadje oziroma podlaga bo črna.
Sedaj je čas, da sledite svojim idejam in odprete priročnik, poiščete želeni element, kopirate in popravite obvezne parametre, pogledate tabelo vseh ostalih parametrov in prilagodite element svojim potrebam. Nov grafični element vrinete v inicializacijski blok, prevedete in ponovno naložite. Seveda tudi po resetu na UART oddate celoten inicializacijski blok enako kot na sprejem @init. Načeloma GUI-O ne potrebuje ukazov na začetku, kot je na primer @cls, jih lahko zakomentirate in opazujete delovanje. Če izključite @cls, vas bo GUI-O po resetu krmilnika opozoril, da ste inicializirali več elementov z istim imenom. GUI-O nima nobene informacije, ali ponovno inicializirate ekran, ker ste vnesli popravke, ali pa želite dopolniti nekaj zaradi delovanja naprave. Načeloma lahko elemente inicializirate kadarkoli ter tako na uporabnikov ukaz ali spremembo stanja naprave menjate cele ekrane. Za hitrejše delo, da ne potrebujemo ugašati GUI-O aplikacije, je v pomoč ukaz za brisanje vseh elementov, preden ponovno inicializiramo popravljen ekran. Enako naredimo, če želimo zamenjati ekran, ali del ekrana. Če ukazu dodate parameter @cls UIDS:tg1,lb1rn se bodo brisali le navedeni elementi. Podobno deluje @clh, le da je ta ukaz za brisanje HW elementov oziroma senzorjev na telefonu.
Animacija ob odpiranju zaslona
GUI-O ob inicializaciji takoj nalaga komponente na ekran po vrstnem redu same inicializacije. Če je komunikacija nekoliko počasnejša in elementov veliko, je to lepo vidno. Če vas to moti, lahko za čas inicializacije od komande @sls do komande @hls prikaz komponent zadržite, nato se vse komponente hkrati prikažejo. Aplikacija prikazuje vrtečo animacijo. Čas animacije je določen v mS z @hls 250.
Kot vidite GUI-O dosledno deluje kot tolmač oziroma ,interpreter’ ukazov iz mikrokontrolerja. Če je ukaz evidentno napačen, GUI-O uporabnika o napaki obvesti. Programer mikrokontrolerja pa mora poskrbeti za pravilno logično delovanje v vseh stanjih in okoliščinah. Skozi razlago protokola se bo ta princip delovanja ponavljal.
Komunikacija v obeh smereh
Ko je inicializacija zaključena, se komunikacija izvaja z ukazi v obeh smereh. Ti ukazi se začnejo z rezerviranim znakom @ ter nadaljujejo z imenom elementa @tg1 ter spremembo ali aktivnostjo tega elementa. Na primer, na ekranu prikazano stanje našega preklopnika lahko krmilnik prestavi v aktivno stanje tako, da proti GUI-O odda spremembo parametra EN za element z imenom tg1 @tg1 EN:1rn. Ko pa se uporabnik dotakne preklopnika, pa GUI-O v obratni smeri odda stanje oziroma dogodek proti procesorju @tg1 0rn. Preklop v aktivno stanje pa uporabnik proži z @tg1 1rn. Tako lahko mikrokontroler na GUI spreminja katerikoli parameter kateregakoli elementa. Tako lahko naredimo celo animacijo, na primer v nekaj korakih večamo in manjšamo element. V obratni smeri pa GUI-O poroča o dotiku, pošlje vrednost ali stanje elementa ali senzorja.
GUI odraža stanje naprave
Kot sem že poudaril, GUI-O tolmač dosledno izvaja ukaze. Če na primer s preklopnikom tg1 vključimo peč, potem ugasnemo aplikacijo GUI-O, ter kasneje, ko nam je vroče, prižgemo aplikacijo GUI-O, bo vmesnik kazal izključeno peč, peč bo pa seveda prižgana. Pri inicializaciji GUI moramo vedno upoštevati stanje naprave kot primarno stanje, na katero nastavimo stanje grafičnega vmesnika. Tako se inicializacija našega preklopnika spremeni oziroma se vedno postavi v pravilno stanje:
sendstring(“|TG UID:tg1 X:50 Y:50 EN:“)
// prvi del inicializacije preklopnika
sendnr(“HEATING_STATE“)
// preklopnik se postavi v 1 ali 0 glede na to, ali peč gori
sendstring(“rn)
// zaključen string – inicializacija preklopnika
Enako dosežemo tudi, če oddamo:
sendstring(“|TG UID:tg1 X:50 Y:50rn“)
// prvi del inicializacije preklopnika na 0
sendstring(“@:tg1 EN:“)
// popravimo stanje s parametrom EN:
sendnr(“HEATING_STATE“)
// na 1 ali 0 glede na to, ali peč gori
sendstring(“rn)
Tudi če izpis stringa ali neka slika kažeta stanje naprave, ga je potrebno pravilno inicializirati oziroma izpisati tekst trenutnega stanja naprave.
Določanje barv podlag in elementov
Eden od standardnih parametrov večine elementov je barva ospredja FGC: in barva ozadja BGC:. Kodiranje barvnih vrednosti je določeno v šestnajstiški obliki: #RRGGBB oziroma #AARRGGBB kjer RR, GG in BB predstavljajo dvomestno šestnajstiško številko za rdečo, zeleno in modro barvo. Poleg tega AA predstavlja prosojnost nastavljene barve. Za določanje želene barve uporabite orodje https://htmlcolorcodes.com. V ukazu @guis BGC:#FFFFFF določa barvo ozadja ekrana, ki sega tudi izven ASR formata ekrana.
Določanje formata ASR ekrana
Zgoraj sem že omenil izvirnost GUI-O programske rešitve, ki omogoča natančno sestavljanje elementov in slik od roba do roba, ne glede na format ekrana. Večina izdelanih GUI je v okoljih za en sam ekran in tega problema ni, kar pomeni, da določanje ASR lahko izpustimo. Izdelava GUI za različne formate, kot je to primer pri postavljanju internetnih strani, pa na tem segmentu spremlja kup omejitev, če že ne problemov. Rešitev pri uporabi GUI-O je sledeča. Razvojnik sestavlja ekran za v naprej določen format, ki ga z ukazom definira. Če se aplikacija zažene na drugačnem formatu, GUI-O inicializira vse elemente na definiranem formatu sredi ekrana. Oblika slike ostane definirana, preostali prostor na dveh straneh drugačnega formata pa se zapolni z @guis BGC:#xxxxxx barvo. Format določimo s parametrom, ki je razmerje stranic ASR = DPW / DPH kjer je v točkah širina/višina našega ekrana. Ukaz, ki določa format in barvo ozadja je tako @guis BGC:#FFFFFF ASR:0.449671rn. Če podatka ASR ne definiramo, ga GUI-O prenese iz same naprave, kar pomeni, da bo slika BP samo na napravah takega formata, kjer smo jo kreirali, na ostalih formatih pa se bodo elementi zlagali eden preko drugega ali z vmesnim (odvečnim) prostorom. Naj ponazorim: če narišem kvadrat |BSR s primerno velikimi parametri W in H na tablici, potem pa poženem aplikacijo na bolj podolgovatem telefonu, se kvadrat spremeni v pravokotnik, ker se W in H ohranita kot % glede na stranice obeh ekranov. Če v ta kvadrat zapišem string, bo le ta na telefonu segal preko robov pokončnega pravokotnika, ker je velikost fontov vezana na parameter višine H in ne na W . Takih problemov je veliko, zato močno priporočam, da ASR definirate in se s tem izognete težavam, ki bodo nastale ob uporabi vašega izdelka na različnih ekranih. Podatek lahko pridobite na več načinov. Najbolj neroden način je z iskanjem po nastavitvah telefona, hitreje ga boste našli iz podatkov naprave. Najhitreje pa je, če na GUI-O aktivirate Developer mode: Settings menu → Info → 10 krat hitro pritisnemo na Powered by GUI-O version. Odprejo se nove nastavitve, ki so namenjene razvijalcu. Odpremo Developer mode in preberemo Display properties ASR. Developer mode lahko nato s tem istim vmesnikom izklopimo.
Če pa bo vašega oblikovalca zmotil enobarvni rob odvečnega ekrana izven formata, lahko delovni ekran z nekim okvirjem zmanjšate, in se bo barva ozadja širila na vse štiri stranice. Tako bo okvir različnih dimenzij manj moteč.
Kreiranje slik
Sliko na GUI-O vmesnik vnesemo z inicializacijo elementa IM. Seveda je hranjenje slike v mikrokontrolerju in prenos na ekran relativno zahtevna naloga, zato GUI-O omogoča nalaganje in hranjenje slik direktno v spomin Android naprave na /android/data/com.guio.guioapp/files/pictures/. Za razvojne potrebe je to OK, za resnejšo uporabo pa je primernejša hramba slik na internetu, na primer na strežniku podjetja ali nekem zanesljivem viru na internetu. Težko od končnega uporabnika pričakujemo da bo, potem ko iz GooglePlay naloži GUI-O na svoj telefon, naložil še slike na predvideno mesto telefona. Če namesto imena slike vnesemo internet naslov, se ob prvi inicializaciji avtomatsko slike prenesejo iz interneta v lokalni spomin telefona. Ob naslednji inicializaciji povezava do interneta ni več potrebna, slike se naložijo iz spomina telefona. V inicializacijskem stringu vpišemo katerikoli javno dostopen link za dostop do slike. Predlagam, da slike hranite nekje na internetu, kjer bodo le te tudi ostale, dokler bodo vaši uporabniki delali na vaših napravah. Na primer na www.imgur.com odprete račun ter odložite vaše slike. Po objavi slik traja nekaj sekund, da je le ta javno dostopna preko linka. Link kopirate, ko se postavite na sliko ter kliknete na desno tipko miške – kopiraj povezavo do slike. Na enak način na internet odložimo ter z inicializacijo prenesemo tudi video in avdio vsebine.
Ob startu aplikacija GUI-O inicializira grafične elemente. Če prejme ime slike, jo išče v spominu. Če prejme internet povezavo z imenom slike, to sliko najprej išče v spominu, in če je ne najde, jo iz interneta prenaša v spomin. Tako je internetni dostop potreben samo za prvi zagon, kasneje pa se vsebine na ekran prenašajo iz spominskih lokacij. Če želimo vsem uporabnikom spremeniti sliko, jo spremenimo na internetu ter uporabniku predlagamo: brisanje in ponovno nalaganje GUI. Ob razvoju pa lahko vsebine iz interneta (avdio, video, slike) brišemo z ukazom v nastavitvah Developer mode (10 x na Powered by GUI-O version).
Inicializacija
Spodaj bom klic funkcije sendstring() ter zaključitev stringa z rn izpustil.
@cls brisanje vseh elementov
@clh brisanje HW elementov
@guis ASR:0.5625 BGC:#000000 format in barva ozadja
@sls elementi se ne prikazujejo do @hls –
prikazuje se animirana ura
|IM UID:im0 X:70 Y:16 W:60 H:60 IP:”https://i.imgur.com/FEavfCu.jpg” slika: paradižnik na tehtnici
|IM UID:im1 X:70 Y:57 W:60 H:60 IP:”https://i.imgur.com/xwQusFZ.jpg” slika: zalivana sadika
|IM UID:im3 X:19 Y:55 W:41.5 H:40 IP:”https://i.imgur.com/e6Pcj4v.jpg” slika: paradižnik levo
|IM UID:im2 X:50 Y:90 OPA:0.8 W:100 H:100 IP:”https://i.imgur.com/GUYg285.jpg” slika: zemlja spodaj
|LB UID:lb1 X:20 Y:6.5 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:5 TXT:”OFF” izpis OFF
|TG UID:tg1 X:12 Y:10 EN:1 W:22 H:4 ROT:90 HAW:12 HAH:12 RAD:2 stikalo zgoraj
|LB UID:lb2 X:22 Y:13.5 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:5 TXT:”ON” izpis OFF
|LB UID:lb3 X:18.5 Y:23.5 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:5 TXT:”MAN” izpis MAN
|TG UID:tg2 X:12 Y:27 EN:1 W:22 H:4 ROT:90 HAW:12 HAH:12 RAD:2rn”); stikalo spodaj
|LB UID:lb4 X:20 Y:30.5 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:4 TXT:”AUTO” izpis AUTO
|LB UID:lb8 X:12 Y:76 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:5 TXT:”START” izpis START
|LB UID:lb9 X:65 Y:76 ALP:1 SHE:1 ROT:0 FGC:#FFFFFF FSZ:5 TXT:”STOP” izpis STOP
|TU UID:tu1 X:15 Y:88 W:20 H:21 FSZ:7.0
vrtljiv seznam – minute na levi strani
|LB UID:lb11 X:25 Y:87.5 FSZ:8 TXT:”:”
izpis dvopičja na levi strani pod START napisom
|TU UID:tu2 X:35 Y:88 W:20 H:21 FSZ:7.0
vrtljiv seznam – ure na levi strani
@tu1 DAL:”00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23″ vrtljiv seznam – vrednosti ur
@tu2 DAL:”00,05,10,15,20,25,30,35,40,45,50,55″ vrtljiv seznam – vrednosti minut
@tu1 LI:22 vrtljiv seznam – list startna postavitev – prepiši številko iz nastavljene ure
@tu2 LI:6 vrtljiv seznam – startna postavitev – prepiši številko iz nastavljene ure
|TU UID:tu3 X:65 Y:88 W:20 H:21 FSZ:7.0rn”);
vrtljiv seznam – minute na desni strani
|LB UID:lb13 X:75 Y:87.5 FSZ:8 TXT:”:”nr”);
izpis dvopičja na desni strani pod STOP napisom
|TU UID:tu4 X:85 Y:88 W:20 H:21 FSZ:7.0rn”);
vrtljiv seznam – ure na desni strani
@tu3DAL:”00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23″rn”); // vrtljiv seznam
@tu4 DAL:”00,05,10,15,20,25,30,35,40,45,50,55″rn”); // vrtljiv seznam
@tu3 LI:2rn”); // vrtljiv seznam – list startna postavitev – repiši številko iz nastavljene ure
@tu4 LI:0rn”); // vrtljiv seznam – list startna postavitev – prepiši številko iz nastavljene ure
@hls 250 //prikaz celega ekrana – animacija traja 250mS
Če prepišete zgornji inicializacijski blok, boste dobili vmesnik na sliki.
Sedaj vam je jasno, da delam GUI za nastavitev krmiljenja ventila za zalivanje vrta. Tukaj sem dodal nekaj elementov, bolj za prikaz tehničnih možnosti. Končna dovršena grafična podoba je zahtevno avtorsko delo. Honorar grafičnega oblikovalca žal ni predviden pri objavi tega članka.
Pri nadaljnjem oblikovanju lahko status ventila prikazujete na indikatorju |SI. Lahko tudi animirate prikazano zalivanje. Ko je ventil odprt, vrtite kratek video zalivanja sadike. Ko pa je ventil zaprt, lahko video zamenjate s sliko odložene kantice ob sadiki. Seveda ob lepih slikah in vaši domišljiji dela ne bo zmanjkalo. Ne pozabite pravilno nastaviti stikal ter nastavljenih časov ob inicializaciji.
Orodje za kreiranje inicializacije
Pri izdelavi vmesnika boste hitro opazili, da je najtežji del natančno sestavljanje elementov oziroma lovljenje pozicije X in Y. Nekoliko lažje je, če v inicializacijo na konec vključite postavitev mreže čez vse elemente za lažjo oceno vrednosti X in Y |GRID UID:grid1 X:0 Y:0rn. Ob koncu razvoja seveda mrežo brišete. Če delate na mikrokontrolerju, ki hitro prevede in naloži spremenjeno kodo, bo delo teklo gladko. Če pa ste omejeni in vas prevajanje in nalaganje SW upočasnjuje, pa bo bolje, da uporabite brezplačno orodje DESIGN TOOL (GUI-O designer). Orodje teče na PC-ju in funkcionalno nadomesti vaš mikrokontroler. Zunaj orodja pa je priključen vaš telefon s polno funkcionalno GUI-O aplikacijo, ki služi kot monitor kreiranih ukazov. Okolje za kreiranje ukazov je seveda bistveno bolj prijazno, kot pisanje teksta v vašo izvorno kodo. Namesto, da prepisujete komande iz priročnika v vaš SW, v grafičnem orodju izbirate komponente in parametre z miško. Vmesnik je zelo intuitiven.
Kliknete na element, pokažete na parameter, spremenite vrednost parametra, ob tem pa se vse spremembe takoj vidijo na vašem telefonu. Na internetu je orodje lepo opisano, predlagam da si ogledate video: https://www.gui-o.com/design-tool#h.reytbbk0qt6g. Preden pa začnete, pa morate orodje naložiti na PC in postaviti povezavo med PC in telefonom. Na internetu je lepo opisan postopek direktne povezave, če imate telefon na hišnem Wi-Fi in PC v istem omrežju. Lahko pa seveda tudi testirate svoj Bluetooth modul, nanj priključite USB/UART pretvornik ter povezavo postavite preko serijskih vrat na PC, na strani GUI-O pa je povezava enaka, kot jo boste uporabili na svojem projektu. Ne pozabite na hitrost, orodje privzeto uporablja 115200 Bd.
Če ima vaš PC Bluetooth vmesnik, mora ta podpirati SPP način za direktno povezavo, sicer ne deluje.
Ko komunikacijski modul ne zmore prenosa cele inicializacije
Nekoliko kompleksnejši ekran ima obširen inicializacijski blok. UART vmesnik na mikrokontrolerju in modulu običajno zmore tja do 921.600 Bd, ali celo več, vendar se izkaže, da imajo ceneni moduli premajhen vmesni pomnilnik. V takih primerih GUI-O javlja napake, ker prejme stringe z manjkajočimi segmenti. Če ste v dvomih, lahko v Developer mode aktivirate Log incoming messages (Settings menu → Info → 10 krat hitro pritisnemo na Powered by GUI-O version). Vsi dohodni stringi se zapisujejo v datoteko, kjer jih lahko preberete: /Android/data/com.guio.guioapp/files/in_messages.log. Rešitev problema je v izboru boljšega komunikacijskega modula, nastavitvi nižjih hitrosti komunikacije ali vgradnji časovnih zakasnitev med krajše bloke inicializacije. UART ,sniffer’ med vašim krmilnikom in modulom je dobrodošel, ker jasno pokaže morebitno napako v vašem SW, kot je na primer ,tipično’ manjkajoč prvi znak pri oddaji inicializacije po resetu mikrokontrolerja. Seveda je to napaka, ki bo moteča ob izpadu elektrike in ponovni postavitvi sistema, kjer je tablica v funkciji lokalnega GUI.
Zaključek
Članek prikazuje funkcionalnost orodja za izdelavo GUI na Android napravi. Naj ponovim nekaj prednosti GUI-O pred konkurenco. To ni klasično orodje za izdelavo GUI, temveč izdelan program tolmač (interpreter), ki ga krmili mikrokontroler naprave preko ASCII stringov. Program deluje podobno kot internet brskalnik, ki ga krmilijo podatki iz strežnika. Pri GUI-O pa je strežnik sam mikrokontroler. Poleg tega, da rešitev omogoča programerju mikrokontrolerja izdelavo GUI, rešitev tudi poceni razvoj, predvsem pa dviguje kakovost in fleksibilnost izdelka. V naslednjem članku pa opišem uporabo Wi-Fi modula za dostop do naprave preko interneta.
https://svet-el.si
