Dieser Artikel fasst die folgenden Punkte zusammen:
1: Einführung in die Arduino GUI
2: Entwerfen von Arduino GUI für die LED -Kontrolle
3: Verarbeitungscode für GUI
4: Arduino IDE -Code für GUI
5: Ausgabe
Abschluss
1: Einführung in die Arduino GUI
Die Arduino -GUI oder die grafische Benutzeroberfläche ist eine Plattform, mit der Benutzer durch die Verwendung von Sensoren und anderen elektronischen Komponenten problemlos mit der physischen Welt interagieren können. Mit Hilfe der GUI können Benutzer benutzerdefinierte grafische Schnittstellen erstellen, um ihre Geräte zu steuern, Sensordaten zu überwachen und Ergebnisse in Echtzeit zu visualisieren.
Wenn Sie ein Arduino -Projekt mit GUI haben, können Benutzer unterschiedliche technische Fachkenntnisse haben, um ihr Projekt zu kontrollieren und zu überwachen. Es gibt mehrere Plattformen, die die Arduino -GUI entwerfen, und eine davon ist wird bearbeitet. Mit dieser Verwendung können wir Bibliotheken installieren und eine benutzerdefinierte GUI für unser Projekt erstellen.
2: Entwerfen von Arduino GUI für die LED -Kontrolle
Das Design einer grafischen Benutzeroberfläche (GUI) für ein Arduino -System kann unter Verwendung der Programmiersprache für Verarbeitung erreicht werden. Diese Kombination bietet eine benutzerfreundliche Schnittstelle für die Interaktion mit der physischen Welt über den Mikrocontroller.
wird bearbeitet bietet eine einfache Umgebung zum Erstellen grafischer Elemente und Animationen, während Arduino die Hardware -Interaktion und -steuerung bietet.
Um die auf Arduino basierende GUI für LED -Steuerung zu entwerfen, werden wir die Verarbeitungssoftware verwenden. Mit der Verarbeitung entwerfen wir GUI und verknüpfen sie mit dem Arduino -Code mithilfe der seriellen Arduino -Kommunikation.
Der erste Schritt besteht darin, die Verarbeitung herunterzuladen und im System zu installieren.
2.1: Verarbeitung herunterladen
Gehen Sie zur offiziellen Site der Verarbeitungsbearbeitung und laden Sie sie herunter.
Schritt 1: Laden Sie die Verarbeitung gemäß Ihrem Betriebssystem herunter:
Schritt 2: Extrahieren Sie nach dem Herunterladen die Datei:
Schritt 3: Sobald die Zip -Datei extrahiert wurde wird bearbeitet Installateur. Öffnen Sie nach erfolgreicher Installation es mit der Startschaltfläche oder über eine Verknüpfung:
2.2: Installieren Sie die ControlP5 -Bibliothek in der Verarbeitung
ControlP5 ist eine Bibliothek für die Verarbeitungsprogrammierumgebung und für Arduino, die GUI -Steuerelemente für interaktive Programme liefert. Es bietet eine Reihe von GUI -Widgets (e.G -Tasten, Schieberegler, Knöpfe) und Tools zum Erstellen grafischer Benutzeroberflächen für die Verarbeitung und Arduino -Projekte.
Bevor wir den Arduino steuern, müssen wir ihn in der Verarbeitungssoftware installieren.
Schritt 1: Offene Verarbeitung und gehen Sie zu: Skizze> Bibliothek importieren> Bibliothek verwalten:
Schritt 2: Suche nach dem Controlp5 Bibliothek und klicken Sie auf Installation:
Nach erfolgreicher Installation der ControlP5 -Bibliothek können wir Arduino einfach mit der Verarbeitung programmieren und eine interaktive GUI für verschiedene Projekte erstellen.
2.3: Schema
Wir werden eine Verarbeitungs -GUI für das Arduino LED -Steuerungsprogramm entwerfen. Schließen Sie drei LEDs an Pin D10, 11 und 12 an. Hier verwenden wir das Arduino Nano Board. Sie können mit jedem der Arduino -Boards gehen:
3: Verarbeitungscode für GUI
Im Folgenden finden Sie den Verarbeitungscode für Arduino GUI. Dieser Code hilft, drei verschiedene LEDs mithilfe einer einfachen grafischen Schnittstelle zu steuern.
Controlp5 importieren.*; /*Integrieren Sie die ControlP5 -Bibliothek*/
Importverarbeitung.Serie.*; /*Serienkommunikation importieren*/
Serielle Schnittstelle;
ControlP5 CP5; // ControlP5 -Objekt erstellen
Pfont -Schriftart;
int col1 = Farbe (255); /*Farbe für Taste 1*/////
int col2 = Farbe (255); /*Farbe für Taste 2*////
int col3 = Farbe (255); /*Farbe für Taste 3*////
int col4 = Farbe (255); /*Farbe für Taste 4*/////
boolean ToggleValue = false; /*Der Schalterwert wird initialisiert*/
void setup ()
Größe (500, 500); /*Fensterbreite und Höhe sind definiert*/
font = createFont ("Calibri Light BOLD", 20); /*Schriftart für Taste und Tittle*/
PrintArray (Serie.Liste()); /*druckt verfügbare serielle Anschlüsse*//
Port = neue Serie (this, "com8", 9600); /*Com Port für Arduino Sie können es mit Arduino ide überprüfen*/
/*Erstellen Sie nun eine neue Schaltfläche*/
glatt();
CP5 = neuer Kontrollp5 (this);
CP5.addToggle ("Toggle") /*Taste für LED 1* / /
.SetPosition (180, 60) /*X und Y -Koordinaten der LED -Toggle -Taste* /
.setSize (100, 40) /*Taste der Schaltfläche horizontal und vertikal* / /
.setValue (true) /*Taste der anfängliche Wert auf true* /umschalten
.setMode (controlp5.Switch) /*Verwenden der Steuerung der Steuerung der Library, die den Schalter als Switch* /festlegen
;
/*Hat die verbleibenden drei Tasten ähnlich entworfen*//
CP5.AddToggle ("Toggle2")
.Setposition (180, 160)
.SetSize (100, 40)
.setValue (true)
.setMode (controlp5.SCHALTEN)
;
CP5.AddToggle ("Toggle3")
.SetPosition (180, 260)
.SetSize (100, 40)
.setValue (true)
.setMode (controlp5.SCHALTEN)
;
CP5.AddToggle ("Toggle4")
.SetPosition (180, 360)
.SetSize (100, 40)
.setValue (true)
.setMode (controlp5.SCHALTEN)
;
void Draw ()
/*Funktion zum Zeichnen und Schreiben von Text*/
Hintergrund (0, 0, 0); /*Hintergrundfarbe des Fensters (r, g, b) oder (0 bis 255)*///
FILL (255, 255, 255); /*Textfarbe (r, g, b)*/
textFont (Schriftart);
Text ("LED Control GUI", 155, 30); /*("Text", x Koordinate, Y -Koordinate)*/
Text ("LED1", 20, 90); /*("Text", x Koordinate, Y -Koordinate)*/
Text ("LED2", 20, 190); /*("Text", x Koordinate, Y -Koordinate)*/
Text ("LED3", 20, 290); /*("Text", x Koordinate, Y -Koordinate)*/
Text ("alle LEDs", 20, 390); /*("Text", x Koordinate, Y -Koordinate)*/
PushMatrix ();
if (toggleValue == true)
FILL (255.255.220); /*Farbübergang, wenn Toggle -Schalter gedrückt wird*/
anders
FILL (128,128,110);
übersetzen (400,80); /*Toggle Switch Translate*/
füllen (col1); /*Wenn der Schalter gedrückt wird, ändern Sie die Ellipsefarbe in weiß*//////
Ellipse (0,0,50,50); /*Ellipsegröße vertikal und horizontal*///
popmatrix ();
/*wurde in ähnlicher Weise den Rest von drei Schaltflächen*/entworfen*/
PushMatrix ();
if (toggleValue == true)
FILL (255.255.220);
anders
FILL (128,128,110);
übersetzen (400.180);
füllen (col2);
Ellipse (0,0,50,50);
popmatrix ();
PushMatrix ();
if (toggleValue == true)
FILL (255.255.220);
anders
FILL (128,128,110);
übersetzen (400.280);
füllen (col3);
Ellipse (0,0,50,50);
popmatrix ();
PushMatrix ();
if (toggleValue == true)
FILL (255.255.220);
anders
FILL (128,128,110);
übersetzen (400.380);
füllen (col4);
Ellipse (0,0,50,50);
popmatrix ();
/*Funktion zum Ein- und Ausschalten von LED*/
void Toggle (Boolean Flag1)
if (flag1 == false) /*Wenn der Wert wahr ist* /
Hafen.Schreib ein'); /*Serial a wird an arrduino*/gesendet*/
col1 = Farbe (255); /*Farbe der Ellipse -Veränderung zu voller Weiß*/
anders
Hafen.schreiben ('x'); /*sonst bleibt die LED 1 aus und seriell x wird an Arduino ide*///////////////
col1 = Farbe (100); /*Hellgraue Farbe für die Ellipse, wenn das Umschalten nicht gedrückt wird*/
/*Wurde in ähnlicher Weise den Rest von drei Schaltflächen*/entworfen*/
void Toggle2 (Boolean Flag2)
if (flag2 == false)
Hafen.schreiben ('b');
col2 = Farbe (255);
anders
Hafen.schreiben ('y');
col2 = Farbe (100);
void Toggle3 (Boolean Flag3)
if (flag3 == false)
Hafen.schreiben ('c');
col3 = Farbe (255);
anders
Hafen.schreiben ('z');
col3 = Farbe (100);
void Toggle4 (Boolean Flag4)
if (flag4 == false)
Hafen.schreiben ('o');
col4 = Farbe (255);
anders
Hafen.schreiben ('f');
col4 = Farbe (100);
Der obige Code, der mit der Steuerung der ControlP5 -Bibliothek zusammen mit einer seriellen Kommunikationsdatei begann. Als nächstes haben wir 4 verschiedene Variablen definiert, die die Farben für verschiedene Schaltflächenzustände speichern.
Im Setup -Teil ist die GUI -Fenstergröße definiert. Als nächstes wird ein Com -Port für die serielle Kommunikation mit dem Arduino Board definiert. Sie können den COM -Anschluss mit der Arduino IDE überprüfen.
Als nächstes haben wir vier verschiedene Tasten definiert: ihre Größe und Position. Alle dieser vier Schaltflächen werden auf true gesetzt. Die ersten drei Tasten steuern eine LED einzeln, während die vierte Taste alle drei LEDs gleichzeitig umschalten.
Als nächstes haben wir die Ellipse -Anzeige für vier Tasten entworfen. Wenn jedes der Schaltflächen gedrückt wird.
Mit der Funktion PushMatrix () und Popmatrix () haben wir einen IF -Zustand für jeden der Kippschalter initialisiert. Wenn eine der Schaltflächen gedrückt wird, wird sie übersetzt und die Ellipse wird ihre Farbe auf 255 ändern.
Zu Beginn des Programms haben wir für jede der Ellipsen einen separaten Farbzustand definiert, der einer bestimmten Taste entspricht.
Und endlich wird eine Hohlraumfunktion für jedes der Toggle -Tasten definiert. Diese Funktion sendet seriell ein bestimmtes Zeichen an die Arduino -Karte, wenn ein Kippschalter gedrückt wird.
Zum Beispiel, wenn der Wert des Toggle2 -Wertes falsch ist und ein Zeichen ist B wird seriell an Arduino übertragen. Das wird die LED am Pin D11 einschalten. In ähnlicher Weise, wenn der Wert des Toggle2 -Wertes ein Zeichen ist, ist ein Zeichen y wird seriell übertragen, wodurch die LED am Pin D11 ausgeschaltet wird.
Die folgenden Tabellen geben uns eine Vorstellung davon, wie diese seriellen Charaktere funktionieren:
Seriencharakter | Ausgangsantwort |
---|---|
A | LED an Pin D10 einschalten |
B | LED am Pin D11 einschalten |
C | Schalten Sie die LED am Pin D12 ein |
X | Schalten Sie die LED am Pin D10 aus |
y | Schalten Sie die LED am Pin D11 aus |
z | Schalten Sie die LED an Pin D12 aus |
Notiz: Wir können diese Zeichen an jeden anderen anpassen, aber stellen Sie sicher, dass Sie dieselben Zeichen sowohl in Arduino als auch in Verarbeitungscode verwenden.
4: Arduino IDE -Code für GUI
Im Folgenden finden Sie den Arduino -Code in Arduino IDE:
void setup ()
PinMode (10, Ausgabe); /*Pin für LED1*/
PinMode (11, Ausgabe); /*Pin für LED2*/
PinMode (12, Ausgabe); /*Pin für LED3*/
Serie.Beginnen Sie (9600); /*Serielle Baudrate*/
void Loop ()
if (seriell.verfügbar
char val = seriell.lesen(); /*Wenn serielle Daten verfügbar sind, speichern Sie sie in einer Variablen*/
if (val == 'a') /*wenn ein empfangen* /
DigitalWrite (10, hoch); /*Einschalten led1*/
if (val == 'b') /*if b empfangen* /
DigitalWrite (11, hoch); /*Einschalten LED2*/
if (val == 'c') /*if c empfangen* /
DigitalWrite (12, hoch); /*Einschalten LED3*/
if (val == 'x') /*if x empfangen* /
DigitalWrite (10, niedrig); /*Ausschalten LED1*/
if (val == 'y') /*if y empfangen* /
DigitalWrite (11, niedrig); /*ausgeschaltet LED2*/
if (val == 'z') /*wenn z empfangen* /
DigitalWrite (12, niedrig); /*Ausschalten LED3*/
if (val == 'o') /*if o empfangen* /
DigitalWrite (10, hoch);
DigitalWrite (11, hoch); /*Alle LEDs einschalten*/
DigitalWrite (12, hoch);
if (val == 'f') /*wenn f empfangen* /
DigitalWrite (10, niedrig);
DigitalWrite (11, niedrig); /*alle LEDs ausschalten*/
DigitalWrite (12, niedrig);
Dieser Code begann mit der Definition des PIN für drei LEDs. Jede dieser Stifte wird als Ausgang unter Verwendung der Funktion PinMode () definiert. Der nächste Arduino -Code wird kontinuierlich auf die seriellen Daten prüfen. Wenn die seriellen Daten verfügbar sind, generiert sie eine Antwort danach.
Zum Beispiel, wenn der Verarbeitungs -GUI -Kippschalter 1 ein Zeichen gedrückt wird "A" wird von Arduino empfangen und es wird LED am Pin D10 einschalten. Ähnlich, wenn der Charakter "X" wird seriell empfangen, es wird die LED am Pin D10 ausschalten:
5: Ausgabe
Führen Sie nach dem Hochladen von Code in die Arduino -Karte den Verarbeitungscode aus und stellen Sie sicher, dass die Arduino -Karte seriell mit dem PC verbunden ist.
Das folgende Fenster wird geöffnet, das uns die GUI für drei LEDs zeigt. Mit dieser GUI können wir die LEDs steuern, indem wir den Schalter umschalten:
Wir können das LED -Leuchten mit dieser GUI steuern:
Abschluss
Die Verwendung der Verwendung der Controlp5 Die Bibliothek in Kombination mit Verarbeitung und Arduino bietet eine leistungsstarke Lösung für die Erstellung von GUI-basierten Projekten. Die Bibliothek bietet einen umfassenden Satz von Tools und Widgets, die den Prozess des Erstellens benutzerfreundlicher grafischer Schnittstellen vereinfachen und es Entwicklern ermöglichen, sich auf die Kernfunktionen ihres Projekts zu konzentrieren.