首页 > 其他分享 >第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用

时间:2023-01-28 17:32:02浏览次数:48  
标签:Web 应用 组态 Modbus 点击 ISM 页面

系列文章目录

​​第一节 使用ISM Web组态软件采集Modbus设备数据​​第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用


文章目录

  • ​​系列文章目录​​
  • ​​前言​​
  • ​​一、创建应用​​
  • ​​二、熟悉ISM Web组态设计界面​​
  • ​​1.装饰页面​​
  • ​​总结​​

前言

上一节我们已经通过ISM组态软件采集到了Modbus设备数据,这节我们就要利用这些数据开发组态利用。


一、创建应用

进入项目后,点击右侧的应用管理

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_golang

然后点击创建应用。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_前端_02


点击确定后,创建应用。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_前端_03

二、熟悉ISM Web组态设计界面

找到我们刚才创建的应用,单击设计按钮,进入应用的开发界面

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_前端_04


应用创建后,系统会默认创建一个867*765,背景为灰色的页面。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_javascript_05

1.装饰页面

点击页面的属性串口,点击页面背景,给页面添加背景图

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_golang_06


选择合适的背景后,页面实时更新。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_前端_07


我们现在添加一个温度组件,显示采集的温度

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_vue_08


第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_vue_09


点击组件,在属性串口点击动作属性,这里可以看到组件有个展示数据,我们可以选择我们创建的Modbus数据模型。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_前端_10


点击保存,或者按下组合键ctrl+s快捷保存。点击预览按钮。预览我们创建的界面。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_前端_11


我们通过修改Modbus slave 寄存器里面的值,可以看到组件可以动态的显示寄存器的值。

第二节 使用ISM Web组态软件利用采集到的Modbus设备数据开发组态应用_vue_12


总结

本节只是简单介绍了组态应用把采集的数据实时显示到页面上的步骤,系统还提供许多其他的组件供用户使用,后面我会一一讲解。
SM组态软件 演示地址:http://36.133.188.61:8081/



标签:Web,应用,组态,Modbus,点击,ISM,页面
From: https://blog.51cto.com/u_15938018/6025062

相关文章

  • 第四节 使用ISM Web组态软件采集SNMP V3设备数据
    系列文章目录​​第一节使用ISMWeb组态软件采集Modbus设备数据​​第二节使用ISMWeb组态软件利用采集到的Modbus设备数据开发组态应用第三节使用ISMWeb组态软件采集OP......
  • ISM Web组态大屏监控软件的脚本使用
    前言为了解决多设备数据运算和多设备数据联动,ISM提供了类go语言的格式的系统脚本新建脚本执行间隔是脚本的执行间隔时间输入完脚本后,点击检查,可以检查脚本是否有错误。语法......
  • JavaWeb-Filter&Listener
    JavaWeb-Filter&Listener1,Filter1.1Filter概述Filter表示过滤器,是JavaWeb三大组件(Servlet、Filter、Listener)之一。过滤器可以把对资源的请求拦截下来,从而实现......
  • WebSocket长连接接入支付宝消息服务,实现消息通知
    ​大家好,我是小悟在对接支付宝开放平台的一些常用功能时,常常需要收到支付宝的回调通知结果,才能处理业务逻辑。此文介绍通过WebSocket长连接接入支付宝消息服务,实现消息通知......
  • Dynamics CRM Online WebAPI
    创建应用1.登录https://portal.azure.com/#home2.选择AzureActiveDirectory3.在注册应用程序页面中输入应用程序的注册信息3.1添加应用程序3.2填写应用程序注册......
  • WebSocket长连接接入支付宝消息服务,实现消息通知
    ​大家好,我是小悟在对接支付宝开放平台的一些常用功能时,常常需要收到支付宝的回调通知结果,才能处理业务逻辑。此文介绍通过WebSocket长连接接入支付宝消息服务,实现消息通知......
  • 振弦采集模块配置工具VMTool的MODBUS 工具模块
    振弦采集模块配置工具VMTool的MODBUS工具模块(1)寄存器查看此功能模块提供标准的MODBUS协议寄存器显示及单个寄存器修改功能,通过点击扩展功能区的【MODBUS】标签切换......
  • Web核心
    Web核心1、什么是JavaWeb?​ Web:全球广域网,也称万维网(www),能够通过浏览器访问的网站​ JavaWeb:是用Java技术来解决相关web互联网领域的技术栈2、JavaWeb技术栈......
  • dev xaf MiddleTierWebApi 如何实现数据库自动更新或创建;.Net中Main函数传参
    .net7如何在程序启动时,向Main函数传参?在命令行中输入参数即可,可以参考下文内容中命令。.net6如何在程序启动时,向Main函数传参?在命令行中输入参数即可,可以参考下文内容......
  • python对接API二次开发高级实战案例解析:百度地图Web服务API封装函数(行政区划区域检索
    文章目录​​前言​​​​一、IP定位​​​​1.请求URL​​​​2.获取IP定位封装函数​​​​3.输出结果​​​​二、国内天气查询​​​​1.请求url​​​​2.天气查询封装......