# 认识萤幕模组
---

## 	A.萤幕模组
模组连接一个LCD彩色萤幕显示器，萤幕解析度为240 x 240 px (像素)，可显示JPG, BMP 等格式图片。像素，组成点阵数位影像的最小方块单位，每个方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。如下图所示：
<br>
<img src="/media/ai/AI_g1.png" width="300"/><br>
我们以坐标系(X, Y)标明方块的位置，X代表水准方向(X轴)，Y代表垂直方向(Y轴)，列萤幕的左上角为起始点(0, 0)（代表第一行，第一列），最大值为(239, 239)。<br>
例如方块(4, 3)，指方块的位置由左而右第5列，由上至下第4行(因为X、Y座标均从0开始)。
<table style="margin-top:20px;">
	<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>
</table>

---
## 	B.萤幕模组介绍
<table style="margin-top:20px;">
	<tr>
		<td width="50%">积木</td>
		<td width="20%">指令</td>
    <td width="30%">说明</td>
	</tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h1.png" width="200"/></td>
    <td width="20%">初始化</td>
    <td width="30%">初始化萤幕</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h2.png" width="200"/><img src="/media/ai/AI_h3.png" width="200"/></td>
    <td width="20%">改变萤幕状态</td>
    <td width="30%">旋转萤幕方向、萤幕镜面翻转<img src="/media/ai/AI_h4.png" width="200"/></td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h5.png" width="200"/></td>
    <td width="20%">改变萤幕颜色</td>
    <td width="30%">填充萤幕颜色：<img src="/media/ai/AI_h6.png" width="200"/></td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h7.png" width="200"/></td>
    <td width="20%">自定义萤幕颜色</td>
    <td width="30%">填入不同的RGB（红绿蓝）值，达到自定义颜色的效果</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h8.png" width="200"/></td>
    <td width="20%">清除萤幕</td>
    <td width="30%">清除萤幕</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h9.png" width="200"/><img src="/media/ai/AI_h10.png" width="200"/><img src="/media/ai/AI_h11.png" width="200"/></td>
    <td width="20%">参数调节</td>
    <td width="30%">改变RGB值、XY坐标值和宽高值</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h12.png" width="200"/></td>
    <td width="20%">建立画布</td>
    <td width="30%">建立画布并定义画布的大小</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h13.png" width="200"/></td>
    <td width="20%">自定画布幕颜色</td>
    <td width="30%">填入不同的RGB（红绿蓝）值，达到自定义颜色的效果</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h24.png" width="200"/></td>
    <td width="20%">建立画布</td>
    <td width="30%">建立并储存画布在SD记忆卡</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h14.png" width="200"/></td>
    <td width="20%">显示画布</td>
    <td width="30%">定义画布在萤幕上的起始位置</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h15.png" width="200"/></td>
    <td width="20%">绘制文字</td>
    <td width="30%">萤幕可以同时显示文字及图形，特别适合用作图像识别。必须同时使用「建立画布」及「显示画布」指令。</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h16.png" width="200"/></td>
    <td width="20%">绘制直线</td>
    <td width="30%">在画布上绘画直线，输入起点及终点坐标。可以选择线条颜色及厚度。</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h17.png" width="200"/></td>
    <td width="20%">绘制矩形</td>
    <td width="30%">在画布上绘画矩形，可以是实心或空心，输入起点坐标及尺寸。可以选择线条颜色及厚度。</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h18.png" width="200"/></td>
    <td width="20%">绘制圆形</td>
    <td width="30%">在画布上绘画圆形，可以是实心或空心，输入圆心的坐标及半径。可以选择线条颜色及厚度。</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h19.png" width="200"/></td>
    <td width="20%">绘制十字标</td>
    <td width="30%">在画布上绘画十字标，输入中心坐标。可以选择线条延伸长度、厚度及颜色。</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h20.png" width="200"/></td>
    <td width="20%">绘制箭头</td>
    <td width="30%">在画布上绘画箭头，输入起点及终点坐标。可以选择线条颜色及厚度。</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h21.png" width="200"/></td>
    <td width="20%">绘制图片</td>
    <td width="30%">在画布上绘画图片，图片从SD卡的档路径中选取，输入起点坐标及缩放比例。</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h22.png" width="200"/></td>
    <td width="20%">显示画布</td>
    <td width="30%">显示指定画布，画布名可修改</td>
  </tr>
  <tr>
    <td width="50%"><img src="/media/ai/AI_h23.png" width="200"/></td>
    <td width="20%">清除画布</td>
    <td width="30%">清除所选画布中的所有内容</td>
  </tr>
</table>

---
## I.	基础编程
##### 活动一：在萤幕上显示矩形图案，设定坐标系(0,0)
<table style="margin-top:20px;">
<tr>
  <td>1)AI模组｜图像处理：「萤幕初始化」、「创建空白画布」、「设定画布坐标」<br><br>
2)循环：「重复执行」<br><br>
3)AI模组｜图像处理：「绘制矩形」<br><br>
4)AI模组｜图像处理：「显示画布」
</td>
  <td><img src="/media/ai/AI_I1.png" width="350"/><img src="/media/ai/AI_I2.png" width="350"/></td>
</tr>
</table>
以上活动首先会建立一幅空白画布并命名为「canvas」，画布的大小设定为240 x 240。接著输入「重复执行」指令，使萤幕不断显示矩形图案，如果没有使用该指令，矩形图案只会显示一次就消失。在「重复执行」指令中加入「绘制矩形」及「显示画布」指令并输入参数如下：
<table style="margin-top:20px;">
	<tr>
		<td width="50%">绘制矩形</td>
		<td width="50%">矩形样式：实心<br>
起始座标：X=0, Y=0<br>
尺寸：寛=1, 高=1<br>
颜色：红色<br>
厚度：1<br>
</td>
	</tr>
	<tr>
		<td>显示画布</td>
		<td>起始座标：X=0, Y=0</td>
	</tr>
</table>
注：「建立画布」是指建立图像变数，将获取的影像存放在变数中，作进一步使用。<br>
运行结果：
<img src="/media/ai/AI_I3.png" width="200"/>

##### 活动二：修改活动一程式，在萤幕上显示延长横线
<table style="margin-top:20px;">
<tr>
  <td>1)循环：「计次」<br>
将指令并合在「重复执行」指令内，范围设定为0-239，间隔=1<br>
2)变数：「i」<br>
将变数「i」放在「绘制矩形」座标参数中的X值处
</td>
  <td><img src="/media/ai/AI_I4.png" width="350"/><img src="/media/ai/AI_I5.png" width="350"/></td>
</tr>
<tr><td colspan=2>点按「运行」后观察萤幕的变化，并简短描述如下：<br><img src="/media/ai/AI_I8.png" width="350"/></td></tr><tr>
<td colspan=2>运行结果：不断延长的直线<br><img src="/media/ai/AI_I6.png" width="200"/><img src="/media/ai/AI_I7.png" width="200"/> </td></tr>
</table>

##### 挑战一：
<table style="margin-top:20px;">
<tr>
  <td colspan=2>修改活动二的程式，在萤幕上显示一个红色方块，由左向右移动，每次移动一格。<br>
提示：尝试运用以下积木<br>
<img src="/media/ai/AI_I9.png" width="350"/>
</td>
</tr>
<tr>
<td colspan=2>参考程式：<br><img src="/media/ai/AI_I10.png" width="200"/><img src="/media/ai/AI_I11.png" width="200"/> </td>
</tr>
<tr >
<td colspan=2>运行结果：<br><img src="/media/ai/AI_I12.png" width="200"/><img src="/media/ai/AI_I13.png" width="200"/> </td>
</tr>
</table>

##### 活动三：建立画布显示矩形图案
<table style="margin-top:20px;">
<tr>
  <td >在积木指令区点按以下指令，并依次放在积木编程区：<br>
1)AI模组｜图像处理：「萤幕初始化」<br>
2)AI模组｜图像处理：「建立画布」、「设定画布起始坐标」<br>
3)循环：「重复执行」<br>
4)AI模组｜图像处理：「绘制矩形」<br>
5)AI模组｜图像处理：「显示画布」
</td><td>
<img src="/media/ai/AI_I14.png" width="350"/>
</td>
</tr>
<tr >
<td colspan=2>运行结果：<br><img src="/media/ai/AI_I15.png" width="200"/></td>
</tr>
</table>
此活动目标为理解路径的概念：<br>
从SD卡档夹中读取图像，使用该图像作为画布，显示在荧幕上，然后在此画布上画白色的矩形块，学生可自行修改矩形块位置、大小及颜色。

##### 活动四：建立画布显示方框文字
<table style="margin-top:20px;">
<tr>
  <td >在积木指令区点按以下指令，并依次放在积木编程区：<br>
1)重复活动一的程式<br>
2)AI模组｜图像处理：「绘制文本」放在「绘制矩形」指令之下<br>
3)AI模组｜图像处理：「显示画布」（必要积木，否则不会显示任何讯息）
</td><td>
<img src="/media/ai/AI_I21.png" width="350"/><img src="/media/ai/AI_I17.png" width="350"/>
</td>
</tr>
<tr>
<td  colspan=2>运行结果：<br><img src="/media/ai/AI_I18.png" width="200"/></td>
</tr>
</table>

##### 挑战二：
<table style="margin-top:20px;">
<tr>
  <td colspan=2>编写程式，在萤幕正中心位置显示白色方框，框内打印你的英文名。如下图所示：<br>
<img src="/media/ai/AI_I19.png" width="350"/><br>
提示：需要计算文字及方框的尺寸，对应萤幕的面积尺寸，修改文字及方框的座标位置，使二者能显示在萤幕的正中心位置。
</td>
</tr>
<tr colspan=2>
<td>参考程式：<br><img src="/media/ai/AI_I20.png" width="200"/></td>
</tr>
</table>

---
## C.	专题学习
硬体设备：AI推理模组、萤幕模组<br>
任务目标：运用「变数」及「循环」，用【线条】指令制作一个万花筒动画<br>
基本流程/步骤：<br>
<img src="/media/ai/AI_j1.png" width="200"/><br>
第一步：模组初始化<br>
<table style="margin-top:20px;">
<tr>
  <td >在积木指令区点按以下指令，并依次放在积木编程区：<br>
1)AI模组｜图像处理：「萤幕初始化」、「建立画布」、「设定画布起始坐标」<br>
2)循环：「重复执行」<br>
3)AI模组｜图像处理：「清除画布」
</td><td>
<img src="/media/ai/AI_j2.png" width="350"/>
</td></tr>
</table>

第二步：绘画直线万花筒<br>
放置【For循环】，设定变数i：由0-240，每次循环自动增加数值5，即i = 0, 5, 10, 15, ……, 240，目的是利用数值变化改变绘画直线的座标位置，使其形成万花筒效果。<br>
<table style="margin-top:20px;">
<tr>
  <td >在步骤3【清除画布】积木指令下，放置下列积木指令：<br>
4)循环：【For循环】<br>
5)AI模组｜图像处理：【绘制直线】<br>
6)AI模组｜图像处理：【显示画布】<br>
7)时间：【等待】
</td><td>
<img src="/media/ai/AI_j3.png" width="350"/>
</td>
</table>
观察结果：<br>
<table style="margin-top:20px;">
<tr>
  <td ><img src="/media/ai/AI_j4.png" width="350"/>
</td><td>
<img src="/media/ai/AI_j5.png" width="350"/>
</td><td>
<img src="/media/ai/AI_j6.png" width="350"/>
</td></tr>
<tr>
<td colspan=3>参考程式：<br><img src="/media/ai/AI_j7.png" width="350"/><img src="/media/ai/AI_j11.png" width="350"/>
</td>
</tr>
</table>

##### 挑战题：
<table style="margin-top:20px;">
<tr>
  <td >如何透过【For循环】方法，延续上面绘画的直线，在余下的空间位置绘画直线，如下图所示：<img src="/media/ai/AI_j8.png" width="350"/>
</td></tr>
<tr>
<td >参考程式：<br><img src="/media/ai/AI_j9.png" width="350"/><img src="/media/ai/AI_j10.png" width="350"/>
</td>
</tr>
</table>
