Prise en main de l’écran Nextion avec arduino

Dans le cadre d’un projet personnel (que je dévoilerai bientôt) j’ai reçu il y a quelques semaines un écran tactile Nextion. J’ai déjà parlé de cet écran dans une de mes newsletters mais je me dois de faire un article dessus.

Cet article sera une présentation/prise en main de l’écran nextion et sera donc décliné en deux grandes parties.

INTRODUCTION à nextion

Il y a quelques semaines, j’ai donc reçu ce type d’écran d’une taille de 2.4 pouces. Nextion est une interface homme-machine combinée avec un écran TFT. Celui-ci est particulier puisqu’il est muni d’un processeur, d’une mémoire et d’un lecteur de carte SD qui permet d’y charger du code.

Cet écran est connectable avec un microntrôlleur type arduino grâce à une liaison série. C’est d’ailleurs à travers celle-ci que l’on pourra interagir avec.

On pourrait croire au premier abord que nextion est simplement un nom de constructeur, mais c’est faux. Il fournit aussi un logiciel qui permet de configurer facilement et rapidement une interface utilisateur. C’est la simplicité d’utilisation et les possibilités offertes par nextion qui selon moi font la différence.

Nextion propose également une librairie arduino qui permet d’interpréter et de traduire les différences commandes reçus ou envoyé sur la liaison série entre le microcontrôleur et l’écran.

github de la librairie Nextion

Cet écran est disponible pour un prix très raisonnable (compte tenu du package de logiciel qui vient aussi avec) et en 7 tailles différentes. J’ai personnellement voulu tester en prenant la plus petite des tailles possible (2.4 pouces), mais si je devais en reprendre un aujourd’hui je préfèrerais une taille plus adaptée, du genre 2.8’’ voir 3.2’’.

L’idéal pour le prendre en main c’est de réaliser un petit projet ! Je vous propose aujourd’hui de construire un distributeur d’eau tactile. L’écran représentera le bouton que l’on actionne pour avoir un verre. Pour ajouter une connexion du microcontrôleur vers l’écran j’installerai également une sonde de température qui affichera la température du réservoir d’eau sur celui-ci en temps réel.

Interface utilisateur

Attention

Si vous commandé un écran Nextion vérifiez que vous avez une carte micro SD, un adaptateur micro SD vers SD et bien évidemment une lecture de carte SD sur l’une de vos machines ! Sinon vous pourrez toujours vous en procurer par ici.

La première chose à faire c’est de télécharger le Nextion editor en cliquant ici.

Voici comment se présente la page de garde de l’application. Pour débuter un nouveau projet cliquez sur File>New puis placé et nommé votre projet comme et ou bon vous semble.

Le fichier que vous venez de créer est un .HMI si qui signifie qu’il est ouvrable et configurable avec le logiciel nextion editor. Vous verrez qu’une fois compilé, l’extension ne sera plus .HMI, il sera de plus, impossible de l’éditer avec l’application.

Le logiciel vous demandera maintenant de sélectionner la taille de votre écran (2.4’’ pour moi) :

Vous arrivez dans une interface d’édition comme celle-ci :

Présentation de l’interface

1 – La première partie sert à visualiser les images que vous chargez dans l’application. Nous l’utiliserons dans peu de temps.

2 – La première partie sert à visualiser les images que vous chargez dans l’application. Nous l’utiliserons dans peu de temps durant une compilation ou un debug. C’est en quelque sorte les réponses du microcontrôleur nextion au code qu’on lui administre.

3 – La zone évent est utilisée lorsque l’on ajoute un élément avec lequel l’utilisateur peut interagir. C’est dans cette zone que l’on supervise le bon fonctionnement de l’envoi des messages sur la liaison série.

4 – La zone évent est utilisée lorsque l’on ajoute un élément avec lequel l’utilisateur peut interagir. C’est dans cette zone que l’on supervise le bon fonctionnement de l’envoi des messages sur la liaison série.

5 – Enfin la zone pages… C’est la seule zone que l’on n’utilisera pas dans cet article puisque notre application n’aura qu’une seule page, mais si vous êtes amené à en créer d’autres vous saurez où aller 😉

Nous verrons à la fin l’utilité de la barre d’outils située sur la partie supérieure de l’application.

Avant de commencer à placer les éléments il faut commencer par générer une police d’écriture en se rendant dans Tools>Font Generator. Sélectionnez ensuite vos préférences,  nommez-la et cliquez sur ’Generate font’

Placement des éléments

L’interface utilisateur ne contiendra que 3 éléments.

Les titres

Le premier est un Titre qui indique de quoi il s’agit. Ici j’ai été original j’ai mis ’water dispensor’ !

À noter : En réalité, j’ai placé deux titres, mais Nextion editor impose une taille limite…

Le bouton

Le second élément sera un bouton. Ce bouton, lorsqu’on l’actionnera, déclenchera la pompe pendant X secondes et servira bien gentiment un verre d’eau à l’utilisateur.

Pour rajouter un côté cool /décalé à l’interface, nous allons également ajouter une image de verre d’eau en background du bouton 😊

Nous allons donc dans un premier télécharger et redimensionner une image de verre d’eau. Étant donné que mon écran fait 240×320 pixels, j’ai dimensionné le verre pour qu’il fasse 150×184 pixels. Pour sélectionner une image sur votre ordinateur il vous suffira de cliquer sur le + dans la zone « picture ». Cela vous ouvrira l’explorateur de fichier et vous n’aurez qu’à la sélectionner l’image souhaitée.

Dans les attributs du bouton, j’ai changé la valeur ‘sta’ de ‘solid color’ à ’image’

Puis j’ai cliqué sur pic et sélectionné l’image que je veux.

 Pour que le bouton fonctionne, il faut lui attribuer un évènement en cas d’action. Pour ce faire, je me suis rendu dans la zone évent et j’ai coché le ‘send component id’.

Cela veut simplement dire que l’interaction avec la liaison série se fera au moment ou je relâche le bouton. Dans le cas où vous voulez seulement effectuer une action quand le bouton est pressé alors c’est l’option « Touch Press Event » qu’il faut activer.

Enfin, pour styliser encore plus l’action j’ai ajouté une seconde image (dans pic2) identique à la première à la différence prêt qu’elle est plus petite. Cela permet d’ajouter une animation au moment ou l’on presse le bouton !

Pour vérifier que tout fonctionne, cliqué sur « Debug » dans la barre d’icônes sur le bord supérieur du logiciel :

S’ouvrira une fenêtre qui simule ce que vous verrez sur l’écran. Si tout fonctionne, vous devriez avoir un message similaire qui s’affiche dans la zone « Simulateur return » :

La température

Le dernier élément sera l’afficheur qui retourne la température de l’eau en temps réel. Il s’agit d’une zone de texte que j’ai laissé vide volontairement puisqu’elle sera remplie par l’arduino:

Avant de continuer avec la conception du circuit, nous avons une dernière chose à faire. Pour que le code arduino puisse interagir avec des éléments de l’écran nextion, nous devrons déclarer des objets liés à ces éléments. Chaque objet représentant un élément, du coup, chacun d’eux se verra assigner certains des attributs des éléments concernés.

Dans ce cas, seulement deux éléments devront interagir avec le code arduino, mais j’ai quand même fait un tableau pour m’y retrouver plus facilement. Nous devrons relever le numéro de page, l’Id et le nom de chaque élément comme ceci:

N° pages

0

0

Id

3

4

Name

bWater

tTemp

Charger l’interface

Une fois terminé, cliquer sur « Compile ». Vous pouvez jeter un œil dans la zone output pour vérifier qu’il n’y est pas d’erreurs. Si tout est correct vous pourrez copier/coller votre code compilé sur la carte micro SD en vous rendant dans File>Open build folder.

Les cartes nextion sont fournies avec un connecteur micro USB. Je vous conseille vivement de l’alimenter par celui-ci et non par l’alimentation 5v de votre arduino par exemple. En effet, une alimentation stable et puissante sera préférable pour ce type d’appareil dans le circuit final.

Placez la carte micro SD dans son emplacement puis mettez l’écran sous tension pour la première fois. Vous devriez voir quelque chose qui ressemble à ça :

Si ce n’est pas le cas vérifiez bien que vous avez sélectionné la bonne taille d’écran dans le logiciel nextion editor.

Si tout est correct, débranchez l’écran, retirez la carte micro-SD et remettez-le sous tension. Vous devriez voir l’interface précédemment configurée s’afficher :

La conception du circuit

Le circuit que nous allons réaliser sera donc constitué d’un arduino UNO, d’une sonde de température DS18B20, d’une pompe et d’un écran nextion.

La pompe sera contrôlée à travers un mosfet et branchée sur l’alimentation 12v.

L’arduino sera alimenté en 12v et fournira une tension de 3.3v au DS1820 qui ne l’oublions pas, il doit être branché sur une broche compatible 1-Wire et doit avoir une résistance de 4.7kΩ en pushpull (3.3v).

Finalement, l’écran Nextion sera alimenté en micro USB et sera relié aux broches 0 et 1 de l’arduino uno qui joueront le rôle de Rx/Tx.

Attention

Lorsque vous chargez votre code dans la carte arduino n’oubliez pas de débrancher le Nextion!

A noter

Pour ce circuit j’ai utilisé le mosfet IRLB3034

Voici le schéma du circuit :

Dans la vraie vie, j’ai ajouté une bassine d’eau jouant le rôle de réservoir et un verre doseur qui jouera le rôle de verre d’eau. Le capteur de température supervisera la bassine d’eau :

Programmation de Nextion

Retrouvez le code ici

La programmation d’un écran Nextion est plutôt simple à condition que vous ayez la librairie. Si vous travaillez sur platformio alors vous n’aurez qu’à chercher dans l’onglet librairie en tapant Nextion et vous trouverez facilement. Si vous utilisez encore l’IDE arduino alors je vous conseille d’aller lire mon article qui parle de platformio cela vous fera surement changer.

Pour gérer la connexion 1-wire nous aurons également besoin de la librairie OneWire installée par défaut. Pour gérer l’acquisition de la température, nous aurons également besoin de la librairie DallasTemperature que vous trouverez rapidement dans la gestion de librairie aussi.

Dans un premier temps, j’ai défini les broches de la pompe et du mosfet ainsi que le nombre de secondes nécessaires pour remplir un verre d’eau (d’après mes tests très approximatifs).

J’ai ensuite défini le nécessaire pour lire la température provenant de la communication 1-wire.

objets nextion

De la même manière que précédemment, j’ai défini les objets qui vont sur lesquels reposent l’interaction avec l’écran Nextion.

On voit bien que le premier argument représente le numéro de page, la seconde l’Id et l’élément et le dernier est le nom de l’élément. Je précise également quel type d’objet c’est avec de le nommer.

On vient ensuite constituer une liste d’objets que l’Arduino doit « surveiller ». En réalité, les objets de cette liste sont ceux qui émettent une communication vers l’Arduino. Dans notre cas seul, le bouton doit être déclaré ici :

Nous verrons que dans le cas où cet objet tente de communiquer on appellera une fonction. En l’occurrence, nous appelons une fonction qui activera la pompe le temps de remplir un verre puis l’éteindra.

C’est dans la fonction setup() que l’on définit à quel moment on considère qu’il faut lancer la fonction ci-dessus. Pour nous, ce sera quand l’utilisateur relâche le bouton, on appelle cela un « pop ».

On en profite également pour initialiser les objets Nextion ainsi que le capteur connecté sur le lien 1- Wire.

La fonction loop() comporte bien évidemment la fonction callback des objets Nextion. Mais surtout, elle actualise la valeur du float tempC chaque seconde. Cette valeur pour être affichée sur l’écran tactile doit être une chaine de caractère pour pouvoir être transmise.

C’est pourquoi j’ai utilisé la fonction dtostrf puis sprintf pour ajouter une information dans l’affichage final.

Cela a pour effet d’actualiser un direct la température de l’eau sur l’écran final:

Pour illustrer ce projet en fonctionnement, voici une petite vidéo :