物联创客 发表于 2021-11-26 17:52

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

<div class='showpostmsg'> 本帖最后由 物联创客 于 2021-12-3 19:42 编辑

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">拓普微提供了</font><font face="Calibri">TOPWAY SGTools</font><font face="宋体">图形编辑软件供开发者进行屏幕显示界面的自由化编辑,也就是帮助开发者省去了自己通过编程实现</font><font face="Calibri">GUI</font><font face="宋体">页面的复杂工作,直接采用这么一个专用的上位机工具,通过添加自己所需的图片或自行拖拽控件图标即可完成具备人机交互功能的界面设计,下面将根据我的项目需求来一步步运用</font><font face="Calibri">TOPWAY SGTools</font><font face="宋体">来实现。</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">常规步骤,首先安装</font><font face="Calibri">TOPWAY SGTools</font><font face="宋体">,官方文档提供了详细的安装说明,这里不在赘述,注意一点</font><font face="Calibri">win7</font><font face="宋体">及以上系统要采用管理员身份运行安装包。</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">安装完成后,开始新建工程,注意选择屏幕分辨率参数时,此次评测使用的屏幕分辨率为</font><font face="Calibri">1024*600. </font><font face="宋体">要选择正确,此后在选择屏幕对应型号时选择&ldquo;</font><font face="Calibri">HMT070ETD-1D</font><font face="宋体">&rdquo;,如果分辨率和型号没有选择正确,和屏幕不匹配,那么编辑好文件下载屏幕后,屏幕会显示花屏。</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">接下来看工程资源如下:</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">可以看出,屏幕的开发包含两个主要内容,分别是</font>&ldquo;界面&rdquo;和&ldquo;变量&rdquo;。这两方面可通过 <font face="Calibri">SGTools</font><font face="宋体">工具很方便的进行编辑。我的项目是&ldquo;水质监测系统&rdquo;,需要在屏幕显示</font><font face="Calibri">PH</font><font face="宋体">、</font><font face="Calibri">ORP</font><font face="宋体">、温度、余氯、浊度等测量数据,并需要通过屏幕对报警等控制参数进行设置,故采用本次测评所用的</font><font face="Calibri">HMT070ETD-1D </font><font face="宋体">拓普微</font><font face="Calibri">7</font><font face="宋体">寸串口触摸屏非常合适。我采用的方案是通过自己设计背景图,然后利用</font><font face="Calibri">SGTools</font><font face="宋体">工具在背景图上进行触摸和变量控件等的配置,即可实现项目需求。下图为屏幕首页显示图:</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">从图中可以看到,这里使用了</font>&ldquo;触摸键控件&rdquo;</span></span></span></span> &nbsp;<span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">,就是触摸按键的效果,可以在属性中进行配置按下后显示的效果及是否切换页面,以及是否调出键盘,运算功能等,这里我只配置下按下后切换到页面</font></span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="Calibri">PG0001</font></span></span></span></span> &nbsp;<span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="Calibri">.</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">另外用到了时钟控件</font></span></span></span></span> &nbsp;<span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">,同样可在此控件属性选择多种时间显示格式,我这里选择的格式是:星期</font></span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="Calibri">-</font><font face="宋体">年月日时分秒。显示格式如</font><font face="Calibri">PG0000</font><font face="宋体">右上角模样,将鼠标选中</font><font face="Calibri">PG0000</font><font face="宋体">并右键即可选择创建添加触摸按键,在触摸按键属性中可选择键盘菜单,即当用户触摸到时间显示位置时,会弹出设置时间的专用键盘,即可对时间进行设置,时间设置键盘图片显示如下:</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">最后用到了数字变量控件</font></span></span></span></span> &nbsp;<span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">,一共采用了</font></span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="Calibri">5</font><font face="宋体">个数字变量,分别</font></span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">用于显示</font></span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="Calibri">PH</font><font face="宋体">、</font><font face="Calibri">ORP</font><font face="宋体">、温度、余氯、浊度数据,注意这里每个数据变量都必须设置添加变量</font><font face="Calibri">VP</font><font face="宋体">地址,另外要注意选择变量的数据类型,有多种可选择,比如</font><font face="Calibri">16</font><font face="宋体">、</font><font face="Calibri">32</font><font face="宋体">、</font><font face="Calibri">64</font><font face="宋体">或曲线变量类型,这里我采用</font><font face="Calibri">16</font><font face="宋体">位变量,在工程资源栏</font><font face="Calibri">-</font><font face="宋体">变量</font><font face="Calibri">VP</font><font face="宋体">选中右键添加,注意设置地址时,两个变量的地址间隔是和该变量的位数相关的,我这里处采用</font><font face="Calibri">16</font><font face="宋体">位,设置各个变量的</font><font face="Calibri">VP</font><font face="宋体">地址分别为:</font><font face="Calibri">0x080000</font><font face="宋体">、</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="Calibri">0x080002</font><font face="宋体">、</font><font face="Calibri">0x080004</font><font face="宋体">、</font><font face="Calibri">0x080006</font><font face="宋体">、</font><font face="Calibri">0x080008</font><font face="宋体">。</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">到此</font><font face="Calibri">PG0000</font><font face="宋体">页面基本配置编辑完毕,将屏幕在非供电的情况下插上</font><font face="Calibri">MINI-USB</font><font face="宋体">接口线,并与电脑</font><font face="Calibri">USB</font><font face="宋体">连接,如果是第一次使用,此时电脑会自动安装驱动程序,待安装驱动完毕,则会在电脑识别出一个</font><font face="Calibri">236M</font><font face="宋体">的磁盘,即识别到屏幕的存储盘,那么即可点击</font><font face="Calibri">SGTools</font><font face="宋体">中的下载按钮</font></span></span></span></span> &nbsp;<span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">,即可对整个工程进行编译后下载,会弹出</font></span></span></span></span> &nbsp;<span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">,点击</font>&ldquo;开始下载&rdquo;后</span></span></span></span> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">即代表下载完成,拔掉</font><font face="Calibri">USB</font><font face="宋体">连接线,将屏幕再供上电,屏幕显示效果如下</font><font face="Calibri">:</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:27.5000pt; text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:27.5000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">先点击</font>&ldquo;参数设置&rdquo;图标,切换到<font face="Calibri">PG0001</font><font face="宋体">,显示效果如下:</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:27.5000pt; text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:27.5000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">点击</font>&ldquo;返回&rdquo;图标回到</span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="Calibri">PG0000</font><font face="宋体">,</font></span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">设置时间日期,点击时间显示位置,弹出专用按键设置键盘,进行时间日期设置,效果如下:</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:27.5000pt; text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:27.5000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">点击键盘</font>&ldquo;</span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="Calibri">OK</font></span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">&rdquo;,后屏幕时间设置完成</font></span></span><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="Calibri">:</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:27.5000pt; text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:27.5000pt; text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">利用串口调试助手发送各变量的数据:</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">屏幕显示效果如下:</font></span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-align:left"> &nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">好的,以上显示的界面就用到了基础的</font>&ldquo;触摸控件&rdquo;</span></span><span style="font-size:10.5000pt"><span style="font-family:宋体">&nbsp;<font face="宋体">、</font>&ldquo;时间日期控件&rdquo;、&ldquo;变量控件&rdquo;。</span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-align:left"><span style="font-size:10.5pt"><span style="font-family:Calibri"><span style="font-size:10.5000pt"><span style="font-family:宋体"><font face="宋体">接下来的界面还需要用到</font>&ldquo;曲线显示控件&rdquo;、&ldquo;二维码控件&rdquo;。</span></span></span></span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p style="text-indent:21.0000pt; text-align:left">&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>
</div><script>                                var loginstr = '<div class="locked">查看精华帖全部内容,请<a href="javascript:;"   style="color:#e60000" class="loginf">登录</a>或者<a href="https://bbs.eeworld.com.cn/member.php?mod=register_eeworld.php&action=wechat" style="color:#e60000" target="_blank">注册</a></div>';
                               
                                if(parseInt(discuz_uid)==0){
                                                                                        (function($){
                                                        var postHeight = getTextHeight(400);
                                                        $(".showpostmsg").html($(".showpostmsg").html());
                                                        $(".showpostmsg").after(loginstr);
                                                        $(".showpostmsg").css({height:postHeight,overflow:"hidden"});
                                                })(jQuery);
                                }
</script><script type="text/javascript">(function(d,c){var a=d.createElement("script"),m=d.getElementsByTagName("script"),eewurl="//counter.eeworld.com.cn/pv/count/";a.src=eewurl+c;m.parentNode.insertBefore(a,m)})(document,523)</script>

nmg 发表于 2021-11-29 11:09

<p>cool啊,竟然不知道你是搞水质监测</p>

<p>前阵疯狂的找这方面的工程师</p>
页: [1]
查看完整版本: 【拓普微智能显示屏测评】2.1 SGTools图形编辑软件之触摸、变量、时间控件显示