TFT 绘图：实时历史图表

这部分代码将绘制图形的轮廓，绘制 x 和 y 轴线，还会绘制标记并用值标记 y 轴。

• 阅读 温度

chk =DHT.read11(22); temp =(DHT.温度); 

这段简短的代码将从 DHT 11 传感器读取温度，然后将其存储在一个变量中。

• 画画 图表

if(blockPos <8) { // 打印时间 tft.setCursor((mark[valuePos] - 5), (originY + 16)); tft.setTextColor(graphColor, WHITE); tft.setTextSize(1); tft.println(timeBlock[valuePos]); // 映射值 locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // 绘制点 tft.fillRect((mark[valuePos] - 1), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // 尝试连接到前一个点 if(valuePos !=0) { tft.drawLine(mark[valuePos], locationBlock[valuePos], mark[(valuePos - 1)], locationBlock[(valuePos - 1)], lineColor); } blockPos++; } else { // 清除图形的画布 tft.fillRect((originX + 2), (originY - sizeY), sizeX, sizeY, WHITE); // 映射值 - 当前点 locationBlock[valuePos] =map(temp, 0, graphRange, originY, (originY - sizeY)); // 绘制点 - 当前点 tft.fillRect((mark[7]), (locationBlock[valuePos] - 1), markSize, markSize, pointColor); // 绘制所有点 for(int i =0; i <8; i++) { tft.fillRect((mark[(blockPos - (i + 1))] - 1), (locationBlock[(valuePos - i)] - 1)、markSize、markSize、pointColor)； } // 绘制所有线条 for(int i =0; i <7; i++) { tft.drawLine(mark[blockPos - (i + 1)], locationBlock[valuePos - i], mark[blockPos - (i + 2)], locationBlock[valuePos - (i + 1)], lineColor); } // 更改时间标签 for(int i =0; i <=8; i++) { tft.setCursor((mark[(blockPos - i)] - 5), (originY + 16)); tft.setTextColor(graphColor, WHITE); tft.setTextSize(1); tft.println(timeBlock[valuePos - i]); } } valuePos++; 

这段很长的代码将在它们的值处绘制图形的点，然后通过线将它们连接起来，代码检查图形的画布是否已填满，如果已填满，它将开始弹出图形的第一个值并将其他的向上移动以允许插入新值的空间，如果仍有剩余空间，设备将继续每隔一段时间添加值。

个性化图表

这个图形的有趣之处在于它是 100% 可编辑的，因此用户可以编辑图形的大小、位置和颜色，由于其灵活性，用户还可以在图形上显示任何数据。都是你应该关心的变量。

bool proDebug =0; uint16_t 图形颜色 =蓝色； uint16_t 点颜色 =黑色； uint16_t lineColor =绿色； String graphName ="时间图"; int graphRange =50; int markSize =3; 

• proDebug 是项目内置的调试实用程序，默认设置为0，设置为1/true时，会将当前温度打印到串口监视器，这是一个调试实用程序，注意如果启用，串口监视器是需要打开才能运行代码。

• graphColor 设置图形的颜色，x 和 y 线及其标签设置为此颜色。

• pointColour 表示图上显示值的点的颜色。

• lineColour 将连接图形上的点的线的颜色设置为选定的颜色。

• graphRange 是图表的主干，请注意正确设置非常重要，它代表可以绘制的最大值，我使用的是温度传感器，我不希望该值超过 50ºC，所以我设置了value 为 50，如果要绘制原始模拟输入的图形，可以将 graphRange 设置为 1024，即模拟引脚可以显示的最大值。

• markSize 表示图上标记传感器值的点的大小，该值表示正方形的长度。

就是这样，您只需要担心，其余的变量将由 Arduino 自动计算出来。

变化 价值

绘制房间温度的图表很好，但如果您能在图表上显示任何传感器数据就更好了，您只需编辑几行代码，就可以绘制从土壤湿度到光照的任何数据强度。这是这样做的指南。

去 进一步

您可以进一步试验该项目，尝试编辑 originX、originY、sizeX 和 sizeY 常量，使您的图形在屏幕上具有不同的大小和位置。主草图附有一个头文件，其中包含一些颜色的颜色代码，请尝试更改图表和条形的颜色。就是这样，您的个性化图表已准备就绪。

图书馆

• Elegoo 库 - 版权所有 (c) 2012 Adafruit Industries 根据 BSD 许可。

• DHT - 作者 Rob Tillaart 该库属于公共领域

背景

我最近发布了一个在条形图上绘制 1、2、3 或 4 个值的项目。我决定发布另一个用于绘图的模板。没有条形图的模板不会到处都有可能会混淆的线条，所以我决定再次进行数学计算并发布一个简单的项目，让每个人都可以在历史图表上实时绘制他们的数据。