带你进入绚丽多彩的柿饼M（一）

这是一份系列连载，总计分为5个部分，并可通过 i.MX RT1052 野火开发板来体验RT-Thread的柿饼UI及柿饼M。

先来看一段柿饼学习营学员完成的作业视频：

初识柿饼M

大家对PersimmonUI可能有一定耳闻，不过PersimmonUI并未开放出代码出来。原因有多种，商业上的，使用复杂度上面的。没有一个简单易用的东西就大范围地推荐给用户，这是对用户的不负责任！

说明:

在柿饼学习营结束后，我们将针对i.MX RT开发板提供固件、设计工具、模拟器下载。如果你需要商用可联系我们。

PersimmonUI是以C++编写的，是RT-Thread上一款现代化图形UI库。使用C++是因为GUI上的一系列控件以C++面向对象的方式来描述会更合理。Widget -> 部件，所以也就是一个个对象：

例如一个button，一个label，一个image。每个对象有他们自己的属性，方法等。

当然C++也会带来一些问题，例如原来C中可以任意使用函数指针，但在C++中却并不能随意单独使用类的方法（而需要在类的实例化对象环境中使用其成员方法）。所以这种也诞生了Qt方式的signal/slot模式。因为Qt的起始年代非常久远（Qt诞生于1995年），那个时候一些C++标准并不那么完备，所以QT signal/slot机制是以独立的，额外的moc编译器方式，生成新的C++代码来辅助完成。而PersimmonUI则使用了现代化一些的C++机制，也完成了类似signal/slot机制。

那么PersimmonUI signal/slot机制就是极限了吗？所以也就引出了本系列文章的主角，PersimM。

PersimM本意指的是PersimmonUI Module，即PersimmonUI的模块，甚至有的时候指的是运行PersimmonUI的硬件模块。因为它最初一个定义就是：基于Persim M硬件模块，用户可以非常方便、易用地进行自己的定制开发。

以下是一份PersimmonUI 和 PersimM的对比列表

功能	PersimmonUI	PersimM
UI展现形式	窗口（Window）	页面（Page）
开发方式	C/C++	UI设计器 + JavaScript
图片格式	BMP, PNG, JPG等	BMP，PNG，JPG等
字体	点阵字体，TTF字体	点阵字体，TTF字体
画布	以绘图设备方式操作，功能有限	带Alpha，抗锯齿完整画布功能
动画效果	用户编程实现	设计器携带动画效果选择
窗口/页面动画	用户编程实现	设计器选择切换动画效果
执行方式	编译、烧写完整固件	USB下载设计资源
交互方式	触摸，按键	触摸，按键
OTA 功能	用户自行实现	内置OTA升级功能
WDT 功能	用户自行实现	内置WDT功能
串口操作	C/C++编程使用	JavaScript 串口操作
文件系统	C/C++编程使用	JavaScript 文件操作
网络操作	socket套接字	提供http、MQTT客户端接口

从上面对比表格，可以非常清晰的发现，PersimM和传统模式已经有一些不一样，主要体现在：

1. 有UI设计工具，用于界面设计；

2. 编程方式不再是传统的C/C++模式，而是可以简单上手的JavaScript模式，美工+前端模式；

3. 整体是一体化的东西，例如OTA、WDT等这些功能都默认内置。

在 i.MX RT1052开发板上搭建PersimM环境

在i.MX RT1052开发板上运行PersimM，首先需要一份PersimM的固件。因为整体是一体化的，这份固件分成了两部分：

1. bootloader

2. firmware

bootloader会用于后续的firmware固件升级，而firmware是后续真正需要执行，并展示UI的固件。OTA的过程实际上也是如此，先本地有保存需要更新的固件；然后重启，重新启动时，bootloader才会去把要更新的固件更新/展开到flash上，覆盖要运行的固件。

硬件环境搭建

下面我们以野火的i.MXRT1052开发板为例，说明如何搭建好PersimM的硬件环境。在连接好板子与屏幕后，还需要连接3个接口: USB转串口、USB-OTG1和仿真器。

为了确保硬件已连接上PC，打开设备管理器，查看是否有对应串口和RTT Win USB。RTT Win USB在Win10环境下是免驱的，但在Win7环境下要安装RT-Thread提供的指定驱动包。

当硬件环境搭建完毕后，接下来我们就可以开始烧写bootloader和firmware了

烧写bootloader

请使用bootloader的工程，用Keil MDK打开，然后直接点击烧写按钮（不是编译然后再烧写），bootloader固件就会被烧写到开发板flash中。

1. 选择正确的烧写算法：点击菜单栏->Flash->Configure Flash Tools...，在弹出框中点击Debug->Setting,在后续弹出框中的Flash Download栏中，选择Erase full chip,并选择指定算法文件。

   

2. 开始烧写工程，点击菜单栏->Flash->Download。

3. 在Build Output栏中确认工程是否烧写完毕。

   

bootloader烧写完毕后，可以通过putty或者其他串口助手打开USB串口（Connection Type设为Serial,Speed设为115200)，串口会输出如下信息：

烧写firmware

当开发板中已经烧写了bootloader就可以按照OTA升级固件的模式来升级固件，过程如下：

1. 重启开发板，在串口终端中会显示出bootloader的启动信息，并有倒计时的计数，在倒计时计数跳到0之前，在串口中随意输入一个按键，bootloader会停下来等待命令。

   

2. 此时在PC上，我们打开 配置工具，然后在固件更新中，选择具体要升级的固件，点击升级。它就会把固件推送到开发板上，自动重启，然后完成bootloader更新固件的工作。

   

3. 升级的过程可以在串口终端上看到更新固件的进度。

   

4. 因为这个固件主要是针对屏的，所以当固件烧写完毕后，还需要配置下屏参数。配置参数时，需要设备运行firmware，不能停留在bootloader。打开配置工具，修改LCD参数，配置请与下表保持一致。配置完成后，点击更新数据。         

选项	参数
LCD水平方向上的像素(X)	800
LCD垂直方向上的像素(Y)	480
LCD数据时钟频率(DCLK Freq)	55
LCD水平后沿(HBP)	8
LCD垂直后沿(VBP)	2
LCD水平前沿(HFP)	4
LCD垂直前沿(VFP)	4
LCD水平同步脉宽(HSPW)	40
LCD垂直同步脉宽(VSPW)	10

烧写firmware完毕后，屏幕上就会显示出RT-Thread的logo，之后我们就可以开始使用Persimmon UI了。

上位机设计器介绍

从PersimM开始，我们有了一份专用于UI界面设计的设计工具。在PersimmonUI文件夹下，双击执行PersimmonUI.exe可执行文件，点击菜单文件->新建->新建工程，会询问你的工程名称，路径以及分辨率大小等信息，例如按照下述填写的：

例如这里的分辨率，野火开发板上的是800x480，我们选择800x480。创建出工程后，它会迅速询问是否创建一个页面（page1），默认选择确认，将会展现第一个设计页面。

当第一个设计页面创建后，整个PersimmonUI工具显示具体如下：

设计器各区域说明：

1. 工具箱：内含基本控件，可通过鼠标操作，在page中新增对应的基本控件。

2. 资源库：可添加字体和图片资源。

3. 布局工具栏：辅助设定page中所有控件的布局。

4. UI设计区域：显示并设定UI的整体布局。

5. 工程管理器：通过树状结构图显示当前工程内所含所有文件

6. 控件属性栏：显示或设定控件的基本属性。

在这第一个设计页面上，我们简单的拖动一些控件，例如最简单的：”Hello World” 以及 “OK” 按钮：

其中，选中Button，在布局工具栏中点击了水平居中和垂直居中，它自动对齐到屏幕中心。选中Label，可以在属性栏—“文本对齐”中选择MiddleCenter以中间对齐的方式，同时在布局工具栏中选择水平居中。

上位机设计器下载

当我们制作完工程后，可以通过下述方法把这个界面下载到板子上运行，看看效果如何。

1. 查看设备连接状态，确保通过下图中设备连接状态栏中显示设备已连接，

2. 点击菜单 “下载—>下载”，把工程下载至设备中。可以通过输出栏，查看下载状态。

3. 重启设备：按下设备上的重启按钮。

当设备重启后，设备未更新界面，请确认配置启动时的资源目标路径与PersimmonUI下载路径是否一致。下载路径可以在PersimmonUI的输出栏中查看。
当资源目标路径与PersimmonUI下载路径不一致时，请修正配置工具中资源配置的设定或PersimmonUI中下载->下载选项的设定，使配置启动时的资源目标路径与PersimmonUI下载路径保持一致。

实际效果

 

 

RT-Thread

让物联网终端的开发变得简单、快速，芯片的价值得到最大化发挥。GPLv2+协议，可免费在商业产品中使用。

扫描二维码，关注我们