TinyML研究和学习的小精灵 之二
时间：2021-08-01 23:57:08
手机看文章
扫描二维码
随时随地手机看文章
[导读]出品21ic论坛 kk的回忆网站：bbs.21ic.com上次我们介绍了Wio终端的优异性能及简单的使用方法，这次我们看一下Wio终端的强大显示功能，并了解图形函数的使用方法。1.出色的显示功能在Wio终端上，最大的器件要数TFT显示屏了，其实在例程的数量上显示屏也是占...
出品 21ic论坛 kk的回忆
网站：bbs.21ic.com
上次我们介绍了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);
网站：bbs.21ic.com
上次我们介绍了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);
下载文档
