小程序通过 ajax读取的图片数据如何展示_一个常被忽略的intouch的小技巧—鼠标悬停...

6d93341b-3a17-eb11-8da9-e4434bdf6706.jpegJZGKCHINA 工控技术分享平台 经常看到网上的大数据采集平台,平台的前端都是采用H5编写,熟悉H5技术的人应该都知道,H5主要是负责编写前台页面,炫酷的网站页面交互特效、3D效果都离不开H5。但是作为工控人经常因为能力和精力有限,不可能擅长各个领域。某天突然萌发了一个思想,能否使用组态软件,实现简易的平台展示呢? 抛开一个特效,这里利用intouch常被忽略的小技巧—鼠标悬停,基本能满足的简单的人机交换。

思路如下:

一、准备一张大数据展示的地图,做成一个独立的页面,并且在右下角留空白 二、新建若干张相关省份的地址 三、在大地图上新建动作的热触点 四、鼠标经常热触点的时候,在首页上弹出相应省份的小地图

具体步骤如下:

1:新建一张页面,规格设置为1920*1080,窗口类型选择“替换”,XY坐标位0;0,窗口尺寸1920*1080,刚好覆盖整个屏幕。

6e93341b-3a17-eb11-8da9-e4434bdf6706.png

图1

2:准备一张空白地图,插入地图,这里主要右下角留出空白。

6f93341b-3a17-eb11-8da9-e4434bdf6706.png

图2

3:新建若干张小地图,XY坐标位1350;580,窗口尺寸位550*480,这里的尺寸和坐标根据实际情况调整。

7393341b-3a17-eb11-8da9-e4434bdf6706.png

图3

4:在相应地图上插入相关的图片

7593341b-3a17-eb11-8da9-e4434bdf6706.png

图4

5:按地图相应的省份,建立动作的按钮。代码如下:

Hide "map_浙江省1";

Hide "map_浙江省2";

Show"map_江苏省";

Hide"map_河南省";

Hide"map_山西省";

Hide"map_安徽省";

Hide"map_江西省";

7a93341b-3a17-eb11-8da9-e4434bdf6706.png

图5

条件的类型选择“鼠标悬停时”再叠加“鼠标左键/键按下时”这样鼠标经过热触点或者鼠标按下时候,都会弹出小地图。

7e93341b-3a17-eb11-8da9-e4434bdf6706.png

图6

8093341b-3a17-eb11-8da9-e4434bdf6706.png

图7

最后将大地图上相应的热触点,全部“置后”这样就隐藏画面上难看的按钮了。

8293341b-3a17-eb11-8da9-e4434bdf6706.png

图8

测试一下效果:

8493341b-3a17-eb11-8da9-e4434bdf6706.png

图9

运行状态下,鼠标经过河南省时候,右下角出现了河南省的地图。

8793341b-3a17-eb11-8da9-e4434bdf6706.png

图10

运行状态下,鼠标经过山西省时候,右下角出现了山西省的地图。同理只要在全国各省份下建立热触点,就能实现鼠标经过省份时候,出现对应的小地图了。

总结

鼠标悬停这个功能,也经常运用到鼠标经过按钮时候按钮背景变色、背景更换等等。组态软件往往注重实用性,一下花哨的功能都不具备。但组态软件往往隐藏了一些不太使用的功能,善于发现的使用,再加上一点构思,也能编写出自己的风格来。

往期回顾

如何通过博途V15平台下,完成两台西门子300的通讯

如何通过HART协议将流量计实时数据读取到上位机

如何通过INTOUCH组态软件做EXCEL报表(含代码)

通过Intouch组态软件通过OPC功能读取SMART PLC数据

【续篇】如何通过HART协议将流量计实时数据读取到上位机

轻松通过OPC UA协议访问西门子1500数据

姿势已摆好

就等你点啦

作者简介

赖伯海

从事自动化控制十余载,从事各种水处理自动化控制,熟悉AB、施耐德、西门子、三菱等主流PLC程序开发及画面组态制作及应用,对各自控仪表也有深入研究。

更多资讯 请关注我们

8b93341b-3a17-eb11-8da9-e4434bdf6706.jpeg

8f93341b-3a17-eb11-8da9-e4434bdf6706.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值