友情提示：本文为原创文章，转载请注明出处，商务合作请私信！！！

前言：

随着物联网、大数据等技术高速发展，我们逐步向数字化、可视化的人工智能（AI）时代的方向不断迈进。智能时代是工业 4.0 时代，我国工业领域正努力从“制造”迈向“智造”的新跨越。

正文：

1.mxgraph：

介绍：开源免费，但是需要解决的问题很多，国内学习参考资料少。但是，可视化组态的实现基本都是借助于这个框架来实现的。

演示demo：Grapheditor

mxgraph官方文档API：mxCell

最大的交流社区：Diagram Software and Flowchart Maker

交流社区2：https://stackoverflow.com/questions/tagged/mxgraph

github：https://github.com/jgraph/mxgraph

效果：

2.le5le-topology：

介绍：A diagram (topology, UML) framework uses canvas and typescript. 一个用canvas+typescript写的绘图【核心库，不依赖框架】（微服务架构图、拓扑图、流程图、类图等ULM图，动画、视频支持）。本框架目前已经实现了拖拽、缩放、旋转、自定义属性等基础操作，开发者只用关心图表绘画实现即可。其次，流畅、高性能 - 使用 canvas 和多个场景离屏，操作过程流畅；完全不用担心 SVG 方式 dom 元素过多，性能高效。其三，自带部分动画效果，能满足基本的需求。使用TypeScript语言。chrome、firefox、ie11等浏览器是没有问题的。IE9以下版本没有测试，仅仅是绘图引擎，只需要支持canvas+html5标准即可

演示demo：乐吾乐Topology - 基于开源的免费可视化绘图工具

github：https://github.com/le5le-com/topology

gitee：topology: 开源、易扩展、方便集成的在线绘图（微服务架构图、网络拓扑图、流程图等）工具

效果：

3.draw.io

介绍：和mxgraph相比，在其基础上加了一些东西，更加完善。但是都是出自同一家公司之手。

演示demo：https://www.draw.io/

github:https://github.com/jgraph/drawio

社区博客：Blog - draw.io

效果：

4.HT-2D/3D

演示demo：http://www.hightopo.com/demo/2deditor/HT-2D-Editor.html

全部demo：http://www.hightopo.com/demos/index.html

github：图扑软件

社区博客：https://www.hightopo.com/blog/

效果：https://www.hightopo.com/demos/index.html

3D地铁站台：

2D电力相关：

editor参考：https://www.hightopo.com/demo/Simple3DEditor/index.html

5.3D可视化楼宇、水站实时监测系统：

介绍：3D可视化楼宇管理系统，实时监测楼宇相关的各方面的数据。提到工业互联网往往会涉及：物联网、IoT、5G、数字孪生、边缘计算、PaaS平台、SaaS应用、产业互联网、互联网+、工业4.0、智慧城市、智慧园区、智慧楼宇、智能制造等概念，但本文将围绕可视化的话题，围绕更基础的 HTML5/WebGL/WebVR 等底层技术，我们觉得业界还没达到智能化、平台化的成熟阶段，走得太快即使是 GE Predix 也会从明星变流星，了解垂直行业需求，采集足够多有效数据，做好实时的、稳定的、美观的、Web 化的 2D 和 3D 数据可视化呈现，是工业互联网需要走好的第一步。

演示demo:http://www.hightopo.com/demo/ht-smart-building/

github：图扑软件

效果：

6、前端设计Mqtt（订阅、发布）

参考：https://github.com/UsrIot/usrCloudDemo_js/blob/master/web/mqttws31.js

7.OSHMI

效果：

介绍：适用于变电站，物联网和自动化应用的移动和云友好型SCADA HMI。

github:https://github.com/riclolsen/OSHMI

官网：OSHMI Open Substation HMI

博客：http://ricolsen1supervc.wordpress.com（被墙）

图形参考来源1：Industry Vectors, Photos and PSD files | Free Download

8.HslControls控件库

效果：

介绍：HslControls是一个工业物联网的控件库，基于C#开发，配套HslCommunication组件可以实现工业上位机软件的快速开发，支持常用的工业图形化控件，快速的集成界面开发。主要包含了按钮，开关，进度条，信号灯，数码管，时钟，曲线显示控件，仪表盘控件，管道控件，瓶子控件，饼图控件，传送带控件，温度计控件，鼓风机控件，阀门控件，电池控件等等。

开发语言：c#

github：https://github.com/dathlin/HslControlsDemo

博客：HslCommunication组件库使用说明 - dathlin - 博客园

注意：前端主要是JavaScript语言开发，c#我也不懂，只是做参考，看看人家的思路啥的。

9.VUE组态-支持拖动

效果：

介绍：个人基于vue+quasar的web组态，核心代码基于vue，quasar仅仅是为了方便构建
github预览访问如下地址：WebTopo

demo：WebTopo

github：https://github.com/phynos/WebTopo

博客：https://bloghttps://github.com/phynos/WebTopo.csdn.net/lpch1987/article/details/96288974

10.WTScada HTML5组态百软度件

效果：

介绍：基于HT框架的web组态软件，HTML5技术，道在线专组态运属行.

demo：WTScada组态软件

github：暂无

11、WebGL

介绍：WebGL是目前最为流行的3D绘图协议

12、WVGL

介绍：V虚拟现实行业

13、iNeuOS

效果：

介绍：一个工业物联网的web组态，将组态和操作系统结合的模式，登录平台类似进入一台服务器；可以有效防止源码泄露；应该也是基于mxgraph前端框架。他的界面优化的挺好的，图元种类丰富，也是svg.点击图元分类的时候，有的时候很卡这个也需要优化加载速度。

demo：iNeuOS工业互联网操作系统

博客(文章)：iNeuView视图Web组态(2D&3D)建模平台，各行业和领域丰富图元信息 - 产品介绍 - iNeuOS工业互联网操作系统

14、Tempo

效果：

介绍：一款基于angular8开发的开源web组态编辑器：Demo(Tag0.1.0)。目前支持的效果：拖拽(创建组态，布局)、项目管理、页面管理(增加，删除)、属性绑定(样式属性，静态数据)、快捷操作(布局，删除，拷贝，粘贴)、样式复制、预览、服务端支持（目前仅支持node.js开发中）

开发语言：angular8、node.js

github：https://github.com/bojue/Web-editor-server

demo：Tempo

博客：https://segmentfault.com/a/1190000022033357

注意：这个支持拖拽元素，可以选择固定和不固定，右侧属性绑定做的比较好，预览较为流畅，还有一些管理也不错，最重要的是博主个人进行开源。目前不支持双击元素到画布的操作，元素不可以旋转特别是连线也不能旋转，大家可以去Github给别人打打星星。

15.Web前端组态软件(可视化绘图编辑器)

效果：

架构：

博客原文：https://segmentfault.com/a/1190000022033357

参考文章：

[1].基于web组态软件关于组态软件的设计与开发

[2].组态软件认识

[3].组态软件原理与实现

成功案例（公司）：

智雨物联：工业物联网平台 www.krmes.com 采用H5技术数据采用websocket 无需任何回插件真正的网页组态支持多种协议还有丰富的图形设答计库。

上海迅饶：基于HTML5规范的组态软件。配合本公司组态网关(如HMI-2004-A9)或楼控触摸屏等，实现现场数据采集，并直接转为组态画面进行数据实时监控。具有常规通用组态操作方便的特性，另外具有触摸屏组态软件可以运行在嵌入式系统上的特性。比起其它组态软件，最大的亮点是完全基于WEB开发，用户创建的组态工程，可以下载到硬件上运行。智能手机、iPad或者PC可以通过浏览器访问，特别适合应用在BA、智能家居等场合。

图扑旗下：图扑 WEB 组态软件，2D和3D都有。

iNeuOS：工业物联网平来台自，实现从设备&PLC、云平百台、移度动APP数据链路问闭环。

感悟：

物联网平台上，可以有地图支持，实时报警，历史告警，实时数据，组态工业软件功能，数据解析等等，为客户提供导航定位，车辆故障，传感器组图表，工业协议数据变成可读数据;智能家居上，可以有语音识别，视频画面，无线配置等等，为客户提供语音控制，安防控制，蓝牙wifi连接的配置等等服务；工业水处理上，可以有报警功能，温度度量，水为位置，视频监控等等，为客户提供遇到紧急报警，温度过高或者过低提醒，水位高度测量，视频时时查看等等服务；光伏项目中，可以有实时数据，历史数据，当日产能，收益计算，活跃报警，历史报警等功能....

当你自己一点一滴去实现每一个功能而没有参考的时候，你才会发现和别人的差距，开源不易，很多公司基于别人的开源项目二次开发，最后研发自己的软件，贴上自己的广告。大多数看着很相似，但是人家就说是自己实现的，你有什么办法呢？而且这一块开源的非常之少，不过对于物联网公司算是一个大的需求了，也许未来的某一天，学生坐在教室，看着8k屏幕上的实验室或者科创空间的传回来的可视化画面和实时数据的时候，我们也会感到欣慰，致敬每一个在幕后默默付出，用行动践行工业4.0的人！

最火前端Web组态软件(可视化)相关推荐

一款非常好用的前端Web组态工具(可视化)-Sovit2D
现在系统可视化需求越来越大,本文整理一个目前很热的一款前端Web组态工具. Sovit2D 1.Sovit2D简介 Sovit2D是长沙数维图信息科技有限公司自主研发的新一代数据可视化产品,可灵活.快 ...
工控用Web组态软件比组态软件更高效
从事相关工作的对"组态软件"应该都不陌生,那Web组态软件又是什么呢?本文将对Web组态可视化软件(下称"Web组态软件")做简单介绍,可视化编辑器是Web组态 ...
第一节使用ISM Web组态软件采集Modbus设备数据
系列文章目录第一节使用ISM Web组态软件采集Modbus设备数据文章目录系列文章目录前言一.登录系统,并创建项目二.创建Modbus设备数据模型三.添加Modbu设备模型的寄存器组 ...
第二节下载和安装ISM Web组态软件
文章目录前言一.下载二.Windows安装三.Centos安装四.linux二进制安装总结前言 ISM Web组态软件唯一下载网址 www.ismctl.com,其他转载和提供下载地址不 ...
ISM Web组态软件采集西门子PLC
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.西门子PLC 二.使用步骤 1.创建西门子 PLC S7模型 2.创建设备总结前言本文详细讲述了ISM We ...
by组态-web组态软件
BY组态介绍 BY组态软件,主要应用于能源电力.工业互联网.智能制造.原型设计等领域的大屏可视化.工艺流程监控.后台管理.手机平板多终端的"拖拽式"在线web组态开发平台,开箱即用 ...
ISM Web组态软件的组态应用开发之组态界面简介
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.组件样式二.组件的事件三.组件的动作四.组件的动画总结前言 ISM的组态是由本人自主研发的拖拽式操作界面 ...
Web前端组态软件(可视化绘图编辑器)
图元组件管理可以进行可进行图元组件维护,支持svg.gif.jpge.png等图片格式及自定义图元格式: 交互式表单管理主要为自定义交互事件(点击.双击.右键菜单.移入.改变)等动作的展现页面进行管理 ...
基于Web组态软件(HT for Web)实现水泥工厂数据可视化系统
前言如今的制造行业,基于数据进行生产策略制定与管理已经成为一种趋势,特别是工业4.0 的浪潮下,数据战略已经成为很多制造企业的优先战略,而数据可视化以更直观的方式,帮助指导决策,成为数据分析传递信 ...
网页版组态软件：Sovit2D Web组态可视化编辑器
随着工业智能制造的发展,工业企业对设备可视化.远程运维的需求日趋强烈,传统的单机版组态软件已经不能满足越来越复杂的控制需求,那么实现Web组态可视化界面成为了主要的技术路径. 行业痛点对于软件服务商 ...

最火前端Web组态软件(可视化)

前言：

正文：