Kalkulačka dotykovej obrazovky Arduino: 7 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:58

Ahoj! Toto je projekt na výrobu kalkulačky s dotykovým displejom pomocou Arduino Uno a štítu TFT LCD. Prišiel som s konceptom pre svoju hodinu programovania v domácej škole a skúsenosti s budovaním tohto projektu boli veľmi zaujímavé. Táto kalkulačka dokáže štyri jednoduché matematické operácie (sčítanie, odčítanie, násobenie a delenie). Tiež zobrazuje až dve desatinné miesta pre odpovede na delenie, ktoré ich majú. Poďme sa ponoriť priamo dovnútra! Dodávky pre tento projekt sú uvedené nižšie.

Zásoby

- Arduino Uno

-2,4 TFT LCD štít (tu som ho kúpil:

- kábel USB A na B (kábel na pripojenie Arduina k počítaču)

- Počítač s nainštalovaným IDE Arduino

- Budete si tiež musieť stiahnuť dve knižnice: MCUFRIEND_kbv a dotykový displej. Prvý z nich nájdete na github (odkaz: https://github.com/prenticedavid/MCUFRIEND_kbv) alebo môžete použiť súbor zip knižnice, ktorý uvádzam nižšie. Druhý je na nainštalovanie v správcovi knižníc Arduino.

Krok 1: Pripojenie hardvéru

Pripojenie štítu dotykovej obrazovky k Arduino Uno je jednoduché a rýchle. Stačí zoradiť najnižšie piny na štíte s najnižšími vývodmi na Arduine a štít zasunúť do čapov. Horný kolík 5 V a neoznačený kolík na strane napájania by nemali mať v sebe kolíky zo štítu, pričom rovnaké parametre platia pre kolíky označené SCL a SDA na druhej strane dosky. Teraz sme pripravení kódovať!

Krok 2: Kód: Globálne definície a nastavenie

#zahrnúť

MCUFRIEND_kbv tft; // každopádne pevne zapojené pre štíty UNO

#zahrnúť

#definovať YP A3

#definovať XM A2

#definovať YM 9

#define XP 8

TouchScreen ts = TouchScreen (XP, YP, XM, YM, 300);

#definovať MINPRESSURE 10

Toto je začiatok kódu, kde zahrnujeme knižnice (MCUFRIEND_kbv a dotyková obrazovka), definujeme piny X a Y, nastavujeme parametre dotykovej obrazovky a definujeme minimálny tlak potrebný na to, aby Arduino zaregistroval užívateľský lis.

int ID;

int user_selection;

float save_number = 0;

float term1;

int op_num;

plavákový výsledok;

int kurzorLocX = 5;

int kurzorLocY = 20;

Tesne pred nastavením musíme nastaviť niekoľko globálnych premenných. ID pomáha pri uvádzaní dotykovej obrazovky do prevádzky. user_selection obsahuje číslo, ktoré zodpovedá kľúču, ktorý používateľ zvolí pri stlačení dotykového displeja. uložené_číslo je premenná, ktorú vytlačíme na obrazovku po zadaní používateľa (viac o tom v slučke). Je to float, takže môže obsahovať desatinné čísla aj celé čísla. term1 je premenná, do ktorej je uložené prvé číslo rovnice po výbere operandu. op_num uloží operand ako číslo (1 na sčítanie, 2 na odčítanie, 3 na násobenie a 4 na delenie). Výsledkom je premenná, ktorá sa vytlačí na obrazovku potom, čo používateľ stlačí znamienko rovnosti. Je to tiež plavák. cursorLocX a cursorLocY sú body mapovania na dotykovej obrazovke, na ktorých je kurzor nastavený viackrát (nachádza sa v sivom pruhu v hornej časti, inak známy ako pole s výsledkami).

neplatné nastavenie () {

tft.reset ();

ID = tft.readID ();

tft.begin (ID);

tft.setRotation (0);

tft.fillScreen (TFT_DARKGREY);

štvorce ();

čísla ();

tft.setTextSize (3);

tft.setTextColor (TFT_BLUE, TFT_DARKGREY);

}

Naša funkcia nastavenia najskôr obsahuje inicializáciu štítu dotykovej obrazovky (riadky 1-3). Orientácia štítu sa nastavuje pomocou príkazu tft.setRotation (), pričom 0 je vzpriamený. Celá obrazovka je zafarbená na tmavosivú s príkazom tft.fillScreen (), ktorý napíšeme cez hornú časť (okrem poľa s výsledkami). Funkcie štvorcov () a číslic () nakreslia štvorce kalkulačky, štvorce vyfarbia čiernobielo a dajú šachovnicovým vzorom číslice/operandy na štvorce modrou farbou. K tým sa dostaneme v nasledujúcom kroku. Príkaz tft.setTextSize () nastaví veľkosť textu poľa s výsledkami na 3, čo je stredné písmo. Príkaz tft.setTextColor () nastaví farbu textu poľa s výsledkami na modrú, ktorá je zapísaná cez tmavosivé pole.

Krok 3: Kód: Slučka

void loop () {numberSelect ();

oneskorenie (100);

if (user_selection == 16) {

;

} else {

if (user_selection <10) {

uložené_číslo = uložené_číslo * 10 + výber používateľa;

tft.setCursor (cursorLocX, cursorLocY);

tft.print (uložené_číslo);

} else if (user_selection> 10) {

prepínač (výber používateľa) {

prípad 11:

op_num = 1;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("+");

term1 = uložené_číslo;

uložené_číslo = 0;

prestávka;

prípad 12:

op_num = 2;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("-");

term1 = uložené_číslo;

uložené_číslo = 0;

prestávka;

prípad 13:

op_num = 3;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("X");

term1 = uložené_číslo;

uložené_číslo = 0;

prestávka;

prípad 14:

op_num = 4;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("/");

term1 = uložené_číslo;

uložené_číslo = 0;

prestávka;

prípad 15:

uložené_číslo = 0;

termín1 = 0;

op_num = 0;

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("");

prestávka;

}

tft.setCursor (cursorLocX, cursorLocY);

Toto je veľa na žuvanie, takže vysvetlím, čo je vyššie. Začneme zavolaním funkcie numberSelect (), ktorá každému štvorcu na dotykovej obrazovke priradí číslo. Keď používateľ stlačí jeden z týchto štvorcov, funkcia nastaví premennú user_selection na číslo tohto štvorca. Prvý príkaz if má prejsť cyklom iba vtedy, ak bol vykonaný platný výber používateľa. Ak je, nasledujúci príkaz if sa pýta, či má user_selection v sebe uložené číslo menšie ako 10 (čísla 0-9). Ak áno, uložené_číslo sa vynásobí 10 a číslo vo výbere používateľa sa pridá k uloženému_číslu, ktoré sa vytlačí v poli s výsledkami na dotykovej obrazovke. Ak nie, nasledujúci príkaz if sa pýta, či má user_selection v sebe uložené číslo väčšie ako 10 (čísla operandov: 11 pre +, 12 pre -, 13 pre X, 14 pre /a 15 pre čistý štvorec obrazovky). O každý prípad (určený výberom užívateľa) sa stará funkcia prepínača. Premennej op_num je priradené číslo, ktoré zodpovedá operandu, ktorý bol vybratý (1 pre +, 2 pre -, 3 pre X a 4 pre /). Hodnota v uloženom_čísle sa uloží do premennej term1, aby sa premennú uloženého_čísla dalo použiť pre druhú polovicu rovnice. Symbol operandu sa vytlačí na obrazovku spolu s vymazaním akýchkoľvek čísel v poli s výsledkami. Jedinou výnimkou je jasný štvorec obrazovky, ktorý vynuluje všetky výpočtové premenné a vymaže pole s výsledkami čohokoľvek na ňom.

} else {

prepínač (op_num) {

prípad 1:

výsledok = termín1 + uložené_číslo;

tft.setCursor (cursorLocX, cursorLocY);

tft.print (dvojnásobok (výsledok));

prestávka;

prípad 2:

výsledok = termín1 - uložené_číslo;

tft.setCursor (cursorLocX, cursorLocY);

tft.print (dvojnásobok (výsledok));

prestávka;

prípad 3:

výsledok = termín1 * uložené_číslo;

tft.setCursor (cursorLocX, cursorLocY);

tft.print (dvojnásobok (výsledok));

prestávka;

prípad 4:

výsledok = float (termín1) / float (uložené_číslo);

tft.setCursor (cursorLocX, cursorLocY);

tft.print (výsledok);

prestávka;

}

tft.setCursor (cursorLocX, cursorLocY);

uložené_číslo = výsledok;

termín1 = 0;

op_num = 0;

oneskorenie (1000);

}

}

}

Posledná časť cyklu sa zaoberá udalosťou, keď používateľ vyberie znamienko rovnosti (user_selection == 10). Ďalšia prepínacia funkcia funguje cez štyri matematické funkcie (určené op_num). Sčítávací prípad (prípad 1) sčíta term1 a uložené_číslo a uloží číslo do výslednej premennej. Výsledok sa vytlačí do poľa výsledkov ako dvojnásobok. Odčítanie prípadu (prípad 2) odčíta uložené_číslo od výrazu1 a číslo uloží do premennej výsledku. Výsledok sa vytlačí do poľa s výsledkami ako dvojnásobok. Prípad násobenia (prípad 3) vynásobí výraz1 uloženým číslom a číslo uloží do výslednej premennej. Výsledok sa vytlačí do poľa s výsledkami ako dvojnásobok. Rozdelenie (prípad 4) vydelí výraz1 výrazom uložené_číslo dohromady a číslo uloží do premennej výsledku. Výsledok sa vytlačí do poľa s výsledkami ako float (pretože odpovede na delenie môžu byť desatinné čísla). Po vytlačení čísla, operandu alebo výsledku na obrazovku sa kurzor resetuje, uložené_číslo sa nastaví na predchádzajúci výsledok a term1 a op_num sa vynulujú.

Niekoľko poznámok: používateľ nemôže do kalkulačky zadávať desatinné čísla kvôli nedostatku štvorca s desatinnou čiarkou. Užívateľ môže tiež urobiť iba jednu rovnicu súčasne. Výsledok nemôžete vypočítať a potom tento výsledok sčítať/odčítať/násobiť/deliť. Vo funkcii numberSelect () je funkcia, ktorá po vytlačení výsledku vyčistí obrazovku, ak používateľ stlačil iný štvorec.

Krok 4: Kód: Funkcia štvorcov

prázdne štvorce () {

// čiernobiele štvorce sa striedajú v každom riadku a prvý a tretí riadok majú opačný vzor ako druhý a štvrtý riadok

tft.fillRect (0, 60, 60, 65, TFT_BLACK); // začína prvý riadok štvorcov, čierny až biely tft.fillRect (60, 60, 60, 65, TFT_WHITE);

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

tft.fillRect (180, 60, 60, 65, TFT_WHITE); // končí prvý riadok štvorcov

tft.fillRect (0, 125, 60, 65, TFT_WHITE); // druhý riadok štvorcov sa začína, biely až čierny tft.fillRect (60, 125, 60, 65, TFT_BLACK);

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

tft.fillRect (180, 125, 60, 65, TFT_BLACK); // končí druhý rad štvorcov

tft.fillRect (0, 190, 60, 65, TFT_BLACK); // tretí rad štvorcov začína, čiernobielo tft.fillRect (60, 190, 60, 65, TFT_WHITE);

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

tft.fillRect (180, 190, 60, 65, TFT_WHITE); // tretí rad štvorcov končí

tft.fillRect (0, 255, 60, 65, TFT_WHITE); // štvrtý riadok štvorcov sa začína, biely až čierny tft.fillRect (60, 255, 60, 65, TFT_BLACK);

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

tft.fillRect (180, 255, 60, 65, TFT_BLACK); // končí štvrtý rad štvorcov

}

Funkcia square () je veľmi jednoduchá. Príkaz tft.fillRect (X1, Y1, X2, Y2, TFT_COLOR) nakreslí obdĺžnik podľa parametrov, ktoré mu boli odovzdané, ktorými sú prvé polohy x a y, druhé polohy x a y a farba, ktorou je obdĺžnik vyplnený.. Táto funkcia nakreslí všetky štyri rady štvorcov (technicky obdĺžnikov) a vyplní každé políčko druhou farbou.

Krok 5: Funkcia Code: Numbers

neplatné čísla () {

tft.setTextColor (TFT_BLUE); // nastaví farbu čísla/znaku na modrú

tft.setTextSize (5); // nastaví číslo/veľkosť znaku na 5

tft.setCursor (18, 75); // nastaví kurzor na prvý riadok číslic/znakov

tft.print ("7 8 9 /"); // vytlačí prvý riadok číslic/znakov

tft.setCursor (18, 140); // nastaví kurzor na druhý riadok číslic/znakov

tft.print ("4 5 6 X"); // vytlačí druhý riadok čísel/znakov

tft.setCursor (18, 205); // nastaví kurzor na tretí riadok číslic/znakov

tft.print ("1 2 3 -"); // vytlačí tretí riadok číslic/znakov

tft.setCursor (18, 270); // nastaví kurzor na štvrtý riadok číslic/znakov

tft.print ("C 0 = +"); // vytlačí štvrtý riadok číslic/znakov

}

Funkcia number () je tiež jednoduchá. Prvé dva riadky nastavia väčšiu veľkosť textu a farbu na modrú. Príkaz tft.setCursor () nastaví kurzor na pozíciu v každom riadku, od ktorého začína písanie čísel. Potom príkaz tft.print () vytlačí čísla/znaky na štvorce.

Krok 6: Funkcia Code: NumberSelect

zrušiť číslo Vybrať () {

TSPoint p = ts.getPoint ();

pinMode (XM, VÝSTUP);

pinMode (YP, OUTPUT);

ak (p.z> MINISTRUK) {

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

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

if (result! = 0) {

výsledok = 0;

uložené_číslo = 0;

tft.print ("JASNÉ HODNOTY");

oneskorenie (500);

tft.setCursor (cursorLocX, cursorLocY);

tft.print ("");

tft.setCursor (cursorLocX, cursorLocY);

}

Na začiatku funkcie numberSelect () požiadame používateľa o zadanie z dotykovej obrazovky príkazom ts.getPoint (). Po zhromaždení týchto údajov skontrolujeme, či nebol prekročený minimálny tlak (alebo inými slovami, či používateľ niekde stlačil dotykový displej). Ak je, súradnice x a y sú mapované z karteziánskych súradníc na súradnice špecifické pre dotykový displej. (0, 0) je ľavý horný roh dotykovej obrazovky, pričom os x smeruje naprieč a os y smeruje nadol. V ďalšej časti sa kontroluje, či je vo výsledku uložené číslo. Ak existuje, výsledok a uložené_číslo sa resetujú na 0. Nad poľom s výsledkami sa vytlačí správa „VYMAZAŤ HODNOTY“a obrazovka sa vyčistí s kurzorom späť do východiskovej polohy.

if (str.y 60) {// prvý rad štvorcov

ak (str.x <60)

user_selection = 7;

inak ak (s.x <120)

user_selection = 8;

inak ak (str.x <180)

user_selection = 9;

else user_selection = 14;

} else if (str. 125) {// druhý rad štvorcov

ak (str.x <60)

user_selection = 4;

inak ak (s.x <120)

user_selection = 5;

inak ak (str.x <180)

user_selection = 6;

else user_selection = 13;

} else if (str. 190) {// tretí rad štvorcov

ak (str.x <60)

user_selection = 1;

inak ak (s.x <120)

user_selection = 2;

inak ak (str.x <180)

user_selection = 3;

else user_selection = 12;

} else if (str.y> 255) {// štvrtý rad štvorcov

ak (s.x <60)

user_selection = 15;

inak ak (s.x <120)

user_selection = 0;

inak ak (str.x <180)

user_selection = 10;

else user_selection = 11;

}

} else {

user_selection = 16; // user_selection je nastavený na 16 (nič premenné)

}

}

Toto je časť, ktorá určuje, ktoré tlačidlo bolo vybraté. Počnúc horným radom štvorcov a končiacim spodným radom Arduino hľadá, kde bola obrazovka v skutočnosti stlačená. Potom štvorcu priradí číslo a toto číslo uloží do výberu používateľa. Čísla 0-9 zodpovedajú štvorcom s číslami, čísla 11-15 zodpovedajú operandovým štvorcom a voľnému štvorcu a číslo 10 zodpovedá štvorcu so znamienkom rovnosti. Ak nebol vybratý žiadny štvorec, potom je user_selection nastavený na 16, čím sa slučka začne znova (pozri funkciu slučky).

Krok 7: Užite si svoj dokončený projekt

Tu to máte! Teraz máte k dispozícii kalkulačku s dotykovým displejom, ktorá dokáže sčítať, odčítať, násobiť a deliť. Tento projekt zmenil celý spôsob, akým som si myslel, že kalkulačka funguje. Keď som pracoval na tomto projekte, pamätám si, ako som svojmu učiteľovi na hodine povedal: „Už sa nikdy nebudem pozerať na kalkulačku rovnako!“Funkcie, o ktorých si ako používateľ myslíte, že sú jednoduché, sú trochu náročné, keď sa pokúšate napodobniť svoj nápad za počítačom. Dúfam, že sa vám projekt páčil, a dúfam, že sa zmenilo aj vaše myslenie na to, ako kalkulačka funguje!

Tu je celý kód pre vaše pohodlie. Je plná komentárov, takže ak máte nejaké problémy, mali by vám ukázať, čo jednotlivé riadky robia.