## 快捷键

### 1.1 页面操作快捷键

|       页面操作       |         快捷键         |
| :------------------: | :--------------------: |
|       重载页面       |      `Ctrl` + `R`      |
|       还原页面       |      `Ctrl` + `0`      |
|       关闭窗口       |      `Ctrl` + `W`      |
|      最小化窗口      |      `Ctrl` + `M`      |
|      打开新窗口      | `Ctrl` + `Shift` + `N` |
|       缩小页面       | `Ctrl` + `Shift` + `-` |
|       放大页面       | `Ctrl` + `Shift` + `=` |
| 打开或关闭开发者工具 | `Ctrl` + `Shift` + `I` |

### 1.2 Blockly图形块操作快捷键

| Blockly图形块操作 |         快捷键         |
| :---------------: | :--------------------: |
|       复制        |      `Ctrl` + `C`      |
|       粘贴        |      `Ctrl` + `V`      |
|       查找        |      `Ctrl` + `F`      |
|    跨页面复制     | `Ctrl` + `Shift` + `C` |
|    跨页面粘贴     | `Ctrl` + `Shift` + `V` |

### 1.3 代码编辑器操作快捷键

| 代码编辑器操作 |         快捷键         |
| :------------: | :--------------------: |
|    命令面板    |          `F1`          |
|      查找      |      `Ctrl` + `F`      |
|      替换      |      `Ctrl` + `H`      |
|    增大字体    |      `Ctrl` + `=`      |
|    减小字体    |      `Ctrl` + `-`      |
|   切换行注释   |      `Ctrl` + `/`      |
|   切换块注释   | `Ctrl` + `Shift` + `/` |

### 1.4 状态栏操作快捷键

| 状态栏操作 |         快捷键         |
| :--------: | :--------------------: |
|  增大字体  |      `Ctrl` + `=`      |
|  减小字体  |      `Ctrl` + `-`      |
| 清空状态栏 |      `Ctrl` + `E`      |
|  串口终端  |      `Ctrl` + `T`      |
| 发送Ctrl+C | `Ctrl` + `Shift` + `C` |
| 发送Ctrl+D | `Ctrl` + `Shift` + `D` |

## 界面介绍

Mixly软件主要分成图形化程序选择区、图形化程序编辑区、代码预览区、系统功能区、消息提示区。

<img src="{default}/images/base/interface-2.png" alt="界面1" style="zoom: 33%;" />

### 2.1 图形化程序选择区

图形化程序选择区中包含了各类图形化程序，每一个类别中都包含多个图形化。通过将这些图形块拖动到图形化程序编辑区就可以完成编程。

<img src="{default}/images/base/interface-3.png" alt="图形化程序选择区" style="zoom: 50%;" />

如果你是初次使用，不知道某些图形块所处的分类名，也可以通过图形化程序选择区上方的搜索框来查找带有某一个或几个关键词的图形块。通过输入多个关键词可实现精确查找。

| ![查找1]({default}/images/base/interface-4.png) | ![查找2]({default}/images/base/interface-5.png) |
| ----------------------------------------------- | ----------------------------------------------- |

<div class="layui-card" style="box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 20%);">
  <div class="layui-card-header icon-attention-circled" style="background: #f0b37e;color:#fff;font-size:16px;">注意</div>
  <div class="layui-card-body" style="background: #ffedcc;">在图形化程序选择区中查找图形块时，多个关键词之间需用空格分隔开。</div>
</div>

### 2.2 程序编写区

<img src="{default}/images/base/interface-6.png" alt="程序编写区" style="zoom: 33%;" />

#### 1. 程序编写

我们通常把能完成一定功能的代码块拖动到该区域处进行连接。

#### 2. 程序删除

- 将不需要的代码拖到右下方的垃圾桶。
- 将不用的代码拖到最左侧的图形化程序选择区。
- 选中不用的代码后点击键盘Delete或者Backspace键。

#### 3. 程序缩放

在右下角垃圾桶上方有缩放按钮。

- 第一个按钮是图形块大小正常化并居中。
- 第二个是放大图形块。
- 第三个是缩小图形块。

<img src="{default}/images/base/interface-7.png" alt="程序缩放" style="zoom: 67%;" />

当然，你也可以直接使用鼠标滚轮进行缩放。

#### 4. 程序整理

当编写的程序比较多时，需要对程序进行整理。

在空白区右击，选择清理块。

|                      清理前                      |                      清理后                      |
| :----------------------------------------------: | :----------------------------------------------: |
| ![清理前]({default}/images/base/interface-8.png) | ![清理后]({default}/images/base/interface-9.png) |

#### 5. 程序复制

在图形块上右击，选择复制，会产生一个一样的块，但该方式只能复制一个块。

<img src="{default}/images/base/interface-19.png" alt="程序复制" style="zoom:50%;" />

先用鼠标拖住多个块，再按下 `Ctrl` + `Shift` + `C`，`Ctrl` + `Shift` + `V` 可以复制多块。

#### 6. 撤销及重做

在返回主页面按钮右边有两个连续的按钮，分别是撤销（undo，`Ctrl` + `Z`）及重做（redo，`Ctrl` + `Y`）。

撤销功能是当我们编写代码时误删代码后，便可点击左箭头或直接按 `Ctrl` + `Z` 来恢复误删代码。

而重做则是和 `Ctrl` + `Z` 相反，它是恢复上一步操作，该功能也可通过点击右箭头或直接键入 `Ctrl` + `Y` 来实现。

#### 7. 垃圾桶

被删除的块可以在垃圾桶里找到，点击右下角垃圾桶图标即可显示此前被删除的所有图形块。

|                       无被删除的图形块                       |                       有被删除的图形块                       |
| :----------------------------------------------------------: | :----------------------------------------------------------: |
| <img src="{default}/images/base/interface-10.png" alt="垃圾桶无可回收块" style="zoom:67%;" /> | <img src="{default}/images/base/interface-11.png" alt="垃圾桶" style="zoom:67%;" /> |

#### 8. 背包

在图形块上右击，选择加入背包即可将当前图形块放入背包，你可以将任意图形块或拼接块加入背包。

<img src="{default}/images/base/interface-12.png" alt="加入背包" style="zoom:67%;" />

在背包中用鼠标悬浮与某个块同时右击，选择从背包中移除即可将此块从背包中删除。如果想清空背包中的所有块，鼠标在右上角的书包上右击，选择清空即可。

|                             背包                             |                         从背包中移除                         |                           清空背包                           |
| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
| <img src="{default}/images/base/interface-14.png" alt="背包" style="zoom: 67%;" /> | <img src="{default}/images/base/interface-13.png" alt="从背包中移除" style="zoom: 67%;" /> | <img src="{default}/images/base/interface-15.png" alt="清空背包" style="zoom: 67%;" /> |

#### 9. 查找图形块

当图形化程序编写区中图形块过多时，你可以使用图形块查找工具来快速定位你所要查看的图形块。通过在图形化程序编写区中右击，选择查找图形块，你可以打开图形块查找工具。

| <img src="{default}/images/base/interface-16.png" alt="查找图形块按钮" style="zoom:67%;" /> | <img src="{default}/images/base/interface-17.png" alt="查找图形块工具" /> |
| :----------------------------------------------------------: | :----------------------------------------------------------: |

<img src="{default}/images/base/interface-18.png" alt="查找图形块示例" style="zoom: 55%;" />

输入一个关键词即可查找出对应的图形化模块，其中灰色块为当前查找所定位的图形块，而黑色块为查找出的全部图形块，你可以使用此工具中的上下箭头来定位上一个或下一个图形块。

#### 10. 打开wiki

当在板卡页面配置中开启wiki并且当某个图形块关联了此wiki中某一页时，将会在图形化的右键菜单里显示打开wiki选项，点击后即可在新页面下打开关联的wiki页。

### 2.3 代码预览区

<img src="{default}/images/base/interface-20.png" alt="代码预览区" style="zoom: 50%;" />

该区域可通过点击右侧深灰色箭头来显示或隐藏。

在图形化程序选择区拖拽图形块后，在代码编辑区会生成对应的代码。可以帮助用户掌握代码的学习。

<div class="layui-card" style="box-shadow: 1px 1px 4px 1px rgb(0 0 0 / 20%);">
  <div class="layui-card-header icon-attention-circled" style="background: #f0b37e;color:#fff;font-size:16px;">注意</div>
  <div class="layui-card-body" style="background: #ffedcc;">在该区域无法直接对代码进行编辑，需要点击图形化程序选择区左上角的 代码 按钮才能进行编辑。</div>
</div>

### 2.4 消息提示区

#### 1. 输出

输出栏通常是给学生予以信息反馈的场所。比如编译或上传进程中，编译或上传是否成功，如果失败原因是什么。

![输出]({default}/images/base/interface-21.png)

#### 2. 串口

串口栏用于实时显示串口收到的数据，如果代码中包含 `Serial.begin(xxx);` ，则在代码上传完成后打开串口时自动将波特率设置为xxx。注意，xxx只可以在[9600, 19200, 28800, 38400, 57600, 115200]中取值，如果代码中设置的值不在此范围内，串口打开时的波特率将会使用配置文件中的默认值。

串口栏支持同时接收多个串口的数据，并支持使用mixly提供的相关串口指令操作串口。当然，你也可以在串口栏中右击来选择需要进行的操作。

|                         打开多个串口                         |                           右键菜单                           |                           串口终端                           |
| :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: |
| <img src="{default}/images/base/interface-22.png" alt="打开多个串口" style="zoom:67%;" /> | <img src="{default}/images/base/interface-23.png" alt="右键菜单" style="zoom: 67%;" /> | <img src="{default}/images/base/interface-24.png" alt="串口终端" style="zoom:67%;" /> |

### 2.5 系统功能区

系统功能区主要执行的功能有新建、打开、保存、另存为、导入库、管理库、编译、上传、选择主控板型号及端口、串口监视器及工作区切换等功能。

<img src="{default}/images/base/interface-25.png" alt="系统功能区" style="zoom:50%;" />

## 编译&上传

当用户编写完代码后，如果想要检查代码逻辑是否有误，可点击编译。

如果显示“编译失败”，则需要根据提示检查自己的代码，如显示“编译成功”则证明代码逻辑上无误，可上传。

如果出现“上传失败”，大多数情况插拔USB线即可解决该问题。

如果出现“上传成功”，则证明代码已上传至板子上。当然，如果用户对于代码逻辑信心十足，可直接点击上传按钮。

## 板卡&端口

当用户点击主控板下拉三角时即可看到有众多主控板型号可供选择。用户需按照当前手中主控板型号予以选择。

<img src="{default}/images/base/interface-26.png" alt="板卡" style="zoom:67%;" />

选择好板卡后，还需要选择该板卡对应的端口号，端口号是计算机与板卡通信的通道。

<img src="{default}/images/base/interface-27.png" alt="端口" style="zoom:67%;" />

## 串口监视器

串口监视器与模块选择区的通信模块中的串口通信指令一起使用。 可以用于输出变量、传感器数值等。

| ![串口监视器]({default}/images/base/interface-28.png) | ![串口可视化]({default}/images/base/interface-29.png) |
| :---------------------------------------------------: | :---------------------------------------------------: |