# FlyThings_Lite_IDE_User_Manual
**Repository Path**: roger_cwf/FlyThings_Lite_IDE_User_Manual
## Basic Information
- **Project Name**: FlyThings_Lite_IDE_User_Manual
- **Description**: FlyThings_Lite_IDE_User_Manual
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 3
- **Created**: 2021-01-22
- **Last Updated**: 2021-06-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 入门须知
对于新手，这里提供了一份入门指南。
## 工具篇
1. 在开始使用我们的屏之前，得先把开发工具安装好；
2. 打开工具，简单的熟悉一下开发环境，可以尝试着新建个工程，浏览一下有哪些内容，不必深究里边的细节;
3. 新建的工程UI上面是没有东西的，我们可以先拖放个文本控件上去，然后编译、运行到我们的屏上看效果；
4. 我们已经提供了大量的样例代码，选择相应平台尺寸的代码包下载下来，解压出来，导入到工具里边；工程比较多，这些后边章节会具体介绍，这里我们可以选择自己感兴趣的例子运行到我们的屏上看效果；
至此，工具的简单使用相信你也就会了；
## 规则篇
熟悉了一下工具后，我们接下来再来了解一下这屏的开发规则;
1. 了解工程的目录结构，可以知道工程包含了哪些内容，我们的代码、UI及资源分别存放在什么目录下；
2. 接下来我们再来了解一下哪些内容是工具自动生成的，UI文件与源码之间是怎样的一个对应关系以及UI上面的控件命名规则；了解了这些之后，我们就清楚自己的代码需要填在什么地方，怎么操作控件；
## 控件篇
开发界面，离不开各个控件的使用，在文档的导航栏里，有专门的大章介绍各个控件的使用 —— **控件介绍**；
# 搭建开发环境
## 安装FlyThings Lite IDE
# 初次使用FlyThings Lite 集成开发工具
如果你已经成功安装了FlyThings Lite IDE,那么在你的桌面上，找到  快捷方式，双击运行。
如果你删除了快捷方式，你还可以在安装目录中的`bin`文件夹下，找到  直接运行。
## 选择工作空间
当你运行工具之后会弹出如下界面。
**工作空间** 用于存储相关设置及历史纪录，你可以将它理解为一个容器，它可以同时管理多个项目，这样不用同时运行多个开发工具。
## 软件更新
默认IDE每次启动时会检查更新，也可以手动通过菜单栏 **帮助 -> 检查更新** 手动检测更新。
# FlyThings Lite IDE 工作区域使用介绍
当你新建项目完成后，你将看到如下界面
编辑器大致分为六个区域。分别的作用如下：
1. **① 区域 - 项目资源管理器** 它将项目文件夹内的资源文件、代码文件等以树形图的形式显示。你可以自由展开/收起，双击文件可以直接打开编辑。具体演示如下：
2. **② 区域 - UI编辑框** 主要负责UI界面的编辑和即时预览，他是开发中主要的操作区域
3. **③ 区域 - 控件画板** 它包含了所有内置的控件，你可以点击选择需要的的控件，将其拖拽到 **②区域** 即可完成控件的创建。具体演示如下：
4. **④ 区域 - 属性表** 当你在 **区域②** 中选择了某个控件后，它的所有属性将在这里以表格的形式显示，你可以在表格中自定义修改。例如修改文字大小，具体演示如下：
5. **⑤ 区域 - 大纲视图** 它将已经创建的所有控件以树形图的形式展示；同样支持自由展开/收起； 可以清晰的了解控件之间的层级关系；并且可以直接拖拽某个节点，快速调整层级位置；双击节点可以快速显示/隐藏控件，这个在层级关系复杂后，非常好用。 具体演示如下：
6. **⑥ 区域 - 控制台** 编译代码时，这个位置将输出编译日志。
有了以上的基础后，现在，我们可以正式开始开发。
# 如何新建FlyThings Lite项目
新建一个FlyThings Lite项目十分简单。具体步骤如下：
1. 在编辑器顶部的菜单栏中，依次选择 **文件 -> 新建 -> FlyThings for MCU Project**,将弹出 **FlyThings创建向导** 提示框。
按要求填写新建项目相关的参数。 这些参数分别是：
* **项目名**
项目的名称；可以是字母、数字的组合，不能出现中文及空格。
* **位置**
项目的存储路径；同样不推荐路径中出现中文，防止编译异常。
* **平台**
根据购买的MCU选择相应的平台，目前有
- **SWM32s**
- **SWM19s**
根据使用的屏幕选择相应的分辨率，也可以手动输入分辨率。
规范填写如上必须参数后，你可以直接选择 **完成** ，来快速完成创建。
2. 项目创建完成后，你应该先了解FlyThings Lite项目代码结构介绍。
# 如何导入FlyThings Lite项目
我们可以将下载的示例代码导入到目前的工作空间中。
导入步骤如下。
1. 找到工具顶部的菜单栏，依次选择菜单 **文件** -> **导入** 。
2. 在弹出框中， 依次选择 **常规** -> **现有项目到工作空间中**， 再选择 **下一步**。
3. 在弹出框中 选择 **浏览** 按钮，指定需要导入项目的文件夹。 点击 **确定**, 它会自动解析文件夹内包含的项目。
4. 如果项目文件没有损坏，你可以看到已经识别出来的项目，然后直接点击 **完成** ，导入的项目就会出现在项目资源管理器中，你可以继续查看/编辑它。
具体导入动画
# 如何新建FlyThings Lite UI 文件
新建UI文件与新建FlyThings Lite项目类似。
1. 在工具顶部的菜单栏，依次选择菜单 **文件** -> **新建** -> **FlyThings for MCU UI**。
2. 在弹出框中， 选择文件路径并设置文件名，然后直接点击 **完成** ，新建的UI文件就会出现在项目资源管理器中，你可以继续查看/编辑它。
# 如何模拟器运行
具体步骤是： 在项目资源管理器中，左键选中需要运行的项目名，然后右键，在弹出菜单中，选择 **模拟器运行** 选项即可自动编译该项目。弹出模拟器窗口。操作的动画如下：
# 如何下载到MCU
具体步骤是：
1. //TODO 先烧写一个hex文件到MCU。
2. 设置下载串口，一次选择菜单 **窗口** -> **首选项**，在弹出的窗口中选择FlyThings。选择MCU对应的串口，波特率为 **921600**，帧长为 **512**，然后点击**应用并关闭**。操作的动画如下：
3. 在项目资源管理器中，左键选中需要下载到MCU的项目名，然后右键，在弹出菜单中，选择 **下载到MCU** 选项即可自动下载该项目。弹出下载窗口。操作的动画如下：
4. 下载完成后复位MCU即可看到运行效果。
# FlyThings Lite项目代码结构介绍
开始编写代码之前，首先要了解一个FlyThings Lite项目的基本构成，然后你就能知道自己的代码应该添加到哪个位置。
对于一个基本的FlyThings项目，它的目录结构是这样的：
大致分为 **resources** 、**src** 、 **ui** 三个文件夹。下面分别解释各个文件夹的作用。
* ## resources 文件夹
这个文件夹的内容就比较简单，主要用来存放项目的各种资源文件，包括 图片、字体文件等。如果你还有其他资源文件也可以添加到该文件夹，该文件夹会完全拷贝到机器中。
但是，由于机器自身存储空间的限制，不建议将大文件存放到该目录。
* ## src 文件夹
该文件夹主要为存放代码文件，她还包含了多个部分的代码。我们将 **src** 文件夹展开
可以看到，它包含了 **logic**等文件
* ### logic 子文件夹
存放UI文件的基础类代码。每一个UI文件，经过编译后，都会生成相同前缀名的c文件。例如：ui文件夹下有一个 **main.form**，那么经过编译后，会生成 `main.h`、`main.c`文件夹。
> [!Warning]
> **强烈推荐不要手动修改 activity 文件夹下的代码，特殊情况除外**
* ## ui 文件夹
展开 **ui** 文件夹
可以看到默认包含了一个 **main.form** 文件。**form** 是**FlyThings Lite** 项目UI文件的后缀名。每一个 **form** 文件对应一个应用界面。通常，一个应用包含多个界面，所以你需要在 **ui** 文件夹下创建多个 **form** 文件。添加新的 **form** 文件，可以参考 **如何新建FlyThings Lite UI文件**。 为了描述方便，以后的教程中，统一将 **form** 文件称为 **UI文件**。
你可以双击打开 **UI文件** ，并对它进行编辑，并且可以即时预览效果。编辑 **UI** 文件的具体步骤，可以参考**控件介绍**的教程。
编辑结束后，你就可以使用 **模拟器运行** 查看效果。
# 通用属性
在开始介绍各个控件之前，我们先来基本的了解一下控件的一些通用的属性；
## 控件ID值
ID值为控件的唯一标识，每一个form文件里的控件ID值是不允许重名的，不同的form文件里的控件ID值允许重名。
## 控件位置
我们打开任一form文件，选中任一控件，在属性框中，我们可以看到**位置**这一属性，该属性确定了该控件的显示位置。
其中**左上角的坐标值**是相对于父控件左上角位置；
## 是否显示
通过该属性，我们可以设置控件默认是显示还是隐藏状态；双击大纲视图中的控件可以快捷的修改该状态：
## 能否触摸
通过该属性，我们可以设置控件默认是可以触摸还是不能触摸：
# 静态标签 Label
## 注意
如果不清楚如何修改静态标签的通用属性请参考 ** 通用属性 **。
## 我需要显示一段文字/标签，怎么办？
如果需要显示文字，利用现有的`静态标签`件就可以快速实现。具体操作步骤如下：
1. 双击打开main.form文件
2. 在右侧控件集合中找到`静态标签`控件
3. 鼠标左键点击`静态标签`控件不放，然后将其拖拽到任意位置，松开左键，就能看到自动生成的静态标签控件。
4. 在`静态标签`属性表中设置文字的内容、字体和大小。
## 如何修改文字的颜色？
在项目资源管理器中，选择一个UI文件，双击打开；
在预览界面上，找到你要修改的控件，左键点击它，在编辑器的右侧就能看到该控件相应的属性表，这时候你就可以根据需要，填写自定义的属性值，就跟操作Excel一样, 找到你需要修改的属性，然后单击修改。
在静态标签控件中，可以看到有2个表项与颜色属性有关，分别是
* 文字颜色
- 该属性可以设置控件文字的颜色值
* 背景色
- 设置控件整个矩形区域的背景颜色（不会根据控件状态的变化而变化）
> [!Note]
> **背景色为空时，表示静态标签控件背景透明**
具体示例：
上图是属性表颜色部分截图，其表示的含义为：Label2背景颜色设置为透明， 文字的颜色设置为蓝色，Label3背景颜色设置为绿色， 文字的颜色设置为黑色。
# 艺术字 ArtText
我们知道，根据ascii码的定义，`字符 char` 与 `整形 int` 存在着对应关系。比如字符 `0` 的ascii码为`48`。艺术字就是将ascii码映射为图片的一种功能。设置该功能后，当我们显示一个字符串时，系统会尝试将字符串中的每一个字符映射为指定的图片，最终显示一串图片到屏幕上。
> [!Note]
> **艺术字控件仅支持ascii码**
1. 设置方法
找到艺术字控件中的 **模式**， 选择右侧的 **自动生成**选项，则软件将使用内置的字体，只有在所有字符中添加过的字符才能够使用，字符可自行添加，仅支持ascii码。
当选择艺术字控件中的 **模式**， 选择右侧的 **自定义**选项，点击右侧的**更多**将弹出艺术字选择框。
选择右上角的 **导入** 按键添加图片到字符集中， 添加图片后，你可以自行修改对应的asc码或者字符作为该图片的映射字符。然后点击 **保存**
2. 如果要验证艺术字集是否添加成功，你可以修改文字，预览图上会同步预览效果。
**注意：如果你设置了特殊字符集，那么系统会尝试将每个字符映射为字符集中指定的图片；如果某个字符没有设置图片的映射，那么这个字符将不会显示到屏幕上。**
## 具体使用
在上面的特殊字符集设置框中，我们已经将字符 0-9 以及 : 冒号 分别映射为图片。
# 按键 Button
## 我需要一个按键/按钮， 如何添加修改属性？
如果需要一个按键/按钮，利用现有的`按键`控件就可以快速实现。具体操作步骤如下：
1. 双击打开UI文件
2. 在右侧控件集合中找到`按键`控件
3. 鼠标左键点击`按键`控件不放，然后将其拖拽到任意位置，松开左键，就能看到自动生成的按键控件。
4. 再左键点击刚才生成的按键控件，在编辑器的右侧就能看到该控件的相关属性。在这个属性表格中，你可以像填写Excel表单一样，自由修改属性！
## 如何修改按键的颜色？
按键属性 **使用图片** 选择 **false**，就可以分别设置 **默认颜色** 和 **按下颜色** 了。
## 如何用图片来丰富按键的样式
默认的按钮控件是纯颜色的，看起来有些枯燥。但是可以添加图片对按钮进行美化。
按键属性 **使用图片** 选择 **true**，就可以分别设置 **默认图片** 和 **按下图片** 了。
## 如何用按键控件实现开关功能
按键属性 **功能** 选择 **开关**，就可以实现开关功能了。
## 如何用按键控件实现切换页面功能
按键属性 **功能** 选择 **切换页面**，并选择 **目标页** ，就可以实现切换页面功能了。
# 滑块 ProgressBar
## 如何使用滑块控件？
很多情况下，我们会用到进度条，利用简单的几张图片，我们也能快速达到这样的效果。
1. 首先，我们准备四张资源图片
* 背景图
* 有效图
* 滑块
* 滑块按下
2. 在编辑器中，创建一个滑块控件，默认的滑块样式是透明的，我们必须为其添加足够的图片资源，它才能正常工作。
在属性表中，我们分别设置**有效图 、滑块常显图片、滑块按下时的图片、背景图** 图片
3. 上一步完成后，一个滑块的创建基本完成了。如果想在工具中预览滑块滑动的效果，可以修改
**最大值**属性和**默认进度值**属性。在实时的预览中，你就可以看到滑块游标的位置变化。
# 图片 Image
图片控件比较简单，只需要选择要显示的图片即可。
# GIF动画 Animation
GIF动画控件实际上是一个图片控件，我们可以利用它简单的显示一张图片。更近一步，如果我们在代码中动态切换控件的背景图，只要切换的时间间隔足够短，那么就能实现动画的效果。
1. 图片资源准备
一段流畅的帧动画必然需要多张图片资源。这里我们已经准备好了，共54张。
可以看到每张图片表示一帧，并且根据序号统一命名，这主要是方便后续使用。
>**注意： 系统加载图片时将消耗较多资源， 为了界面运行流畅，强烈建议图片不宜过大。 比如例子中的单张图片大小仅为5KB左右**
将这些图片都拷贝到项目的 **resources** 目录下。你可以在 **resources** 目录下自行创建子文件夹，方便各种图片资源的整理归类。
2. 创建GIF动画控件
在UI文件中任意创建一个GIF动画控件。并将GIF动画控件的背景图设置为其中一张图片。这里我将第一张图片设置为背景图。这一步仅仅是为了将文本控件的宽高自动调整为图片的宽高，你也可以选择不设置。
完整属性如图：
3. 编译运行项目
