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

发布于 2018-08-28 00:12:46
    本帖最后由 ianhom 于 2018-8-28 23:33 编辑


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

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

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

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



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


打开Persimmon UI Builder,新建工程,选择工程名和分辨率,点击确定后再次点击确定生成第一个page。
TIM截图20180828221144.pngTIM截图20180828221252.png
TIM截图20180828221306.png
TIM截图20180828221420.png

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

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

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

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

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




效果展示
效果视频

TIM截图20180828000453.png

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





查看更多

关注者
0
被浏览
3.4k
11 个回答
DaZhou
DaZhou 2018-08-28
不该给这小伙打一下码吗?毕竟我们没有使用别人肖像的权利:D
ianhom
ianhom 2018-08-28
DaZhou 发表于 2018-8-28 09:10
不该给这小伙打一下码吗?毕竟我们没有使用别人肖像的权利


有道理
ianhom
ianhom 2018-08-28
DaZhou 发表于 2018-8-28 09:10
不该给这小伙打一下码吗?毕竟我们没有使用别人肖像的权利


其实我一直以为这是RT-Thread中的某位大佬
bernard
bernard 2018-08-30
赞 ABC 大佬,ABC大佬也是学习营里第一个完成作业的。前面的操作步骤比没提过给大家的教程步骤详细多了。

视频里的20W滑动,应该是这个控件范围比较小,所以触摸拖动起来有些吃力。 PersimmonUI中支持触摸面积比控件面积大的,不过不知道是否也在设计工具上体现了,后面去check下。

期待ABC大佬再创佳绩
wellda
wellda 2018-08-30
正准备交作业,看了一下你们做的 真不错,不敢交了。
ianhom
ianhom 2018-08-30
bernard 发表于 2018-8-30 07:07
赞 ABC 大佬,ABC大佬也是学习营里第一个完成作业的。前面的操作步骤比没提过给大家的教程步骤详细多了。

...


是我的手指比较粗,超出了控件范围
bernard
bernard 2018-08-31
:D 所以这也是UI设计的一部分,交互界面时也要考虑到手指的交互体验
井地的蛙
井地的蛙 2020-05-27
    本帖最后由 井地的蛙 于 2020-5-27 17:06 编辑


很棒,小伙伴加油

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友