Anthias
mail

r

Interpréteur Processing

 

Générer du graphisme en Processing depuis l’Arduino
Affichage de courbes d’acquisition de données

m


Introduction
Principe de l'interpréteur
Logiciel d’affichage graphique
Clarification importante
Limitations de la classe <C_Interpret>
Conclusion

Maj : 06/07/2024

Abstract :

This page shows my special tool, an interpreter to create everithing on Processing animation, without coding in Processing.
There is no limits, you can add any personal functions for more complex program. Link between Arduino to PC or tablet can be in USB or WiFi.
Goes to Processing.org and check examples to discover this amazing world.

Résumé :
Cette page montre mon outil spécial, un interpréteur pour créer n'importe quelle animation de Processing, sans coder en Processing.
Il n'y a pas de limites, vous pouvez ajouter des fonctions personnelles pour un programme plus complexe. Le lien entre Arduino et PC ou tablette peut être en USB ou en WiFi.
Processing est un outil fantastique pour développer les talents graphiques.

Allez sur Processing.org et consultez les exemples pour découvrir ce monde étonnant.

Cette page est trop ancienne et va être réécrite prochainement !

nextion  Introduction

Afin de bien comprendre l’intérêt du tableau blanc sous Processing, il serait utile de commencer par ces exemples qui montrent comment dessiner sous Processing seul.
Les mèmes résultats seront obtenus en sous-traitant tous les calculs à un ESP32 distant qui envoie ses ordres à Processing en WiFi.

Emulation Rolex sous Processing nextion
Lune sous rocessing bezier

L’idée de cet interpréteur est de disposer de la fantastique résolution d’un PC ou d’une tablette comme interface d’un Arduino en simplifiant au maximum la programmation.
Il est possible de faire tout ce que l’on fait sur un LCD graphique, mais en beaucoup mieux, sans rien programmer en Processing.
Mon interpréteur traduit toutes les commandes Arduino en Processing. Cette version se limite à tout ce qui est utile pour faire de l’acquisition de capteurs et afficher les courbes en jolis graphismes.
L’outil est totalement ouvert, il est très simple d’ajouter de multiples autres commandes pour des animations sans limites.
La sortie basique est en USB, mais comme cela est décrit sur le Net, l’adaptation en WiFi est immédiate.
Cela s’avère très pratique en développement Arduino, car cet affichage est un formidable outil de debug qui permet d’afficher toutes les variables critique en temps réel.

Configuration
Ce programme a été testé sur mes cartes ESP32 S3 qui possèdent l’horloge temps réel (RTC) DS3231 avec son driver Adafruit.
Si vous n’avez pas cette configuration, commentez la première ligne du code en .ino : #define DS3231 // Comment if RTC not present ! l’émulateur fonctionnera mais en mode réduit, Les heures et dates seront aléatoires et ne seront pas modifiables dans le menu. Ce firmware adresse aussi une led et un buzer, mais ils ne sont pas indispensables.

p
Haut de page

nextion  Principe de l'interpréteur

Nous trouvons  ici trois parties indépendantes :

p Un module sous Processing, qui sera utilisé sans modifications pour exécuter toutes les animations possibles, comme par exemple le traceur de courbes décrit ici.

p Un driver, qui est une classe en C, <C_Interpret>, noyau d’exécution des commandes Arduino. Cette classe dialogue avec le module Processing,  reliant l’Arduino  au PC par la liaison USB ou par Wifi (non implanté pour simplifier).
C’est une extension des commandes Arduino qui fabrique les chaînes (String) pour génèrer l’affichage des écrans par Processing. Cette classe est à installer dans votre directorie  des libraires Arduino.
 
p Un programme de démonstration sous Arduino, que vous pourrez remplacer par le votre pour créer tous les affichages sur le PC.
Il s’agit ici de la partie d’affichage complète d’un système d’acquisition de données d’une multitude de capteurs. La partie acquisition et traitement de données, décrite par ailleurs n’a pas sa place dans ce démonstrateur Processing, et a été remplacée par un générateur de courbes aléatoires pour alléger.

Vue générale du moteur coté Arduino :
Prenons des exemples simples des commandes nouvelles Arduino:
Ecrire un String à l’écran en position XY : labelText ("Mon texte à écrire", 100,300) ;
Qui est traduit par la classe <C_Interpret> en :
void labelText (String label, int posX0, int posY0) // one  string, two int
{ sendCommand (23, label, posX0, posY0); }

« sendCommand » analyse la requête et déduit qu’il faut envoyer en premier un integer, le code de l’ordre ici (23), puis le String « label », puis deux integers pour les coordonnées, le tout séparé par des virgules.
1

Tous les formats sont possibles, depuis un ordre seul, exemple noFill(); = Ne pas remplir la forme précédente,
 ou l’ordre plus quatre integers pour dessiner un rectangle, ou toute autre commande complexe.

Dans l’exemple de l’écriture d’un label texte, il aura évidement fallu définir avant : Le type de font, la taille, la couleur…
La chaîne ainsi composée est envoyée (série, Wifi) terminée par un retour chariot.
2

 

Vue générale du moteur coté PC :
Coté PC, l’interpréteur reçoit ce String, le découpe en tranches (séparation par virgules) et analyse le premier morceau qui est obligatoirement un integer d’ordre, envoyé au switch/case  d’aiguillage:
switch (order)     {       

 case 23:
            labelText (); // Place text label : datas[1] is a string
break;

h

Il appelle alors la fonction concernée, pour traduire en commande comprise par Processing, par exemple pour placer un texte défini dans un tableau "label"  :

void  labelText() // Write string label   {
String label = list[1]; 
int posX = int(list[2]); 
int posY = int(list[3]);
text(label, posX, posY);
}

Et c’est tout, vous voyez que c’est très simple. La lecture des codes vous éclairera mieux.

3

Haut de page

nextion Le logiciel d’affichage graphique de données

Maintenant que nous avions vu le moteur dont il n’y a plus à se préoccuper, il reste à conduire le véhicule. Cela ne se passe que du coté Arduino, il n’y a plus rien à écrire coté Processing
Cet exemple commence par des démonstrations des performances graphiques pour montrer la vitesse très rapide :

p Formes aléatoires en cercles et triangles.
p Cercles décroissants.
p Rotation d’image pour montrer qu’ici les timings sont critiques, si l’on raccourcit le délai, les bugs apparaitront.
p Différentes tailles d’affichage de l’heure, le fond rectangulaire du pré effacement ètant calculé d’après le taille du font.
p Grilles et différents positionnement des zones clickables, dont nous aurons besoin par la suite, depuis 3*3 pour les gros doigts en mouffles de ski, jusqu’à 10*10. Il n’est pas très intéressant d’aller au-delà.

En exploitation, il suffit ensuite d’appeler la grille par sa résolution, les zones sont numérotées et en cliquant, le numéro de la case sera renvoyé pour traitement.
Evidement ces démos sont désactivables en commentant la ligne concernée dans le source Arduino.

Passons au vrai programme
Pour pouvoir être exploité sans avoir une série de capteurs d’acquisitions, j’ai fait un petit simulateur qui génère une courbe aléatoire.
J’ai décrit dans l’acquisition Nextion comment fabriquer les enregistrements de données et calibrer les courbes il suffit de remplacer ce bloc par le vrai pour avoir un système complet, mais ce n’est pas le propos ici.
L’horloge est celle de la DS3231 avec driver Adafruit, mais pour ceux qui ne l’ont pas installé, un paramètre permet de générer un temps aléatoire.

Pour commencer un simulateur crée la courbe imaginaire avec ses valeurs.
Le fond est mis en place avec ses grilles horizontale et verticale calées sur l’heure.

Vous remarquerez que le programme Arduino est découpé en petits onglets. Cela ne change rien, le précompilateur rassemble tout en un seul bloc, mais cela facilite la recherche des fonctions par thèmes.


m

Pour alléger, les heures de coucher et lever du soleil sont aléatoires, mais il est facile de les calculer en fonction de sa position, il y a de nombreux exemples sur Le Net.
La courbe est affichée, en zone claire le jour, grise la nuit.

Sur cet écran principal il n’y a que deux zones à cliquer :

p En haut à gauche, sur le nom du capteur, la page qui permet sur la version d’exploitation de passer au menu avec entre autres le choix des capteurs. C’est inutile pour cette démonstration.

p En haut à droite, sur la pendule, zone fonctionnelle de réglage du temps de l’horloge temps réel (RTC) DS3231.

r

Haut de page

nextion  Clarification importante

L’ensemble peut paraître complexe, car il y a beaucoup de briques !
Le système d’acquisition de capteurs est autonome et dispose de son propre afficheur graphique local. Il faut toujours un noyau central basé sur un ESP32 qui collecte et met en forme les données qui sont enregistrées sur l’ EEPROM 27c512 de sa carte horloge temps réel (RTC) DS3231. Dans les exemples : Domotique Nextion nextion et Domotique par Internet arduino
l’ESP32 gère en plus un afficheur graphique local, un Nextion 800x480.
Un logiciel écrit en PHP et implanté dans le cloud sur le serveur Voilec, dialogue avec l’ESP32 et crée des pages html interactives qui sont affichées via un browser


Nous parlons maintenant dans cette page d’un dispositif complémentaire totalement différent ! Ce qui est proposé ici vient se greffer à l’existant, il ne fait ni l’acquisition des données ni l’enregistrement, mais il en exploite les données enregistrées décrites ci-dessus, pour pouvoir les afficher en un endroit quelconque en WiFi.
Ici, cela ne fait pas appel au serveur précédent dans le cloud, c’est l’ESP32 central qui fabrique les pages interactives sans passer par l’Internet, ce qui n’a rien à voir. Les trois systèmes cohabitent avec bonheur mais sont indépendants (mais partagent les données communes).

Dans ce chapitre commun, ce petit gribouillis vous montrera peut-être plus clairement les approches décrites dans mes pages pour afficher graphiquement les données d’acquisition, à partir du "maître", l’ESP32 central, qui centralise une dizaine de capteurs variés. Ces trois affichages fonctionnent bien simultanément sur le même ESP32 maître.

Il semble que cela fasse de multiples emplois redondantsi, car en définitive il s’agit de divers affichages qui affichent les mêmes courbes, mais avec des approches totalement différentes, afin de montrer divers chemins possibles.

p Le terminal en http, visible sur un browser est décrit ici : Domotique via Internet arduino

p L’affichage en dur sur un Nextion en 800x480 est décrit ici : Domotique Nextion locale arduino

p L’affichage sur un Pc via Processing est décrit ici : Interpréteur Processing nextion

p L’affichage sur un moniteur HDMI est décrit ici  :Atom PSRAM display nextion

tri

Divers affichages

Haut de page

nextion  Limitations de la classe <C_Interpret>

p Classe minimaliste

Cette classe ouverte est volontairement simplifiée au maximum pour plus de clarté. Elle ne comprend que les commandes strictement nécessaires au démonstrateur de cette page.
Une version plus complète qui n’est pas mise en ligne pour le moment donne accès à beaucoup d’autres fonctions.
Sur la page Rolex par Processingnextion,  le programme est indépendant de l’Arduino,  et n’utilise que Processing.
Avec le jeu de commandes étendues de l’interpréteur, le même résultat est réalisable depuis l’Arduino (en rajoutant les quelques commandes manquantes).

Ces commandes étendues comprennent entre autres : createShape, loadShape,  beginShape,  endShape, addChild…
Les outils JSON,vertex, courbes de Bezier, et bien d’autres du long dictionnaire Processing. Elles seront introduites peu à peu lors de la mise en ligne de nouveaux exemples.

 

p Size en dur !

Un autre des problèmes très gênant est qu’il est impossible de fixer la taille de la fenêtre depuis l’Arduino !
Quand le .pde se lance, il faut impérativement que le setup commence par size (largeur, hauteur), ces valeurs étant en dur, elles ne seront plus modifiables quand le .ino se lancera !
Cela veut dire que pour changer la taille, il faudra écrire dans le .pde, ce qui est contraire à l’esprit de cet interpréteur qui se vante de pouvoir tout faire sans toucher le code .pde
C’est un sujet qui est très présent dans les forums, mais je n’ai pas trouvé de solution qui fonctionne vraiment !
Vous trouverez ceci, ou une variante utilisant settings() :

PImage img;
void setup() {
img = loadImage("uneImage.png");
size(img.width, img.height); }

Il suffirait alors de renommer une image (même vide) de la taille de la fenêtre désirée pour ne pas avoir à toucher au code .pde (qui peut être compilé en dur en .exe).
Si l’on change d’image sous Arduino, il faudra évidement relancer Processing ou passer par l'Arduino la commande reset();
Le seul problème est que cela ne fonctionne pas pour moi, et je ne comprends pas…

Haut de page

nextion  Conclusion

Cet exemple est en réalité le squelette d’un système d’acquisition et d’affichage de données complet. Pour être opérationnel, il suffit de rajouter :
p Le vrai moteur qui est le module d’enregistrement des capteurs comme décrit dans la page Domotique Nextion nextion
p Le calcul des heures du soleil, à chercher sur le Net. Rien d’original, j’utilise une version basée sur l’UnixTime. Une des implantations est en page Nextion, mais il y a beaucoup d’autres exemples sur le Net.
p La page de menu de paramétrage et de choix des capteurs qui ne présente aucune difficulté.

Chargez d’abord l’outil sur le site mère Processing.org  et installez-le, c’est très rapide. Ensuite fouillez dans les multiples exemples du site puis du Net pour commencer à en comprendre les possibilités…

Cette autre page vous montrera un exemple de réalisation graphique en Processing seul : Rolex par Processingnextion

Préalable : L’heure est celle du PC. Si vous voulez tester à pleine vitesse, il suffit de changer alors sur la première ligne : int clockMode = 0 ; en = 1 ;

p

--------------> Logiciels en réécriture, nouveaux sources prochainement.

Haut de page

© Christian Couderc 1999-2024     Toute reproduction interdite sans mon autorisation


* Page vue   11372   fois       IP : 18.189.184.99

 Haut de page         Dernière retouche le 06 Juillet 2024 à 20 h         Retour page précédente

   Collector