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

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

时间:2023-03-24 13:32:58浏览次数:38  
标签:Web 应用 组态 Modbus 点击 ISM 页面


系列文章目录

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


文章目录

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

前言

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


一、创建应用

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

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

然后点击创建应用。

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


点击确定后,创建应用。

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

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

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

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


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

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

1.装饰页面

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

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


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

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


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

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


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


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

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


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

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


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

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


总结

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


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

相关文章

  • javaweb——使用axios和vue改造书城项目的购物车
    资料来源于:B站尚硅谷JavaWeb教程(全新技术栈,全程实战),本人才疏学浅,记录笔记以供日后回顾由于是多个视频内容混合在一起,因此只放了第一个链接视频链接代码示例index......
  • laravel-s实现高性能webSocket服务
    laravel-s实现高性能webSocket服务1安装基于LaravelS构建HTTP服务器2在Laravel中集成Swoole实现WebSocket服务器1修改配置文件2创建WebSocketService类3测......
  • MODBUS RTU通讯协议简介
    1、MODBUS基本概念Modbus是由Modicon(现为施耐德电气公司的一个品牌)在1979年发明的,是****个真正用于工业现场的总线协议。Modbus具有以下几个特点:●标准开放,用户可以免......
  • JAVAWEB-NOTE08-request&response
    目录request与response对象简介Request对象继承体系获取请求数据request通用方式获取请求参数Request请求中文乱码问题--POSTRequest请求中文乱码问题--GET请求转发Respons......
  • 2023年最新Webstorm免费安装教程
    前言WebStorm是JetBrains公司推出的一款专业的前端开发工具,它提供了丰富的功能和工具,能够帮助开发人员更快、更高效地开发Web应用程序。使用WebStorm,可以轻松创建和......
  • FastAPI: 极速开发Python Web应用的未来之星
    我在工作中经常使用Flask来开发Web应用。但是随着项目规模的增长,我发现自己需要写越来越多的重复代码,同时Flask并没有提供一个良好的数据验证和文档生成工具。有一天,我听说......
  • Loadrunner运行WebSocket时报错,不能load OpenDB1
    解决办法:方法1、可能是录制的时候,没有用多协议,没有勾选WindowsSocket协议。在这个WebSocketCB.c的文件中加入没有的函数。  方法二、重新录制脚本,选择多协议录制,同时......
  • javaweb-vue快速入门
    资料来源于:B站尚硅谷JavaWeb教程(全新技术栈,全程实战),本人才疏学浅,记录笔记以供日后回顾视频链接知识点Vue前置条件:需要在项目中放入vue.js文件1){{}......
  • ASP.NET Core Web API 接口限流
    一.前言ASP.NETCoreWebAPI接口限流、限制接口并发数量,我也不知道自己写的有没有问题,抛砖引玉、欢迎来喷!二.需求写了一个接口,参数可以传多个人员,也可以传单个人员,时间......
  • Web请求与响应(SpringBoot)
    Web请求与响应 Web的工作原理可以分为以下几个步骤:输入URL:Web客户端使用Web浏览器输入所需访问的URL(统一资源定位符)。建立连接:Web浏览器与Web服务器之间建立TCP/......