Bon aprĂšs-midiJe 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 panneauxTĂ©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:- Le menu principal.
- BibliothÚque d'éléments.
- BibliothĂšque d'images / bibliothĂšque de polices.
- Zone d'affichage.
- Liste des pages du projet
- Zone d'édition d'attribut de l'élément sélectionné.
- La fenĂȘtre de sortie des rĂ©sultats de compilation.
- Une fenĂȘtre pour entrer le code qui est exĂ©cutĂ© lorsqu'un Ă©vĂ©nement se produit.
- 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â â . :
- âycenâ â . :
- â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â â . :
- âycenâ â . :
- â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â â . :
- âycenâ â . :
- â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â â .
-ImageAttributs 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â â .
- SlylerAttributs 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ĂźneAttributs 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 panneauGo to pagepage 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
oupage 1
Ăcriture ou lecture dela valeur de l' attribut Lecture de la valeur du nom de l'Ă©lĂ©ment d' argument Nom de l' argumentou de lapage. nom d'Ă©lĂ©ment.argument Ăcrivez la valeur dans l'argumentnom d'Ă©lĂ©ment. argument = valeurounom de page. Ă©lĂ©ment nom.argument = valeurExemple: 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 typecov 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 Ă©miseExemples.- 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"
- 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 HMI | USB -> UART |
---|
+ 5V | + 5V |
Rx | TX |
TX | Rx |
GND | GND |
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.