Arduino touchscreen-calculator met TFT LCD

Arduino heeft altijd geholpen om projecten gemakkelijk te bouwen en ze er aantrekkelijker uit te laten zien. Het programmeren van een LCD-scherm met touchscreen-optie klinkt misschien als een gecompliceerde taak, maar de Arduino-bibliotheken en -schilden hadden het heel gemakkelijk gemaakt. In dit project zullen we een 2,4 ”Arduino TFT LCD- scherm gebruiken om onze eigen Arduino Touch Screen-rekenmachine te bouwen die alle basisberekeningen kan uitvoeren, zoals optellen, aftrekken, delen en vermenigvuldigen.

Vereiste materialen:

Arduino Uno
2,4-inch TFT LCD-scherm Shield
9V batterij.

Kennismaken met de TFT LCD-schermmodule:

Voordat we echt in het project duiken, is het belangrijk om te weten hoe deze 2,4 ”TFT LCD-module werkt en welke typen erin aanwezig zijn. Laten we eens kijken naar de pinouts van deze 2,4 ”TFT LCD-schermmodule.

Zoals je kunt zien zijn er 28 pinnen die perfect in elk Arduino Uno / Arduino Mega Board passen. Een kleine classificatie van deze pinnen wordt gegeven in de onderstaande tabel.

Zoals u kunt zien, kunnen de pinnen worden ingedeeld in vier hoofdclassificaties, zoals LCD-opdrachtpennen, LCD-gegevenspennen, SD-kaartpennen en stroompinnen. We hoeven niet veel te weten over de gedetailleerde werking van deze pennen, aangezien ze worden opgevangen door onze Arduino-bibliotheek.

Je kunt ook een SD-kaartsleuf vinden aan de onderkant van de hierboven getoonde module, die kan worden gebruikt om een SD-kaart met bmp-afbeeldingsbestanden te laden, en deze afbeeldingen kunnen worden weergegeven op ons TFT LCD-scherm met behulp van het Arduino-programma.

Een ander belangrijk ding om op te merken is uw interface-IC. Er zijn veel soorten TFT-modules op de markt, gaande van de originele Adafruit TFT LCD-module tot goedkope Chinese klonen. Een programma dat perfect werkt voor je Adafruit-schild, werkt mogelijk niet hetzelfde voor Chinese breakout-boards. Het is dus erg belangrijk om te weten welke soorten LCD-schermen u in de hand houdt. Dit detail moet worden verkregen bij de verkoper. Als je een goedkope kloon zoals de mijne hebt, dan gebruikt deze hoogstwaarschijnlijk de ili9341 driver IC. U kunt deze TFT LCD-interface met Arduino-zelfstudie volgen om enkele eenvoudige voorbeeldprogramma's uit te proberen en vertrouwd te raken met het LCD-scherm. Bekijk ook onze andere TFT LCD-projecten met Arduino hier:

Hoe NeoPixel LED Strip te gebruiken met Arduino en TFT LCD
Slimme telefoongestuurd digitaal codeslot met Arduino

Kalibratie van het TFT LCD-scherm voor touchscreen:

Als u van plan bent de aanraakschermfunctie van uw TFT LCD-module te gebruiken, moet u deze kalibreren om deze correct te laten werken. Een LCD-scherm zonder kalibratie werkt mogelijk onwaarschijnlijk, u kunt bijvoorbeeld op de ene plaats aanraken en de TFT kan op een andere plaats reageren op aanraking. Deze kalibratieresultaten zullen niet voor alle boards hetzelfde zijn en daarom staat u er alleen voor om dit te doen.

De beste manier om te kalibreren is om het kalibratievoorbeeldprogramma te gebruiken (wordt geleverd met bibliotheek) of de seriële monitor te gebruiken om uw fout te detecteren. Echter voor dit project, aangezien de grootte van de knoppen groot is, zou kalibratie geen groot probleem moeten zijn en ik zal ook uitleggen hoe je je scherm kunt kalibreren onder het programmeergedeelte hieronder.

TFT LCD-verbindingen met Arduino:

Het 2,4 ”TFT LCD-scherm is een perfect Arduino Shield. Je kunt het LCD-scherm direct op de Arduino Uno drukken en het zal perfect matchen met de pinnen en er doorheen schuiven. Om veiligheidsredenen moet u echter de programmeerterminal van uw Arduino UNO afdekken met een kleine isolatietape, voor het geval dat de terminal in contact komt met uw TFT LCD-scherm. Het LCD-scherm dat op UNO is gemonteerd, ziet er hieronder ongeveer zo uit.

Programmering van uw Arduino voor TFT LCD:

We gebruiken de SPFD5408-bibliotheek om deze arduino-rekenmachinecode te laten werken. Dit is een aangepaste bibliotheek van Adafruit en kan naadloos samenwerken met onze LCD TFT-module. Het volledige programma vind je aan het einde van dit artikel.

Opmerking: het is erg belangrijk voor u om deze bibliotheek in uw Arduino IDE te installeren of dit programma om foutloos te compileren.

Om deze bibliotheek te installeren, klik je simpelweg op de link hierboven die je naar een Github-pagina brengt. Klik daar op kloon of download en selecteer "Download ZIP". Er wordt een zip-bestand gedownload.

Open nu Arduino IDE en selecteer Sketch -> Inclusief Librarey -> Add.ZIP-bibliotheek. Er wordt een browservenster geopend, navigeer naar het ZIP-bestand en klik op "OK". Als dit lukt, zou je "Bibliotheek toegevoegd aan je bibliotheken" in de linkerbenedenhoek van Arduino moeten zien. Een gedetailleerde gids om hetzelfde te doen wordt gegeven in de Interfacing Tutorial.

Nu kunt u de onderstaande code in uw Arduino IDE gebruiken en deze uploaden naar uw Arduino UNO zodat de touchscreencalculator werkt. Verderop heb ik de code in kleine segmenten uitgelegd.

We hebben drie bibliotheken nodig om dit programma te laten werken; al deze drie bibliotheken zijn vermeld in het ZIP-bestand dat u hebt gedownload via de hierboven verstrekte link. Ik heb ze gewoon in de code opgenomen, zoals hieronder weergegeven.

# omvatten // Core grafische bibliotheek #include // Hardware-specifieke bibliotheek #include

Zoals eerder gezegd, moeten we het LCD-scherm kalibreren om het te laten werken zoals verwacht, maar maak je geen zorgen, de hier gegeven waarden zijn bijna universeel. De variabelen TS_MINX, TS_MINY, TS_MAXX en TS_MAXY bepalen de kalibratie van het scherm. Je kunt er omheen spelen als je denkt dat de kalibratie niet bevredigend is.

#define TS_MINX 125 #define TS_MINY 85 #define TS_MAXX 965 #define TS_MAXY 905

Omdat we weten dat het TFT LCD-scherm veel kleuren kan weergeven, moeten al deze kleuren in hexadecimale waarde worden ingevoerd. Om het menselijker leesbaar te maken, wijzen we deze waarden toe aan een variabele zoals hieronder weergegeven.

#define WIT 0x0000 // Zwart-> Wit #define GEEL 0x001F // Blauw-> Geel #define CYAAN 0xF800 // Rood-> Cyaan #define ROZE 0x07E0 // Groen-> Roze #define ROOD 0x07FF // Cyaan -> Rood #define GROEN 0xF81F // Roze -> Groen #define BLAUW 0xFFE0 // Geel-> Blauw #define ZWART 0xFFFF // Wit-> Zwart

Oké, we kunnen nu in het programmeergedeelte komen. Bij dit programma zijn drie secties betrokken. Een daarvan is het maken van een gebruikersinterface van een rekenmachine met knoppen en display. Vervolgens worden de knoppen gedetecteerd op basis van de aanraking van de gebruikers en worden uiteindelijk de resultaten berekend en weergegeven. Laten we ze een voor een doornemen.

1. Een gebruikersinterface van Calculator maken:

Dit is waar u veel van uw creativiteit kunt gebruiken om de gebruikersinterface van de rekenmachine te ontwerpen. Ik heb gewoon een basislay-out gemaakt van een rekenmachine met 16 knoppen en een display. Je moet het ontwerp net zo construeren alsof je iets op MS-verf tekent. Met de toegevoegde bibliotheken kunt u lijnen, rechthoeken, cirkels, tekens, tekenreeksen en nog veel meer in elke gewenste kleur tekenen. U kunt de beschikbare functies uit dit artikel begrijpen.

Ik heb de mogelijkheden om lijnen en vakken te tekenen gebruikt om een gebruikersinterface te ontwerpen die erg lijkt op de rekenmachine uit de jaren 90. Elke doos heeft een breedte en hoogte van 60 pixels.

// Teken de resultatenbox tft.fillRect (0, 0, 240, 80, CYAAN); // Teken eerste kolom tft.fillRect (0,260,60,60, ROOD); tft.fillRect (0,200,60,60, ZWART); tft.fillRect (0,140,60,60, ZWART); tft.fillRect (0,80,60,60, ZWART); // Teken derde kolom tft.fillRect (120,260,60,60, GROEN); tft.fillRect (120,200,60,60, ZWART); tft.fillRect (120,140,60,60, ZWART); tft.fillRect (120,80,60,60, ZWART); // Teken tweede en vierde kolom voor (int b = 260; b> = 80; b- = 60) {tft.fillRect (180, b, 60,60, BLUE); tft.fillRect (60, b, 60,60, BLACK);} // Teken horizontale lijnen voor (int h = 80; h <= 320; h + = 60) tft.drawFastHLine (0, h, 240, WIT); // Teken verticale lijnen voor (int v = 0; v <= 240; v + = 60) tft.drawFastVLine (v, 80, 240, WIT); // Geef toetsenbordlabels weer voor (int j = 0; j <4; j ++) {for (int i = 0; i <4; i ++) {tft.setCursor (22 + (60 * i), 100 + (60 * j)); tft.setTextSize (3); tft.setTextColor (WIT); tft.println (symbool);

2. Detectie van de knoppen:

Een andere uitdagende taak is het detecteren van de aanraking van de gebruiker. Elke keer dat de gebruiker ergens aanraakt, kunnen we zien hoe de X- en Y-positie van de pixel hij heeft aangeraakt. Deze waarde kan op de seriële monitor worden weergegeven met behulp van de println, zoals hieronder weergegeven.

TSPoint p = waitTouch (); X = py; Y = px; Serial.print (X); Serial.print (','); Serial.println (Y); // + "" + Y);

Omdat we de doos hebben ontworpen met een breedte en hoogte van elk 60 pixels en vier rijen hebben en voor kolommen vanaf (0,0). De positie van elk vak kan worden voorspeld zoals weergegeven in onderstaande afbeelding.

Maar in de praktijk zal dit niet het resultaat zijn. Vanwege het kalibratieprobleem zal er een groot verschil zijn tussen de verwachte en werkelijke waarde.

Om de exacte positie van de box te voorspellen, moet u dus op de regel klikken en de corresponderende positie op de seriële monitor controleren. Dit is misschien niet de meest professionele manier om het te doen, maar het werkt toch perfect. Ik heb de positie van alle lijnen gemeten en de onderstaande waarden verkregen.

Nu, aangezien we de positie van alle dozen kennen. Wanneer een gebruiker ergens aanraakt, kunnen we voorspellen waar hij heeft aangeraakt door zijn (X, Y) -waarden te vergelijken met de waarde voor elk vak, zoals hieronder wordt weergegeven.

if (X <105 && X> 50) // Knoppen detecteren in kolom 2 {if (Y> 0 && Y <85) {Serial.println ("Button 0"); // Knop 0 wordt ingedrukt als (Nummer == 0) Nummer = 0; anders Nummer = (Nummer * 10) + 0; // Twee keer gedrukt} if (Y> 85 && Y <140) {Serial.println ("Button 2"); if (Number == 0) Number = 2; anders Nummer = (Nummer * 10) + 2; // Tweemaal ingedrukt}

3. Getallen weergeven en het resultaat berekenen:

De laatste stap is om het resultaat te berekenen en ze weer te geven op een TFT LCD-scherm. Deze arduino-rekenmachine kan alleen met 2 cijfers werken. Deze twee getallen worden genoemd als variabelen "Num1" en "Num2". De variabele "Number" geeft en neemt waarde van Num1 en Num2 en draagt ook het resultaat.

Wanneer een gebruiker op een knop drukt, wordt een cijfer aan het nummer toegevoegd. Wanneer een andere knop wordt ingedrukt, wordt het vorige cijfer vermenigvuldigd met 10 en wordt het nieuwe nummer ermee toegevoegd. Als we bijvoorbeeld op 8 drukken en vervolgens op 5 en vervolgens op 7. Dan zal eerst de variabele 8 bevatten, dan (8 * 10) + 5 = 85, dan (85 * 10) +7 = 857. Dus uiteindelijk zal de variabele de waarde 857 erbij.

if (Y> 192 && Y <245) {Serial.println ("Button 8"); if (Number == 0) Number = 8; anders Nummer = (Nummer * 10) + 8; // Nogmaals ingedrukt}

Wanneer we een bewerking uitvoeren, zoals optellen, wanneer de gebruikers op de optelknop drukken, wordt de waarde van Number overgebracht naar Num1 en vervolgens wordt Number op nul gezet, zodat het klaar is om de invoer voor het tweede nummer over te nemen.

Wanneer Equal wordt ingedrukt, wordt de waarde in Number naar Num2 gestuurd en vervolgens wordt de desbetreffende berekening (in dit geval optelling) uitgevoerd en wordt het resultaat opnieuw opgeslagen in de variabele “Number”.

Ten slotte wordt deze waarde weergegeven op het LCD-scherm.

Werken:

De werking van deze Arduino Touch Screen Calculator is eenvoudig. U moet de onderstaande code op uw Arduino uploaden en deze opstarten. U krijgt de rekenmachine weergegeven op uw LCD-scherm.

Nu kunt u elk nummer invoeren en uw berekeningen uitvoeren. Het is beperkt tot slechts twee operanden en voorlopig de enige operator. Maar u kunt de code aanpassen om ervoor te zorgen dat deze veel opties heeft.

U moet op de "C" drukken om de waarde op het scherm te wissen telkens nadat u een berekening hebt uitgevoerd. Ik hoop dat je het project begreep en het leuk vond om iets soortgelijks te bouwen. Als je twijfels hebt, plaats ze dan op forums of in de commentaarsectie hieronder. Tot de volgende keer met een ander interessant project tot dan happy computing !!

Bekijk ook de onderstaande demonstratievideo.