[IDE]TinyML研究和学习的小精灵 之二

上次我们介绍了Wio终端的优异性能及简单的使用方法，这次我们看一下Wio终端的强大显示功能，并了解图形函数的使用方法。

1.出色的显示功能

在Wio终端上，最大的器件要数TFT显示屏了，其实在例程的数量上显示屏也是占首位的，参见图1所示。

图1 显示屏示例

下面我们就领略一下它的特色，看看在设计界面方面它能为我们带来哪些帮助。

1）字体丰富

Wio终端提供了丰富的字体支持，其字体显示效果如图2所示。

图2字体效果

2）旋转显示

在界面设计上，因应用的需要往往会选择屏幕的使用方向，相应的显示内容也会产生改变。在手机的设计上，更是引入了力传感器，让手机能在旋转时来改变内容的方向，Wio终端也同样也随意的变换显示方向，参见图3所示。

图3旋转显示

3）图表效果

统计图表是一种常用的文档形式，在Wio终端也也依然能够实现，如圆饼图及分栏表格等，其显示如图4所示。

图4图表效果

4）时钟效果

在时间计时器的情况下，在Wio终端可以很容易地实现2种形式的电子时钟计时，其形式如图5所示。

图5计时效果

5）复杂曲线

借助图形函数和强大计算能力的支持，结合曲线函数的使用，在Wio终端能绘制出复杂而美丽的曲线图形。

图6曲线绘制

6）指针表盘

在工控领域，离不开各式各样的仪表，其中指针式仪表是一种表现起来直观，但又相对复杂的样式，在Wio终端它依然能完美地展现在入门眼前，见图7所示。

图7表针指示

7）特效纷呈

除了以上常规表现形式，在Wio终端还能展现出在艺术片上所呈现特效制作，图8就是其达到效果。

图8特效

8）其它效果

尽管介绍了怎么多，但依然有没能归类的显示效果，如图9是一个展示物体在屏幕边缘进行弹射的游戏效果，而图10则是通过计算所绘制出的图案。

图9弹射游戏

图10图案绘制

有了这些例程为模板，再遇到同样的设计问题了，在此基础上只需添加上你的内容即可快速、轻松地解决。

2. 库的加载

要使用TFT屏的显示函数，需有相应库的支持，访问该链接Seeed_Arduino_LCD，即可从中下载到Seeed_Arduino_LCD-master.zip。

图11 下载库文件

然后按图2和图3所示来添加下载的库文件，再按图4所示添加“Adafruit Zero DMA”。

图12 添加库文件

图13 选取添加内容

图14 添加“Adafruit Zero DMA”

图15 完成添加

在此，就完成了使用TFT屏显示的准备工作。

3. 显示屏与色彩模式

Wio终端所用的显示屏是一块2.4英寸的显示屏，以ILI9341为驱动芯片，屏幕的解析度为320*240像素点，坐标系统是按图16来设置，其中水平方向是x轴，垂直方向是y轴，左上是坐标的原点x=0，y=0。

图16 坐标系统

显示屏采用8位和16位色彩模式来显示色彩，其中RGB3色所占的位宽各有不同。

在8位色彩模式下，各位的含义为：

在16位色彩模式下，各位的含义为：

为了便于使用，常用的16位色彩定义为：

#define TFT_BLACK 0x0000     /* 0, 0, 0 */

#define TFT_NAVY 0x000F      /* 0,0, 128 */

#define TFT_DARKGREEN 0x03E0 /* 0, 128, 0 */

#define TFT_DARKCYAN 0x03EF  /* 0,128, 128 */

#define TFT_MAROON 0x7800   /* 128,0, 0 */

#define TFT_PURPLE 0x780F     /* 128, 0, 128 */

#define TFT_OLIVE 0x7BE0      /* 128,128, 0 */

#define TFT_LIGHTGREY 0xC618  /*192, 192, 192 */

#define TFT_DARKGREY 0x7BEF   /* 128, 128, 128 */

#define TFT_BLUE 0x001F       /* 0, 0, 255 */

#define TFT_GREEN 0x07E0      /* 0, 255, 0 */

#define TFT_CYAN 0x07FF       /* 0,255, 255 */

#define TFT_RED 0xF800        /* 255,0, 0 */

#define TFT_MAGENTA 0xF81F   /* 255, 0, 255 */

#define TFT_YELLOW 0xFFE0     /* 255,255, 0 */

#define TFT_WHITE 0xFFFF      /* 255, 255, 255 */

#define TFT_ORANGE 0xFDA0     /*255, 180, 0 */

#define TFT_GREENYELLOW 0xB7E0 /* 180, 255, 0 */

在使用时，可以色彩名称来选用色彩。

4. 图形函数及用法

为了便于用户使用，在开发环境下提供了丰富的显示函数，掌握这些函数的使用可以起到事半功倍的效果。

1）屏幕填充函数

该函数的格式为：

fillScreen(uint32_t color);

使用该函数可用来清除屏幕，其使用形式为：

tft.fillScreen(TFT_BLACK);

其中的“TFT_BLACK”，用于指定以黑色来清屏。

2）画点函数

该函数的格式为：

drawPixel(int32_t x, int32_t y, uint32_t color);

其作用是在屏上的坐标点（x,y）上显示指定色彩为color的点，其多用于绘制各种曲线或图像。

此外，由于在函数中未提供对中文显示的支持，故用该函数还可以自行设计相应的中文显示函数。

其使用形式为：

tft.drawPixel(4,7,TFT_BLACK);

3）画线函数

该函数的格式为：

drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint32_t color);

其作用是在屏上从坐标点（x0,y0）到（x1,y1）以指定色彩为color绘制一条直线，其多用于绘制波形曲线。

其使用形式为：

tft.drawLine(0,0,160,120,TFT_BLACK);

作为画线函数的特例，函数drawFastHLine（）用于绘制水平线，而函数drawFastVLine （）用于绘制垂线，其函数格式为：

drawFastHLine(int32_t x, int32_t y, int32_t w, uint32_t color);

drawFastVLine(int32_t x, int32_t y, int32_t h, uint32_t color);

其中参数x,y是起点位置，而w和h是指线的宽度和高度，color是指直线的色彩。

4）矩形函数

该函数的格式为：

drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color);

其作用是在屏上从坐标点（x,y），以指定色彩color绘制一个宽度和高度分别为w和h的矩形。

其使用形式为：

tft.drawRect(110,70,100,100,TFT_BLACK);

若绘制实心矩形，则使用函数fillRect（），其函数格式为：

fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color);

5）圆函数

该函数的格式为：

drawCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color);

其作用是在屏上从坐标点（x0,y0），以指定色彩color绘制一个半径为r的圆。

其使用形式为：

tft.drawCircle(160,120,50,TFT_BLACK);

若绘制实心圆，则使用函数fillCircle（），其函数格式为：

fillCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color);

6）三角形函数

该函数的格式为：

drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2,int32_t y2, uint32_t color);

其作用是在屏上按3个坐标点（x0,y0）、（x1,y1）和（x2,y2），以指定色彩color绘制一个三角形。

其使用形式为：

tft.drawTriangle(160,70,60,170,260,170,TFT_BLACK);

若绘制实心三角形，则使用函数fillTriangle（），其函数格式为：

fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2,int32_t y2, uint32_t color);

7）圆角矩形函数

该函数的格式为：

drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r,uint32_t color);

其作用是在屏上从坐标点（x,y），以指定色彩color绘制一个宽度和高度分别为w和h倒角半径为r的圆角矩形。

其使用形式为：

tft.drawRoundRect(110,70,100,100,10,TFT_BLACK);

若绘制实心圆角矩形，则使用函数fillRoundRect（），其函数格式为：

fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r,uint32_t color);

8）椭圆函数

该函数的格式为：

drawEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_tcolor);

其作用是在屏上从坐标点（x0,y0），以指定色彩color绘制一个长短轴为rx和ry的椭圆。

其使用形式为：

tft.drawEllipse(160,120,50,100,TFT_BLACK);

若绘制实心椭圆，则使用函数fillEllipse（），其函数格式为：

fillEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_tcolor);

9）字符函数

该函数的格式为：

drawChar(int32_t x, int32_t y, uint16_t c, uint32_t color, uint32_t bg, uint8_tsize)

其作用是在屏上从坐标点（x,y）以指定色彩color显示一个字符c，该字符的大小为size，背景色为bg。

其使用形式为：

tft.drawChar(140,120,'A',TFT_BLACK, TFT_RED,2);

10）字符串函数

该函数的格式为：

drawString(const String& string, int32_t poX, int32_t poY);

其作用是在屏上坐标点（poX, poY），显示指定字符串。

其使用形式为：

tft.drawString("  Wio Terminal !",20,100);

5. 显示示例

有了前面介绍的知识，我们怎样才能完成一个自己的显示程序呢？

要实现图17所示的显示效果，其程序和上传结果如图18所示。

图17显示效果

图18 程序及上传

程序中相关语句的用途如下：

1）语句tft.begin()的作用是启动屏幕显示；

2）语句tft.setRotation(3)的作用是按屏幕的摆放位置来显示；若修改其参数则使显示内容产生旋转，该参数的取值为0:~3；

3）语句tft.fillScreen(TFT_RED)的作用是以红色填充屏幕做背景；

4）语句tft.setTextColor(TFT_WHITE)的作用是以白色来显示内容；

5）语句tft.setTextSize(3)的作用是指定显示整体的大小，参数值越大字体越大；

6）最后3条语句的作用是指定显示内容。

若按图19所示来修改参数，则显示效果见图20所示。

图19参数修改

图20 修改后效果

了解了图形函数的使用方法后，后面我们会看到它在字体显示方面的独特魅力，值得关注呦。
---------------------
作者：jinglixixi
链接：https://bbs.21ic.com/icview-3148436-1-1.html
来源：21ic.com
此文章已获得原创/原创奖标签，著作权归21ic所有，任何人未经允许禁止转载。