Contrôle LED à l'aide d'Arduino et de GUI de traitement
Cet article résume les points suivants:
1: Introduction à Arduino GUI
2: Concevoir une interface graphique Arduino pour le contrôle LED
- 2.1: Télécharger le traitement
- 2.2: Installation de la bibliothèque ControlP5 dans le traitement
- 2.3: schéma
3: Code de traitement pour GUI
4: code IDE Arduino pour GUI
5: sortie
Conclusion
1: Introduction à Arduino GUI
L'interface graphique Arduino, ou interface utilisateur graphique, est une plate-forme qui permet aux utilisateurs d'interagir facilement avec le monde physique grâce à l'utilisation de capteurs et d'autres composants électroniques. À l'aide de l'interface graphique, les utilisateurs peuvent créer des interfaces graphiques personnalisées pour contrôler leurs appareils, surveiller les données du capteur et visualiser les résultats en temps réel.
Avoir un projet Arduino avec GUI aide les utilisateurs à avoir différents niveaux d'expertise technique pour contrôler et surveiller leur projet. Il existe plusieurs plateformes qui conçoivent une interface graphique Arduino et l'une d'entre elles est Traitement. En utilisant cela, nous pouvons installer des bibliothèques et créer une interface graphique personnalisée pour notre projet.
2: Concevoir une interface graphique Arduino pour le contrôle LED
La conception d'une interface utilisateur graphique (GUI) pour un système Arduino peut être réalisée à l'aide du langage de programmation de traitement. Cette combinaison fournit une interface conviviale pour interagir avec le monde physique via le microcontrôleur.
Traitement offre un environnement simple pour créer des éléments et des animations graphiques, tandis qu'Arduino fournit l'interaction et le contrôle matériel.
Pour concevoir une interface graphique basée sur Arduino pour le contrôle des LED, nous utiliserons le logiciel de traitement. En utilisant le traitement, nous concevons GUI et le lierons avec le code Arduino en utilisant la communication Arduino série.
La première étape consiste à télécharger le traitement et à l'installer dans le système.
2.1: Télécharger le traitement
Allez sur le site officiel du traitement et téléchargez-le.
Étape 1: Téléchargez le traitement en fonction de votre système d'exploitation:
Étape 2: Après l'avoir téléchargé, extraire le fichier:
Étape 3: Une fois le fichier zip extrait, exécutez l'exe Traitement installateur. Après une installation réussie, ouvrez-la à l'aide du bouton Démarrer ou via un raccourci:
2.2: Installation de la bibliothèque ControlP5 dans le traitement
ControlP5 est une bibliothèque pour l'environnement de programmation de traitement et pour Arduino qui fournit des contrôles GUI pour les programmes interactifs. Il fournit un ensemble de widgets GUI (E.B boutons, curseurs, boutons) et outils pour créer des interfaces utilisateur graphiques pour le traitement et les projets Arduino.
Avant de contrôler l'Arduino, nous devons l'installer dans un logiciel de traitement.
Étape 1: Open Traitement et allez à: Sketch> Importer Library> Gérer la bibliothèque:
Étape 2: Recherchez le ControlP5 bibliothèque et cliquez sur Installer:
Après une installation réussie de la bibliothèque ControlP5, nous pouvons facilement programmer Arduino avec traitement et créer une interface graphique interactive pour différents projets.
2.3: schéma
Nous allons concevoir une interface graphique de traitement pour le programme de contrôle LED Arduino. Connectez trois LED à la broche D10,11 et 12. Ici, nous utilisons le tableau Arduino Nano. Vous pouvez accompagner l'une des planches Arduino:
3: Code de traitement pour GUI
Voici le code de traitement pour Arduino GUI. Ce code aide à contrôler trois LED différentes à l'aide d'une interface graphique simple.
Import Controlp5.* / * Inclure la bibliothèque ControlP5 * /
Traitement d'importation.en série.* / * Importer la communication série * /
Port série;
ControlP5 CP5; // Créer un objet ControlP5
Pfont Pfont;
int col1 = couleur (255); / * couleur pour le bouton 1 * /
int col2 = couleur (255); / * couleur pour le bouton 2 * /
int col3 = couleur (255); / * couleur pour le bouton 3 * /
int col4 = couleur (255); / * couleur pour le bouton 4 * /
booléen toggleValue = false; / * La valeur de bascule est initialisée * /
void setup()
taille (500, 500); / * La largeur et la hauteur de la fenêtre sont définies * /
Font = CreateFont ("Calibri Light Bold", 20); / * police définie pour le bouton et le tittle * /
PrintArray (série.liste()); / * imprime les ports série disponibles * /
port = new Serial (this, "com8", 9600); / * COM Port pour Arduino Vous pouvez le vérifier en utilisant Arduino IDE * /
/ * Créant maintenant un nouveau bouton * /
lisse();
cp5 = new ControlP5 (this);
CP5.AddToggle ("Toggle") / * Bouton Toggle pour LED 1 * /
.setPosition (180, 60) / * x et y coordonnées du bouton à bascule LED1 * /
.setSize (100, 40) / * Togle la taille du bouton de bouton horizontalement et verticalement * /
.setValue (true) / * Bouton de basculement Valeur initiale définie sur true * /
.setMode (ControlP5.Commutateur) / * à l'aide de la bibliothèque ControlP5 Définissez la bascule en tant que commutateur * /
;
/ * A conçu de manière similaire les trois boutons restants * /
CP5.addToggle ("toggle2")
.setPosition (180, 160)
.setSize (100, 40)
.setValue (true)
.setMode (ControlP5.CHANGER)
;
CP5.addToggle ("toggle3")
.setPosition (180, 260)
.setSize (100, 40)
.setValue (true)
.setMode (ControlP5.CHANGER)
;
CP5.addToggle ("toggle4")
.setPosition (180, 360)
.setSize (100, 40)
.setValue (true)
.setMode (ControlP5.CHANGER)
;
void draw ()
/ * Fonction pour dessiner et écrire du texte * /
arrière-plan (0, 0, 0); / * Couleur d'arrière-plan de la fenêtre (r, g, b) ou (0 à 255) * /
remplir (255, 255, 255); / * couleur texte (r, g, b) * /
TextFont (Font);
Texte ("GUI de contrôle LED", 155, 30); / * ("text", x coordonnée, coordonnée y) * /
texte ("LED1", 20, 90); / * ("text", x coordonnée, coordonnée y) * /
Texte ("LED2", 20, 190); / * ("text", x coordonnée, coordonnée y) * /
Texte ("LED3", 20, 290); / * ("text", x coordonnée, coordonnée y) * /
texte ("toutes les LED", 20, 390); / * ("text", x coordonnée, coordonnée y) * /
PushMatrix ();
if (toggleValue == true)
Remplir (255 255 220); / * transition de couleur si l'interrupteur à bascule est enfoncé * /
autre
remplir (128,128,110);
traduire (400,80); / * Toggle commutateur traduit * /
remplir (col1); / * Si l'interrupteur à bascule est enfoncé, modifiez la couleur de l'ellipse en blanc * /
Ellipse (0,0,50,50); / * taille de l'ellipse verticalement et horizontalement * /
popmatrix ();
/ * a conçu de manière similaire le reste des trois boutons * /
PushMatrix ();
if (toggleValue == true)
Remplir (255 255 220);
autre
remplir (128,128,110);
traduire (400 180);
remplir (col2);
Ellipse (0,0,50,50);
popmatrix ();
PushMatrix ();
if (toggleValue == true)
Remplir (255 255 220);
autre
remplir (128,128,110);
traduire (400 280);
remplir (COL3);
Ellipse (0,0,50,50);
popmatrix ();
PushMatrix ();
if (toggleValue == true)
Remplir (255 255 220);
autre
remplir (128,128,110);
traduire (400 380);
remplir (COL4);
Ellipse (0,0,50,50);
popmatrix ();
/ * Fonction pour activer et éteindre le LED * /
Vide Toggle (booléen Flag1)
if (flag1 == false) / * si la valeur est vraie * /
port.écrire un'); / * Le série A sera envoyé à Arduino * /
Col1 = couleur (255); / * Couleur de l'ellipse Changement en blanc complet * /
autre
port.écrire ('x'); / * Sinon, la LED 1 restera éteinte et en série x est envoyé à Arduino ide * /
Col1 = couleur (100); / * Couleur gris clair pour ellipse lorsque la bascule n'est pas pressée * /
/ * A conçu de manière similaire le reste des trois boutons * /
void toggle2 (booléen flag2)
if (flag2 == false)
port.écrire ('b');
Col2 = couleur (255);
autre
port.écrire ('y');
Col2 = couleur (100);
void toggle3 (booléen flag3)
if (flag3 == false)
port.écrire ('c');
Col3 = couleur (255);
autre
port.écrire ('z');
Col3 = couleur (100);
void toggle4 (booléen drapeau)
if (flag4 == false)
port.écrire ('o');
Col4 = couleur (255);
autre
port.écrire ('f');
Col4 = couleur (100);
Le code ci-dessus a commencé par inclure la bibliothèque ControlP5 avec un fichier de communication série. Ensuite, nous avons défini 4 variables différentes qui stockeront les couleurs pour différents états de bouton.
Dans la partie de configuration, la taille de la fenêtre GUI est définie. Ensuite, un port com est défini pour la communication en série avec le conseil d'administration d'Arduino. Vous pouvez vérifier le port com à l'aide de l'ide Arduino.
Ensuite, nous avons défini quatre boutons différents: leur taille et leur position. Toutes ces quatre boutons de la valeur initiale sont définies sur true. Les trois premiers boutons contrôleront individuellement une LED tandis que le quatrième bouton basculera les trois LED à la fois.
Suivant dans la fonction de dessin void, nous avons conçu l'indicateur d'ellipse pour quatre boutons. Lorsque chacun des boutons de bascule est enfoncé, la couleur de l'ellipse se déplacera à une luminosité totale montrant que la LED est activée.
En utilisant la fonction PushMatrix () et PopMatrix (), nous avons initialisé une condition IF pour chacun des commutateurs à bascule. Lorsque l'un des boutons à bascule est enfoncé, il se traduise et l'ellipse changera sa couleur en 255.
Au début du programme, nous avons défini un état de couleur séparé pour chacun des ellipses correspondant à un bouton spécifique.
Et enfin une fonction vide pour chacun des boutons de bascule est définie. Cette fonction enverra en série un caractère spécifique à la carte Arduino lorsqu'un commutateur à bascule est enfoncé.
Par exemple, si la valeur toggle2 est fausse un caractère b sera transmis en série à Arduino. Qui allumera la LED à la broche D11. De même, si la valeur toggle2 est vraie un personnage y sera transmis en série qui tournera la LED à la broche D11.
Les tables suivantes nous donnent une idée du fonctionnement de ces caractères en série:
| Caractère série | Réponse de sortie |
|---|---|
| un | Allumez la LED à la broche D10 |
| b | Allumez la LED à la broche D11 |
| c | Allumez la LED à la broche D12 |
| X | Éteignez la LED à la broche D10 |
| y | Éteignez la LED à la broche D11 |
| z | Éteignez la LED à la broche D12 |
Note: Nous pouvons personnaliser ces caractères à n'importe quelle autre, mais assurez-vous d'utiliser les mêmes caractères dans Arduino et le code de traitement.
4: code IDE Arduino pour GUI
Voici le code Arduino écrit en Arduino IDE:
void setup()
PinMode (10, sortie); / * Épingle pour LED1 * /
PinMode (11, sortie); / * Épingle pour LED2 * /
PinMode (12, sortie); / * Épingle pour LED3 * /
En série.commencer (9600); / * Rate de bauds série * /
VOID LOOP ()
si (série.Disponible ()) / * Vérifiez la disponibilité des données série à partir du traitement * /
char Val = série.lire(); / * Si des données série sont disponibles, stockez-la dans une variable * /
if (val == 'a') / * si un a reçu * /
DigitalWrite (10, haut); / * activer LED1 * /
if (val == 'b') / * if b reçus * /
DigitalWrite (11, haut); / * activer LED2 * /
if (val == 'c') / * si c reçu * /
DigitalWrite (12, haut); / * activer LED3 * /
if (val == 'x') / * if x reçus * /
DigitalWrite (10, bas); / * éteignez LED1 * /
if (val == 'y') / * si y a reçu * /
DigitalWrite (11, bas); / * éteindre led2 * /
if (val == 'z') / * if z reçus * /
DigitalWrite (12, bas); / * éteignez LED3 * /
if (val == 'o') / * if o reçus * /
DigitalWrite (10, haut);
DigitalWrite (11, haut); / * Allumez toutes les LED * /
DigitalWrite (12, haut);
if (val == 'f') / * si f reçus * /
DigitalWrite (10, bas);
DigitalWrite (11, bas); / * éteignez toutes les LED * /
DigitalWrite (12, bas);
Ce code a commencé par définir la broche pour trois LED. Chacune de ces broches est définie comme une sortie à l'aide de la fonction pinmode (). Le prochain code Arduino vérifiera en continu les données série. Si les données série sont disponibles, cela générera une réponse selon cela.
Par exemple, si l'interrupteur de basculement de GUI de traitement 1 est enfoncé un caractère "un" sera reçu par Arduino et il s'allumera LED à la broche D10. De même si le personnage "X" est reçu en série, il éteindra la LED à la broche D10:
5: sortie
Après avoir téléchargé le code sur la carte Arduino, exécutez le code de traitement et assurez-vous que la carte Arduino est connectée en série avec le PC.
La fenêtre suivante s'ouvrira en nous montrant l'interface graphique conçue pour trois LED. En utilisant cette interface graphique, nous pouvons contrôler n'importe laquelle des LED en échantillonnant pour basculer l'interrupteur:
Nous pouvons contrôler la lueur LED en utilisant cette interface graphique:
Conclusion
L'utilisation du ControlP5 La bibliothèque en combinaison avec le traitement et Arduino offre une solution puissante pour créer des projets basés sur l'interface graphique. La bibliothèque fournit un ensemble complet d'outils et de widgets qui simplifient le processus de création d'interfaces graphiques conviviales, permettant aux développeurs de se concentrer sur la fonctionnalité principale de leur projet.