使用 基本图形控制 STONE串口屏，可以绘制直线、三角形、多边形、矩形、正方形、圆形、圆弧、填充颜色、剪切粘贴等。
使用串行触摸屏STVI056WT-01设计的早教机，看图认字，认字，设计文娱格式，判断正确错误，打分或过关，让孩子们可以轻松、俏皮地学习认识颜色、理解基本形状和学习相应的单词。
官方视频演示并没有给出Basic图形控件的实际效果，所以本demo会对其进行补充。 绘图指令是通过之间的通信传输的 arduino 控制板 和 STONE 系列筛板n.
另外，本笔记不包括Basic图形控件的完整功能内容，仅对使用中用到的功能进行详述，记录在机上测试OK，可以直接下载demo运行。
演示的硬件环境如图 1、图 2 和图 3 所示。
STONE官方自带2块板子，其中方的一块是USB下载板，长的一块是USB转串口通讯板（并为串口屏提供DC12V电源）。
（图1：STONE串口屏的通讯和电源连接）（图2：从STONE屏下载Basic Graphics控制文件的连接图）
（图3：STONE串口屏通讯板与arduino开发板的TX、RX、GND连接）
（图4：基本图形控制绘图区和变量地址等参数设置）
在STONE TOOLBox（GUI设计软件）菜单Variable Configuration（D）中选择Basicgraphics控件，设置绘图区和变量地址参数后，使用0x82指令写入设置的变量内存地址（此处设置0x1000）设置绘图区和变量地址参数后，使用0x82指令将CMD + Data_pack_Num_Max + Data写入设置的变量内存地址（本例为0x1000），完成绘图功能的实现。 具体功能代码如图6所示，其中有一条画线指令0x0002，使用如下示例。
（图5：基本图形控制数据命令格式）
（图 6：基本图形控件的绘制线条和矩形命令的图示）
画线指令0x0002，使用示例。
要将坐标（340, 200）的黑线连接到坐标（585, 200），指令是
A5 5A 11 82 10 00 00 02 00 01 00 00 01 54 00 C8 02 49 00 C8
在坐标(200, 200)、(300, 200)、(250, 100)处画三个黑线封闭成三个顶点的三角形，指令为
A5 5A 19 82 10 00 00 02 00 03 00 00 00 00 C8 00 C8 01 2C 00 C8 00 FA 00 64 00 C8 00 C8
上面的0x1000是基本图形控件的变量地址，0x0002是指令代码，0x0001和0x0003分别是1行和3行，0x0000是颜色代码，0000值是黑色，ffff值是亮白色。 每个点的其他即时 XY 坐标。
绘制矩形的示例。
矩形左上顶点坐标（340, 237），右下顶点坐标（585, 340）颜色为黑色，命令为
A5 5A 11 82 10 00 00 03 00 01 01 54 00 ED 02 49 01 54 00 00
同时绘制两个矩形(340, 237) - (585, 340), (324, 221) - (601, 356)，命令是
A5 5A 1B 82 10 00 00 03 00 02 01 54 00 ED 02 49 01 54 00 00 01 44 00 DD 02 59 01 64 FF FF
上面的0x1000是基本图形控件的变量地址，0x0003是矩形命令代码，0x0001、0x0002是1个矩形，2个矩形，0x0000、0xffff是颜色代码，0000的值为黑色，fffff的值为亮白色的。 其他的是每个矩形的左上角顶点和右下角顶点的 XY 坐标。
（图 7：基本图形控件的矩形填充和绘制圆形命令）
矩形填充示例。
黑色矩形填充 (470, 200) ~ (550) 命令是
A5 5A 11 82 10 00 00 04 00 01 01 D6 00 C8 02 26 00 FF 00 00 00
画圆的例子。
圆心(470, 200)，R=50黑色，指令为
A5 5A 0F 82 10 00 00 05 00 01 01 D6 00 C8 00 32 00 00
同时画两个圆，圆心A(470, 200) R=50，圆心B (256, 200) R=80，均为黑色，命令为
A5 5A 17 82 10 00 00 05 00 02 01 D6 00 C8 00 32 00 00 01 00 00 C8 00 50 00 00
（图 8：基本图形控制的 Arc 命令）
圆弧分辨率为0.5度，360度对应720度，0度为垂直向上。
弧形示例。
上圆弧 315 度开始 – 45 度结束，圆心 (300, 200) R = 80，黑色，命令是
A5 5A 13 82 10 00 00 0B 00 01 00 00 01 2C 00 C8 00 50 02 76 00 5A
关于颜色。
0x0000 是黑色 0xffff 是白色 0x00ff 是蓝色 0xf000 是红色 0xfd60 是橙色
0xff60 是黄色 0x2f60 是绿色
（图9：基本图形控制形状界面绘图板参数和地址）
（图10：基本图形控制颜色界面的绘图板参数和地址）
根据变量地址，为 (10, 80) ~ (630, 400) 填充绿色的命令是
A5 5A 11 82 60 00 00 04 00 01 00 0A 00 50 02 76 01 90 2f 60
其他相似之处，详见程序代码。
视频中演示的代码如下。
/*
frank10
STONE 和 arduino COMM，基本图形在程序中播放。
打开一个 LED 一秒钟，然后关闭一秒钟，重复。LED 告诉我们软运行正常！
样本有两页，page1 是shape，page2 是color！
此示例代码位于 frank 的文件中。 20210625
*/
//引脚13在大多数Arduino板上都连接有LED。
//为其命名：
国际领导= 13;
int iYePian = 0; //0x0020 为夜片号！
//int iGongLu = 0; //0x0180 为公录！
//int iLiuLiang = 0; //0x0160 为现在的刘良！
int iJiao = 0; // 0x0260 代表解居教！
int iGongLuWater = 0; //0x0280 为水公录！ 值是 0-50000！
INT iLed = 1; //延迟时间
int iLed2 = 1; //延迟时间50ms做一个点。
int iLed3 = 0; //延迟时间50ms做一个点。
int iLed4 = 0; //延迟时间50ms做一个点。
int iCurve0 = 0; //曲线0的值。 50ms做一个点。
int iCurve1 = 0; //曲线1的值，。 50ms做一个点。
int iFlag0 = 1; // 曲线0的标志+或-； .1 上升，0 下降。
int iFlag1 = 1; // 曲线1的标志+或-； .1 上升，0 下降。
整数 iNum = 0 ; //读入字符号。
int iNum2 = 0; //为水电战读入字符num2！
//int iPower = 2; //关键雕像0x0009
//int iMode = 2; //关键雕像0x000A
内部 iPowerWater = 2; //关键雕像0x0039
//当您按reset时，设置例程运行一次：
无效设置（）{
//将数字引脚初始化为输出。
pinMode（led，输出）；
Serial.begin(115200); //开启串口通讯功能，等待串口打开
而（！串行）{
; // 等待串口连接。 仅列奥纳多需要
}
}
//循环例程永远反复运行：
无效循环（）{
整数 inChar;
/*————————————————————————————————-*/
如果（iLed == 800）{
//——- 读取0x0039值——-
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x04）； //长度
串行写入（0x83）； // 读！
串行写入（0x00）； // 水电站电源键地址！
串行写入（0x39）； // 水电战电源键地址！
串行写入（0x01）； // 0x0039（电源键）
//——STONE 返回值将是“A5 5A 06 83 00 39 01 00 01”——
}
//读取串口发送的信息：
如果 (Serial.available() > 0) { inChar = Serial.read(); }
/*
保存一个烤肉。
因为可以有读键，有工作键。
该程序是一个输入键完成工作的人机界面。
*/
//————————————————————————————————
//—————————-0x0039 密钥读取开始————————————
if (inChar == 0x39) { iNum2 = 1 ; }
if ((inChar == 0x01)&&(iNum2 == 1)) { iNum2 = 2 ; }
if ((inChar == 0x00)&&(iNum2 == 2)) { iNum2 = 3 ; }
if ((inChar == 0x01)&&(iNum2 == 3)) {
iNum2 = 0 ;
如果（iPowerWater ！= 1）{
iPowerWater = 1 ; //打开！
i焦 = 0 ;
i工路水 = 0 ;
}
}
if ((inChar == 0x02)&&(iNum2 == 3)) {
iNum2 = 0 ;
iPowerWater = 2 ; //断电！
}
//——————0x0039 密钥读取正常！ iPowerWater 好的！—————————-
//————————————————————————————————
延迟（1）;
发光二极管 += 1;
iLed2 += 1; // 50ms 做一个点。
//————————————————————————————————————
//———————————50ms 做一个点开始————————————–
如果（iLed2 == 50）{
iLed2 = 1；
iLed4 += 1; // 50ms 做一个点。
如果（iFlag0 == 1）{
iCurve0 += 1; // 50ms 做一个点。
如果（iCurve0 >= 150）{
iFlag0 = 0; // iCurve0 调低！。
}
}
如果（iFlag0 == 0）{
iCurve0 -= 1; // 50ms 做一个点。
如果（iCurve0 <= 1）{
iFlag0 = 1; // iCurve0 调高！。
}
}
如果（iFlag1 == 1）{
如果（iLed4 >= 3）{
iCurve1 += 1; // 50ms 做一个点。
iLed4 = 0；
}
如果（iCurve1 >= 50）{
iFlag1 = 0; // iCurve1 调低！。
}
}
如果（iFlag1 == 0）{
如果（iLed4 >= 3）{
iLed4 = 0；
iCurve1 -= 1; // 50ms 做一个点。
}
如果（iCurve1 <= 1）{
iFlag1 = 1; // iCurve1 调高！。
}
}
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x06）；
串行写入（0x84）； //写入曲线！
串行写入（0x03）； // 曲线路径，
Serial.write(iCurve0); // N=1,
串行写入（0x00）；
串行写入（iCurve1）；
串行写入（0x00）；
}
//———————————-50ms 做点结束——————————————
//————————————————————————————————————
如果（iLed == 500）{
数字写入（LED，高）； // 打开 LED (HIGH 是电压电平)
//延迟（500）； // 稍等，范围：200-2000
}
如果 (iLed >= 1000) {
数字写入（LED，低）； // 通过降低电压来关闭 LED
//延迟（500）； // 等待一秒钟，范围：200-2000
发光二极管 = 1;
if( iNum <= 6 ) iNum += 1; //形状转！
if( iNum == 6 ) iNum = 0; //形状转！
//———————————————红色开始———————————————
if( iNum == 1){ // 三角形！ 和红色！
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x19）；
串行写入（0x82）；
串行写入（0x10）； // 基本图形的地址H
串行写入（0x00）； // 基本图形的地址L
串行写入（0x00）； // 做行 CMD
串行写入（0x02）； // 做行 CMD
串行写入（0x00）； // 行号
串行写入（0x03）； // 行号。
串行写入（0x00）； //colorH 黑色
串行写入（0x00）； //颜色L
串行写入（0x00）； //点X1H
串行写入（0xc8）； // 点X1L
串行写入（0x00）； //点Y1H
串行写入（0xc8）； //点Y1L
串行写入（0x01）； //点X2H
串行写入（0x2C）； //点X2L。
串行写入（0x00）； //点Y2H
串行写入（0xC8）； //点Y2L
串行写入（0x00）； //点X3H
串行写入（0xFA）； // 点X3L
串行写入（0x00）； //点Y3H
串行写入（0x64）； //点Y3L
串行写入（0x00）； //点X1H
串行写入（0xc8）； // 点X1L
串行写入（0x00）； //点Y1H
串行写入（0xc8）； //点Y1L
//填 -
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x11）；
串行写入（0x82）；
串行写入（0x60）； // 基本图形page2的地址H
串行写入（0x00）； // 基本图形的地址L pabe2
串行写入（0x00）； // 做填充矩形 CMD
串行写入（0x04）； // 做填充矩形 CMD
串行写入（0x00）； // 矩形的编号
串行写入（0x01）； // 矩形的编号
串行写入（0x00）； //点X1H
串行写入（0x0A）； // 点X1L
串行写入（0x00）； //点Y1H
串行写入（0x50）； //点Y1L
串行写入（0x02）； //点X2H
串行写入（0x76）； //点X2L。
串行写入（0x01）； //点Y2H
串行写入（0x90）； //点Y2L
串行写入（0xF0）； // 红色H
串行写入（0x00）； // 红色L
}
//———————————————红色结束————————————————
//———————————————黄色和弧线开始———————————————
if( iNum == 2){ // 弧！ 和黄色！
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x13）；
串行写入（0x82）；
串行写入（0x10）； // 基本图形page1的地址H
串行写入（0x00）； // 基本图形的地址L pabe1
串行写入（0x00）； //做弧CMD
串行写入（0x0B）； //做弧CMD
串行写入（0x00）； //弧的编号
串行写入（0x01）； // 弧的编号。
串行写入（0x00）； // colorH 黑色
串行写入（0x00）； // colorL 空白
串行写入（0x01）； // 圆心 XH
串行写入（0x2c）； // XL 圆的中心
串行写入（0x00）； // 圆心 YH
串行写入（0xc8）； // 圆心 YL
串行写入（0x00）； // 相对湿度
串行写入（0x50）； // RL。
串行写入（0x02）； //角度1H
串行写入（0x76）； // 角度1L
串行写入（0x00）； //角度2H
串行写入（0x5A）； // 角度2L
//填 -
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x11）；
串行写入（0x82）；
串行写入（0x60）； // 基本图形page2的地址H
串行写入（0x00）； // 基本图形的地址L pabe2
串行写入（0x00）； // 做填充矩形 CMD
串行写入（0x04）； // 做填充矩形 CMD
串行写入（0x00）； // 矩形的编号
串行写入（0x01）； // 矩形的编号
串行写入（0x00）； //点X1H
串行写入（0x0A）； // 点X1L
串行写入（0x00）； //点Y1H
串行写入（0x50）； //点Y1L
串行写入（0x02）； //点X2H
串行写入（0x76）； //点X2L。
串行写入（0x01）； //点Y2H
串行写入（0x90）； //点Y2L
串行写入（0xFF）； // 黄色颜色H
串行写入（0x60）； // 黄色L
}
//———————————————黄色和弧线结束—————————————————
//———————————————绿色和矩形开始———————————————
if( iNum == 3){ // 矩形！ 和绿色！
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x11）；
串行写入（0x82）；
串行写入（0x10）； // 基本图形page1的地址H
串行写入（0x00）； // 基本图形的地址L pabe1
串行写入（0x00）； // 做矩形 CMD
串行写入（0x03）； // 做矩形 CMD
串行写入（0x00）； // 矩形的编号
串行写入（0x01）； // 矩形的编号
串行写入（0x01）； //点X1H
串行写入（0x54）； // 点X1L
串行写入（0x00）； //点Y1H
串行写入（0xED）； //点Y1L
串行写入（0x02）； //点X2H
串行写入（0x49）； //点X2L。
串行写入（0x01）； //点Y2H
串行写入（0x54）； //点Y2L
串行写入（0x00）； // colorH 黑色
串行写入（0x00）； // colorL 空白
//填 -
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x11）；
串行写入（0x82）；
串行写入（0x60）； // 基本图形page2的地址H
串行写入（0x00）； // 基本图形的地址L pabe2
串行写入（0x00）； // 做填充矩形 CMD
串行写入（0x04）； // 做填充矩形 CMD
串行写入（0x00）； // 矩形的编号
串行写入（0x01）； // 矩形的编号
串行写入（0x00）； //点X1H
串行写入（0x0A）； // 点X1L
串行写入（0x00）； //点Y1H
串行写入（0x50）； //点Y1L
串行写入（0x02）； //点X2H
串行写入（0x76）； //点X2L。
串行写入（0x01）； //点Y2H
串行写入（0x90）； //点Y2L
串行写入（0x2F）； // 绿色 H
串行写入（0x60）； // 绿色L
}
//———————————————绿色和矩形结束———————————————
//———————————————橙色和方块开始——————————————
if( iNum == 4){ // 平方！ 和橙色！
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x11）；
串行写入（0x82）；
串行写入（0x10）； // 基本图形page1的地址H
串行写入（0x00）； // 基本图形的地址L pabe1
串行写入（0x00）； // 做矩形 CMD
串行写入（0x03）； // 做矩形 CMD
串行写入（0x00）； // 矩形的编号
串行写入（0x01）； // 矩形的编号
串行写入（0x01）； //点X1H
串行写入（0x54）； // 点X1L
串行写入（0x00）； //点Y1H
串行写入（0x91）； //点Y1L
串行写入（0x02）； //点X2H
串行写入（0x49）； //点X2L。
串行写入（0x01）； //点Y2H
串行写入（0x86）； //点Y2L
串行写入（0x00）； // colorH 黑色
串行写入（0x00）； // colorL 空白
//填 -
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x11）；
串行写入（0x82）；
串行写入（0x60）； // 基本图形page2的地址H
串行写入（0x00）； // 基本图形的地址L pabe2
串行写入（0x00）； // 做填充矩形 CMD
串行写入（0x04）； // 做填充矩形 CMD
串行写入（0x00）； // 矩形的编号
串行写入（0x01）； // 矩形的编号
串行写入（0x00）； //点X1H
串行写入（0x0A）； // 点X1L
串行写入（0x00）； //点Y1H
串行写入（0x50）； //点Y1L
串行写入（0x02）； //点X2H
串行写入（0x76）； //点X2L。
串行写入（0x01）； //点Y2H
串行写入（0x90）； //点Y2L
串行写入（0xFD）； //橙色颜色H
串行写入（0x60）； // 橙色颜色L
}
//——————————————橙色和方块结束————————————————
//———————————————蓝色和圆圈是开始———————————————
if( iNum == 5){ // 圆！ 和蓝色！
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x0F）；
串行写入（0x82）；
串行写入（0x10）； // 基本图形page1的地址H
串行写入（0x00）； // 基本图形的地址L pabe1
串行写入（0x00）； // 做圆CMD
串行写入（0x05）； // 做圆CMD
串行写入（0x00）； // 圈数
串行写入（0x01）； // 圈数
串行写入（0x01）； // 圆心 XH
串行写入（0xD6）； // XL 圆的中心
串行写入（0x00）； // 圆心 YH
串行写入（0xc8）； // 圆心 YL
串行写入（0x00）； // 相对湿度
串行写入（0x32）； // RL。
串行写入（0x00）； // colorH 黑色
串行写入（0x00）； // colorL 空白
//填 -
串行写入（0xA5）； //“A5”是165
串行写入（0x5A）； //“5A”是90
串行写入（0x11）；
串行写入（0x82）；
串行写入（0x60）； // 基本图形page2的地址H
串行写入（0x00）； // 基本图形的地址L pabe2
串行写入（0x00）； // 做填充矩形 CMD
串行写入（0x04）； // 做填充矩形 CMD
串行写入（0x00）； // 矩形的编号
串行写入（0x01）； // 矩形的编号
串行写入（0x00）； //点X1H
串行写入（0x0A）； // 点X1L
串行写入（0x00）； //点Y1H
串行写入（0x50）； //点Y1L
串行写入（0x02）； //点X2H
串行写入（0x76）； //点X2L。
串行写入（0x01）； //点Y2H
串行写入（0x90）； //点Y2L
串行写入（0x00）； // 蓝色 H
串行写入（0xFF）； // 蓝色 L
}
//———————————————蓝色和圆圈结束———————————————
最后，在线调试。
STONE TOOLBox（GUI设计软件）将编辑屏幕文件下载，arduino代码文件上传，连接电源，通讯，通电观察图像绘制和颜色变化，以达到预期效果。
视频中演示的代码如下。
（在线调优尝试）
资料来源：柏拉图数据智能