代码拉取完成，页面将自动刷新
对于新手，这里提供了一份入门指南。
熟悉了一下工具后，我们接下来再来了解一下这屏的开发规则;
开发界面，离不开各个控件的使用，在文档的导航栏里，有专门的大章介绍各个控件的使用 —— 控件介绍；
如果你已经成功安装了FlyThings Lite IDE,那么在你的桌面上，找到 
快捷方式，双击运行。
如果你删除了快捷方式，你还可以在安装目录中的bin文件夹下，找到 
直接运行。
当你运行工具之后会弹出如下界面。
工作空间 用于存储相关设置及历史纪录，你可以将它理解为一个容器，它可以同时管理多个项目，这样不用同时运行多个开发工具。
默认IDE每次启动时会检查更新，也可以手动通过菜单栏 帮助 -> 检查更新 手动检测更新。
当你新建项目完成后，你将看到如下界面
编辑器大致分为六个区域。分别的作用如下：
① 区域 - 项目资源管理器 它将项目文件夹内的资源文件、代码文件等以树形图的形式显示。你可以自由展开/收起，双击文件可以直接打开编辑。具体演示如下：
② 区域 - UI编辑框 主要负责UI界面的编辑和即时预览，他是开发中主要的操作区域
③ 区域 - 控件画板 它包含了所有内置的控件，你可以点击选择需要的的控件，将其拖拽到 ②区域 即可完成控件的创建。具体演示如下：
④ 区域 - 属性表 当你在 区域② 中选择了某个控件后，它的所有属性将在这里以表格的形式显示，你可以在表格中自定义修改。例如修改文字大小，具体演示如下：
⑤ 区域 - 大纲视图 它将已经创建的所有控件以树形图的形式展示；同样支持自由展开/收起； 可以清晰的了解控件之间的层级关系；并且可以直接拖拽某个节点，快速调整层级位置；双击节点可以快速显示/隐藏控件，这个在层级关系复杂后，非常好用。 具体演示如下：
⑥ 区域 - 控制台 编译代码时，这个位置将输出编译日志。
有了以上的基础后，现在，我们可以正式开始开发。
新建一个FlyThings Lite项目十分简单。具体步骤如下：
在编辑器顶部的菜单栏中，依次选择 文件 -> 新建 -> FlyThings for MCU Project,将弹出 FlyThings创建向导 提示框。
按要求填写新建项目相关的参数。 这些参数分别是：
规范填写如上必须参数后，你可以直接选择 完成 ，来快速完成创建。
项目创建完成后，你应该先了解FlyThings Lite项目代码结构介绍。
我们可以将下载的示例代码导入到目前的工作空间中。 导入步骤如下。
具体导入动画
新建UI文件与新建FlyThings Lite项目类似。
具体步骤是： 在项目资源管理器中，左键选中需要运行的项目名，然后右键，在弹出菜单中，选择 模拟器运行 选项即可自动编译该项目。弹出模拟器窗口。操作的动画如下：
具体步骤是：
//TODO 先烧写一个hex文件到MCU。
设置下载串口，一次选择菜单 窗口 -> 首选项，在弹出的窗口中选择FlyThings。选择MCU对应的串口，波特率为 921600，帧长为 512，然后点击应用并关闭。操作的动画如下：
在项目资源管理器中，左键选中需要下载到MCU的项目名，然后右键，在弹出菜单中，选择 下载到MCU 选项即可自动下载该项目。弹出下载窗口。操作的动画如下：
下载完成后复位MCU即可看到运行效果。
开始编写代码之前，首先要了解一个FlyThings Lite项目的基本构成，然后你就能知道自己的代码应该添加到哪个位置。 对于一个基本的FlyThings项目，它的目录结构是这样的：
大致分为 resources 、src 、 ui 三个文件夹。下面分别解释各个文件夹的作用。
这个文件夹的内容就比较简单，主要用来存放项目的各种资源文件，包括 图片、字体文件等。如果你还有其他资源文件也可以添加到该文件夹，该文件夹会完全拷贝到机器中。 但是，由于机器自身存储空间的限制，不建议将大文件存放到该目录。
该文件夹主要为存放代码文件，她还包含了多个部分的代码。我们将 src 文件夹展开
可以看到，它包含了 logic等文件
展开 ui 文件夹
可以看到默认包含了一个 main.form 文件。form 是FlyThings Lite 项目UI文件的后缀名。每一个 form 文件对应一个应用界面。通常，一个应用包含多个界面，所以你需要在 ui 文件夹下创建多个 form 文件。添加新的 form 文件，可以参考 如何新建FlyThings Lite UI文件。 为了描述方便，以后的教程中，统一将 form 文件称为 UI文件。 你可以双击打开 UI文件 ，并对它进行编辑，并且可以即时预览效果。编辑 UI 文件的具体步骤，可以参考控件介绍的教程。 编辑结束后，你就可以使用 模拟器运行 查看效果。
在开始介绍各个控件之前，我们先来基本的了解一下控件的一些通用的属性；
ID值为控件的唯一标识，每一个form文件里的控件ID值是不允许重名的，不同的form文件里的控件ID值允许重名。
我们打开任一form文件，选中任一控件，在属性框中，我们可以看到位置这一属性，该属性确定了该控件的显示位置。
其中左上角的坐标值是相对于父控件左上角位置；
通过该属性，我们可以设置控件默认是显示还是隐藏状态；双击大纲视图中的控件可以快捷的修改该状态：
通过该属性，我们可以设置控件默认是可以触摸还是不能触摸：
如果不清楚如何修改静态标签的通用属性请参考 ** 通用属性 **。
如果需要显示文字，利用现有的静态标签件就可以快速实现。具体操作步骤如下：
静态标签控件静态标签控件不放，然后将其拖拽到任意位置，松开左键，就能看到自动生成的静态标签控件。静态标签属性表中设置文字的内容、字体和大小。
在项目资源管理器中，选择一个UI文件，双击打开； 在预览界面上，找到你要修改的控件，左键点击它，在编辑器的右侧就能看到该控件相应的属性表，这时候你就可以根据需要，填写自定义的属性值，就跟操作Excel一样, 找到你需要修改的属性，然后单击修改。
在静态标签控件中，可以看到有2个表项与颜色属性有关，分别是
文字颜色
背景色
[!Note] 背景色为空时，表示静态标签控件背景透明 具体示例：
上图是属性表颜色部分截图，其表示的含义为：Label2背景颜色设置为透明， 文字的颜色设置为蓝色，Label3背景颜色设置为绿色， 文字的颜色设置为黑色。
我们知道，根据ascii码的定义，字符 char 与 整形 int 存在着对应关系。比如字符 0 的ascii码为48。艺术字就是将ascii码映射为图片的一种功能。设置该功能后，当我们显示一个字符串时，系统会尝试将字符串中的每一个字符映射为指定的图片，最终显示一串图片到屏幕上。
> [!Note]
> 艺术字控件仅支持ascii码
设置方法
找到艺术字控件中的 模式， 选择右侧的 自动生成选项，则软件将使用内置的字体，只有在所有字符中添加过的字符才能够使用，字符可自行添加，仅支持ascii码。 当选择艺术字控件中的 模式， 选择右侧的 自定义选项，点击右侧的更多将弹出艺术字选择框。
选择右上角的 导入 按键添加图片到字符集中， 添加图片后，你可以自行修改对应的asc码或者字符作为该图片的映射字符。然后点击 保存
如果要验证艺术字集是否添加成功，你可以修改文字，预览图上会同步预览效果。 注意：如果你设置了特殊字符集，那么系统会尝试将每个字符映射为字符集中指定的图片；如果某个字符没有设置图片的映射，那么这个字符将不会显示到屏幕上。
在上面的特殊字符集设置框中，我们已经将字符 0-9 以及 : 冒号 分别映射为图片。
如果需要一个按键/按钮，利用现有的按键控件就可以快速实现。具体操作步骤如下：
双击打开UI文件
在右侧控件集合中找到按键控件
鼠标左键点击按键控件不放，然后将其拖拽到任意位置，松开左键，就能看到自动生成的按键控件。
再左键点击刚才生成的按键控件，在编辑器的右侧就能看到该控件的相关属性。在这个属性表格中，你可以像填写Excel表单一样，自由修改属性！
按键属性 使用图片 选择 false，就可以分别设置 默认颜色 和 按下颜色 了。
默认的按钮控件是纯颜色的，看起来有些枯燥。但是可以添加图片对按钮进行美化。 按键属性 使用图片 选择 true，就可以分别设置 默认图片 和 按下图片 了。
按键属性 功能 选择 开关，就可以实现开关功能了。
按键属性 功能 选择 切换页面，并选择 目标页 ，就可以实现切换页面功能了。
很多情况下，我们会用到进度条，利用简单的几张图片，我们也能快速达到这样的效果。
在编辑器中，创建一个滑块控件，默认的滑块样式是透明的，我们必须为其添加足够的图片资源，它才能正常工作。 在属性表中，我们分别设置有效图 、滑块常显图片、滑块按下时的图片、背景图 图片
上一步完成后，一个滑块的创建基本完成了。如果想在工具中预览滑块滑动的效果，可以修改 最大值属性和默认进度值属性。在实时的预览中，你就可以看到滑块游标的位置变化。
图片控件比较简单，只需要选择要显示的图片即可。
GIF动画控件实际上是一个图片控件，我们可以利用它简单的显示一张图片。更近一步，如果我们在代码中动态切换控件的背景图，只要切换的时间间隔足够短，那么就能实现动画的效果。
图片资源准备 一段流畅的帧动画必然需要多张图片资源。这里我们已经准备好了，共54张。
可以看到每张图片表示一帧，并且根据序号统一命名，这主要是方便后续使用。
注意： 系统加载图片时将消耗较多资源， 为了界面运行流畅，强烈建议图片不宜过大。 比如例子中的单张图片大小仅为5KB左右
将这些图片都拷贝到项目的 resources 目录下。你可以在 resources 目录下自行创建子文件夹，方便各种图片资源的整理归类。
创建GIF动画控件 在UI文件中任意创建一个GIF动画控件。并将GIF动画控件的背景图设置为其中一张图片。这里我将第一张图片设置为背景图。这一步仅仅是为了将文本控件的宽高自动调整为图片的宽高，你也可以选择不设置。 完整属性如图：
编译运行项目
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。