薰--

  • 6 主题
  • 16 帖子
  • 547 积分
  • 身份:LV3 中级技术员
  • E币:602

【TOPWAY 5寸智能TFT模块】02.小试牛刀,移植房车总控界面(部分)

2021-2-1 22:37:00 显示全部楼层
这一段时间熟悉了TOPWAY串口屏的一些基础控制应用,也看到了小伙伴分享的一些实例;从刚开始陌生的去体验这款串口屏,到现在可以在上面移植一些之前项目的应用,也是体会颇多;也为后面项目在串口屏的选型上提供了技术积淀。
1、首先准备UI素材我手上的UI素材基本上都是实际项目的UI图片,对于一个工科男来说要专门去设计一套UI还是有些难度的;所以在这篇文章中我们截取了之前项目当中的一个界面来分享一下体验,原图如下哦^^这是一套基于房车中控界面中的一部分,实现的是对车内灯光的一个控制;
1.jpg 2.jpg


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

3.上电运行
https://v.youku.com/v_show/id_XNTA5NDU4MTAxMg==.html
您需要登录后才可以评论 登录 | 立即注册

最新评论

楼层直达:

SnailWillow

  • 19 主题
  • 90 帖子
  • 834 积分
  • 身份:LV3 中级技术员
  • 论坛新秀
  • E币:927

二哲科技

  • 117 主题
  • 341 帖子
  • 1305 积分
  • 身份:版主
  • 论坛新秀
  • E币:1576
快速回复
2
18
广告
关闭 热点推荐上一条 /8 下一条
快速回复 返回列表