跳到主要内容

Wio Terminal LCD 折线图

本文主要介绍如何在 Wio Terminal 上绘制折线图(或称“曲线图”)。这是一种很酷的数据显示方法,你甚至可以把传感器采集过来的数据用这种方式展示,这样就可以像专业绘图仪(比如心电图)一样在屏幕上可视化读数。

当然,本文介绍的库也非常灵活,学习完之后,你便可以根据自己的需要进行更改。

安装依赖库

首先需要为 Wio Terminal 安装 2D 图形库 Seeed_Arduino_Linechart

1、在 Seeed_Arduino_LinechartGitHub 仓库 下载 zip 包。

2、然后将 Seeed_Arduino_Linechart 库安装到 Arduino IDE 中。具体操作:点击 项目 > 加载库 > 添加 .ZIP 库...,然后选择刚刚下载的 Seeed_Arduino_Linechart.zip 文件。

显示折线图

1、为绘制折线图进行初始化

首先,定义要存储数据点的最大值,并使用双精度浮点类型来存储数据,以及使用 TFT Sprite 函数创建缓冲区。

#define max_size 50 // maximum size of data
doubles data; // Initilising a doubles type to store data
TFT_eSprite spr = TFT_eSprite(&tft); // Sprite

2、初始化 LCD 屏幕

void setup() {
tft.begin();
tft.setRotation(3);
spr.createSprite(TFT_HEIGHT, TFT_WIDTH);
}

3、将变量加载到数据

使用 data.push(variable) 将变量(即传感器读数)存储在数据中,如果达到预定义的最大数量,它会删除第一个变量,以此类推,循环下去。

    spr.fillSprite(TFT_WHITE);
if (data.size() == max_size) {
data.pop(); // this is used to remove the first read variable
}
data.push(0.01 * random(1, 10)); // read variables and store in data

4、初始化折线图标题的设置

我们还可以为折线图设置一个标题,通常来说这是必须的。首先,初始化一个 text(x, y) 结构体,其中 (x, y) 是标题的起始坐标,具体看下面代码。在这个例子中,header 是这个结构的名称,你可以使用 header.value("test") 这样的方式来更改标题的相关设置。

    //Settings for the line graph title
auto header = text(0, 0) //starting coordinates of title
.value("test") //actual title of the line graph
.align(center) //horizontal alignment of title
.valign(vcenter) //vertical alignment of title
.width(tft.width()) //width of the title
.thickness(3); //thickness of the font

header.height(header.font_height() * 2); //the height of title is the twice the height of the font
header.draw();

为了帮助理解这个示例代码,请参考下面的标题配置示意图。

5、在 LCD 屏幕上初始化折线图和绘图的设置

接着还有一些用于配置折线图所需显示的设置。

初始化一个 line_chart(x, y) 结构体,其中 (x, y) 是折线图的起始坐标。 并配置设置如下。在这个例子中,content 是这个结构的名称,你可以通过 content.based_on(0.0) 等方式来改变折线图的设置。

  //Settings for the line graph
auto content = line_chart(20, header.height()); //(x,y) where the line graph begins
content
.height(tft.height() - header.height() * 1.5) //actual height of the line chart
.width(tft.width() - content.x() * 2) //actual width of the line chart
.based_on(0.0) //Starting point of y-axis, must be a float
.show_circle(false) //drawing a cirle at each point, default is on.
.value(data) //passing through the data to line graph
.color(TFT_PURPLE) //Setting the color for the line
.draw();

spr.pushSprite(0, 0);
delay(50);

为了帮助理解这个示例代码,请参考下面的折线图配置示意图。

完整示例代码

#include"seeed_line_chart.h" // include the library
TFT_eSPI tft;

#define max_size 50 // maximum size of data
doubles data; // Initilising a doubles type to store data
TFT_eSprite spr = TFT_eSprite(&tft); // Sprite

void setup() {
tft.begin();
tft.setRotation(3);
spr.createSprite(TFT_HEIGHT,TFT_WIDTH);
}

void loop() {
spr.fillSprite(TFT_WHITE);
if (data.size() == max_size) {
data.pop(); // this is used to remove the first read variable
}
data.push(0.01 * random(1, 10)); // read variables and store in data

// Settings for the line graph title
auto header = text(0, 0)
.value("GetIoT")
.align(center)
.valign(vcenter)
.width(tft.width())
.thickness(3);

header.height(header.font_height() * 2);
header.draw(); // Header height is the twice the height of the font

//Settings for the line graph
auto content = line_chart(20, header.height()); // (x,y) where the line graph begins
content
.height(tft.height() - header.height() * 1.5) // actual height of the line chart
.width(tft.width() - content.x() * 2) // actual width of the line chart
.based_on(0.0) // Starting point of y-axis, must be a float
.show_circle(false) // drawing a cirle at each point, default is on.
.value(data) // passing through the data to line graph
.color(TFT_PURPLE) // Setting the color for the line
.draw();

spr.pushSprite(0, 0);
delay(50);
}