使用TFT LCD制作Arduino触摸屏计算器

风筝

Arduino开发板总是可以帮助我们轻松地构建一个项目，并使其看起来更具有吸引力。对一个带有触摸功能的液晶显示屏进行编程听起来可能是一件复杂的工作，但是通过使用Arduino库和扩展模块可以使得这项工作变得非常简单。在本项目中，我们将使用一个2.4寸Arduino TFT液晶屏来构建Arduino触摸屏计算器，它可以执行加法、减法、除法和乘法等所有基本计算。

所需材料

1.    Arduino Uno开发板

2.   2.4寸TFT LCD液晶显示屏模块

3.   9V电池。

了解TFT LCD液晶屏模块

在我们深入了解该项目之前，了解这个2.4“TFT液晶显示模块的工作原理以及使用的型号是很重要的。我们来看看这个2.4寸TFT液晶屏模块的引脚。

正如你所看到的，该模块有28个引脚，可以完美的融入任何Arduino Uno / Arduino Mega开发板。下表给出了这些引脚的说明。

正如你所看到的，模块引脚可以分为四个主要的分类，分别是LCD命令引脚、LCD数据引脚、SD卡引脚和电源引脚，我们不需要知道这些引脚的详细工作原理，因为他们将由Arduino库来实现。

您还可以在上面展示的模块的底部找到一个SD卡插槽，这个插槽可以用来加载带有bmp图像文件的SD卡，这些图像可以使用Arduino程序显示在我们的TFT LCD液晶屏上。

另一个要注意的重要事情是你的接口IC。从Adafruit TFT LCD模块到廉价的中国克隆版，市场上有很多类型的TFT模块。一个适合Adafruit扩展板的程序对于中国的扩展板来说可能并不一样。因此，了解您手中持有是哪种类型的LCD液晶屏是非常重要的。这个细节必须从供应商处获得。如果你有像我这样便宜的克隆版，那么它最有可能使用驱动器IC ili9341。您可以按照Arduino官方教程来尝试一些基本的示例程序，熟悉这款液晶屏。

校准TFT LCD液晶屏的触摸屏

如果您打算使用TFT LCD模块的触摸屏功能，则必须对其进行校准才能正常工作。没有校准的LCD屏幕不太可能正常工作，例如，您可能在一个地方触摸，TFT可能会认为在其他地方触摸。这些校准结果对于所有的电路板都不是一样的，因此您只能自己亲手做这个工作。

校准的最佳方法是使用校准示例程序（附带库）或使用串行监视器来检测您的错误。但是对于这个项目来说，由于按钮的尺寸很大，校准不应该是一个大问题，我还将在下面的编程部分中讲解如何校准您的液晶屏。

Arduino开发板与TFT LCD的连接

2.4寸TFT液晶屏是一个很棒的Arduino扩展板。您可以直接将液晶显示屏推到Arduino Uno的顶部，并且与引脚完美匹配并滑入。但是，为了安全起见，Arduino UNO的编程端子必须使用小的绝缘胶带，以防万一端子接触到您的TFT LCD屏幕。LCD组装到UNO开发板上的样子如下所示。

风筝

编程Arduino开发板

我们使用SPFD5408库来保证arduino计算器代码正常工作。这是一个修改后的Adafruit库，可以与我们的LCD TFT模块无缝工作。您可以在本文最后查看完整的程序。

注意：在Arduino IDE或者这个程序中安装这个库，编译没有任何错误是非常重要的。

要安装这个库，你可以简单地点击上面的链接，将你转到一个Github页面。点击克隆或下载并选择“下载ZIP”。将下载一个zip文件。

现在，打开Arduino IDE并选择Sketch - > Include Librarey - > Add .ZIP library。浏览器窗口将打开导航到ZIP文件，然后单击“OK”。如果成功，您应该会在Arduino左下角注意到“Library added to your Libraries”。

现在，您可以在Arduino IDE中使用以下代码，并将其上传到Arduino UNO，以使触摸屏计算器正常工作。再往下，我将代码按照小段进行讲解。

我们需要三个库使得这个程序正常工作。所有这三个库都可以在从上面提供的链接以ZIP文件格式进行下载。我只是将它们包含在代码中，如下所示。

1. #include <SPFD5408_Adafruit_GFX.h>    // Core graphics library
   
2. #include <SPFD5408_Adafruit_TFTLCD.h> // Hardware-specific library
   
3. #include <SPFD5408_TouchScreen.h>

复制代码

如前所述，我们需要校准液晶显示屏以使其正常工作，但不要担心这里给出的值几乎是通用的。变量TS_MINX、TS_MINY、TS_MAXX和TS_MAXY决定屏幕的校准。如果您觉得校准不理想，您可以稍微进行改动一下。

1. #define TS_MINX 125
   
2. #define TS_MINY 85
   
3. #define TS_MAXX 965
   
4. #define TS_MAXY 905

复制代码

正如我们所知，TFT LCD屏幕可以显示很多颜色，所有这些颜色必须以十六进制值输入。为了使它更易读，我们将这些值赋给一个变量，如下所示。

1. #define WHITE   0x0000 //Black->White
   
2. #define YELLOW    0x001F //Blue->Yellow
   
3. #define CYAN     0xF800 //Red->Cyan
   
4. #define PINK   0x07E0 //Green-> Pink
   
5. #define RED    0x07FF //Cyan -> Red
   
6. #define GREEN 0xF81F //Pink -> Green
   
7. #define BLUE  0xFFE0 //Yellow->Blue
   
8. #define BLACK   0xFFFF //White-> Black

复制代码

好的，现在我们可以进入编程部分了。这个程序涉及三个部分。一个是用按钮和显示创建一个计算器的用户界面。然后，基于用户触摸来检测按钮，并最终计算结果并显示它们。让我们逐一进行讲解。

1.   创建计算器的用户界面：

这里你可以发挥创造力来设计计算器的用户界面。我简单地做了16个按钮和一个显示单元的计算器的基本布局。你必须像在MS画板上绘制东西一样来构建设计。添加的库将允许您绘制线条、矩形、圆形、字符、字符串和更多的任何首选颜色。您可以从本文中了解可用的功能。

我已经使用线条和框的绘制来设计一个非常类似于90年代计算器的用户界面。每个方框的宽度和高度都是60像素。

1. //Draw the Result Box
   
2.   tft.fillRect(0, 0, 240, 80, CYAN);
   
3. 
   
4. //Draw First Column
   
5.   tft.fillRect  (0,260,60,60,RED);
   
6.   tft.fillRect  (0,200,60,60,BLACK);
   
7.   tft.fillRect  (0,140,60,60,BLACK);
   
8.   tft.fillRect  (0,80,60,60,BLACK);
   
9. 
   
10. //Draw Third Column
    
11.   tft.fillRect  (120,260,60,60,GREEN);
    
12.   tft.fillRect  (120,200,60,60,BLACK);
    
13.   tft.fillRect  (120,140,60,60,BLACK);
    
14.   tft.fillRect  (120,80,60,60,BLACK);
    
15. 
    
16.   //Draw Secound & Fourth Column
    
17.   for (int b=260; b>=80; b-=60)
    
18. { tft.fillRect  (180,b,60,60,BLUE);
    
19.    tft.fillRect  (60,b,60,60,BLACK);}
    
20. 
    
21.   //Draw Horizontal Lines
    
22.   for (int h=80; h<=320; h+=60)
    
23.   tft.drawFastHLine(0, h, 240, WHITE);
    
24. 
    
25.   //Draw Vertical Lines
    
26.   for (int v=0; v<=240; v+=60)
    
27.   tft.drawFastVLine(v, 80, 240, WHITE);
    
28. 
    
29.   //Display keypad lables
    
30.   for (int j=0;j<4;j++) {
    
31.     for (int i=0;i<4;i++) {
    
32.       tft.setCursor(22 + (60*i), 100 + (60*j));
    
33.       tft.setTextSize(3);
    
34.       tft.setTextColor(WHITE);
    
35.       tft.println(symbol[j][i]);

复制代码

2.   检测按钮

另一个挑战性的任务是检测用户的触摸。每次用户触摸某处时，我们都能够知道他所触摸像素的X和Y位置。该值可以使用println显示在串行监视器上，如下所示。

1. TSPoint p = waitTouch();
   
2. X = p.y; Y = p.x;
   
3. Serial.print(X); Serial.print(','); Serial.println(Y);// + " " + Y);

复制代码

由于我们设计了宽度和高度均为60像素的方框，并且有四行和从（0,0）开始的列。每个方框的位置可以预测如下图所示。

但在实际情况下，结果并不是这样。由于校准问题，预期值和实际值之间会有很大差异。

因此，要预测盒子的确切位置，您必须点击该行并检查其在串行监视器上的相应位置。这可能不是最专业的方式，但仍然是工作正常。我测量了所有线的位置并获得了下面的值。

现在，因为我们知道所有框的位置。当用户触摸到任何地方时，我们可以通过将他的（X，Y）值与每个框的值进行比较来预测他所触摸的位置，如下所示。

1. if (X<105 && X>50) //Detecting Buttons on Column 2
   
2.   {
   
3.     if (Y>0 && Y<85)
   
4.     {Serial.println ("Button 0"); //Button 0 is Pressed
   
5.     if (Number==0)
   
6.     Number=0;
   
7.     else
   
8.     Number = (Number*10) + 0; //Pressed twice
   
9.     }
   
10. 
    
11.    
    
12.      if (Y>85 && Y<140)
    
13.     {Serial.println ("Button 2");
    
14.      if (Number==0)
    
15.     Number=2;
    
16.     else
    
17.     Number = (Number*10) + 2; //Pressed twice
    
18.     }

复制代码

3.  显示数字并计算结果

最后一步是计算结果并在TFT LCD屏幕上显示。这个arduino计算器只能执行2个数字的操作。这两个数字被命名为变量“Num1”和“Num2”。变量“Number”从Num1和Num2中给出并取值，并且得到结果。

当使用者按下一个按钮时，一个数字被加到数字上。当另一个按钮被按下时，前面的一个数字乘以10，新的数字加上它。例如，如果我们按8，然后按5，然后按7.然后首先变量将保持8然后（8 * 10）+ 5 = 85然后（85 * 10）+7 = 857。最后，变量得到857值。

1. if (Y>192 && Y<245)
   
2.     {Serial.println ("Button 8");
   
3.      if (Number==0)
   
4.     Number=8;
   
5.     else
   
6.     Number = (Number*10) + 8; //Pressed again
   
7.     }  

复制代码

当我们执行任何操作时，如加法，当用户按下加按钮时，来自Number的值将被转移到Num1，然后Number将被设置为零，以便它准备好接受第二个数字的输入。

当按下Equal时，Number中的值将被发送到Num2，然后将进行相应的计算（在这种情况下为加法），结果将再次存储在变量“Number”中。

最后，这个值将显示在LCD屏幕上。

工作过程

这个Arduino触摸屏计算器的工作过程很简单。你需要将下面的代码上传到Arduino开发板，然后上电。这时液晶显示屏上将显示一个计算器。

现在，您可以输入任意数字并进行计算。现在仅限于两个操作数和一个操作符。但是，你可以调整代码，使其有更多的选择。

执行计算后，您必须按“C”键清除屏幕上的值。希望你能了解这个项目，并喜欢创建类似的东西。如果您有任何疑问，请随时在论坛或在本帖下面进行发帖。

本项目的完整代码： main.rar (2.18 KB, 下载次数: 602)

2017-11-21 11:24 上传

点击文件名下载附件

落幕的秋天

:):)

henrydai

很好。。。。。。。。。。。。。。。。。。。。。。。。。。。

YIBOARD_USER1

我的TFT LCD是ILI9341芯片，上传代码后怎么白屏一片？？？

YIBOARD_USER1

已解决，谢谢！

zxy2266

我的duino
使用SPFD5408库
从没有吧5408点亮

牛小顿

YIBOARD_USER1 发表于 2020-10-1 11:27
已解决，谢谢！

你好 你是怎么解决的 我也遇到这个问题了

牛小顿

你好 我的TFT LCD是ILI9341芯片，上传代码后也是白屏一片，请问是什么原因呀？