Kalkulator z ekranem dotykowym Arduino: 7 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:29

Cześć! Jest to projekt wykonania kalkulatora z ekranem dotykowym przy użyciu Arduino Uno i ekranu TFT LCD. Wpadłem na pomysł mojej lekcji programowania w szkole domowej, a doświadczenie w budowaniu tego projektu było bardzo interesujące. Ten kalkulator może wykonywać cztery proste operacje matematyczne (dodawanie, odejmowanie, mnożenie i dzielenie). Wyświetla również do dwóch miejsc po przecinku dla odpowiedzi dzielenia, które je zawierają. Zanurzmy się od razu! Dostawy dla tego projektu są wymienione poniżej.

Kieszonkowe dzieci

- Arduino Uno

- 2,4 TFT LCD Shield (tutaj kupiłem:

- kabel USB A do B (przewód do podłączenia Arduino do komputera)

- Komputer z zainstalowanym Arduino IDE

- Musisz również pobrać dwie biblioteki: MCUFRIEND_kbv i Touchscreen. Pierwszy z nich znajdziesz na github (link: https://github.com/prenticedavid/MCUFRIEND_kbv) lub możesz użyć pliku zip biblioteki, który zamieściłem poniżej. Drugi znajduje się w menedżerze Arduino Library do instalacji.

Krok 1: Połączenia sprzętowe

Połączenie ekranu dotykowego z Arduino Uno jest proste i szybkie. Wszystko, co musisz zrobić, to wyrównać najniższe piny na tarczy z najniższymi pinami na Arduino i wepchnąć osłonę do pinów. Górny pin 5V i nieoznaczony pin po stronie zasilania nie powinny mieć w sobie pinów z ekranu, z tymi samymi parametrami dla pinów oznaczonych SCL i SDA po drugiej stronie płytki. Teraz jesteśmy gotowi do kodowania!

Krok 2: Kodeks: globalne definicje i konfiguracja

#włączać

MCUFRIEND_kbv tft; // i tak przewodowe dla osłon UNO

#włączać

#zdefiniuj YP A3

#definiuj XM A2

#zdefiniuj YM 9

#zdefiniuj XP 8

Ekran Dotykowy ts = Ekran Dotykowy (XP, YP, XM, YM, 300);

#define MINPRESSURE 10

To początek kodu, w którym umieszczamy biblioteki (MCUFRIEND_kbv & Touchscreen), definiujemy piny X i Y, ustawiamy parametry ekranu dotykowego oraz definiujemy minimalne ciśnienie potrzebne do zarejestrowania przez Arduino naciśnięcia użytkownika.

wewn. ID;

int wybór_użytkownika;

float zapisany_numer = 0;

termin zmiennoprzecinkowy1;

int numer_op;

wynik zmiennoprzecinkowy;

int kursorLocX = 5;

int kursorLocY = 20;

Tuż przed konfiguracją musimy ustawić kilka zmiennych globalnych. ID pomaga w uruchomieniu i uruchomieniu ekranu dotykowego. user_selection przechowuje liczbę odpowiadającą klawiszowi wybranemu przez użytkownika podczas naciskania ekranu dotykowego. save_number to zmienna, którą wypisujemy na ekranie po wejściu użytkownika (więcej o tym w pętli). Jest to pływak, więc może zawierać zarówno liczby dziesiętne, jak i całkowite. term1 to zmienna, w której zapisywana jest pierwsza liczba równania po wybraniu argumentu. op_num zapisuje operand jako liczbę (1 do dodawania, 2 do odejmowania, 3 do mnożenia i 4 do dzielenia). wynik jest zmienną, która jest wypisywana na ekran po naciśnięciu przez użytkownika znaku równości. To także pływak. cursorLocX i cursorLocY to punkty mapowania na ekranie dotykowym, w których kursor jest ustawiany wielokrotnie (znajduje się na szarym pasku u góry, inaczej zwanym polem wyników).

pusta konfiguracja (){

tft.reset();

ID = tft. ID odczytu();

tft.początek(ID);

tft.setRotation(0);

tft.fillScreen(TFT_DARKGREY);

kwadraty();

liczby();

tft.setRozmiarTekstu(3);

tft.setTextColor(TFT_BLUE, TFT_DARKGREY);

}

Nasza funkcja konfiguracji zawiera najpierw inicjalizację ekranu dotykowego (linie 1-3). Orientację tarczy ustawia się za pomocą polecenia tft.setRotation(), gdzie 0 oznacza pozycję pionową. Cały ekran jest pokolorowany na ciemnoszary za pomocą polecenia tft.fillScreen(), które napiszemy na górze (z wyjątkiem pola wyników). Funkcje squares() i numbers() rysują kwadraty kalkulatora, kolorują je na czarno-biało we wzór szachownicy i zapisują liczby/operandy w kwadratach na niebiesko. Dojdziemy do nich w następnym kroku. Polecenie tft.setTextSize() ustawia rozmiar tekstu w polu wyników na 3, co jest średnią czcionką. Polecenie tft.setTextColor() ustawia kolor tekstu pola wyników na niebieski, który jest nadpisywany na ciemnoszarym polu.

Krok 3: Kod: Pętla

void loop() { liczbaWybierz();

opóźnienie (100);

if (user_selection == 16){

;

}w przeciwnym razie{

jeśli (wybór_użytkownika < 10){

zapisany_numer = zapisany_numer * 10 + wybór_użytkownika;

tft.setCursor(cursorLocX, cursorLocY);

tft.print(zapisany_numer);

}inaczej, jeśli (user_selection > 10){

przełącznik (wybór_użytkownika){

przypadek 11:

liczba_op = 1;

tft.setCursor(cursorLocX, cursorLocY);

tft.print("+");

termin1 = zapisany_numer;

zapisany_numer = 0;

przerwa;

przypadek 12:

liczba_op = 2;

tft.setCursor(cursorLocX, cursorLocY);

tft.print("- ");

termin1 = zapisany_numer;

zapisany_numer = 0;

przerwa;

przypadek 13:

liczba_op = 3;

tft.setCursor(cursorLocX, cursorLocY);

tft.print("X");

termin1 = zapisany_numer;

zapisany_numer = 0;

przerwa;

przypadek 14:

liczba_op = 4;

tft.setCursor(cursorLocX, cursorLocY);

tft.print("/ ");

termin1 = zapisany_numer;

zapisany_numer = 0;

przerwa;

przypadek 15:

zapisany_numer = 0;

termin1 = 0;

liczba_op = 0;

tft.setCursor(cursorLocX, cursorLocY);

tft.print(" ");

przerwa;

}

tft.setCursor(cursorLocX, cursorLocY);

To dużo do przeżucia, więc wyjaśnię, co jest powyżej. Zaczynamy od wywołania funkcji numberSelect(), która przypisuje numer do każdego kwadratu na ekranie dotykowym. Kiedy użytkownik naciśnie jeden z tych kwadratów, funkcja ustawia zmienną user_selection na numer kwadratu. Pierwsza instrukcja if ma uruchamiać pętlę tylko wtedy, gdy dokonano prawidłowego wyboru użytkownika. Jeśli tak, następna instrukcja if pyta, czy user_selection ma zapisaną liczbę mniejszą niż 10 (liczby 0-9). Jeśli tak, zapisany_numer jest mnożony przez 10, a liczba w user_selection jest dodawana do zapisany_numer, który jest drukowany w polu wyników na ekranie dotykowym. Jeśli nie, następna instrukcja if pyta, czy user_selection ma zapisaną liczbę większą niż 10 (numery operandu: 11 dla +, 12 dla -, 13 dla X, 14 dla / i 15 dla kwadratu wyczyść ekran). Funkcja przełącznika zajmuje się każdym przypadkiem (określonym przez user_selection). Zmienna op_num otrzymuje liczbę odpowiadającą wybranemu operandowi (1 dla +, 2 dla -, 3 dla X i 4 dla /). Wartość w zapisany_numer jest zapisywana w zmiennej term1 tak, że zmienna zapisany_numer może być użyta w drugiej połowie równania. Symbol operandu jest drukowany na ekranie wraz z wyczyszczeniem wszelkich liczb w polu wyników. Jedynym wyjątkiem jest kwadracik czyszczenia ekranu, który resetuje wszystkie zmienne obliczeniowe i czyści z pola wyników wszystko, co się na nim znajduje.

}w przeciwnym razie{

przełącznik(op_num){

przypadek 1:

wynik = termin1 + zapisany_numer;

tft.setCursor(cursorLocX, cursorLocY);

tft.print(podwójny(wynik));

przerwa;

przypadek 2:

wynik = termin1 - zapisany_numer;

tft.setCursor(cursorLocX, cursorLocY);

tft.print(podwójny(wynik));

przerwa;

przypadek 3:

wynik = termin1 * zapisany_numer;

tft.setCursor(cursorLocX, cursorLocY);

tft.print(podwójny(wynik));

przerwa;

przypadek 4:

wynik = float(term1) / float(zapisany_numer);

tft.setCursor(cursorLocX, cursorLocY);

tft.print(wynik);

przerwa;

}

tft.setCursor(cursorLocX, cursorLocY);

zapisany_numer = wynik;

termin1 = 0;

liczba_op = 0;

opóźnienie (1000);

}

}

}

Ostatnia część pętli dotyczy zdarzenia wyboru przez użytkownika znaku równości (user_selection == 10). Inna funkcja przełącznika działa poprzez cztery funkcje matematyczne (określane przez op_num). Przypadek dodawania (przypadek 1) dodaje term1 i zapisany_numer razem i zapisuje liczbę w zmiennej wynikowej. Wynik jest drukowany w polu wyników jako podwójny. Przypadek odejmowania (przypadek 2) odejmuje numer zapisany od term1 i zapisuje liczbę w zmiennej wynikowej. Wynik jest drukowany w polu wyników jako podwójny. Przypadek mnożenia (przypadek 3) mnoży term1 przez zapisany_numer i zapisuje liczbę w zmiennej wynikowej. Wynik jest drukowany w polu wyników jako podwójny. Przypadek dzielenia (przypadek 4) dzieli term1 przez zapisany_liczba razem i zapisuje liczbę w zmiennej wynikowej. Wynik jest wypisywany w polu wyników jako liczba zmiennoprzecinkowa (ponieważ odpowiedzi z dzielenia mogą być liczbami dziesiętnymi). Po zdarzeniu liczby, operandu lub wyniku na ekranie, kursor jest resetowany, save_number jest ustawiany na poprzedni wynik, a term1 i op_num są resetowane.

Kilka uwag: użytkownik nie może wprowadzać do kalkulatora liczb dziesiętnych ze względu na brak kwadratu z kropką dziesiętną. Ponadto użytkownik może wykonać tylko jedno równanie na raz. Nie możesz obliczyć wyniku, a następnie dodać/odjąć/mnożyć/dzielić tego wyniku. W funkcji numberSelect() istnieje funkcja, która czyści ekran po wydrukowaniu wyniku, jeśli użytkownik naciśnie inny kwadrat.

Krok 4: Kod: funkcja kwadratów

puste kwadraty (){

// czarne i białe kwadraty występują naprzemiennie w każdym rzędzie, a pierwszy i trzeci rząd mają odwrotny wzór niż drugi i czwarty rząd

tft.fillRect(0, 60, 60, 65, TFT_BLACK); // zaczyna się pierwszy rząd kwadratów, od czerni do bieli tft.fillRect(60, 60, 60, 65, TFT_WHITE);

tft.fillRect(120, 60, 60, 65, TFT_BLACK);

tft.fillRect(180, 60, 60, 65, TFT_WHITE); // pierwszy rząd kwadratów się kończy

tft.fillRect(0, 125, 60, 65, TFT_WHITE); // zaczyna się drugi rząd kwadratów, od białego do czarnego tft.fillRect(60, 125, 60, 65, TFT_BLACK);

tft.fillRect(120, 125, 60, 65, TFT_WHITE);

tft.fillRect(180, 125, 60, 65, TFT_BLACK); // kończy się drugi rząd kwadratów

tft.fillRect(0, 190, 60, 65, TFT_BLACK); // zaczyna się trzeci rząd kwadratów, od czerni do bieli tft.fillRect(60, 190, 60, 65, TFT_WHITE);

tft.fillRect(120, 190, 60, 65, TFT_BLACK);

tft.fillRect(180, 190, 60, 65, TFT_WHITE); // kończy się trzeci rząd kwadratów

tft.fillRect(0, 255, 60, 65, TFT_WHITE); // zaczyna się czwarty rząd kwadratów, od białego do czarnego tft.fillRect(60, 255, 60, 65, TFT_BLACK);

tft.fillRect(120, 255, 60, 65, TFT_WHITE);

tft.fillRect(180, 255, 60, 65, TFT_BLACK); // kończy się czwarty rząd kwadratów

}

Funkcja squares() jest dość prosta. Polecenie tft.fillRect(X1, Y1, X2, Y2, TFT_COLOR) rysuje prostokąt zgodnie z przekazanymi do niego parametrami, którymi są pierwsze pozycje x i y, drugie pozycje x i y oraz kolor, którym prostokąt jest wypełniony. Ta funkcja rysuje wszystkie cztery rzędy kwadratów (technicznie prostokątów) i wypełnia każdy kwadrat przekazanym kolorem.

Krok 5: Kod: funkcja liczb

nieważne liczby (){

tft.setTextColor(TFT_BLUE); // ustawia kolor cyfr/znaków na niebieski

tft.setTextSize(5); // ustawia rozmiar liczby/znaku na 5

tft.setCursor(18, 75); // ustawia kursor na pierwszy wiersz liczb/znaków

tft.print("7 8 9 /"); // wyświetla pierwszy wiersz liczb/znaków

tft.setCursor(18, 140); // ustawia kursor na drugi wiersz liczb/znaków

tft.print("4 5 6 X"); // wyświetla drugi wiersz liczb/znaków

tft.setCursor(18, 205); // ustawia kursor na trzeci wiersz liczb/znaków

tft.print("1 2 3 -"); // wyświetla trzeci wiersz liczb/znaków

tft.setCursor(18, 270); // ustawia kursor na czwarty wiersz liczb/znaków

tft.print("C 0 = +"); // wyświetla czwarty wiersz liczb/znaków

}

Funkcja numbers() jest również prosta. Pierwsze dwie linie ustawiają większy rozmiar tekstu i kolor na niebieski. Polecenie tft.setCursor() ustawia kursor na pozycji w każdym wierszu, od której zaczyna się zapisywanie liczb. Następnie polecenie tft.print() drukuje liczby/znaki na kwadratach.

Krok 6: Kod: Funkcja LiczbaWybierz

nieważny numerWybierz (){

TSPoint p = ts.getPoint();

pinMode(XM, WYJŚCIE);

pinMode(YP, WYJŚCIE);

jeśli (p.z > MINCIŚNIENIE){

p.x = mapa(p.x, 250, 845, 0, 239);

p.y = mapa(p.y, 245, 860, 0, 319);

jeśli (wynik != 0){

wynik = 0;

zapisany_numer = 0;

tft.print("KASUJ WARTOŚCI");

opóźnienie (500);

tft.setCursor(cursorLocX, cursorLocY);

tft.print(" ");

tft.setCursor(cursorLocX, cursorLocY);

}

Aby uruchomić funkcję numberSelect(), prosimy użytkownika o wprowadzenie danych z ekranu dotykowego za pomocą polecenia ts.getPoint(). Po zebraniu tych danych sprawdzamy, czy nie zostało przekroczone minimalne ciśnienie (lub innymi słowy, czy użytkownik nacisnął gdzieś na ekranie dotykowym). Jeśli tak, współrzędne x i y są mapowane ze współrzędnych kartezjańskich na współrzędne specyficzne dla ekranu dotykowego. (0, 0) to lewy górny róg ekranu dotykowego, w którym oś x przechodzi w poprzek, a oś y w dół. Następna część sprawdza, czy w wyniku jest zapisany numer. Jeśli tak, wynik i zapisany_numer są resetowane do 0. Komunikat „KASUJ WARTOŚCI” jest drukowany nad polem wyników, a ekran jest czyszczony z kursorem z powrotem do pozycji początkowej.

if (s.y 60){ // pierwszy rząd kwadratów

jeśli (p.x < 60)

wybór_użytkownika = 7;

inaczej, jeśli (p.x < 120)

wybór_użytkownika = 8;

inaczej, jeśli (p.x < 180)

wybór_użytkownika = 9;

w przeciwnym razie wybór_użytkownika = 14;

}else if (s.y 125){ // drugi rząd kwadratów

jeśli (p.x < 60)

wybór_użytkownika = 4;

inaczej, jeśli (p.x < 120)

wybór_użytkownika = 5;

inaczej, jeśli (p.x < 180)

wybór_użytkownika = 6;

w przeciwnym razie wybór_użytkownika = 13;

}else if (s.y 190){ // trzeci rząd kwadratów

jeśli (p.x < 60)

wybór_użytkownika = 1;

inaczej, jeśli (p.x < 120)

wybór_użytkownika = 2;

inaczej, jeśli (p.x < 180)

wybór_użytkownika = 3;

w przeciwnym razie wybór_użytkownika = 12;

}else if (p.y > 255){ // czwarty rząd kwadratów

jeśli (p.x < 60)

wybór_użytkownika = 15;

inaczej, jeśli (p.x < 120)

wybór_użytkownika = 0;

inaczej, jeśli (p.x < 180)

wybór_użytkownika = 10;

w przeciwnym razie wybór_użytkownika = 11;

}

}w przeciwnym razie{

wybór_użytkownika = 16; // user_selection jest ustawiony na 16 (nic zmienna)

}

}

To jest część, która określa, który przycisk został wybrany. Zaczynając od górnego rzędu kwadratów, a kończąc na dolnym rzędzie, Arduino szuka miejsca, w którym faktycznie został naciśnięty ekran. Następnie przypisuje kwadratowi numer i zapisuje ten numer w user_selection. Liczby 0-9 odpowiadają kwadratom liczb, liczby 11-15 odpowiadają kwadratom operandów i czystemu kwadratowi, a liczba 10 odpowiada kwadratowi znaku równości. Jeśli nie wybrano kwadratu, wówczas user_selection jest ustawiane na 16, co spowoduje, że pętla zacznie się od nowa (patrz funkcja pętli).

Krok 7: Ciesz się ukończonym projektem

Masz to! Masz teraz kalkulator z ekranem dotykowym, który może wykonywać dodawanie, odejmowanie, mnożenie i dzielenie. Ten projekt zmienił cały sposób, w jaki myślałem, że działa kalkulator. Kiedy pracowałem nad tym projektem, pamiętam, jak powiedziałem mojemu instruktorowi na zajęciach: „Nigdy już nie spojrzę na kalkulator w ten sam sposób!” Funkcje, które jako użytkownik uważasz za łatwe, są nieco trudne, gdy siedzisz za komputerem i próbujesz naśladować swój pomysł. Mam nadzieję, że podobał Ci się projekt i mam nadzieję, że zmienił się również Twój sposób myślenia o tym, jak działa kalkulator!

Oto cały kod dla Twojej wygody. Jest wypełniony komentarzami, więc jeśli masz jakiekolwiek problemy, powinny pokazać, co robi każda linia.