常用的前端可视化Web组态工具

news2024/11/24 19:30:38

前言

随着创新技术驱动工业物联网不断发展,设备联网所产生的多样化数据,在边缘端与云端进行大数据分析,成为工业应用场景数字化的需求。跨系统可通用,不受硬件限制达成无缝整合,监控组态软件SCADA成为物联网时代建构出各种工业应用的成功关键。

概念

组态(Configure):包含“配置”、“设定”、“设置”等意思,所以工业组态系统是指不需要编写计算机程序、通过类似“配置”的方式完成工业应用开发的系统。这些应用可用于工厂的制造车间的PMC(生产过程管理)、Andon(工台安全生产)、工艺、设备反控、设备运维、生产看板等场景。组态是所有制造企业必不可少的工业软件系统。

工具

mxGraph

mxGraph 是一个 JavaScript 图表库,可以快速创建交互式图形和图表应用程序,使用 SVG 和 HTML 进行渲染,mxGraph库不使用第三方软件,它不需要插件,几乎可以集成到任何框架中。


演示Demo:Grapheditor

用户手册:mxGraph 4.2.2

Github:GitHub - jgraph/mxgraph: mxGraph is a fully client side JavaScript diagramming library

JointJS

JointJS是一个强大的JavaScript图表库,用于创建完全互动式的图表,在画布上画出支持拖动的Svg图形,而且可以导出JSON,也能通过JSON配置导入直接生成图形。它极易上手且操作简单,并且支持所有的现代浏览器。


演示Demo:Ready-to-use demo applications and features – JointJS

用户手册:JointJS Docs

Github:GitHub - clientIO/joint: A proven SVG-based JavaScript diagramming library powering exceptional UIs

GoJS

GoJS是一个JavaScript库,用于在Web上构建交互式图表和图形。使用流程图、组织结构图、BPMN、UML、建模和其他可视化图形类型构建应用程序。


演示Demo:GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software

用户手册:Get Started with GoJS

Github:GitHub - NorthwoodsSoftware/GoJS: JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

Draw.io

Draw.io 是一个免费的在线绘图和图表应用程序,具有干净的界面、广泛的功能、良好的支持。对于需要创建图表、流程图、组织结构图、思维导图或网络图的人来说,这是一个不错的选择。

演示Demo:Flowchart Maker & Online Diagram Software

用户手册:draw.io Documentation

Github:GitHub - jgraph/drawio-desktop: Official electron build of draw.io

Sovit2D

Sovit2D 是一个在线的可视化开发平台,基于B/S架构进行开发,符合HTML5标准,支持Web端呈现,支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计。平台提供个人版可以免费试用,Sovit2D可灵活、快捷地制作各类交互式常规屏和可视化大屏,内置百余种炫酷组件和组件动画效果,得到更形象、更直观的可视化呈现。目前3D版本——Sovit3D也已经上线。


演示Demo:2D可视化Web前端组态界面模板_-数维图

用户手册:Sovit2D场景开发_Sovit2D使用手册_数维图

HT for Web

可用于快速创建和部署,高度可定制化,并具有强大交互功能的拓扑图形及表盘图表等应用。HT for Web 非常适用于实时监控系统的界面呈现,广泛应用于电信网络拓扑和设备管理,以及电力、燃气等工业自动化 (HMI/SCADA) 领域。


演示Demo:图扑软件 - 构建先进 2D 和 3D 可视化所需要的一切

OSHMI

OSHMI 是一款专为变电站控制和通用 SCADA 应用程序设计的 HMI 软件,以开源 (GPL) 形式分发,无需许可费用。它也可以用于任何其他自动化领域。

演示Demo:OSHMI

Github:GitHub - riclolsen/OSHMI: SCADA HMI for substations and automation applications.
 

总结


随着信息技术和互联网技术的发展,工业互联网逐渐成为工业领域中的重要技术应用,而基于Web的组态软件将会得到广泛应用,多元素丰富的可视化组件和支持快捷的数据绑定方式,可用于快速创建和部署,简单的拖拽即可完成可视化页面的编排设计,快速构建SCADA、HMI、仪表板、IIOT系统,广泛应用于工业、水利、电力、能源、油气、环境、园区、交通等领域。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/754286.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Unity游戏源码分享-Unity手游火柴忍者游戏StickmanDojo

Unity游戏源码分享-Unity手游火柴忍者游戏StickmanDojo 项目地址:https://download.csdn.net/download/Highning0007/88050234

Windows bat隐藏运行窗口的几种方案

文章目录 一、背景二、测试数据三、隐藏bat运行窗口方案1. 使用VBScript脚本2. 使用mshta调用js或vbs脚本3. 将bat编译为exe程序4. 使用任务计划程序 一、背景 有些程序在执行批处理脚本时,可能会看到dos窗口,或者看到窗口一闪而过。如果批处理脚本执行…

Layui基本功能(增删改查)

话不多说,根据我前面的博客我们直接进行操作。记住以下的文件放置,防止操作出不来. 这是我们要完成的界面及功能 后台功能实现 数据查看 我们在userDao方法里面进行增删改查的方法我们在userAction进行方法的编写R工具类的介绍 查询 userDao方法 因为我…

使用亚马逊(AWS)云服务在S3上实现图片缩放功能(CloudFront/S3[AccessPoint/LambdaAccessPoint])

亚马逊云服务中的S3对象存储功能和国内阿里云的oss对象存储使用基本一致。但是涉及到存储内容处理时,两家有些差别。 比如:对于云存储中的图片资源,阿里云比较人性化对于基本的缩放裁剪功能已经帮我们封装好了,只需要在url地址后…

window环境下安装Node并修改保存缓存的位置

0, 卸载Node 打开cmd命令行窗口 输入: npm cache clean --force然后在控制面版中卸载node 1,官网下载Node.js 点击官网下载 如一台电脑需要多个node环境 可使用nvm命令进行操作安装并且可以切换 2, 配置环境变量 安装成功之后&#x…

竹云参编 |《数据经纪从业人员评价规范》团体标准在2023全球数字经济大会发布

经国务院批准,由北京市人民政府、国家发展和改革委员会、工业和信息化部、商务部、国家互联网信息办公室、中国科学技术协会共同主办的2023全球数字经济大会在中国北京国家会议中心隆重召开。 深圳竹云科技股份有限公司作为主要编制单位,联合深圳数据交…

新大陆物联网云平台-物联网云平台推荐-免费好用的物联网平台

一、前言 作为多年的物联网开发者,使用过很多付费的物联网云平台,包括阿里云、华为云等,也使用过很多免费开源的物联网云平台,但就操作来说,我认为最便利的还是新大陆物联网云平台(NLECloud - 新大陆物联网…

【Elasticsearch】DSL查询文档

目录 1.DSL查询文档 1.1.DSL查询分类 1.2.全文检索查询 1.2.1.使用场景 1.2.2.基本语法 1.2.3.示例 1.2.4.总结 1.3.精准查询 1.3.1.term查询 1.3.2.range查询 1.3.3.总结 1.4.地理坐标查询 1.4.1.矩形范围查询 1.4.2.附近查询 1.5.复合查询 1.5.1.相关性算分 …

vagrant和vitrulBox创建虚拟机后使用xshell连接

1. 先在cmd使用vagrant ssh连接主机, 修改系统配置,允许密码登录 vi /etc/ssh/sshd_config PasswordAuthentication no 将这行的no改成yes 2. 重启ssh service sshd restart 3.打开ssh,输入主机ip 端口22 账号root 密码默认为 vagrant

解决 param image not exist 与 image format error(百度 AI)

前言 注意,此文的 AI,是指识别图文、人脸的 AI 功能,而不是文心一言那种对话形 AI。 最近在尝试使用百度 AI 功能,很有趣是不假了,但也有很多坑,特此记录一下。 正文 后文以使用 通用物体和场景识别 功能…

Linux之磁盘管理

说一下linux中磁盘分区问题 首先每一个分区都是独立的 ,基本上来说都是可以独立分配空间的 但是一般如下目录是自动放到根目录下面的 如果根分区用完了,/home下面的分区空间还能用吗,对系统有什么影响 文件类型 给linux虚拟机扩展分区 备注&…

简爱思维导图怎么画?几个超实用绘制步骤赶紧get

简爱思维导图怎么画?思维导图是一种有效的信息组织和表达工具,能够帮助我们更好地整理思路、提高学习效率。下面这篇文章就带大家了解一下简爱思维导图的绘制步骤,并分享4个超实用步骤,助你快速掌握。 在绘制思维导图之前&#xf…

Linux中常用的监控性能的命令(sar、mpstat,vmstat, iostat,)详解

Linux中常用的监控性能的命令有: sar:能查看CPU的平均信息,还能查看指定CPU的信息。与mpstat相比,sar能查看CPU历史信息 mpstat:能查看所有CPU的平均信息,还能查看指定CPU的信息。 与sar相比&#xff0c…

解密横幅banner图的制作秘籍:一文帮你解答所有疑问

Banner是网站首页的关键元素之一。访问者进入网站后,一般首先看到的是Banner图。Banner图会很大程度上影响访问者对网站的第一印象,以及网站对访问者的吸引力。 如果banner图设计得很好,访问者会有兴趣继续阅读。如果Banner图设计得不好&…

【数据结构导论】第 7 章:排序

目录 一、概述 (1)基本概念 (2)排序分类 (3)排序文件的物理表示 —— 数组表示 二、插入排序(通过比较插入实现排序) (1)直接插入排序 ① 过程 ② 算…

猜数字小游戏但多语言版本(C、Java、Golang、python、JavaScript)

文章目录 前言C语言版本语法风格应用领域C 语言实现猜数字小游戏 Java语言版本语法风格应用领域Java语言实现猜数字小游戏 GO语言版本语法风格应用领域GO语言实现猜数字小游戏 python版本语法风格应用领域python语言实现猜数字小游戏 JavaScript版本语法风格应用领域JavaScript…

【雕爷学编程】Arduino动手做(160)---HLK-V20离线语音模块3

37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的&#x…

Python中绘制正弦波形、余弦波形及其复合波形的应用举例

Python中绘制正弦波形、余弦波形及其复合波形的应用举例 使用python进行绘图是其重要功能之一,本文讲解使用python进行正弦余弦波及其复合波形的绘制方法。 一、绘制正弦波 程序 import numpy as np import matplotlib.pyplot as plt tnp.arange(-10,10,0.1) yn…

NavigationStack, Toolbar 的使用

1. NavigationStack 导航堆栈的使用,NavigationView 已过时 1.1 实现 /// 导航堆栈 (懒加载) iOS 16 版本 新特性 struct NavigationStackBootcamp: View {let fruits ["Apple", "Orange", "Banana"]//["one","two…

信贷系统开发设计基础(二)

目录 架构演进篇 01 信贷架构演进概述 02 单体架构案例简介 03 单体系统群架构案例分析 04 微服务案例分析 架构演进篇 01 信贷架构演进概述 02 单体架构案例简介 03 单体系统群架构案例分析 04 微服务案例分析 总结: ---------------------------------------…