Le programme Processing est un langage de programmation open source qui permet aux utilisateurs de créer des interfaces graphiques et des applications interactives. Il est très populaire auprès des artistes, des designers et des développeurs qui souhaitent créer des expériences visuelles et interactives. Dans cet article, nous allons nous intéresser à l’utilisation de Processing pour créer une interface graphique oscilloscope numérique simple. Nous verrons comment le programme peut être utilisé pour afficher des signaux numériques et comment il peut être utilisé pour analyser et visualiser des données.
Programme Processing : Interface graphique oscilloscope numérique simple
Description
Caractéristiques
- Reçoit sur le port série les valeurs des Y en échelle 0-1023 pour tension 0 – 5V
- Les valeurs doivent être suivie d’un saut de ligne ‘\n’
- Fenêtre taille 80% écran (modifiable dans l’entête du programme
- Quadrillage simple des niveaux de tension (1V à 5V)
- Affichage instantané de la valeur numérique de la tension mesurée en millivolts
- Affiche la limite des niveaux numériques logiques BAS et HAUT compatible carte Arduino
Ressources utiles
- Ce programme utilise un fichier de police. Pour créer votre propre fichier, une fois votre programme enregistré, allez dans Tools > CreateFont et créer votre fichier. Le fichier de police sera automatiquement créé dans le répertoire de votre programme.
- La police que j’ai utilisé dans ce programme est disponible dans l’archive
Archive du programme
- Cette archive contient :
- le programme Processing
- le fichier de police utilisé (répertoire data)
- l’application compilée pour Linux, Windows et Mac
Le code du programme processing
Installer la police dans le répertoire de votre programme via Processing > Tools > CreateFont et modifier en conséquence la ligne du fichier police dans le programme !
A copier / coller dans l’éditeur Processing
// généré avec le générateur de code Processing
// X. HINAULT – Janvier 2011 – tous droits réservés
/////////////// Description du programme ////////////
// Utilise le port Serie
// Utilise une police texte
/////////////// ENTETE DECLARATIVE ////////////
// inclusion des librairies utilisées
import processing.serial.*; // importe la librairie série processing
// déclaration objets
// — port Série —
Serial myPort; // Création objet désignant le port série
// — police texte —
PFont fontA; // crée un objet de police texte
// déclaration variables globales
int xPos = 1; // variable abscisse – x
int xPos0=1; // variable mémorisation xPos n-1
float yPos=1; // variable yPos – ordonnée
float yPos0=1; // variable yPos n-1
int xTextPos=50; // variable position texte dans la fenêtre
int yTextPos=50;
/////////////// Fonction SETUP ////////////
void setup(){ // fonction d’initialisation exécutée 1 fois au démarrage
// —- initialisation paramètres graphiques utilisés
colorMode(RGB, 255,255,255); // fixe format couleur R G B pour fill, stroke, etc…
fill(0,0,255); // couleur remplissage RGB
stroke (0,255,0); // couleur pourtour RGB
strokeWeight(1); // largeur du trait en pixels
rectMode(CORNER); // origine rectangle coin sup gauche
// — initialisation fenêtre de base —
//size(200, 200); // ouvre une fenêtre xpixels x ypixels
size(int(screen.width*0.8), int(screen.height*0.8));
// 90% de l’écran par défaut – régler au besoin –
// viser taille maxi en hauteur – taille fenêtre (x,y)
background(0,0,0); // fond fenetre en noir
// — initialisation des fonctionnalités utilisées —
//————- initialisation de la police texte – à mettre avant série —-
fontA = loadFont(« ArialMT-20.vlw »); // charge le fichier police dans l’objet police texte
// ce fichier doit être présent dans un rép <data> dans le répertoire du programme
// pour générer un fichier de police à partir des polices système aller dans Tools > create Fonts
// voir également http://processing.org/learning/text/
textFont(fontA, 20); // Initialise la police et sa taille (en pixels)
//————- initialisation port série —-
println(Serial.list()); // affiche dans la console la liste des ports séries
//myPort = new Serial(this, Serial.list()[1], 115200); // Initialise une nouvelle instance du port Série
myPort = new Serial(this, « /dev/ttyUSB0 », 115200); // Initialise une nouvelle instance du port Série
myPort.bufferUntil(‘\n‘); // attendre arrivée d’un saut de ligne pour générer évènement série
//——- tracé initial ———
traceInitial();
} // fin fonction Setup
/////////////// Fonction Draw ////////////
void draw() { // fonction exécutée en boucle
// while(true); // stoppe boucle draw
} // fin de la fonction draw()
/////////////// Autres Fonctions ////////////
//————- Fonction de gestion des évènements série —-
void serialEvent (Serial myPort) { // fonction appelée lors de la survenue d’un évènement série
// ******** Gestion de la valeur reçue sur le port série : **********
String inString = myPort.readStringUntil(‘\n‘); // chaine stockant la chaîne reçue sur le port Série
// saut de ligne en marque de fin
if (inString != null) { // si la chaine recue n’est pas vide
inString = trim(inString); // enlève espace blancs de la chaine recue
int inByte_brut=int(inString); // conversion valeur reçue en valeur numérique entiere
float inByte = float(inString); // conversion valeur reçue en valeur numérique décimale
// ré-échelonne la valeur pour affichage
inByte = map(inByte, 0, 1023, 0, height);
yPos=inByte; // l’ordonnée est la valeur reçue par le port série
//********** affichage numérique de la valeur reçue et autres calculs *****
//—- calcul de la tension à afficher ——–
float tension=float(inByte_brut);
tension=tension*5000;
tension=tension/1023;
// dessin d’un rectangle sous le texte avant affichage pour effacer texte précédent
fill(0,0,0); // couleur de remplissage idem fond
stroke(255,0,0); // fixe la couleur utilisée pour le tracé en RVB
rect(40, 20, 200, 50);
// Use fill() to change the value or color of the text
fill(255,0,0);
text( » « , xTextPos, yTextPos); //efface la valeur précédente
//text(inByte_brut, xTextPos, yTextPos);
text(tension+ » mV », xTextPos, yTextPos);
//*********** gestion du graphique *********
// trace la ligne
stroke(0,255,255); // fixe la couleur utilisée pour le tracé en RVB
strokeWeight(3); // largeur du trait en pixels
line (xPos0,height–yPos0,xPos,height–yPos); // trace une ligne en tenant compte valeur reçue
xPos0=xPos; // mémorisation xPos n-1
yPos0=yPos; // mémorisation xPos n-1
// à la fin de l’écran revient au début
if (xPos >= width) {
xPos = 0;
xPos0=0; // pour retour de la trace sans ligne
background(0,0,0); // couleur du fond
//——- tracé initial ———
traceInitial();
} // fin RAZ graphique
else {
// incrémente la position horizontale (abscisse)
xPos++;
}
} // fin condition chaine recue pas vide
} // fin de la fonction de gestion des évènements Série
void traceInitial() {
fill(0,255,0); // couleur remplissage RGB
stroke (0,255,0); // couleur pourtour RGB
strokeWeight(1); // largeur du trait en pixels
for (int i=0; i<5; i++) {
line (0,height–((height/5)*i), width–1,height–((height/5)*i));
text(i+« V », 5, height–((height/5)*i)+25);
}
stroke (255,255,0); // couleur pourtour RGB
strokeWeight(3); // largeur du trait en pixels
fill(255,255,0); // couleur remplissage RGB
// — ligne niveau logique bas = 0.3 x Vcc pour carte Arduino (ATmega328) —-
text(« Niveau BAS », 5, (height–(0.3*height)–5));
line (0,(height–(0.3*height)), width–1,(height–(0.3*height)));
// — ligne niveau logique haut = 0.6 x Vcc pour carte Arduino (ATmega328) —
text(« Niveau HAUT », 5, (height–(0.6*height)–5));
line (0,(height–(0.6*height)), width–1,(height–(0.6*height)));
}
// —– mémo fonctions processing ——-
Programmes Arduino utilisant ce programme
Articles similaires:
- Test de l’optocoupleur en fourche LTH301-7
- Programme Processing : Interface graphique oscilloscope numérique simple avec fenêtre de contrôle
- Mesure d’une intensité à l’aide du capteur de courant +/-5A ACS714 (affichage graphique Processing)
- Saisir une chaîne dans un champ texte et l’envoyer vers le port Série
- Grapheur de fonction math sinus sur le PC
Articles Liés
- Javascript : Graphique Dygraphs simple
Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs…
- Javascript : Graphique Dygraphs : afficher date à partir unixtime
Le langage de programmation Javascript est très populaire et est utilisé pour créer des applications…
- Javascript :Graphique Dygraphs simple avec timeline
Le Javascript est un langage de programmation très populaire et puissant qui permet aux développeurs…