lxhelp/aikit/AI_2.md

认识萤幕模组

---

A.萤幕模组

模组连接一个LCD彩色萤幕显示器，萤幕解析度为240 x 240 px (像素)，可显示JPG, BMP 等格式图片。像素，组成点阵数位影像的最小方块单位，每个方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。如下图所示：

我们以坐标系(X, Y)标明方块的位置，X代表水准方向(X轴)，Y代表垂直方向(Y轴)，列萤幕的左上角为起始点(0, 0)（代表第一行，第一列），最大值为(239, 239)。
例如方块(4, 3)，指方块的位置由左而右第5列，由上至下第4行(因为X、Y座标均从0开始)。

<tr>
    <td width="50%"><img src="./media/ai/AI_g2.png" width="350"/></td>
    <td width="50%"><img src="./media/ai/AI_g3.png" width="350"/></td>
</tr>
<tr >
    <td colspan=2>活动：列出方格A及方格B的座标系：A __________ B __________</td>
</tr>

---

B.萤幕模组介绍

积木	指令	说明
	初始化	初始化萤幕
	改变萤幕状态	旋转萤幕方向、萤幕镜面翻转
	改变萤幕颜色	填充萤幕颜色：
	自定义萤幕颜色	填入不同的RGB（红绿蓝）值，达到自定义颜色的效果
	清除萤幕	清除萤幕
	参数调节	改变RGB值、XY坐标值和宽高值
	建立画布	建立画布并定义画布的大小
	自定画布幕颜色	填入不同的RGB（红绿蓝）值，达到自定义颜色的效果
	建立画布	建立并储存画布在SD记忆卡
	显示画布	定义画布在萤幕上的起始位置
	绘制文字	萤幕可以同时显示文字及图形，特别适合用作图像识别。必须同时使用「建立画布」及「显示画布」指令。
	绘制直线	在画布上绘画直线，输入起点及终点坐标。可以选择线条颜色及厚度。
	绘制矩形	在画布上绘画矩形，可以是实心或空心，输入起点坐标及尺寸。可以选择线条颜色及厚度。
	绘制圆形	在画布上绘画圆形，可以是实心或空心，输入圆心的坐标及半径。可以选择线条颜色及厚度。
	绘制十字标	在画布上绘画十字标，输入中心坐标。可以选择线条延伸长度、厚度及颜色。
	绘制箭头	在画布上绘画箭头，输入起点及终点坐标。可以选择线条颜色及厚度。
	绘制图片	在画布上绘画图片，图片从SD卡的档路径中选取，输入起点坐标及缩放比例。
	显示画布	显示指定画布，画布名可修改
	清除画布	清除所选画布中的所有内容

---

I. 基础编程

活动一：在萤幕上显示矩形图案，设定坐标系(0,0)

1)AI模组｜图像处理：「萤幕初始化」、「创建空白画布」、「设定画布坐标」 2)循环：「重复执行」 3)AI模组｜图像处理：「绘制矩形」 4)AI模组｜图像处理：「显示画布」

以上活动首先会建立一幅空白画布并命名为「canvas」，画布的大小设定为240 x 240。接著输入「重复执行」指令，使萤幕不断显示矩形图案，如果没有使用该指令，矩形图案只会显示一次就消失。在「重复执行」指令中加入「绘制矩形」及「显示画布」指令并输入参数如下：

绘制矩形	矩形样式：实心 起始座标：X=0, Y=0 尺寸：寛=1, 高=1 颜色：红色 厚度：1
显示画布	起始座标：X=0, Y=0

注：「建立画布」是指建立图像变数，将获取的影像存放在变数中，作进一步使用。
运行结果： ##### 活动二：修改活动一程式，在萤幕上显示延长横线

1)循环：「计次」 将指令并合在「重复执行」指令内，范围设定为0-239，间隔=1 2)变数：「i」 将变数「i」放在「绘制矩形」座标参数中的X值处
点按「运行」后观察萤幕的变化，并简短描述如下：
运行结果：不断延长的直线

挑战一：

修改活动二的程式，在萤幕上显示一个红色方块，由左向右移动，每次移动一格。 提示：尝试运用以下积木

参考程式：

运行结果：

活动三：建立画布显示矩形图案

在积木指令区点按以下指令，并依次放在积木编程区： 1)AI模组｜图像处理：「萤幕初始化」 2)AI模组｜图像处理：「建立画布」、「设定画布起始坐标」 3)循环：「重复执行」 4)AI模组｜图像处理：「绘制矩形」 5)AI模组｜图像处理：「显示画布」
运行结果：

此活动目标为理解路径的概念：
从SD卡档夹中读取图像，使用该图像作为画布，显示在荧幕上，然后在此画布上画白色的矩形块，学生可自行修改矩形块位置、大小及颜色。 ##### 活动四：建立画布显示方框文字

在积木指令区点按以下指令，并依次放在积木编程区： 1)重复活动一的程式 2)AI模组｜图像处理：「绘制文本」放在「绘制矩形」指令之下 3)AI模组｜图像处理：「显示画布」（必要积木，否则不会显示任何讯息）
运行结果：

挑战二：

编写程式，在萤幕正中心位置显示白色方框，框内打印你的英文名。如下图所示： 提示：需要计算文字及方框的尺寸，对应萤幕的面积尺寸，修改文字及方框的座标位置，使二者能显示在萤幕的正中心位置。

参考程式：

---

C. 专题学习

硬体设备：AI推理模组、萤幕模组
任务目标：运用「变数」及「循环」，用【线条】指令制作一个万花筒动画
基本流程/步骤：

第一步：模组初始化

在积木指令区点按以下指令，并依次放在积木编程区： 1)AI模组｜图像处理：「萤幕初始化」、「建立画布」、「设定画布起始坐标」 2)循环：「重复执行」 3)AI模组｜图像处理：「清除画布」

第二步：绘画直线万花筒
放置【For循环】，设定变数i：由0-240，每次循环自动增加数值5，即i = 0, 5, 10, 15, ……, 240，目的是利用数值变化改变绘画直线的座标位置，使其形成万花筒效果。

观察结果：

在步骤3【清除画布】积木指令下，放置下列积木指令： 4)循环：【For循环】 5)AI模组｜图像处理：【绘制直线】 6)AI模组｜图像处理：【显示画布】 7)时间：【等待】

参考程式：

挑战题：

如何透过【For循环】方法，延续上面绘画的直线，在余下的空间位置绘画直线，如下图所示：

参考程式：