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

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

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

开发环境
RTT + PerimmonUI + 野火RT1052Mini + 5寸800*480触屏

开发过程
这里跟着教程一步步操作即可，可能是教程赶得匆忙，有些细节没有提及，在这里我们一步步记录下来。
1、搭建开发环境硬件连接如图所示，1号为串口，可以在这里看到系统打印的信息；2号为USB，是固件升级、显示配置及上位机设计器PersimmonUI对开发板下载的接口。


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


USB通讯口需要驱动程序，如果是win10的小伙伴是免安装
的，如果是win7的小伙伴记得一定要安装驱动，否则无法继续后面的工作。

打开配置工具，按如下参数进行配置，包括LCD显示参数，资源配置、文件同步和固件更新，固件更新中记得选择最新的PersimmonUI固件，不然会有奇形怪状的问题。

完成固件更新，按复位键重启，打开Persimmon UI Builder，可以看到左下角设备状态为“已连接”，这时在“下载”标签页中选择“下载选项”中的“ROM储存”，就完成了GUI设计之前的全部工作。





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


打开Persimmon UI Builder，新建工程，选择工程名和分辨率，点击确定后再次点击确定生成第一个page。




我们先试验一下简单的按钮控件和标签控件，在设计区放好位置后，在属性区可以修改文字显示。


完成实际后，可以选择进行模拟仿真，检查动态效果，这样我们第一个GUI上的“Hello World”就完成啦。


然后我们来尝试第一周的作业，首先拖一个card控件到设计区，card控件是一个容器，可以在这个容器中放置多张照片，然后选择水平或垂直
的方式进行切换，打开多重子控件选项。


然后将图片控件放置到card控件中，调整好背景色后，在图片的属性区选择我们需要的图片。


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





效果展示
效果视频



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

查看更多