柿饼_PersimmonUI

【PersimmonUI柿饼学习营】+ A Byte of China + 环境搭建&20W年薪广告

发布于 2018-08-28 00:12:46 浏览：5808 订阅该版

* 本帖最后由 ianhom 于 2018-8-28 23:33 编辑 *

我又回来了。。。。。。很高兴还能有机会继续参加【柿饼GUI学习营】活动，希望能借这个机会把GUI学好。

**_开发环境_**
RTT + PerimmonUI + 野火RT1052Mini + 5寸800*480触屏
![wx_camera_1535343243074.jpg](/uploads/201808/28/001227wz9xi9obqxinb9sx.jpg)
**_开发过程_**
这里跟着教程一步步操作即可，可能是教程赶得匆忙，有些细节没有提及，在这里我们一步步记录下来。
1、搭建开发环境硬件连接如图所示，1号为串口，可以在这里看到系统打印的信息；2号为USB，是固件升级、显示配置及上位机设计器PersimmonUI对开发板下载的接口。
![TIM截图20180828172200.png](/uploads/201808/28/172209c0q0g1u9psmb80bs.png)

PersimmonUI柿饼目前是以firmware固件的形式提供的，所以为了方便烧录固件，需要先在开发板上上写BootLoader，打开提供的BootLoader的KEL工程，选择合适的仿真器和下载算法（如图所示），不用编译直接下载即可。重启之后可以看到串口有数据打印，这里有一个2秒的启动时间，在2秒内在终端工具中输入任意字符，可以进行暂停进入应用，等待固件更新。
![TIM截图20180828172015.png](/uploads/201808/28/172043kttbdx4gvn6qsef1.png)

USB通讯口需要驱动程序，如果是**win10的小伙伴是免安装**的，如果是**win7的小伙伴记得一定要安装驱动**，否则无法继续后面的工作。
![TIM截图20180828172459.png](/uploads/201808/28/172508v85o1dsteam0zd1e.png)
打开配置工具，按如下参数进行配置，包括LCD显示参数，资源配置、文件同步和固件更新，固件更新中记得选择最新的PersimmonUI固件，不然会有奇形怪状的问题。
![TIM截图20180828171220.png](/uploads/201808/28/172043tttji8ec7zndh778.png)![TIM截图20180828171245.png](/uploads/201808/28/172043tvbm5bbl8pb62dre.png)![TIM截图20180828171305.png](/uploads/201808/28/172043i3efei9k660nynez.png)![TIM截图20180828171333.png](/uploads/201808/28/172043xlbh30xrywi2rxha.png)
完成固件更新，按复位键重启，打开Persimmon UI Builder，可以看到左下角设备状态为“已连接”，这时在“下载”标签页中选择“下载选项”中的“ROM储存”，就完成了GUI设计之前的全部工作。
![TIM截图20180828172617.png](/uploads/201808/28/172624tr3irw2zzojji5wc.png)
![TIM截图20180828171653.png](/uploads/201808/28/172043if0rpab3y0s68gsn.png)

----------------------------------------华丽的分界线------------------------------------------------

打开Persimmon UI Builder，新建工程，选择工程名和分辨率，点击确定后再次点击确定生成第一个page。
![TIM截图20180828221144.png](/uploads/201808/28/231647cm7mgct5m3gxl90x.png)![TIM截图20180828221252.png](/uploads/201808/28/231647o0pkfkf5juc5fue5.png)
![TIM截图20180828221306.png](/uploads/201808/28/231647w50gfax06ft7p9np.png)
![TIM截图20180828221420.png](/uploads/201808/28/231647ir0wm3lzrrq7a7rg.png)

我们先试验一下简单的按钮控件和标签控件，在设计区放好位置后，在属性区可以修改文字显示。
![TIM截图20180828221608.png](/uploads/201808/28/231647hdrck85ckuf8kfz2.png)

完成实际后，可以选择进行模拟仿真，检查动态效果，这样我们第一个GUI上的“Hello World”就完成啦。
![TIM截图20180828221655.png](/uploads/201808/28/231648f2sb166m1x1nqb61.png)

然后我们来尝试第一周的作业，首先拖一个card控件到设计区，card控件是一个容器，可以在这个容器中放置多张照片，然后选择**水平或垂直**的方式进行切换，打开多重子控件选项。
![TIM截图20180828221852.png](/uploads/201808/28/231648y0wu5eiy45088rez.png)

然后将图片控件放置到card控件中，调整好背景色后，在图片的属性区选择我们需要的图片。
![TIM截图20180828230958.png](/uploads/201808/28/233224b4h4084wco2akpp1.png)

接着在图示区域增加RT-Thread logo，广告文字的label即可，
这里有几个地方需要注意，图片不能大于控件区域，否则会显示不全；文字可以使用不同的字体，可在资源区增加字体；最后为了达到可变化的年薪效果，可以尝试使用“wheelString”，可以手动切换文字显示内容。
![TIM截图20180828230959.png](/uploads/201808/28/233228o6e6eafuefbu4l4z.png)

**_效果展示_**
[效果视频](https://v.youku.com/v_show/id_XMzgwMDE3MTAzNg==.html?x&sharefrom=android&sharekey=05bbc7d28e58f2cb85ce75188ca6ff879)

![TIM截图20180828000453.png](/uploads/201808/28/092745cw2fcpfw4c9pelml.png)

**_总结_**
之前几乎没有接触过GUI开发，第一次上手就体验了可视化开发的柿饼，算是遇上好时代了，呵呵。
开发确实很方便，设计所见即所得，像制作ppt一样开发界面，非常方便。