Stap 3: INTERFACE
De interface bestaat uit 6 scherm panelen zoals in Figg. 6 tot en met 11.
Sommigen van hen zijn statische panelen, d.w.z. zij niet veranderen hun blik op runtime terwijl anderen dynamisch zijn en hun blik op runtime op basis van de Arduino schets variabele waarden veranderen. Een goed voorbeeld van dynamische deelvenster wordt weergegeven in Fig.8; Dit paneel simuleert wat op de echte MFS reproduceren de statische lay-out ontworpen bij stap 2 wordt weergegeven.
Het gebruik van panelen die de objectstatus van de echte (in dit geval de status van de MFS) simuleren is aanbevolen tijdens ontwerp, ontwikkeling en test van de µPanel interface om zowel de interface en de Arduino schets (of een andere software van de microcontroller) het vermijden van het gebruik van de echte hardware.
In Fig.12 staan de mogelijke overgangen tussen de panelen.
Om gemakkelijk de panelen ontwikkeling on line is Configuratiescherm simulator beschikbaar op http://www.miupanel.com/Panel-Design/ONLINE-PANEL...
Op het moment van publicatie van deze Instructables het online is panel simulator alleen beschikbaar voor visualisatie van een reeks, definiëren de lay-out van het paneel. De structuur van de tekenreeks met een beschrijving van een panel en alle de grafische opties zijn zeer goed uitgelegd op http://www.miupanel.com/. Het volstaat hier om aan te geven dat een paneel een lay-out gestructureerd als een matrix heeft, en elk element van de matrix, container, aangeroepen kan worden gestructureerd als een matrix zo goed en zo verder. Visualisatieopties kunnen elk element van de matrix of voor groepen van arrayelementen worden aangegeven. Macro kan ook worden gebruikt voor herhaalde bewerkingen.
Bij de ontwikkeling van een panel het is nodig aandacht te besteden aan het grote aantal brakets die gemakkelijk tot een fout dus, leiden kan om te slaan van de tekenreeks met een beschrijving van een panel, verdient het gebruik van een tekstbestand en een ontwerpbenadering van boven naar beneden.
Het volgende proces is gebruikt om het deelvenster weergegeven in Fig.7 definiëren.
Deelvenster is onderverdeeld in de belangrijkste containers met sommige opties voor afmetingen, stijlen, achtergrond en voorgrond kleuren.
D! F90 {^ {-r30! 228,114% 90 {T:SEZIONE1;}} _ {-r30! 228,114% 90 {T:SEZIONE2;}} _ {-r30! 228,114% 90 {T:SEZIONE3;}} _ {-r30! 228,114% 90 {T:SEZIONE4;}} _ {T:SEZIONE5;}}
Kopiëren en plakken van de tekenreeks in het online configuratiescherm simulator hettoezichtpanel weergegeven in Fig. 13 bis wordt verkregen. De beschikbare oranje (!. F90) gebied is onderverdeeld in 2 belangrijkste containers. De voormalige bevat verder 4 containers met blu verspreid achtergrond (! 228,114), witte afgeronde (r30) contour (-) en dimensie van 90 procent (90%) van de gehele horizontale dimensie van de container waarin ze; de 4 containers zijn uitgelijnd (_). De laatste container, op dit moment alleen tekst bevat.
Het laatste paneel is dan bereikt waarin de inhoud en de stijl van elke container als beschreven in de volgende en getoond in Fig van 13a tot 13u.
Deel 1 ({T:SEZIONE1;}) is onderverdeeld in 2 groepen over verschillende rijen en het zelfde ding voor sectie 2 ({T:SEZIONE2;}):
{T:SEZIONE1;}:--> {{T:SEZIONE1.1;} _ {T:SEZIONE1.2;}}
{T:SEZIONE2;}:--> {{T:SEZIONE2.1;} _ {T:SEZIONE2.2;}}
Ter vervanging van elke subtekenreeks hettoezichtpanel weergegeven in Fig.13b wordt verkregen.
Paragraaf 1.1 ({T:SEZIONE1.1;}) heeft zijn gedetailleerde met 4 containers in 2 rijen (_) en 2 kolommen (|) bevat drukknoppen te verhogen en verlagen van de score van de wedstrijd:
{T:SEZIONE1.1}:--> {fb * 10 {^ B5% 40, 10r80! FFF:LOCALI +; _B6% 40, 10r80! FFF:LOCALI-; {^ B7% 40, 10r80! FFF:OSPITI+; _B8% 40, 10r80! FFF:OSPITI-;}}
Paragraaf 1.2 ({T:SEZIONE1.2;}) heeft zijn gedetailleerde met 2 paar 3 groene cijfers in 2 kolommen:
{T:SEZIONE1.2}:--> {* 10 {-r30! 228,114 {LI5:0; & L15:0; & L25:0;}} | {& &} | {-r30! 228,114 {LJ5:0; & L35:0; & L45:0;}}}
Fig.13c toont het resultaat.
Blijven alle de containers in detail te beschrijven...
{T:SEZIONE2.1}:--> {fb * 10 {^ B9% 30, 10r80! FFF:CRONO; |L9G:0;} | {LAG: 0; | ^ BA % 30, 10r80! FFF:TIMEOUT;}}
{T:SEZIONE2.2}:--> {^ * 10 {-r30! 228,114 {L55:0; & L65:0;}} | {& &} | {-r30! 228,114 {L75:0; & L85:0;}}}
{T:SEZIONE3;}:--> {fb * 10 {^ BB % 26, 10r80! FFF:SUPPL.; | LBG:0;} | {LCG:0; | ^ BC % 26, 10r80! FFF:RIGORI;}}
{T:SEZIONE4;}:--> {fb * 10 {^ B3% 40, 10r80! FFF:TEMPO;} | {^ B3% 40, 10r80! FFF:DISPLAY;}}
{T:SEZIONE5;}:--> {fb {* 15 {^ BI % 40, 10r80! FFF:SIMULA;}} | {* 15 {^ BH % 40, 10r80! FFF:ESCI;}}}
... krijgen we het resultaat weergegeven in Fig.13f.
In dit geval is het mogelijk om te voorkomen dat de horizontale en verticale schuifbalken proberen aan te passen via het venster aan de dimensie van de apparaat met behulp van de w stijl (Dw! F90; in plaats van D! F90;).
Het resultaat wordt weergegeven in de Fig.13g (Fig. 13h past alleen de contour straal).
De Arduino schets implementeert de dynamische versie van het Configuratiescherm weergegeven in Fig. 13 h via een aanroep naar een functie die het deelvenster tekenreeks in subtekenreeksen onderverdelen en bevat de waarden van de variabelen runtime.
VOID sendMatchPrimaryScreen () {}
Serial.Print (P ("$P: D! F90; {^ {-r30! 228,114% 90 {{fb * 10 ^ {B5% 40, van 10r80! FFF:LOCALI +; _B6% 40, 10r80! FFF:LOCALI-;} "));
Serial.Print (P ("| {} ↑ B7% 40, 10r80! FFF:OSPITI +; _B8% 40, 10r80! FFF:OSPITI-;}} _ {* 10 {-r10! 228,114 {LI5:0; & L15:0;"));
Serial.Print (P ("& L25:0;}} | {& &} | {-r10! 228,114 {LJ5:0; & L35:0; & L45:0;}}} "));
Serial.Print (P ("_ {-r30! 228,114% 90 {{fb * 10 {^ B9% 30, 10r80! FFF:CRONO; |L9G:0;} | {LAG: 0; | ^ BA % 30, 10r80! FFF:TIMEOUT;}} "));
Serial.Print (P ("_ {^ * 10 {-r10! 228,114 {L55:0; & L65:0;}} | {& &} | {-r10! 228,114 {L75:0; & L85:0;}}} _"));
Serial.Print (P ("{-r30! 228,114% 90 {fb * 10 {^ BB % 26, 10r80! FFF:SUPPL.; | LBG:0;} "));
Serial.Print (P ("| {} LCG:0; |BC % 26, 10r80! FFF: "));
Als (defGame == 0) {Serial.print(P("RIGORI"));}
Als (defGame == 1) {Serial.print(P("RIGORI"));}
Als (defGame == 2) {Serial.print(P("TIRI"));}
Als (defGame == 3) {Serial.print(P("***"));}
Als (defGame == 4) {Serial.print(P("RIGORI"));}
Als (defGame == 5) {Serial.print(P("RIGORI"));}
Serial.Print (P (";}}}" _ {-r30! 228,114% 90 {fb * 10 {^ B3% 40, 10r80! FFF:TEMPO;} "));
Serial.Print (P ("| {} B3% 40, 10r80! FFF:DISPLAY;}}} _ {fb * 15 {{^ BI % 40, 15r80! FFF:SIMULA;}} | {{^ BH % 40, 15r80! FFF:ESCI;}}} "));
Serial.println("");
Als (screenId == startScreenId) {/ / huidige scherm is Start scherm
handleStart();
};
screenId = matchPrimaryScreenId;
};
Het laatste deelvenster wordt weergegeven in de Fig.13h.
De volledige reeks van Fig.13h is als volgt.
DW! F90; {^ {-r30! 228,114% 90 {{fb * 10 {^ B5% 40, 10r80! FFF:LOCALI +; _B6% 40, 10r80! FFF:LOCALI-;} | {^ B7% 40, 10r80! FFF:OSPITI +; _B8% 40, 10r80! FFF:OSPITI-;}} _ {* 10 {-r10! 228,114 {LI5:0; & L15:0; & L25:0;}} | {& &} | {-r10! 228,114 {LJ5:0; & L35:0; & L45:0;}}} _ {-r30! 228,114% 90 {{fb * 10 {^ B9% 30, 10r80! FFF:CRONO; |L9G:0;} | {LAG: 0; | ^ BA % 30, 10r80! FFF:TIMEOUT;}} _ {^ * 10 {-r10! 228,114 {L55:0; & L65:0;}} | {& &} | {-r10! 228,114 {L75:0; & L85:0;}}} _ {-r30! 228,114% 90 {fb * 10 {^ BB % 26, 10r80! FFF:SUPPL.; | LBG:0;} | {LCG:0; | ^ BC % 26, 10r80! FFF:TIRI;}}} _ {-r30! 228,114% 90 {fb * 10 {^ B3% 40, 10r80! FFF:TEMPO;} | {^ B3% 40, 10r80! FFF:DISPLAY;}}} _ {fb {* 15 {^ BI % 40, 10r80! FFF:SIMULA;}} | {* 15 {^ BH % 40, 10r80! FFF:ESCI;}}}
Dezelfde techniek is gebruikt voor de definitie van de andere panelen. Met name het scorebord scherm van Fig. 9 is statisch als volgt gedefinieerd (zie Fig. 14):
DW! F90; {^ {! 000 98% {{-r10% 95, 10 * 15 {Tfbi #FF0:ATLETICO S. ANNA ;}} _ {-r10% 95,50 {{% 95,10 {{% 20 * 10M1fbi #F00:RETI;} | {% 20 * 10M2fbi #F00:CRONO;} | {% 20 * 10M3fbi #F00:TEMPO;} | {% 20 * 10M4fbi #F00:TIMEOUT;}}} _ {% 95 * 12 {^ % 45 {LI5:0; L15:0; L25:0;}} | {^ % 45 {LJ5:0; L35:0; L45:0;}}} _ {% 95,10 {{> % 30 * 15M5fbi #0F0:LOCALI;} | {& & & & & & & & & & & & &} | {< % 30 * 15M6fbi #0F0:OSPITI;}}} _ {! 228,114% 98 {{-r10% 95 {fb * 10 {^ B5% 40, 10r80! FFF:LOCALI +; _B6% 40, 10r80! FFF:LOCALI-;} | {& & &} | {^ B7% 40, 10r80! FFF:OSPITI +; _B8% 40, 10r80! FFF:OSPITI-;}}} _ {-r10% 95 {fb * 10 {^ B9% 30, 10r80! FFF:CRONO; |L9G:0;} | {LAG: 0; | ^ BA % 30, 10r80! FFF:TIMEOUT;}}} _ {fb * 15 {^ B2% 40, 10r80! FFF:EXIT;}}}
Het deelvenster wordt tijdens runtime dynamisch beheerd door een aanroep naar een functie in aanmerking te nemen de waarden van variabelen:
VOID sendScoreboardScreen () {}
Serial.Print (P ("$P: D! F90; {^ {! 000 98% {{-r10% 95, 10 * 15 {Tfbi #FF0: "));
Serial.Print(logo2);
Serial.Print (P (";}}" _ {-r10% 95,50 {{% 95,10 {{% 20 * 10M1fbi #"));
Als ((modus == 0 & & taak == 1) || (mode == 1)) {Serial.print(P("F00"));} else {Serial.print(P("000"));};
Serial.Print (P (": RISULTATO;} | {% 20 * 10M2fbi #"));
Als ((modus == 0 & & taak == 2) || (mode == 2)) {Serial.print(P("F00"));} else {Serial.print(P("000"));};
Serial.Print (P (": CRONO;} | {% 20 * 10M3fbi #"));
Als ((modus == 0 & & taak == 3) || (mode == 3)) {Serial.print(P("F00"));} else {Serial.print(P("000"));};
Serial.Print (P (": TEMPO;} | {% 20 * 10M4fbi #"));
Als ((modus == 0 & & taak == 4) || (mode == 4)) {Serial.print(P("F00"));} else {Serial.print(P("000"));};
Serial.Print(P(":timeout;}}}"));
Serial.Print(P("_{%95*12{^%45{"));
Als (Ab2! = OFF_EXTRA) {}
Serial.Print(P("LI5:"));
Als (Ab2 == UNO_EXTRA) {Serial.print("1");} else {Serial.print(Ab2);};
Serial.Print(P(";"));
};
Als (Ab1! = OFF) {}
Serial.Print(P("L15:"));
Serial.Print(Ab1);
Serial.Print(P(";"));
};
Als (Ab0! = OFF) {}
Serial.Print(P("L25:"));
Serial.Print(Ab0);
Serial.Print(P(";"));
};
Serial.Print (P ("}} | {^%45{"));
Als (Bb2! = OFF_EXTRA) {}
Serial.Print(P("LJ5:"));
Als (Bb2 == UNO_EXTRA) {Serial.print("1");} else {Serial.print(Bb2);};
Serial.Print(P(";"));
};
Als (Bb1! = OFF) {}
Serial.Print(P("L35:"));
Serial.Print(Bb1);
Serial.Print(P(";"));
};
Als (Bb0! = OFF) {}
Serial.Print(P("L45:"));
Serial.Print(Bb0);
Serial.Print(P(";"));
};
Serial.Print(P("}}}_{%95,10{{%20*15M5fbi#"));
Als ((modus == 0 & & taak == 1) || (mode == 1)) {Serial.print(P("0F0"));} else {Serial.print(P("000"));};
Serial.Print (P (": LOCALI;} | {& & & & & & & & & &} | {% 20 * 15M6fbi #"));
Als ((modus == 0 & & taak == 1) || (mode == 1)) {Serial.print(P("0F0"));} else {Serial.print(P("000"));};
Serial.Print(P(":OSPITI;}}}"));
Serial.Print (P ("_ {! 228,114% 98 {{-r10% 95 {fb * 10 {^ B5% 40, 10r80! FFF:LOCALI +; _B6% 40, 10r80! FFF:LOCALI-;} "));
Serial.Print (P ("| {} & & &} | {^ B7% 40, 10r80! FFF:OSPITI +; _B8% 40, 10r80! FFF:OSPITI-;}}} _ {-r10% 95 {fb * 10 {^ B9% 30, 10r80! FFF:CRONO; |L9G: "));
Serial.Print(timer);
Serial.Print (P (";} | {LAG: "));
Serial.Print(Timeout);
Serial.Print (P ("; | ^ BA % 30, 10r80! FFF:TIMEOUT;}}} _ {fb * 15 {^ B2% 40, 10r80! FFF:ESCI;}}} "));
Serial.println("");
screenId = scoreboardScreenId;
};
