W tym artykule podsumowano następujące punkty:
1: Wprowadzenie do Arduino GUI
2: Projektowanie GUI Arduino do kontroli LED
3: Przetwarzanie kodu dla GUI
4: Kod IDE Arduino dla GUI
5: Wyjście
Wniosek
1: Wprowadzenie do Arduino GUI
Arduino GUI lub graficzny interfejs użytkownika to platforma, która umożliwia użytkownikom łatwą interakcję ze światem fizycznym za pomocą czujników i innych komponentów elektronicznych. Za pomocą GUI użytkownicy mogą tworzyć niestandardowe interfejsy graficzne do kontrolowania swoich urządzeń, monitorowania danych czujników i wizualizacji wyników w czasie rzeczywistym.
Posiadanie projektu Arduino z GUI pomaga użytkownikom mieć różne poziomy wiedzy technicznej w celu kontrolowania i monitorowania swojego projektu. Istnieje wiele platform, które projektują Arduino GUI, a jedna z nich jest Przetwarzanie. Korzystając z tego, możemy instalować biblioteki i tworzyć niestandardowe GUI dla naszego projektu.
2: Projektowanie GUI Arduino do kontroli LED
Projekt graficznego interfejsu użytkownika (GUI) dla systemu Arduino można osiągnąć za pomocą języka programowania przetwarzania. Ta kombinacja zapewnia przyjazny dla użytkownika interfejs do interakcji ze światem fizycznym za pośrednictwem mikrokontrolera.
Przetwarzanie Oferuje proste środowisko do tworzenia elementów graficznych i animacji, a Arduino zapewnia interakcję i kontrolę sprzętową.
Aby zaprojektować GUI oparty na Arduino do kontroli LED, użyjemy oprogramowania do przetwarzania. Korzystając z przetwarzania, zaprojektujemy GUI i połączymy go z kodem Arduino za pomocą seryjnej komunikacji Arduino.
Pierwszym krokiem jest pobranie przetwarzania i zainstalowanie go w systemie.
2.1: Pobierz przetwarzanie
Przejdź do oficjalnej witryny przetwarzania i pobierz.
Krok 1: Pobierz przetwarzanie zgodnie z systemem operacyjnym:
Krok 2: Po jego pobraniu wyodrębnij plik:
Krok 3: Po wyodrębnianiu pliku zip uruchom EXE Przetwarzanie instalator. Po udanej instalacji otwórz go za pomocą przycisku Start lub przez skrót:
2.2: Instalowanie biblioteki ControlP5 w przetwarzaniu
ControlP5 to biblioteka środowiska programowania przetwarzania i Arduino, które zapewnia sterowanie GUI dla interaktywnych programów. Zapewnia zestaw widżetów GUI (e.G przyciski, suwaki, pokrętła) i narzędzia do tworzenia graficznych interfejsów użytkownika do projektów przetwarzania i Arduino.
Zanim kontrolujemy Arduino, musimy zainstalować go w oprogramowaniu do przetwarzania.
Krok 1: Otwarte przetwarzanie i przejdź do: Szkic> Importuj bibliotekę> Zarządzaj biblioteką:
Krok 2: Szukaj Controlp5 Biblioteka i kliknij Instaluj:
Po udanej instalacji biblioteki ControlP5 możemy łatwo zaprogramować Arduino z przetwarzaniem i stworzyć interaktywne GUI dla różnych projektów.
2.3: Schemat
Zamierzamy zaprojektować GUI przetwarzania programu kontroli LED Arduino. Podłącz trzy diody LED przy styku D10,11 i 12. Tutaj używamy tablicy Arduino Nano. Możesz pójść z dowolną tablicą Arduino:
3: Przetwarzanie kodu dla GUI
Poniżej znajduje się kod przetwarzania Arduino GUI. Ten kod pomaga kontrolować trzy różne diody LED za pomocą prostego interfejsu graficznego.
Importuj ControlP5.*; /*uwzględnij bibliotekę ControlP5*/
Przetwarzanie importu.seryjny.*; /*Importuj komunikację szeregową*/
Port szeregowy;
Controlp5 CP5; // Utwórz obiekt ControlP5
Czcionka PFONT;
int col1 = kolor (255); /*kolor przycisku 1*/
int col2 = kolor (255); /*kolor przycisku 2*/
int col3 = kolor (255); /*kolor przycisku 3*/
int col4 = kolor (255); /*kolor przycisku 4*/
boolean toggleValue = false; /*Wartość przełączania jest inicjowana*/
void setup ()
rozmiar (500, 500); /*Szerokość i wysokość okna są zdefiniowane*/
font = createFont („Calibri Light Bold”, 20); /*Czcionka zdefiniowana dla przycisku i tittle*/
PrintArray (serial.lista()); /*Drukuje dostępne porty szeregowe*/
port = nowy serial (to, „com8”, 9600); /*COM Port dla Arduino możesz go sprawdzić za pomocą Arduino IDE*/
/*Teraz tworzenie nowego przycisku*/
gładki();
cp5 = new ControlP5 (this);
CP5.AddToggle („przełącz”) /*przycisk przełączania dla LED 1* /
.Setposition (180, 60) /*x i y współrzędne przycisku LED1* /
.SetSize (100, 40) /*przełączanie rozmiar przycisku w poziomie i pionie* /
.setValue (true) /*Wartość początkowa przycisk przełączania na true* /
.setMode (Controlp5.Przełącznik) /*za pomocą biblioteki Controlp5 Ustaw przełącznik jako przełącznik* /
;
/*Podobnie zaprojektowane pozostałe trzy przyciski*/
CP5.addToggle („Toggle2”)
.Setposition (180, 160)
.SetSize (100, 40)
.setValue (prawda)
.setMode (Controlp5.PRZEŁĄCZNIK)
;
CP5.addToggle („Toggle3”)
.Setposition (180, 260)
.SetSize (100, 40)
.setValue (prawda)
.setMode (Controlp5.PRZEŁĄCZNIK)
;
CP5.AddToggle („Toggle4”)
.Setposition (180, 360)
.SetSize (100, 40)
.setValue (prawda)
.setMode (Controlp5.PRZEŁĄCZNIK)
;
void rysunek ()
/*funkcja do rysowania i pisania tekstu*/
tło (0, 0, 0); /*Kolor okna (R, G, B) lub (0 do 255)*/
wypełnij (255, 255, 255); /*Kolor tekstu (R, G, B)*/
TextFont (czcionka);
tekst („LED Control GUI”, 155, 30); /*(„tekst”, x współrzędna, współrzędna y)*/
tekst („LED1”, 20, 90); /*(„tekst”, x współrzędna, współrzędna y)*/
tekst („LED2”, 20, 190); /*(„tekst”, x współrzędna, współrzędna y)*/
tekst („LED3”, 20, 290); /*(„tekst”, x współrzędna, współrzędna y)*/
tekst („All LED”, 20, 390); /*(„tekst”, x współrzędna, współrzędna y)*/
pushmatrix ();
if (toggleValue == true)
wypełnij (255 255,220); /*przejście kolorów, jeśli przełącznik jest naciśnięty*/
w przeciwnym razie
wypełnij (128 128,110);
przetłumaczyć (400,80); /*przełącz przełącznik tłumacz*/
wypełnij (col1); /*Jeśli przełącznik jest naciśnięty, zmień kolor elipsy na biały*/
elipsa (0,0,50,50); /*rozmiar elipsy pionowo i poziomo*/
PopMatrix ();
/*Podobnie zaprojektował resztę trzech przycisków*/
pushmatrix ();
if (toggleValue == true)
wypełnij (255 255,220);
w przeciwnym razie
wypełnij (128 128,110);
tłumaczyć (400,180);
wypełnij (col2);
elipsa (0,0,50,50);
PopMatrix ();
pushmatrix ();
if (toggleValue == true)
wypełnij (255 255,220);
w przeciwnym razie
wypełnij (128 128,110);
przetłumaczyć (400 280);
wypełnij (col3);
elipsa (0,0,50,50);
PopMatrix ();
pushmatrix ();
if (toggleValue == true)
wypełnij (255 255,220);
w przeciwnym razie
wypełnij (128 128,110);
tłumaczyć (400 380);
wypełnij (col4);
elipsa (0,0,50,50);
PopMatrix ();
/*funkcja do włączania i wyłączania LED*/
void Toggle (Flag Boolean1)
if (flag1 == false) /*jeśli wartość jest prawdziwa* /
Port.Napisać'); /*Serial A zostanie wysłany do Arduino*/
col1 = kolor (255); /*Kolor elipsy zmiany na pełną białą*/
w przeciwnym razie
Port.Write („x”); /*w przeciwnym razie LED 1 pozostanie wyłączone, a seryjnie x zostanie wysłany do Arduino Ide*/
col1 = kolor (100); /*Jasnoszary kolor elipsy, gdy przełącznik nie jest naciśnięty*/
/*Podobnie zaprojektował resztę trzech przycisków*/
void toggle2 (flag boolean2)
if (flag2 == false)
Port.Write („B”);
col2 = kolor (255);
w przeciwnym razie
Port.Napisz („y”);
col2 = kolor (100);
void toggle3 (flag boolean3)
if (flag3 == false)
Port.Write („C”);
col3 = kolor (255);
w przeciwnym razie
Port.Write („z”);
col3 = kolor (100);
void toggle4 (flag boolean4)
if (flag4 == false)
Port.Write („o”);
col4 = kolor (255);
w przeciwnym razie
Port.Write („F”);
col4 = kolor (100);
Powyższy kod rozpoczął się od włączenia biblioteki ControlP5 wraz z serialowym plikiem komunikacji. Następnie zdefiniowaliśmy 4 różne zmienne, które będą przechowywać kolory dla różnych stanów przycisków.
W części konfiguracji rozmiar okna GUI jest zdefiniowany. Następny port COM jest zdefiniowany dla komunikacji szeregowej z tablicą Arduino. Możesz sprawdzić port COM za pomocą Arduino IDE.
Następnie zdefiniowaliśmy cztery różne przyciski: ich rozmiar i pozycja. Wartość początkowa tych czterech tych czterech przycisków jest ustawiona na true. Pierwsze trzy przyciski indywidualnie sterują diodą LED, podczas gdy czwarty przycisk przełącza wszystkie trzy diody LED jednocześnie.
Następnie w funkcji losowania pustki zaprojektowaliśmy wskaźnik elipsy dla czterech przycisków. Po naciśnięciu każdego z przycisków przełączania kolor elipsy przesunie się na pełną jasność, pokazując, że dioda LED jest włączona.
Za pomocą funkcji pushmatrix () i PopMatrix () zainicjowaliśmy warunek IF dla każdego z przełączników przełączania. Po naciśnięciu któregokolwiek z przycisków przełączania będzie tłumaczy, a elipsa zmieni kolor na 255.
Na początku programu zdefiniowaliśmy osobny stan kolorów dla każdej elipsy odpowiadającej określonemu przyciskowi.
I wreszcie definiuje się funkcję pustki dla każdego z przycisków przełączania. Ta funkcja będzie seryjnie wyśle określony znak na płytę Arduino po naciśnięciu przełącznika.
Na przykład, jeśli wartość Toggle2 jest fałszywą znakiem B będzie przesyłane seryjnie do Arduino. Który włączy diodę LED przy styku D11. Podobnie, jeśli wartość Toggle2 jest prawdziwą postacią y będzie transmitowane seryjnie, co skręci diodę LED przy pin D11 do wyłączania.
Następujące tabele dają nam wyobrażenie o tym, jak działają te postacie szeregowe:
Znak seryjny | Odpowiedź wyjściowa |
---|---|
A | Włącz diodę LED przy pin D10 |
B | Włącz diodę LED przy pin D11 |
C | Włącz diodę LED przy pin D12 |
X | Wyłącz diodę LED przy styku D10 |
y | Wyłącz diodę LED przy pin D11 |
z | Wyłącz LED przy pin D12 |
Notatka: Możemy dostosować te znaki do dowolnego innego, ale upewnij się, że używasz tych samych znaków zarówno w Arduino, jak i kodzie przetwarzania.
4: Kod IDE Arduino dla GUI
Poniżej znajduje się kod Arduino napisany w Arduino IDE:
void setup ()
pinmode (10, wyjściowe); /*Pin dla LED1*/
Pinmode (11, wyjście); /*Pin dla LED2*/
Pinmode (12, wyjściowe); /*Pin dla LED3*/
Seryjny.rozpocząć (9600); /*Szybkość seryjna Baud*/
void Loop ()
if (serial.Dostępne ()) /*Sprawdź dostępność danych szeregowych z przetwarzania* /
Char Val = serial.Czytać(); /*Jeśli dostępne są dane szeregowe, przechowuj je w zmiennej*/
if (val == 'a') /*Jeśli otrzymano* /
DigitalWrite (10, wysoki); /*Włącz LED1*/
if (val == 'b') /*jeśli b otrzymał* /
DigitalWrite (11, High); /*Włącz LED2*/
if (val == 'c') /*jeśli C otrzymał* /
DigitalWrite (12, wysoki); /*Włącz LED3*/
if (val == 'x') /*jeśli x otrzymał* /
DigitalWrite (10, niski); /*wyłącz LED1*/
if (val == 'y') /*jeśli y otrzymano* /
DigitalWrite (11, niski); /*wyłącz LED2*/
if (val == 'z') /*Jeśli z otrzymał* /
DigitalWrite (12, niski); /*wyłącz LED3*/
if (val == 'o') /*jeśli o otrzymano* /
DigitalWrite (10, wysoki);
DigitalWrite (11, High); /*Włącz wszystkie diody LED*/
DigitalWrite (12, wysoki);
if (val == 'f') /*jeśli f otrzymał* /
DigitalWrite (10, niski);
DigitalWrite (11, niski); /*wyłącz wszystkie diody LED*/
DigitalWrite (12, niski);
Ten kod zaczął się od zdefiniowania PIN dla trzech diod LED. Każdy z tych pinów jest zdefiniowany jako wyjście za pomocą funkcji pinmode (). Następny kod Arduino będzie stale sprawdzał dane szeregowe. Jeśli dostępne są dane szeregowe, wygeneruje odpowiedź zgodnie z tym.
Na przykład, jeśli przełącznik przełączania GUI przełącznika 1 jest naciśnięty znak "A" zostanie odebrane przez Arduino i włączy diodę LED przy pin D10. Podobnie, jeśli postać "X" jest odbierany seryjnie, wyłączy diodę LED przy pin D10:
5: Wyjście
Po przesłaniu kodu na płytę Arduino uruchom kod przetwarzania i upewnij się, że płyta Arduino jest seryjnie połączona z komputerem.
Następne okno otworzy się, pokazując nam GUI zaprojektowane dla trzech diod LED. Za pomocą tego GUI możemy kontrolować dowolną diody LED, próbując przełączać przełącznik:
Możemy kontrolować blask LED za pomocą tego GUI:
Wniosek
Użycie Controlp5 Biblioteka w połączeniu z przetwarzaniem, a Arduino oferuje potężne rozwiązanie do tworzenia projektów opartych na GUI. Biblioteka zapewnia kompleksowy zestaw narzędzi i widżetów, które upraszczają proces tworzenia przyjaznych dla użytkownika interfejsów graficznych, umożliwiając programistom skupienie się na podstawowej funkcjonalności ich projektu.