[原创] 【拓普微智能显示屏测评】2.1 SGTools图形编辑软件之触摸、变量、时间控件显示

物联创客   2021-11-26 17:52 楼主

拓普微提供了TOPWAY SGTools图形编辑软件供开发者进行屏幕显示界面的自由化编辑,也就是帮助开发者省去了自己通过编程实现GUI页面的复杂工作,直接采用这么一个专用的上位机工具,通过添加自己所需的图片或自行拖拽控件图标即可完成具备人机交互功能的界面设计,下面将根据我的项目需求来一步步运用TOPWAY SGTools来实现。

 

 

常规步骤,首先安装TOPWAY SGTools,官方文档提供了详细的安装说明,这里不在赘述,注意一点win7及以上系统要采用管理员身份运行安装包。

 

 

 

 

安装完成后,开始新建工程,注意选择屏幕分辨率参数时,此次评测使用的屏幕分辨率为1024*600. 要选择正确,此后在选择屏幕对应型号时选择“HMT070ETD-1D”,如果分辨率和型号没有选择正确,和屏幕不匹配,那么编辑好文件下载屏幕后,屏幕会显示花屏。

 

 

 

 

image-20211126174956-1.png  

 

 

 

 

接下来看工程资源如下:

 

 

 

 

image-20211126174956-2.png  

 

 

 

 

可以看出,屏幕的开发包含两个主要内容,分别是“界面”和“变量”。这两方面可通过 SGTools工具很方便的进行编辑。我的项目是“水质监测系统”,需要在屏幕显示PHORP、温度、余氯、浊度等测量数据,并需要通过屏幕对报警等控制参数进行设置,故采用本次测评所用的HMT070ETD-1D 拓普微7寸串口触摸屏非常合适。我采用的方案是通过自己设计背景图,然后利用SGTools工具在背景图上进行触摸和变量控件等的配置,即可实现项目需求。下图为屏幕首页显示图:

 

 

 

 

image-20211126174956-3.png  

 

 

 

 

从图中可以看到,这里使用了“触摸键控件” image-20211126174956-4.png  ,就是触摸按键的效果,可以在属性中进行配置按下后显示的效果及是否切换页面,以及是否调出键盘,运算功能等,这里我只配置下按下后切换到页面PG0001 image-20211126174956-5.png  .

 

 

 

 

另外用到了时钟控件 image-20211126174956-6.png  ,同样可在此控件属性选择多种时间显示格式,我这里选择的格式是:星期-年月日时分秒。显示格式如PG0000右上角模样,将鼠标选中PG0000并右键即可选择创建添加触摸按键,在触摸按键属性中可选择键盘菜单,即当用户触摸到时间显示位置时,会弹出设置时间的专用键盘,即可对时间进行设置,时间设置键盘图片显示如下:

 

 

 

 

image-20211126174956-7.png  

 

 

 

 

最后用到了数字变量控件 image-20211126174956-8.png  ,一共采用了5个数字变量,分别用于显示PHORP、温度、余氯、浊度数据,注意这里每个数据变量都必须设置添加变量VP地址,另外要注意选择变量的数据类型,有多种可选择,比如163264或曲线变量类型,这里我采用16位变量,在工程资源栏-变量VP选中右键添加,注意设置地址时,两个变量的地址间隔是和该变量的位数相关的,我这里处采用16位,设置各个变量的VP地址分别为:0x080000

 

 

 

 

0x0800020x0800040x0800060x080008

 

 

 

 

到此PG0000页面基本配置编辑完毕,将屏幕在非供电的情况下插上MINI-USB接口线,并与电脑USB连接,如果是第一次使用,此时电脑会自动安装驱动程序,待安装驱动完毕,则会在电脑识别出一个236M的磁盘,即识别到屏幕的存储盘,那么即可点击SGTools中的下载按钮 image-20211126174956-9.png  ,即可对整个工程进行编译后下载,会弹出 image-20211126174956-10.png  ,点击“开始下载”后 image-20211126174956-11.png  

 

 

 

 

即代表下载完成,拔掉USB连接线,将屏幕再供上电,屏幕显示效果如下:

 

 

 

 

image-20211126174956-12.png  

 

 

 

 

先点击“参数设置”图标,切换到PG0001,显示效果如下:

 

 

 

 

image-20211126174956-13.png  

 

 

 

 

点击“返回”图标回到PG0000设置时间日期,点击时间显示位置,弹出专用按键设置键盘,进行时间日期设置,效果如下:

 

 

 

 

image-20211126174956-14.png  

 

 

 

 

点击键盘OK”,后屏幕时间设置完成:

 

 

 

 

image-20211126174956-15.png  

 

 

 

 

利用串口调试助手发送各变量的数据:

 

 

 

 

image-20211126174956-16.png  

 

 

 

 

屏幕显示效果如下:

 

 

 

 

image-20211126174956-17.png  

 

 

 

 

好的,以上显示的界面就用到了基础的“触摸控件” “时间日期控件”、“变量控件”。

 

 

 

 

接下来的界面还需要用到“曲线显示控件”、“二维码控件”。

 

 

 

 

 

 

 

本帖最后由 物联创客 于 2021-12-3 19:42 编辑

回复评论 (1)

cool啊,竟然不知道你是搞水质监测

前阵疯狂的找这方面的工程师

点赞  2021-11-29 11:09
电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 京公网安备 11010802033920号
    写回复