1、首先准备UI素材我手上的UI素材基本上都是实际项目的UI图片,对于一个工科男来说要专门去设计一套UI还是有些难度的;所以在这篇文章中我们截取了之前项目当中的一个界面来分享一下体验,原图如下哦^^这是一套基于房车中控界面中的一部分,实现的是对车内灯光的一个控制;
2.新建UI工程
2.1.打开TOPWAY串口屏对应的上位机软件RGTools,当前的版本为1.82;点击菜单栏的文件->新建工程,在弹出的对话框中输入工程名称、工程存放路径、以及选择设备型号:HMT050ATA-2C,最后点击确认;
2.2.右击工程资源栏的背景图,选择导入背景图,然后导入上面我们准备好的2张图片;
2.3.双击工程资源栏的页面PG0000,然后在右击属性栏中,将背景图属性修改为DP0000-1;
2.4.点击工具栏上的触摸按键,在PG0000页面上对应的灯控图标范围内绘制触摸区域;我们将每个ICON的触摸区域设置为160*160,按下效果设置为:显示背景图剪切区域,将图标/背景图设置为:DP0001-2
2.5.界面上的6个灯控ICON都设置一样的视觉效果;两张大图片,一个原图,一个按下效果图,在PC软件中有显示背景图剪切区域的设置选项,在美工生成UI素材的时候大大的简化了工作量,不需要再针对每一个按键ICON截取效果图,何况还要保证每个效果图的位置、大小等数据参数;给这样的配置大大的点赞!!!
2.6.当工程制作好了,我们点击工具栏上的编译按钮;待编译完成后,软件会自动弹出需要下载到串口屏存储空间的数据目录,我们将其拷贝到串口屏即可;
升级串口屏的文件,我们使用串口屏自带的MiniUSB接口:去除DC供电,断开POWER按键、使用USB线将串口屏与PC连接起来、按下POWER按键,这个时候会检测到TOPWAY存储设备,这个时候我们清空这个磁盘里原有的文件、然后将刚刚生成的文件COPY进入、然后再次断开POWER按键、拔掉MiniUSB线、连接DC电源线,按键POWER按键进行上电运行。
3.上电运行
https://v.youku.com/v_show/id_XNTA5NDU4MTAxMg==.html