Arduino与Proteus仿真实例-TFT LCD绘制酷炫曲线图表

TFT LCD绘制酷炫曲线图表

本文将介绍如何在ILI9341 TFT LCD中绘制酷炫曲线图表仿真。

在前面的文章中，对ILI9341的驱动仿真作了详细的介绍，请参考：

Arduino与Proteus仿真实例-TFT显示屏(ILI9341驱动器)SPI驱动仿真

1、仿真电路原理图

2、仿真代码实现

本次实例使用到如下开源库：

图表绘制库：Grafici-GFX
ILI9341驱动库：Adafruit_ILI9341
LCD图形绘制库：Adafruit-GFX-Library

1）Grafici-GFX支持通过函数生成数据绘制曲线，下面将演示Sin函数曲线绘制：

#include "Adafruit\_GFX.h" 
#include "Adafruit\_ILI9341.h"

#include "Grafici.h"

#define TFT\_CS 8 
#define TFT\_RST 9 
#define TFT\_DC 10 
Adafruit_ILI9341 gfx = Adafruit\_ILI9341(TFT_CS, TFT_DC, TFT_RST);

/\* `data\_x` = [0 .. 99] \*/
DataLinear data_x{ 100 };

/\* `data\_y` = [sin(0) .. sin(PI \* 99 \* 0.05)] \*/
DataFunction data_y{ 100, [](size\_t idx) -> float { return sin(M_PI \* idx \* 0.05); } };

void setup(void)
{
	/\* 初始化LCD并旋转为横向 \*/
	gfx.begin();
	gfx.setRotation(1);

	/\* 初始化图形绘制 \*/
	Grafici plot{ gfx };

	/\* 设置颜色映射 \*/
	plot.set\_color\_map(parula);

	/\* 绘制曲线 \*/
	plot.line(data_x, data_y, data_y);
}

void loop(void)
{
}

仿真结果如下：

2）Grafici-GFX支持从数据数组绘制曲线

#include "Adafruit\_GFX.h" 
#include "Adafruit\_ILI9341.h"

#include "Grafici.h"

// LCD引脚配置
#define TFT\_CS 8 
#define TFT\_RST 9 
#define TFT\_DC 10 
Adafruit_ILI9341 gfx = Adafruit\_ILI9341(TFT_CS, TFT_DC, TFT_RST);

// 数据长度
constexpr size\_t ARRAY_SIZE = 25;
// 数据最大值
constexpr size\_t MAX_VALUE = 255;

// 图表XY轴数据绑定
unsigned int raw_data[ARRAY_SIZE];
DataArrayXY<unsigned int> data{ raw_data, ARRAY_SIZE, { 0, MAX_VALUE } };

void setup(void)
{
	/\* 初始化LCD \*/
	gfx.begin();
	gfx.setRotation(1);

	/\* 初始化图形绘制 \*/
	Grafici plot{ gfx };

	/\* 生成随机数据 \*/
	randomSeed(66);
	for (size\_t i = 0; i < ARRAY_SIZE; ++i)
	{
		raw_data[i] = random(MAX_VALUE + 1);
	}

	/\* 设置颜色映射 \*/
	plot.set\_color\_map(parula);

	/\*两个数据点之间创建颜色渐变 \*/
	PlotLineOpts opts;
	opts.segments = 10;

	/\* 绘制曲线 \*/
	plot.line(data.x(), data.y(), data.y(), full_screen, opts);
}

void loop(void)
{
	
}

仿真结果如下：

3）Grafici-GFX支持子窗口绘制不同曲线，下面将演示如何在子窗口中绘制曲线和柱状图（直方图）：

#include "Adafruit\_GFX.h" 
#include "Adafruit\_ILI9341.h"

#include "Grafici.h"

// ILI9341引脚
#define TFT\_CS 8 
#define TFT\_RST 9 
#define TFT\_DC 10
// ILI9341驱动设备，使用硬件SPI
Adafruit_ILI9341 gfx = Adafruit\_ILI9341(TFT_CS, TFT_DC, TFT_RST);

// 绘制数据点数量
constexpr size\_t ARRAY_SIZE = 120;
constexpr size\_t HISTOGRAM_BINS = 20;
float raw_data[ARRAY_SIZE];

void setup(void)
{
	// 初始化ILI9341
	gfx.begin();
   	// 设置ILI9341旋转方向为横向
	gfx.setRotation(1);

	/\* 初始化图表绘制\*/
	Grafici plot{ gfx };

	/\*设置颜色 \*/
	plot.set\_color\_map(cmy);


	/\* 绘制左边窗口图形 \*/

	/\* 按比例绘制左边曲线窗口 \*/
	auto left_window = full_screen.sub\_window({ 0, .74 }, { 0, 1 });

	/\*启用灰色的水平和垂直子轴\*/
	plot.set\_axis({ HISTOGRAM_BINS, 1, h_lines, white \* 0.5 });

	/\* 生成随机数据 \*/
	randomSeed(66);
	for (size\_t i = 0; i < ARRAY_SIZE; ++i)
	{
		/\* 使用 Box-Muller 变换近似正态分布 \*/
		raw_data[i] = sqrt(-2 \* log((random(HISTOGRAM_BINS) + 1) / (float)HISTOGRAM_BINS)) \* sin(M_PI \* 2.0 \* random(HISTOGRAM_BINS) / (float)HISTOGRAM_BINS);
	}

	/\* 设置X轴和Y轴数据源 \*/
	DataArrayXY<float> data{ raw_data, ARRAY_SIZE };

	/\* 设置两个数据点之间创建颜色渐变 \*/
	PlotLineOpts left_opts;
	left_opts.segments = 10;

	/\* 使用线条绘制 x 和 y 数据。 使用 y 并根据 `left\_opts` 为线条着色 \*/
	plot.line(data.x(), data.y(), data.y(), left_window, left_opts);


	/\* 绘制右边窗口图形 \*/

	/\* 定义总宽度的 76% 到 100% 和总高度的 0% 到 100% 之间的屏幕区域 \*/
	auto right_window = full_screen.sub\_window({ .76, 1 }, { 0, 1 }).transform(WindowTransform::ccw_90_rotation);

	/\* 启用灰色的水平和垂直子轴 \*/
	plot.set\_axis({ 5, HISTOGRAM_BINS, h_lines | v_lines, white \* 0.5 });

	/\* 通过计算 y 数据的频率创建一个新的数据源 \*/
	DataHistogramXY<HISTOGRAM_BINS> data_hist{ data.y() };

	/\* 条形图被填充并使用其宽度的 50% \*/
	PlotBarOpts right_opts;
	right_opts.fill_bars = true;
	right_opts.thickness = 0.5;

	/\* 使用条形图绘制直方图数据。 使用 y 并根据 `right\_opts` 为条形着色 \*/
	plot.bar(data_hist.x(), data_hist.y(), data_hist.x(), right_window, right_opts);
}

void loop(void)
{
}