# 认识CocoBlockly X编程环境
---
## A.	认识AI模组及应用

## 模组简介

CocoRobo AI模组是CocoRobo为了推广人工智能教育而研发的「即插即用式」的可编程电子模组。AI模组套装是由AI推理模组、AI摄影镜头模组及AI萤幕模组三部份组成。

## AI模组

<table style="margin-top:20px;">
	<tr>
		<td width="50%"><img src="/media/ai/AI_zhengmian.png" width="350"/></td>
		<td width="50%"><img src="/media/ai/AI_fanmian.png" width="350"/></td>
	</tr>
	<tr>
		<td>正面</td>
		<td>反面</td>
	</tr>
</table>

AI 模组作为人工智能相关应用的主控模组，拥有基础计算机视觉识别功能和机器学习模型的推理功能，可帮助老师实现入门和进阶级别的 AI 应用。
<br>
#### 功能组成及应用：
1. 自带WIFI功能，可联网发送或者接收数据
2. 支援Micro SD卡存取影像、视讯、机器学习模型、音乐等资料
3. 集成摄影镜头模块的插座，供后置拍摄使用

## 摄影镜头模组

<table style="margin-top:20px;">
	<tr>
		<td width="50%"><img src="/media/ai/AI_photozheng.png" width="350"/></td>
		<td width="50%"><img src="/media/ai/AI_photofan.png" width="350"/></td>
	</tr>
	<tr>
		<td>正面</td>
		<td>反面</td>
	</tr>
</table>

200w像素摄影镜头，可分别插在萤幕模组或者 AI 模组上，前拍后拍都可以。并且摄影镜头的影像尺寸有320 x 240 px及160 x 120 px两款，使用时可自行选择。

## 萤幕模组

<table style="margin-top:20px;">
	<tr>
		<td width="50%"><img src="/media/ai/AI_screenzheng.png" width="350"/></td>
		<td width="50%"><img src="/media/ai/AI_screenfan.png" width="350"/></td>
	</tr>
	<tr>
		<td>正面</td>
		<td>反面</td>
	</tr>
</table>

#### 功能组成及应用：
1. 集成摄影镜头模组插座，供前置拍照使用；
2. 1.54 寸 LCD 全彩萤幕，绘制JPG, BMP等格式图片；
3. 可用于外接的 3.5mm 音频介面；
4. 板载功放晶片及扬声器，支援播放WAV格式的音讯档案；

## 模组连接及使用
1）连接AI模组、摄影镜头模组和萤幕模组三部分，按照如下图所示的位置进行连接
<table style="margin-top:20px;">
	<tr>
		<td width="50%"><img src="/media/ai/AI_anzhuang_1.png" width="350"/></td>
		<td width="20%"><img src="/media/ai/AI_anzhuang_3.png" width="350"/></td>
    <td width="30%"><img src="/media/ai/AI_anzhuang_2.png" width="350"/></td>
	</tr>
</table>

2）使用Micro USB数据线连接AI模组和电脑
<table style="margin-top:20px;">
	<tr>
		<td width="50%"><img src="/media/ai/AI_usb_1.png" width="350"/></td>
		<td width="50%"><img src="/media/ai/AI_usb_2.png" width="350"/></td>
	</tr>
	<tr>
		<td>Micro USB数据线连接电子模组</td>
		<td>Micro USB数据线连接电脑</td>
	</tr>
</table>

连接完成后，便可看到初始介面，按如下图所示的步骤即可体验AI模组的功能样例。<br>
<img src="/media/ai/AI_connectfinish.png" width="350"/>
<br>STEP 1：将模组通过数据线连接到电脑的USB端口，启动AI模组；
<br>STEP 2：模组顶部左侧按钮左移，右侧按钮右移，按右侧按钮右移到Try Demos，按底部左边按钮确认，即可进入AI样例体验选单；
<br>STEP 3：在AI体验列表介面，按右侧按钮可实现翻页操作，再按底部确定按钮即可进行体验。

---
## B.	CocoBlockly X
CocoBlockly X图形化编程工具，是可用于学习Python基础以及AI模组的在线编程环境。通过这款工具可以给IoT模组和AI推理模组编写程式及上传程式。<br>
在Chrome浏览器输入网址 http://x.cocorobo.hk ，即可开始在CocoBlockly X编程。<br>
<img src="/media/ai/AI_coco1.png" width="350"/>
1. 文档存取区：程式项目命名、保存（保存为.xml档）、删除所有积木及所有积木一键截图
2. 模式切换区：样例加载、模式切换（主机板模组与 AI 模组）<br>
<img src="/media/ai/AI_coco2.png" width="350"/>
3. 辅助区：学习资料、项目档导入及导出、语言设置、以及用户登入
<br>其中，学习资料按钮，可以跳转至EDU或者AI HUB学习平台：<br>
<img src="/media/ai/AI_coco3.png" width="350"/>
<img src="/media/ai/AI_coco4.png" width="350"/>
4.	积木指令区：除基础积木以外（由「逻辑」至「序列埠通讯」），不同模式下拥有不同的扩展积木
5.	积木编程区：将积木拖入此区域中以进行程式编写
6.	Python编程区：当用户将积木拖入积木编程区以后，此处将会生成对应的Python源代码，支持用户对代码进行编辑、复制、下载及上传，下载后缀为 .py格式的python文档<br>
<img src="/media/ai/AI_coco5.png" width="350"/>
7.	上传区：用户可选择使用有线或者无线上传模式

---
## C.	CocoBlockly Uploader
CocoBlockly Uploader是一款跨平台的上传插件，安装后可以使CocoBlockly X实现浏览器、IoT模组和AI推理模组间的通讯，将编写完成的程式上传到相关模组。安装方法如下：
1. 进入CocoBlockly X编程平台，http://x.cocorobo.hk <br>
<img src="/media/ai/AI_uploader1.png" width="350"/>
2.	将滑鼠移向右下方「上传区域」的「下载」图示位置，点按「Windows」下载Uploader，如果是Mac系统，则点按「Mac」进行下载。<br>
<img src="/media/ai/AI_uploader2.png" width="350"/>

#### Windows系统下的安装：
1. 下载完成后执行安装档，点按「安装」按钮，进行安装<br>
<img src="/media/ai/AI_upload1.png" width="210"/>
<img src="/media/ai/AI_upload2.png" width="210"/>
<br><br><B>注意，已安装其它版本Python的用户请先卸载Python。</B><br><br>
2. 安装程式会启动Python安装视窗，在选单中点按「Repair」，开始进行Python安装程式<br>
<img src="/media/ai/AI_upload3.png" width="210"/>
<img src="/media/ai/AI_upload4.png" width="210"/>
3. 安装完成后点按「Close」按钮<br>
<img src="/media/ai/AI_upload5.png" width="210"/>
4. 继续安装Uploader，按照安装程式执行<br>
<img src="/media/ai/AI_upload6.png" width="210"/>
<img src="/media/ai/AI_upload7.png" width="210"/>
<img src="/media/ai/AI_upload8.png" width="210"/><br>
5. 最后，点按「完成」结束Uploader安装程式 <br>
<img src="/media/ai/AI_upload9.png" width="210"/>
<img src="/media/ai/AI_upload10.png" width="210"/><br>
6. 点击GO TO COCOBLOCKLY X即可进入积木编程页面

#### Mac系统下的安装：
1)「Mac」用户右键点击安装档案，选择“安装程式（预设值）”进行安装<br>
<img src="/media/ai/AI_macupload1.png" width="210"/><br>
2) 进入安装页面，点击“继续”，之后点击“安装“
<img src="/media/ai/AI_macupload2.png" width="210"/>
<img src="/media/ai/AI_macupload3.png" width="210"/><br>
3) 验证你的密码，然后点击“安装软件”进入正在安装页面，等待即可<br>
<img src="/media/ai/AI_macupload4.png" width="210"/>
<img src="/media/ai/AI_macupload5.png" width="210"/><br>
4) 出现下图“已成功安装“页面，则表示uploader已成功安装，即可看到程式图标<br>
<img src="/media/ai/AI_macupload6.png" width="210"/>
<img src="/media/ai/AI_macupload7.png" width="210"/><br>

---
## D.	上传程式
将IoT模组或AI推理模组，通过USB接驳线与电脑连接。打开CocoBlockly X编程工具。
1.	进入CocoBlockly X编程平台，http://x.cocorobo.hk
<br>
<img src="/media/ai/AI_shangchuan1.png" width="350"/><br>
2.	在上方「切换区域」选择AI模组：
<br>
<img src="/media/ai/AI_shangchuan2.png" width="350"/><br>
3.	在右下方「上传区域」检查以下设定：
<br>
<img src="/media/ai/AI_shangchuan3.png" width="350"/><br>
4.	在「上传区域」点按如下图所示中，左下角位置的「运行」按钮上传程式到AI模组中。
<br>
<img src="/media/ai/AI_shangchuan4.png" width="350"/><br>

上传失败或出现其他错误，请参阅：[Uploader常见错误处理](/aikit/A0.md)。

##### 注意：

1）上图中左下角第一个按钮为「运行程式」按钮，即运行当前blockly中的程式，断开连接后，再次接通，不会继续运行当前程式，而是显示初始化菜单介面：
<br>
<img src="/media/ai/AI_shangchuan5.png" width="300"/><br>
且选择「Run Last」选项，也不会运行之前的程式，如果想要再次运行，需要再次点击运行按钮
<br>
2）左下角第二个按钮为「上传程式」按钮，将程式上传到AI模组中，便会存储在模组中，断开连接，再次接通后，选择「Run Last」选项，即可运行上次的程式。
<br>
3）如果上传出现问题，或者加载AI模组的插件出现问题，则可以点击右下角「重启设备」按钮，尝试解决。

---
## E.	串口互动窗
串口互动窗用于显示或查看AI模组上的数据，是测试数据（感应器、网路请求）的好帮手。在「代码区」点按「串口互动窗」。在积木指令区点按「序列埠通讯」，在积木编程区放置【打印】指令<img src="/media/ai/AI_E1.png" width="250"/>。然后在「上传区域」点按「运行代码」按钮，当显示「上载成功！100%」后在「代码区」点按「串口互动窗」，会显示「Hello World!」<br>
Windows系统：
<br>
<img src="/media/ai/AI_E2.png" width="300"/><br>
Mac系统：
<br>
<img src="/media/ai/AI_E3.png" width="300"/><br>

---
## F.	CocoBlockly X编程体验
##### 1.	在萤幕模组显示Hello World !
<table style="margin-top:20px;">
	<tr>
		<td width="50%">在积木指令区点按以下指令，并依次放在积木编程区：<br>
1)AI模组｜图像处理：「萤幕初始化」、「创建空白画布」、「设定画布坐标」<br><br>
2)循环：「重复执行」<br><br>
3)AI模组｜图像处理：「萤幕文字」并输入「Hello World！」<br><br>
（其中「文字大小」可通过修改数字改变；颜色可选择，此处选为红色）
</td>
		<td width="50%"><img src="/media/ai/AI_f1.png" width="350"/><img src="/media/ai/AI_f2.png" width="350"/></td>
	</tr>
	<tr>
		<td colspan=2>完成编程后，在「上传区域」点按「运行代码」，观察AI萤幕模组的变化。<br>
运行结果：
<br>
<img src="/media/ai/AI_f3.png" width="250"/><br>
</td>
	</tr>
</table>

##### 2.	在萤幕中心显示Hello World !
<table style="margin-top:20px;">
	<tr>
		<td width="50%">
1)AI模组｜图像处理：「萤幕初始化」、「创建空白画布」、「设定画布坐标」<br><br>
2)循环：「重复执行」<br><br>
3)AI模组｜图像处理：「萤幕文字」并输入「Hello World！」<br><br>
4)修改座标的X值及Y值，使「Hello World！放置萤幕正中心位置。
</td>
		<td width="50%"><img src="/media/ai/AI_f4.png" width="350"/><img src="/media/ai/AI_f5.png" width="350"/></td>
	</tr>
	<tr>
		<td colspan=2>完成编程后，在「上传区域」点按「运行代码」，观察AI萤幕模组的变化。<br>
运行结果：
<br>
<img src="/media/ai/AI_f6.png" width="250"/><br>
</td>
	</tr>
</table>

##### 3.	按钮控制
<table style="margin-top:20px;">
	<tr>
		<td width="50%">在积木指令区点按以下指令，并依次放在积木编程区：<br>
1)1.	AI模组｜图像处理：「萤幕初始化」、「创建空白画布」、「设定画布坐标」<br><br>
2)循环：「重复执行」<br><br>
3)逻辑：「逻辑判断」<br><br>
4)AI模组｜基础：「按钮状态」<br><br>
5)AI模组｜图像处理：「萤幕文字」（颜色为白色）
</td>
		<td width="50%"><img src="/media/ai/AI_f7.png" width="350"/><img src="/media/ai/AI_f8.png" width="350"/></td>
	</tr>
	<tr>
		<td colspan=2>运行结果：当按钮A按下，显示Hello World！，否则不显示任何文字。<br>
未按键：
<img src="/media/ai/AI_f9.png" width="150"/>
按A键：
<img src="/media/ai/AI_f10.png" width="150"/>
</td>
	</tr>
</table>


##### 补充：
上面第三步「逻辑判断」积木块的实现方式如下：<br>
1）选择：
<br>
<img src="/media/ai/AI_f11.png" width="250"/><br>
2）点击左上角图标，显示如下：
<br>
<img src="/media/ai/AI_f12.png" width="250"/><br>
3）拖拽「否则」积木块到右侧，放到「如果」下面，即可显示出「否则」部分：
<br>
<img src="/media/ai/AI_f13.png" width="250"/><br>
