web可视化图形编辑器汇总

前言:     

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

正文:

1.mxgraph:

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

演示demo:https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html

mxgraph官方文档API:http://jgraph.github.io/mxgraph/docs/js-api/files/model/mxCell-js.html

最大的交流社区:https://forum.jgraph.com/tags/swimlane/index.html

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

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

效果: 

 web可视化图形编辑器汇总

 

 

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:http://topology.le5le.com/

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

gitee:https://gitee.com/mirrors/topology

效果:

web可视化图形编辑器汇总

 

 


3.draw.io

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

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

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

社区博客:https://about.draw.io/blog/

效果:

 web可视化图形编辑器汇总

 

 

 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/

效果:

        3D地铁站台:

web可视化图形编辑器汇总

 

 

 

         2D电力相关:

 web可视化图形编辑器汇总

 

 

 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:图扑软件

效果:

web可视化图形编辑器汇总

 

 

6、前端设计Mqtt(订阅、发布)

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

 

7.OSHMI


效果: 

 web可视化图形编辑器汇总

 

 

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

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

官网:https://oshmiopensubstationhmi.sourceforge.io/ 

 博客:http://ricolsen1supervc.wordpress.com(被墙)

 图形参考来源1:https://www.freepik.com/search?dates=any&format=search&page=1&query=%E5%B7%A5%E4%B8%9A&sort=popular

8.HslControls控件库


效果:

 web可视化图形编辑器汇总

 

 web可视化图形编辑器汇总

 

 

 

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

开发语言:c#

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

 博客:https://www.cnblogs.com/dathlin/p/7703805.html

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

9.VUE组态-支持拖动


效果:

 web可视化图形编辑器汇总

 

 

介绍:个人基于vue+quasar的web组态,核心代码基于vue,quasar仅仅是为了方便构建
github预览访问如下地址:https://phynos.github.io/WebTopo/dist/spa

demo:https://phynos.github.io/WebTopo/dist/spa/

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

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

10.WTScada HTML5组态百软度件


效果:

 web可视化图形编辑器汇总

 

 

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

demo:http://www.wtscada.com/scada/

github:暂无

11、WebGL 

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

12、WVGL

介绍:V虚拟现实行业

 

参考文章: 
1.基于web组态软件 关于组态软件的设计与开发

2.组态软件认识

web可视化图形编辑器汇总

上一篇:[AWS] Presign url for S3


下一篇:微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)