本帖最后由 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一样开发界面,非常方便。
查看更多