Contrôlé à distance tableau de bord multifonction basé sur firmware Arduino, ESP8266 et uPanel : développement de l’interface (3 / 5 étapes)

Étape 3: INTERFACE

L’interface est composée de 6 panneaux de l’écran comme indiqué dans Figg. 6 à 11.

Certains d'entre eux sont des panneaux statiques, c'est-à-dire ils ne changent pas leur look lors de l’exécution, tandis que d’autres sont dynamiques et changent de look pendant l’exécution sur la base de l’Arduino croquis des valeurs variables. Un bon exemple du panel dynamique est indiqué dans la Fig. 8 ; Ce panneau simule ce qui est affiché sur le MFS réel reproduire la mise en page statique conçu à l’étape 2.

L’utilisation de panneaux qui simulent le statut de l’objet réel (dans ce cas, le statut de la MFS) est recommandée pendant la conception, de développement et de test de l’interface µPanel afin d’achever tant l’interface et l’esquisse de l’Arduino (ou tout autre logiciel de microcontrôleur) en évitant l’utilisation du matériel réel.

Fig.12 figurent les transitions possibles entre les panneaux.

Afin de rendre facile le développement des panneaux une en ligne, simulateur de panneau est disponible à http://www.miupanel.com/Panel-Design/ONLINE-PANEL...

Au moment de la publication de cette Instructables sur ligne simulateur de panneau est disponible seulement pour la visualisation d’une chaîne qui définit la disposition du panneau. La structure de la chaîne décrivant un panneau et toutes les options graphiques fournies sont très bien expliquées à http://www.miupanel.com/. Ici, il suffit d’indiquer qu’un groupe d’experts a une mise en page structurée sous forme de tableau et chaque élément du tableau, appelé conteneur, peut être structurée sous forme de tableau ainsi et ainsi de suite. Options de visualisation peuvent être indiquées pour chaque élément du tableau ou pour les groupes d’éléments du tableau. Macro peut également être utilisé pour des opérations répétitives.

Dans l’élaboration d’un panneau il faut faire attention à la grande diversité des brakets qui peut facilement conduire à une erreur alors, afin de stocker la chaîne de caractères décrivant un panneau, il est recommandé d’utiliser un fichier texte et une approche de conception descendante.

Le processus suivant a été utilisé pour définir le panneau illustré à la Fig. 7.

Groupe d’experts a été subdivisé dans des conteneurs principaux avec des options pour les dimensions, les styles, les couleurs d’arrière-plan et de premier plan.

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

Copie et collage de la chaîne dans le simulateur de panel en ligne le tableau représenté dans la Fig. 13 a est obtenu. Le disponible orange (!. F90) zone est subdivisée en 2 conteneurs principaux. Le premier contient encore 4 conteneurs avec fond blu diffusée (! 228 114), contour blanc arrondi (r30) (-) et la dimension de 90 pour cent (90 %) de la dimension horizontale entière du récipient qui les contient ; les 4 conteneurs sont alignés (_). Le conteneur de ce dernier contient, pour le moment, uniquement du texte.

Le panneau final est ensuite réalisé détaillant le contenu et le style de chaque conteneur comme détaillé ci-après et illustré à la figure de 13 a à 13h.

Section 1 ({T:SEZIONE1;}) a été divisé en 2 sections sur les différentes lignes et la même chose pour la section 2 ({T:SEZIONE2;}) :

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

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

Remplacer chaque sous-chaîne le tableau représenté dans Fig.13b est obtenu.

Section 1.1 ({T:SEZIONE1.1;}) a été détaillé d’inclure 4 conteneurs en 2 rangées (_) et 2 colonnes (|) pour contenir les boutons pour incrémenter et décrémenter le score du match :

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

Section 1.2 ({T:SEZIONE1.2;}) a été détaillé d’inscrire 2 couple de 3 chiffres verts à 2 colonnes :

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

Fig.13C montre le résultat.

Continuant de détailler tous les conteneurs...

{T:SEZIONE2.1}:--> {fb * 10 {^ B9 % 30, 10r80 ! FFF:CRONO ; |L9G:0;} | {DÉCALAGE: 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;}}}

... nous obtenons le résultat illustré dans Fig.13f.

Dans ce cas, il est possible d’éviter l’horizontale et de barres de défilement verticales essaient d’adapter le panneau aux dimensions appareil utilisant le style w (Dw! F90 ; au lieu D ! F90;).

Le résultat s’affiche dans Fig.13g (Fig. 13h ajuste seulement le rayon contour).

Le sketch Arduino implémente la version dynamique du panneau illustré à la Fig. 13 h via un appel à une fonction qui subdivisent la chaîne en sous-chaînes de panneau et inclut des valeurs de variables d’exécution.

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;} | {DÉCALAGE: 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: ")) ;

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

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

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

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

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

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

Si (screenId == startScreenId) {/ / écran actuel est écran Démarrer

handleStart() ;

};

screenId = matchPrimaryScreenId ;

};

Le panneau final est indiqué dans Fig.13h.

La chaîne complète de Fig.13h est la suivante.

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;} | {DÉCALAGE: 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;}}}

Pour la définition des autres panneaux de la même technique a été utilisée. En particulier l’écran du tableau de bord de la Fig. 9 est défini de manière statique comme suit (voir 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;} | {DÉCALAGE: 0; | ^ BA 30 %, 10r80 ! FFF:TIMEOUT;}}} _ {fb * 15 {^ B2 % 40, 10r80 ! FFF:EXIT;}}}

Lors de l’exécution, le panneau est dynamiquement géré par un appel à une fonction de prendre en compte les valeurs des variables :

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

Si ((mode == 0 & & tâche == 1) || (mode == 1)) {Serial.print(P("F00"));} else {Serial.print(P("000"));} ;

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

Si ((mode == 0 & & tâche == 2) || (mode == 2)) {Serial.print(P("F00"));} else {Serial.print(P("000"));} ;

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

Si ((mode == 0 & & tâche == 3) || (mode == 3)) {Serial.print(P("F00"));} else {Serial.print(P("000"));} ;

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

Si ((mode == 0 & & tâche == 4) || (mode == 4)) {Serial.print(P("F00"));} else {Serial.print(P("000"));} ;

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

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

Si (Ab2! = OFF_EXTRA) {}

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

Si (Ab2 == UNO_EXTRA) {Serial.print("1");} else {Serial.print(Ab2);} ;

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

};

Si (Ab1! = OFF) {}

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

Serial.Print(AB1) ;

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

};

Si (Ab0! = OFF) {}

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

Serial.Print(Ab0) ;

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

};

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

Si (Bb2! = OFF_EXTRA) {}

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

Si (Bb2 == UNO_EXTRA) {Serial.print("1");} else {Serial.print(Bb2);} ;

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

};

Si (Bb1! = OFF) {}

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

Serial.Print(Bb1) ;

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

};

Si (Bb0! = OFF) {}

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

Serial.Print(Bb0) ;

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

};

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

Si ((mode == 0 & & tâche == 1) || (mode == 1)) {Serial.print(P("0F0"));} else {Serial.print(P("000"));} ;

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

Si ((mode == 0 & & tâche == 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 (";} | {GAL: ")) ;

Serial.Print(timeout) ;

Serial.Print (P («; | ^ BA 30 %, 10r80 ! FFF:TIMEOUT;}}} _ {fb * 15 {^ B2 % 40, 10r80 ! FFF:ESCI;}}} ")) ;

Serial.println("") ;

screenId = scoreboardScreenId ;

};