Fjärrstyrd Multifunktion resultattavlan bygger på Arduino, ESP8266 och uPanel firmware: gränssnitt utveckling (3 / 5 steg)

Steg 3: gränssnitt

Gränssnittet består av 6 skärmen paneler som visas i Figg. 6 till 11.

Några av dem är statiska paneler, dvs de ändrar inte deras utseende vid körning medan andra är dynamiska och ändra deras utseende vid körning på grundval av Arduino skiss variabelvärden. Ett bra exempel på dynamisk panel visas i Fig.8; denna panel simulerar vad som visas på verkliga MfSen reproducera den statiska layout utformad på steg 2.

Användning av paneler som simulerar verkliga objektstatus (i detta fall MFS status) rekommenderas under design, utveckling och test av µPanel-gränssnittet för att slutföra både gränssnittet och Arduino skiss (eller någon annan microcontroller programvara) undviker att använda riktig hårdvara.

I Fig.12 visas de möjliga övergångarna mellan panelerna.

För att göra enkel paneler utvecklingen en on-line finns panel simulator på http://www.miupanel.com/Panel-Design/ONLINE-PANEL...

Vid tidpunkten för offentliggörandet av detta Instructables raden på är panelen simulator endast tillgänglig för visualisering av en sträng som definierar Kontrollpanelens layout. Strukturera av den sträng som beskriver en panel och alla grafiska alternativen är mycket väl förklaras på http://www.miupanel.com/. Här är det tillräckligt att ange att en panel har en layout strukturerad som en matris och varje element i matrisen, kallas behållare, kan struktureras som en matris också och så vidare. Visualisering alternativ kan anges för varje vektorelement eller för grupper av arrayelement. Makrot kan också användas för upprepade operationer.

Utveckla en panel rekommenderas är det nödvändigt att uppmärksamma det stora antalet brakets som leder lätt till ett misstag så, för att lagra den sträng som beskriver en panel, det att använda en textfil och en top-down design strategi.

Följande process har använts för att definiera panel visas i Fig7.

Panelen har varit indelade i stora behållare med några alternativ för dimensioner, stilar, bakgrund och förgrund färger.

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;}}

Kopiera och klistra in strängen i online-panelen simulatorn panelen visas i Fig. 13a erhålls. Den tillgängliga orange (!. F90) område är indelad i 2 stora behållare. Förra innehåller ytterligare 4 behållare med blu spridde ut bakgrunden (! 228,114), vit rundad (r30) kontur (-) och dimension 90 procent (90%) av hela horisontella dimensionen av behållaren som innehåller dem. 4 behållarna är arrangera i rak linje (_). Den sistnämnda behållaren innehåller, för tillfället bara text.

Den sista panelen uppnås då beskriver innehållet och stilen i varje behållare som beskrivs i följande och visas i Fig från 13a till 13h.

Avsnitt 1 ({T:SEZIONE1;}) har varit uppdelat i 2 delar på olika rader och samma sak för avsnitt 2 ({T:SEZIONE2;}):

{T:SEZIONE1;}:--> {{T:SEZIONE1.1;} _ {T:SEZIONE1.2;}}

{T:SEZIONE2;}:--> {{T:SEZIONE2.1;} _ {T:SEZIONE2.2;}}

Ersätta varje delsträng panelen visas i Fig.13b erhålls.

Avsnitt 1.1 ({T:SEZIONE1.1;}) har varit detaljerade 4 behållare i 2 rader (_) och 2 kolumner (|) innehåller knappar för att öka och minska den match poängen:

{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-;}}

Avsnitt 1.2 ({T:SEZIONE1.2;}) har varit detaljerade att inkludera 2 par 3 gröna siffror i 2 kolumner:

{T:SEZIONE1.2}:--> {* 10 {-r30! 228,114 {LI5:0; & L15:0; & L25:0;}} | {& &} | {-r30! 228,114 {LJ5:0; & L35:0; & L45:0;}}}

Fig.13c visar resultatet.

Fortsätter att i detalj alla behållare...

{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;}}}

... vi får resultatet visas i Fig.13f.

I detta fall är det möjligt att undvika vågrätt och lodräta rullningslister försöka anpassa panelen till enhet dimensioner med formatmallen w (Dw! F90, i stället för D! F90;).

Resultatet visas i Fig.13g (Fig. 13h justerar bara kontur radie).

Arduino skiss implementerar den dynamiska versionen av panelen visas i Fig. 13 h via ett anrop till en funktion som dela upp panelen strängen i delsträngar och inkluderar runtime variabler värden.

void sendMatchPrimaryScreen () {

Serial.Print (P ("$P: D! F90; {^ {-r30! 228,114% 90 {{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-;}} _ {* 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: "));

om (defGame == 0) {Serial.print(P("RIGORI"));}

om (defGame == 1) {Serial.print(P("RIGORI"));}

om (defGame == 2) {Serial.print(P("TIRI"));}

om (defGame == 3) {Serial.print(P("***"));}

om (defGame == 4) {Serial.print(P("RIGORI"));}

om (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("");

om (screenId == startScreenId) {/ / aktuella skärmen är starta skärmen

handleStart();

};

screenId = matchPrimaryScreenId;

};

Den sista panelen visas i Fig.13h.

Den kompletta snören av Fig.13h är som följer.

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;}}}

Samma teknik har använts för definitionen av de andra panelerna. I synnerhet definieras skärmen resultattavlan i Fig. 9 statiskt enligt följande (se 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;}}}

Vid körning hanteras på panelen dynamiskt av ett anrop till en funktion att ta hänsyn till värden för variabler:

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 #"));

om ((läge == 0 & & uppgift == 1) || (mode == 1)) {Serial.print(P("F00"));} annat {Serial.print(P("000"));};

Serial.Print (P (": RISULTATO;} | {% 20 * 10M2fbi #"));

om ((läge == 0 & & uppgift == 2) || (mode == 2)) {Serial.print(P("F00"));} annat {Serial.print(P("000"));};

Serial.Print (P (": CRONO;} | {% 20 * 10M3fbi #"));

om ((läge == 0 & & uppgift == 3) || (mode == 3)) {Serial.print(P("F00"));} annat {Serial.print(P("000"));};

Serial.Print (P (": TEMPO;} | {% 20 * 10M4fbi #"));

om ((läge == 0 & & uppgift == 4) || (mode == 4)) {Serial.print(P("F00"));} annat {Serial.print(P("000"));};

Serial.Print(P(":timeout;}}}"));

Serial.Print(P("_{%95*12{^%45{"));

om (Ab2! = OFF_EXTRA) {

Serial.Print(P("LI5:"));

om (Ab2 == UNO_EXTRA) {Serial.print("1");} annat {Serial.print(Ab2);};

Serial.Print(P(";"));

};

om (Ab1! = OFF) {

Serial.Print(P("L15:"));

Serial.Print(AB1);

Serial.Print(P(";"));

};

om (Ab0! = OFF) {

Serial.Print(P("L25:"));

Serial.Print(Ab0);

Serial.Print(P(";"));

};

Serial.Print (P ("}} | {^%45{"));

om (Bb2! = OFF_EXTRA) {

Serial.Print(P("LJ5:"));

om (Bb2 == UNO_EXTRA) {Serial.print("1");} annat {Serial.print(Bb2);};

Serial.Print(P(";"));

};

om (Bb1! = OFF) {

Serial.Print(P("L35:"));

Serial.Print(Bb1);

Serial.Print(P(";"));

};

om (Bb0! = OFF) {

Serial.Print(P("L45:"));

Serial.Print(Bb0);

Serial.Print(P(";"));

};

Serial.Print(P("}}}_{%95,10{{%20*15M5fbi#"));

om ((läge == 0 & & uppgift == 1) || (mode == 1)) {Serial.print(P("0F0"));} annat {Serial.print(P("000"));};

Serial.Print (P (": LOCALI;} | {& & & & & & & & & &} | {% 20 * 15M6fbi #"));

om ((läge == 0 & & uppgift == 1) || (mode == 1)) {Serial.print(P("0F0"));} annat {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;

};