IHM FLProg + Nextion. Leçon 1


Bon aprĂšs-midi
Je veux parler d'un projet trÚs intéressant d'ITEAD STUDIO - un écran LCD couleur + capteur tactile résistif avec son propre contrÎleur, contrÎlé par l'UART "Nextion HMI". Ce projet est apparu sur la plateforme de financement participatif Indiegogo et, avec les 20 000 $ déclarés, le projet a permis de collecter plus de 45 000 $.
Un des utilisateurs du programme FLProg m'a envoyé un échantillon d'un tel panel pour examen. En commençant à travailler avec elle, j'ai été ravie de ses capacités, à un prix trÚs abordable. En termes de capacités, il est trÚs proche des panneaux IHM industriels et son éditeur est un systÚme SCADA presque complet. J'ai donc intégré la gestion de ce panel dans le projet FLProg.
Dans cette série de leçons, je vais vous expliquer comment travailler avec ce panneau et le gérer à partir du programme FLProg. La premiÚre leçon sera consacrée au programme Nextion Editor et à la création d'un projet de visualisation dans celui-ci.

Pour commencer, je vais fournir un tableau des caractéristiques des différents modÚles de panneaux
NX3224T024_011RNX3224T028_011R
La taille2,4 "2,4 "
Autorisation320 * 240320 * 240
Écran tactileRTPRTP
Nombre de couleurs6553665536
Flash (Mo)44
RAM (octet)20482048
La descriptionwiki.iteadstudio.com/NX3224T024wiki.iteadstudio.com/NX3224T028
NX4024T032_011RNX4827T043_011R
La taille3,2 "4.3 "
Autorisation400 * 240480 * 272
Écran tactileRTPRTP
Nombre de couleurs6553665536
Flash (Mo)416
RAM (octet)20482048
La descriptionwiki.iteadstudio.com/NX4024T032wiki.iteadstudio.com/NX4827T043
NX8048T050_011RNX8048T070_011R
La taille5,0 "7.0 "
Autorisation800 * 480800 * 480
Écran tactileRTPRTP
Nombre de couleurs6553665536
Flash (Mo)1616
RAM (octet)20482048
La descriptionwiki.iteadstudio.com/NX8048T050wiki.iteadstudio.com/NX8048T070

Téléchargez Nextion Editor sur le site Web du fabricant .
La fenĂȘtre principale du programme.



Lors de la création d'un nouveau projet ("Fichier" -> "Nouveau"), il faut d'abord sélectionner l'emplacement de stockage et le nom du nouveau projet. AprÚs cela, vous serez invité à sélectionner le modÚle de panneau utilisé, l'orientation de l'écran et l'encodage souhaité.





Pour prendre en charge les caractĂšres russes, vous devez utiliser le codage iso-8859-5.
ConsidĂ©rons une fenĂȘtre de programme avec un projet ouvert.



Zones de fenĂȘtre:
  1. Le menu principal.
  2. BibliothÚque d'éléments.
  3. BibliothĂšque d'images / bibliothĂšque de polices.
  4. Zone d'affichage.
  5. Liste des pages du projet
  6. Zone d'édition d'attribut de l'élément sélectionné.
  7. La fenĂȘtre de sortie des rĂ©sultats de compilation.
  8. Une fenĂȘtre pour entrer le code qui est exĂ©cutĂ© lorsqu'un Ă©vĂ©nement se produit.
  9. Le menu contrÎle l'alignement et l'ordre des éléments.

ImmĂ©diatement aprĂšs la crĂ©ation du projet, il crĂ©era la premiĂšre page avec l'index 0 avec le nom par dĂ©faut «page0». Ce nom peut ĂȘtre modifiĂ© en double-cliquant dessus et en saisissant un nouveau nom. Le nom de la page doit ĂȘtre unique dans le projet. AprĂšs avoir entrĂ© un nouveau nom de page, appuyez sur «EntrĂ©e».
Considérez le menu de la liste des pages (5).



- Ajouter une page.

- Supprimer la page. Les index de page seront recalculés pour éliminer les vides.

- Insérez une page devant celle sélectionnée. Les indices de page seront recalculés pour assurer la cohérence de haut en bas.

- Relevez la page de la liste. Les indices de page seront recalculés pour assurer la cohérence de haut en bas.

- Abaissez la page dans la liste. Les indices de page seront recalculés pour assurer la cohérence de haut en bas.

- Copiez la page sélectionnée. Une copie de la page en surbrillance sera ajoutée au bas de la liste.

- Supprimer toutes les pages.

Lorsque vous sélectionnez une page dans la liste, dans la zone d'édition d'attribut (6), il sera possible de modifier les paramÚtres de la page.



Lorsque vous sélectionnez un attribut spécifique, des informations supplémentaires sur l'attribut seront affichées au bas de cette zone.
Je n'ai pas complÚtement maßtrisé ou compris la nécessité de tous les attributs disponibles dans l'éditeur, donc je ne parlerai que de ceux que j'ai compris.

Attributs de page.
  • vscope - VisibilitĂ©. Valeurs possibles:
    • local - visibilitĂ© sur cette page
    • global – . .
  • sta – . :
    • no background – .
    • solid color – , “bco”
    • image – . “pic”. (3). . , , ,

L'attribut suivant dépend du mode de remplissage d'arriÚre-plan.
En mode «sans arriÚre-plan», cet attribut est absent.
En mode couleur unie, il s'agit de l'attribut bco. Il dĂ©termine la couleur du fond de la page. Le champ de couleur au format Hight Color s'affiche dans le champ de valeur de cet attribut. Un double-clic sur ce champ ouvre une fenĂȘtre de sĂ©lection des couleurs.



Cette fenĂȘtre est utilisĂ©e lors de la dĂ©finition des valeurs de tous les attributs associĂ©s Ă  la couleur.
En mode image, c'est l'attribut pic. Il dĂ©termine quelle image est utilisĂ©e pour l'arriĂšre-plan de la page. Un double-clic sur le champ de valeur de cet attribut ouvre la fenĂȘtre de sĂ©lection d'image.



Cette fenĂȘtre est Ă©galement utilisĂ©e dans le programme pour dĂ©finir les valeurs de tous les attributs associĂ©s Ă  l'image.
Les attributs restants affichent la taille de la page et sont modifiables, mais je ne recommande pas de les toucher, car le comportement de la page dans ce cas n'est pas prévisible.
Considérez maintenant la bibliothÚque d'images et la bibliothÚque de polices. Ils se trouvent respectivement dans la zone 3 des onglets «Image» et «Polices».

Onglet «Image».



L'onglet affiche les images chargées dans le projet, ainsi que leur index et leur taille.

Menu d'onglet.

- Ajouter une image. Lorsque vous cliquez sur ce bouton, la fenĂȘtre standard de sĂ©lection d'un fichier image sur un disque s'ouvre. Plusieurs choix sont possibles.

- Supprimez l'image sélectionnée. Les indices d'image seront recalculés pour éliminer les vides.

- Remplacez l'image sĂ©lectionnĂ©e. Cliquer sur ce bouton ouvrira une fenĂȘtre standard pour sĂ©lectionner un fichier image sur le disque. L'image sĂ©lectionnĂ©e remplacera l'image sĂ©lectionnĂ©e, non seulement dans la bibliothĂšque, mais aussi aux endroits oĂč elle est utilisĂ©e.

- InsĂ©rez une nouvelle image devant celle sĂ©lectionnĂ©e. Cliquer sur ce bouton ouvrira une fenĂȘtre standard pour sĂ©lectionner un fichier image sur le disque. L'image sĂ©lectionnĂ©e est insĂ©rĂ©e avant celle sĂ©lectionnĂ©e. Les indices d'image seront recalculĂ©s pour assurer la cohĂ©rence de haut en bas.

- Relevez l'image dans la liste. Les indices d'image seront recalculés pour assurer la cohérence de haut en bas.

- Abaissez l'image dans la liste vers le bas. Les indices d'image seront recalculés pour assurer la cohérence de haut en bas.

- supprimer toutes les images.

Onglet «Polices».



Cet onglet affiche les polices utilisées dans le projet. Pour ajouter une police à un projet, vous devez d'abord générer un fichier de police à l'aide de l'outil «Générateur de polices». Cet outil est appelé depuis le menu principal du programme "Outils" -> "Générateur de polices".



Dans la fenĂȘtre de cet outil, vous devez sĂ©lectionner la taille de la police, sĂ©lectionner la police source dans le systĂšme, le schĂ©ma (je n'ai honnĂȘtement pas compris de quoi il s'agit) et entrer le nom de la police qui sera affichĂ©e dans la liste des polices. Appuyez ensuite sur le bouton «GĂ©nĂ©rer la police». Cela vous demandera oĂč enregistrer la police et le nom du fichier. Le fichier de police est enregistrĂ© avec l'extension «.zi». Lorsque vous fermez la fenĂȘtre «GĂ©nĂ©rateur de polices», vous serez invitĂ© Ă  ajouter immĂ©diatement la police gĂ©nĂ©rĂ©e Ă  la bibliothĂšque de polices du projet.

Menu d'onglet.

- Ajoutez une police. Lorsque vous cliquez sur ce bouton, la fenĂȘtre standard de sĂ©lection du fichier de police sur le disque s'ouvre. Plusieurs choix sont possibles.

- Supprimez la police sélectionnée. Les indices de police seront recalculés pour éliminer les vides.

- Remplacez la police sĂ©lectionnĂ©e. Cliquer sur ce bouton ouvrira une fenĂȘtre standard pour sĂ©lectionner un fichier de police sur le disque. La police sĂ©lectionnĂ©e remplacera la police sĂ©lectionnĂ©e, non seulement dans la bibliothĂšque, mais aussi dans les endroits oĂč elle est utilisĂ©e.

- InsĂ©rez une nouvelle police avant celle sĂ©lectionnĂ©e. Cliquer sur ce bouton ouvrira une fenĂȘtre standard pour sĂ©lectionner un fichier de police sur le disque. La police sĂ©lectionnĂ©e est insĂ©rĂ©e avant la police sĂ©lectionnĂ©e. Les indices de police seront recalculĂ©s pour garantir la cohĂ©rence de haut en bas.

- Augmentez la police dans la liste. Les indices de police seront recalculés pour garantir la cohérence de haut en bas.

- Abaissez la police dans la liste. Les indices de police seront recalculés pour garantir la cohérence de haut en bas.

- Prévisualisez la police sélectionnée.

- supprimer toutes les polices.

Considérons maintenant la bibliothÚque d'éléments (2).



Des éléments sont ajoutés au projet en cliquant dessus. Des éléments graphiques sont ajoutés à la position 0 @ 0, la minuterie et la variable dans la ligne sous la zone d'écran.
Presque tous les éléments graphiques ont les attributs «objname», «vscope» et «sta». BriÚvement, j'ai déjà parlé des deux derniers dans le contexte de la page. Je vais développer un peu l'histoire.
  • «Objname» est le nom de l'Ă©lĂ©ment. UtilisĂ© lors de l'Ă©criture de code et lors de la requĂȘte d'attributs via UART.

L'attribut «vscope» détermine la disponibilité d'un élément pour changer ses attributs et peut avoir deux valeurs:
  • «Local» - vous ne pouvez lire et modifier les attributs d'un Ă©lĂ©ment que si la page sur laquelle il se trouve est active. Cela s'applique Ă  la fois au code exĂ©cutable sur le panneau lui-mĂȘme et aux demandes via UART.
  • «Global» - vous pouvez lire et modifier les attributs d'un Ă©lĂ©ment Ă  tout moment. Cela s'applique Ă  la fois au code exĂ©cutable sur le panneau lui-mĂȘme et aux demandes via UART. Lorsque vous utilisez cette valeur d'attribut, vous devez surveiller l'unicitĂ© du nom tout au long du projet.

L'attribut sta définit le mode de remplissage d'arriÚre-plan d'un élément et peut avoir les valeurs suivantes:
  • «Couleur unie» - remplissez l'arriĂšre-plan de couleur unie.
  • «Image» - utilisez une image comme arriĂšre-plan. La taille de l'article est ajustĂ©e Ă  la taille de l'image.
  • «Crop image» est la traduction littĂ©rale de «crop image». En termes de sens, il se rapproche, curieusement, d'un fond transparent. L'idĂ©ologie est la suivante. L'arriĂšre-plan est pris comme une image, mais il est superposĂ© aux coordonnĂ©es nulles de la page. Comme arriĂšre-plan de l'Ă©lĂ©ment, une partie de l'image est utilisĂ©e qui coĂŻncide avec la projection de l'Ă©lĂ©ment sur la zone de page. Mais c'est plus facile Ă  essayer qu'Ă  expliquer.

Dans la liste des attributs (6), certains d'entre eux sont affichĂ©s en vert. Ces attributs sont disponibles pour la lecture et l'Ă©criture Ă  la fois Ă  l'aide de l'exĂ©cutable de code sur le panneau lui-mĂȘme et Ă  l'aide de commandes via UART. Les attributs affichĂ©s en noir ne sont modifiĂ©s que par l'Ă©diteur au stade du dĂ©veloppement du projet.
Considérez les articles disponibles.

- Champ avec texte.

Attributs des éléments:
  • “objname”
  • “vscope”
  • “sta”
  • “bco” – . “solid color” “sta”
  • “pic” – . “image” “sta”
  • “pic” – . “crop image” “sta”
  • “pco” – . – Hight Color,
  • “font” – , .
  • “xcen” – . :
    • 0 –
    • 1 –
    • 2 —
  • “ycen” – . :
    • 0 –
    • 1 –
    • 2 –
  • “txt” –
  • “txt-maxl” – . “txt” , .
  • “x” “y” –
  • “w” “h” – , .



- Un champ avec une valeur numérique.
Attributs des éléments:
  • “objname”
  • “vscope”
  • “sta”
  • “bco” – . “solid color” “sta”
  • “pic” – . “image” “sta”
  • “pic” – . “crop image” “sta”
  • “pco” – . – Hight Color .
  • “font” – , .
  • “xcen” – . :
    • 0 –
    • 1 –
    • 2 —
  • “ycen” – . :
    • 0 –
    • 1 –
    • 2 –
  • “val” – . 0 4294967295. .
  • “lenth” – . 0 10. – , , “val” “ lenth ” , “val” “ lenth ” .
  • “x” “y” –
  • “w” “h” – , .



- Bouton sans fixation.
Attributs des éléments:
  • “objname”
  • “vscope”
  • “sta”
  • “bco” – . “solid color” “sta”
  • “bco2” – . “solid color” “sta”
  • “pic” – . “image” “sta”
  • “pic2” – . “image” “sta”
  • “pic” – . “crop image” “sta”
  • “pic2” – . “crop image” “sta”
  • “pco” – . – Hight Color.
  • “pco2” – . – Hight Color.
  • “font” – , .
  • “xcen” – . :
    • 0 –
    • 1 –
    • 2 —
  • “ycen” – . :
    • 0 –
    • 1 –
    • 2 –
  • “txt” – .
  • “txt-maxl” – . “txt” , .
  • “x” “y” –
  • “w” “h” – .



- Barre de progression. Affiche la rĂšgle remplie par la valeur de pourcentage dĂ©finie. Une solution trĂšs intĂ©ressante est mise en Ɠuvre Ă  l'aide d'images. Il y a deux images. Par exemple, un thermomĂštre. L'un est vide (0%), l'autre plein (100%).

AprÚs l'avoir lié à l'élément, la barre de progression, en fonction de la valeur définie, affiche une partie de la premiÚre image et une partie de la seconde.

Attributs des éléments:
  • “objname”
  • “vscope”
  • “sta” – : “solid color” “image”
  • “dez” – . :
    • “horizontal” –
    • “vertical” –
  • “bco” – 0%. “solid color” “sta”
  • “co” – 100%. “solid color” “sta”
  • “bpic” – 0%. “image” “sta”
  • “ppic” – 100%. “image” “sta”
  • “val” – . : 0 100.
  • “x” “y” –
  • “w” “h” – .



-Image
Attributs des éléments:
  • “objname”
  • “vscope”
  • “pic” – .
  • “x” “y” –
  • “w” “h” – .



- Image recadrée.
Attributs des éléments:
  • “objname”
  • “vscope”
  • “pic” – .
  • “x” “y” –
  • “w” “h” –



- Bouton invisible.
Attributs des éléments:
  • “objname”
  • “vscope”
  • “x” “y” –
  • “w” “h” –



- Indicateur à cadran. Affiche une flÚche tournée d'un angle donné.
Attributs des éléments:
  • “objname”
  • “vscope”
  • “sta” : “solid color” “crop image”
  • “bco” – . – Hight Color. “solid color” “sta”
  • “pic” – . “crop image” “sta”
  • “val” – 0 360.
  • “wid” – . 0 5.
  • “pco” – . – Hight Color.
  • “x” “y” –
  • “w” “h” – .



- Calendrier. Un élément construit un graphe par points qui lui sont transmis par du code exécuté sur le panneau ou via UART. Prend en charge jusqu'à quatre graphiques affichés simultanément. De mon point de vue, l'élément n'est pas encore terminé. Je décrirai ci-dessous la raison de cette opinion.
Attributs des éléments:
  • “objname”
  • “vscope”
  • “dir” – . :
    • “left to right” –
    • “right ti left” –
  • “sta”
  • “ch” – . 1 4.
  • “bco” – . – Hight Color. “solid color” “sta”
  • “pic” – . “image” “sta”
  • “pic” – . “crop image” “sta”
  • “co0” – 1.
  • “co1” – 2. “ch” 1.
  • “co2” – 3. “ch” 2.
  • “co3” – 4. “ch” 3.
  • “x” “y” –
  • “w” “h” – .



- Slyler
Attributs des éléments:
  • “objname”
  • “vscope”
  • “mode” – . :
    • “horizontal” –
    • “Vertical” –
  • “sta”
  • “psta” – . :
    • “solid” – .
    • “image” – .
  • “bco” – . – Hight Color. “solid color” “sta”
  • “pic” – . “image” “sta”
  • “pic” – . “crop image” “sta”
  • “co” – . “solid” “psta”
  • “ic2” – . “image” “psta ”
  • “wid” – .
  • “hig” – .
  • “val” – .
  • “maxval” – .
  • “minval” –
  • “x” “y” –
  • “w” “h” – .



-Interrupteur Ă  deux positions fixes.
Attributs des éléments:
  • “objname”
  • “vscope”
  • “sta”
  • “bco0” – 0. “solid color” “sta”
  • “bco1” – 1. “solid color” “sta”
  • “pic0” – 0. “image” “sta”
  • “pic1” – 1. “image” “sta”
  • “pic0” – 0. “crop image” “sta”
  • “pic1” – 1. “crop image” “sta”
  • “val” – . 0 1
  • “x” “y” –
  • “w” “h” – .



Considérez maintenant les éléments non affichables. Lorsqu'ils sont ajoutés à une page, ils ne sont pas ajoutés à l'écran, mais se trouvent sur un panneau d'édition spécial.



- Variable. Il est utilisé pour utiliser le stockage de données pour les calculs effectués en code directement sur le panneau. Selon le type, il stocke soit une valeur numérique soit une chaßne
Attributs des éléments:
  • “objname”
  • “vscope”
  • “sta” — . :
    • “Number” –
    • “String” –
  • “val” – . “Number” “sta”
  • “txt” – . “String” “sta”
  • “txt-maxl” – . “String” “sta”



-Timer. Déclenche périodiquement l '«événement du minuteur» aprÚs un temps spécifié.
Attributs des éléments:
  • “objname”
  • “vscope”
  • “tim” – . 50 ms. 65535 ms.
  • “en” – . 0 – , – 1 .



Le comportement des éléments globaux et locaux.

Les Ă©lĂ©ments locaux lors du rendu de la page Ă  laquelle ils sont attachĂ©s sont toujours initialisĂ©s avec les valeurs attribuĂ©es au moment du dĂ©veloppement du projet. Lorsqu'une page est affichĂ©e, ces valeurs peuvent ĂȘtre modifiĂ©es Ă  l'aide du code exĂ©cutĂ© sur le panneau ou via UART, mais lorsque vous passez Ă  une autre page, toutes les valeurs d'attribut modifiĂ©es sont rĂ©initialisĂ©es Ă  celles dĂ©finies lors du dĂ©veloppement. Les valeurs des attributs des Ă©lĂ©ments globaux ne changent pas lors du passage d'une page Ă  l'autre.
L'élément «Waveform» (Graph) ne fonctionne pas en mode global et se comporte en tout cas comme un élément local. Lorsque vous accédez à la page à laquelle elle est attachée, elle est toujours dessinée vide et avec les paramÚtres définis lors du développement. TrÚs probablement, puisque le projet Nextion HMI est assez jeune, cet élément n'est tout simplement pas terminé.

Ecrire du code exécutable sur le panneau.

Le code exĂ©cutĂ© sur le panneau a une base Ă©vĂ©nementielle. Autrement dit, le code lui-mĂȘme est Ă©crit dans les gestionnaires d'Ă©vĂ©nements des Ă©lĂ©ments et exĂ©cutĂ© lorsque les Ă©vĂ©nements correspondants se produisent.
Tout d'abord, considérez les événements qui se produisent sur le panneau.

ÉvĂ©nements de page:



  • Preinitialize Event - un Ă©vĂ©nement se produit avant le rendu de la page.
  • ÉvĂ©nement post-initialisation - l'Ă©vĂ©nement se produit immĂ©diatement aprĂšs le rendu de la page.
  • Touch Press Event - un Ă©vĂ©nement se produit lorsque vous cliquez sur l'Ă©cran dans un endroit libre d'autres Ă©lĂ©ments. Lorsque vous cliquez sur un Ă©lĂ©ment, un Ă©vĂ©nement est appelĂ© dessus.
  • Touch Release Event - un Ă©vĂ©nement se produit aprĂšs avoir relĂąchĂ© une zone prĂ©cĂ©demment pressĂ©e d'une page exempte d'autres Ă©lĂ©ments.


Tous les éléments, à l'exception de ceux qui ne sont pas affichés, ont deux gestionnaires d'événements - appuyer et relùcher.



  • Touch Press Event - un Ă©vĂ©nement se produit lorsque vous cliquez sur un Ă©lĂ©ment
  • Touch Release Event - un Ă©vĂ©nement se produit aprĂšs avoir relĂąchĂ© un Ă©lĂ©ment prĂ©cĂ©demment appuyĂ©.


L'élément Slider a un événement «Touch Move» qui se produit chaque fois que le curseur se déplace vers une position d'ode.



L'élément Timer a un seul gestionnaire pour l'événement timer - l '«événement Timer».



Commandes d'opération et instructions conditionnelles prises en charge par le panneau

Go to page

page argument - go to page. L'argument peut ĂȘtre soit le nom, soit l'index de la page.
Exemple - lorsque vous cliquez sur le bouton, vous accédez à la page page1 avec l'index 1. La commande est écrite dans le gestionnaire d'événements Touch PressEven:

page  page1

ou
page 1




Écriture ou lecture de

la valeur de l' attribut Lecture de la valeur du nom de l'
élément d' argument Nom de l' argument
ou de la
page. nom d'élément.

argument Écrivez la valeur dans l'argument
nom d'élément. argument = valeur
ou
nom de page. élément nom.argument = valeur

Exemple: En appuyant sur le bouton, la valeur de l'argument «val» du champ avec une valeur numérique avec le nom «n0» est réécrite dans l'argument «val» du champ avec une valeur numérique avec le nom «n1». De plus, à partir de l'argument «txt» du champ de texte avec le nom «t0», la ligne sera réécrite dans l'argument «txt» du champ de texte avec le nom «t1». Tous les éléments sont sur la page avec le nom «page0».



La conversion de type
cov value1, value2, est longue oĂč:
  • value1 - attribut source, par exemple n0.val
  • valeur2 - attribut de rĂ©cepteur de telle t0.txt
  • long - la longueur de la chaĂźne. S'il est rĂ©glĂ© sur 0, dĂ©tection automatique. S'il y a une conversion d'un nombre en chaĂźne, c'est la longueur de l'attribut cible; si la chaĂźne est convertie en nombre, c'est la longueur de l'attribut source.

Si les types de l'attribut source et de l'attribut rĂ©cepteur sont les mĂȘmes, une erreur de compilation sera Ă©mise

Exemples.
  1. Lorsque le bouton est enfoncé, la valeur de l'attribut "txt" (chaßne) du champ de texte "t0" est convertie en nombre et écrite dans l'argument "val" (numéro) du champ avec la valeur numérique "n0"
  2. La valeur d'attribut "val" (nombre) du champ avec la valeur numérique "n0" est convertie en nombre lorsque le bouton est enfoncé et écrite dans l'argument "txt" (chaßne) du champ de texte "t0"


Opérations mathématiques.

Les opérations d'addition (+), de soustraction (-), de multiplication (*) et de division (/) sont prises en charge. Veuillez noter que le panneau ne peut fonctionner qu'avec des nombres entiers positifs.

Un exemple.

Lorsque le bouton est enfoncé, la minuterie commence à fonctionner et ajoute un à la valeur du champ n0. Lorsque vous relùchez le bouton, le décompte se termine.

ParamÚtres du minuteur «tm0» L'


argument «tim» est de 1000 ms. Lorsque la minuterie est en cours d'exécution, l '«événement de minuterie» est déclenché une fois toutes les 1000 millisecondes.
L'argument «en» est 0. Par défaut, le minuteur est désactivé.

Le code dans le «Touch Press Event» est une copie.


Lorsque le bouton est enfoncé, la valeur de l'argument «en» du minuteur «tm0» est entrée 1. C'est-à-dire que le minuteur démarre.

Le code dans le «Touch Release Event» est une copie.


Lorsque vous relùchez le bouton, la valeur de l'argument «en» du minuteur «tm0» est entrée 0. Autrement dit, le minuteur est désactivé.

Code dans "Timer Event" du temporisateur "tm0".


Chaque fois que le temporisateur est dĂ©clenchĂ©, un est ajoutĂ© Ă  la valeur de l'argument "val" du champ numĂ©rique "n0" et Ă©crit dans le mĂȘme argument.

DĂ©clarations conditionnelles.

Exemples d'enregistrement:

if(t0.txt==”123456”)
{    
age 1
}

Si les valeurs de l'attribut «txt» du champ de texte «t0» sont égales à «123456», accédez à la page avec l'index 1.

if(b0.txt==”start”)
{    
  b0.txt==”stop”  
} else
{ 
  b0.txt==”start”  
}

Si les valeurs de l'attribut "txt" du bouton "t0" sont Ă©gales Ă  "start", alors nous Ă©crivons la valeur "stop" dans cet attribut, sinon, nous Ă©crivons la valeur "stop" dans cet attribut.

if(b0.txt==”1”)
{    
  b0.txt==”2”  
} else if (b0.txt==”2” )
{ 
  b0.txt==”3”  
}else
{ 
  b0.txt==”1”
}

Si les valeurs de l'attribut "txt" du bouton "t0" sont "1", alors nous écrivons la valeur "2" dans cet attribut différemment: (si les valeurs de l'attribut "txt" du bouton "t0" sont "2", nous écrivons la valeur "3" dans cet attribut; sinon, écrivez cet attribut a une valeur de "1").

Opérateurs de comparaison possibles:
  • Pour les valeurs numĂ©riques
    • > plus
    • <moins
    • == est Ă©gal
    • ! = diffĂ©rent
    • > = supĂ©rieur ou Ă©gal
    • <= infĂ©rieur ou Ă©gal
  • Pour les valeurs de chaĂźne
    • == est Ă©gal
    • ! = diffĂ©rent


Les opérateurs «()» et de communication imbriqués ne sont pas autorisés, par exemple, vous ne pouvez pas utiliser la construction suivante: if (j0.val + 1> 0). Pour résoudre ces problÚmes, il est nécessaire d'utiliser des variables.

«If» et «else if» imbriqués sont pris en charge.

DĂ©bogage d'un projet.

Nextion Editor comprend un simulateur de projet. Pour le dĂ©marrer, appuyez sur le bouton «Debug» ( ) du menu principal. Dans ce cas, le projet sera compilĂ© et ouvert dans le simulateur oĂč vous pourrez vĂ©rifier le projet.



Chargement du projet dans le panneau.

Il existe deux méthodes pour charger un projet dans le panneau.
La premiÚre méthode consiste à utiliser UART. Cela nécessite un adaptateur USB -> UART. Nous le connectons conformément au tableau.
Nextion HMIUSB -> UART
+ 5V+ 5V
RxTX
TXRx
GNDGND

Dans l'Ă©diteur, cliquez sur le bouton «TĂ©lĂ©charger» ( ) du menu principal. Dans ce cas, le projet est compilĂ© et la fenĂȘtre de tĂ©lĂ©chargement s'ouvre.



Vous pouvez installer immédiatement le port sous lequel l'adaptateur est installé dans le systÚme, vous pouvez quitter la recherche automatique. Cliquez sur "GO" et le projet commence à se charger dans le panneau.



Dans le cas de grands projets, notamment avec des ressources importantes sous forme d'images et de polices, le temps de chargement peut atteindre plusieurs minutes. Une fois le téléchargement terminé, le panneau redémarre et passe en mode de travail.
J'ai utilisé uniquement cette méthode de démarrage, mais il existe un autre moyen d'utiliser la carte SD Miro.

Je vais vous dire une thĂ©orie. La carte doit ĂȘtre formatĂ©e au format FAT32. Dans l'Ă©diteur, cliquez sur «Compiler» () En cas de compilation rĂ©ussie, il ne devrait pas y avoir de lignes rouges dans la fenĂȘtre de sortie des rĂ©sultats de la compilation (7).



AprÚs cela, dans le menu principal, ouvrez l'élément "Fichier" et sélectionnez "Ouvrir le dossier de construction".



Un dossier avec les fichiers de projet compilĂ©s s'ouvrira. Nous sĂ©lectionnons le fichier avec le nom de notre projet et l'extension «.tft» dans le rĂ©pertoire head de la carte SD. Il devrait y avoir un fichier avec une telle extension sur la carte. Ensuite, nous insĂ©rons la carte dans le panneau dĂ©connectĂ© de l'alimentation et lui appliquons l'alimentation. Lorsque l'alimentation est appliquĂ©e, le panneau dĂ©tectera une carte en elle-mĂȘme et s'il trouve un fichier dessus avec l'extension «.tft», il commencera Ă  tĂ©lĂ©charger le projet Ă  partir d'elle. Le processus de tĂ©lĂ©chargement sera affichĂ© Ă  l'Ă©cran. Une fois le tĂ©lĂ©chargement terminĂ©, dĂ©branchez l'alimentation du panneau et retirez la carte SD.

Bien sĂ»r, je n'ai pas dit toutes les fonctionnalitĂ©s du panneau Nextion HMI, mais seulement celles que j'ai moi-mĂȘme rencontrĂ©es lors de l'intĂ©gration du support du panneau dans le programme FLProg. Vous pouvez en savoir plus sur le panneau sur wiki.iteadstudio.com/Nextion_HMI_Solution .

Dans les leçons suivantes, je vais vous expliquer comment organiser l'interaction du panneau Nextion HMI et d'Arduino à l'aide du programme FLProg.

Merci de votre attention.

Source: https://habr.com/ru/post/fr392561/


All Articles