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

最火前端Web组态软件(可视化)随着物联网、大数据等技术高速发展,我们逐步向数字化、可视化的人工智能(AI)时代的方向不断迈进。本文将介绍mxgraph,le5le-topology,HT-2D/3D等当前流行的前端组态软件,以及发展的趋势。

大家好,又见面了,我是你们的朋友全栈君。

https://bbs.csdn.net/topics/603957384 您好,我是csdn-尔嵘,正在参加2021年度博客之星,希望投个五星,感谢大家的支持,谢谢您的支持!

友情提示:本文为原创文章,转载请注明出处!夏季到来,大家如果有需要购买雨伞、生活日用百货的,可以搜索淘宝小店:华诚荣邦百货,凡是CSDN粉丝客户加备注,全程商品一律有优惠!

前言:

随着物联网、大数据等技术高速发展,我们逐步向数字化、可视化的人工智能(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

效果:

最火前端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:乐吾乐Topology – 基于开源的免费可视化绘图工具

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

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

效果:

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

3.draw.io

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

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

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

社区博客:Blog – draw.io

效果:

最火前端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/

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

 3D地铁站台:

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

         2D电力相关:

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

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

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

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组态软件(可视化)

效果:

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

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控件库

效果:

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

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

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

开发语言:c#

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

博客:HslCommunication组件库使用说明 – dathlin – 博客园

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

9.VUE组态-支持拖动

效果:

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

介绍:个人基于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组态百软度件

效果:

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

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

demo:WTScada组态软件

github:暂无

11、WebGL 

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

12、WVGL

介绍:V虚拟现实行业

13、iNeuOS

效果:

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

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

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

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

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

14、Tempo

效果:

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

介绍:一款基于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前端组态软件(可视化绘图编辑器)

效果:

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

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

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

架构:

最火前端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的人!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/138936.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 数据库主从复制_sqlserver主从复制

    数据库主从复制_sqlserver主从复制一、什么是主从复制?主从复制,是用来建立一个和主数据库完全一样的数据库环境,称为从数据库;主数据库一般是准实时的业务数据库。二、主从复制的作用(好处,或者说为什么要做主从)重点!1、架构的扩展。业务量越来越大,I/O访问频率过高,单机无法满足,此时做多库的存储,物理服务器增加,负荷增加。2、读写分离,使数据库能支撑更大的并发。主从只负责各自的写和读,极大程度的缓解X锁和S锁争用。在报表中尤其重要。由于部分报表sql语句非常的慢,导致锁表,影响前台服务。如果前台使用master,报表使用slave,那

  • idea部署tomcat启动浏览器显示404_idea自带tomcat怎么用

    idea部署tomcat启动浏览器显示404_idea自带tomcat怎么用这个方法只限于解决原来可以访问jsp,但是后来突然访问不了。并且非常的简单粗暴。请移步:(声明:这不是我的文章)https://blog.csdn.net/wt520it/article/details/88126654

  • sklearn常用聚类算法模型【KMeans、DBSCAN】实践

    sklearn常用聚类算法模型【KMeans、DBSCAN】实践聚类算法是很重要的一类算法模型,在实际的应用实践中是会经常使用到的,最近的工作类型中大多偏向于有监督学习类型模型的使用,而对于无监督算法模型的使用则使用得相对少了很多,今天就简单的回归一下聚类算法模型,主要是KMeans模型和DBSACN模型的使用。这两种模型可以说是聚类算法领域里面很具有代表性的算法了,前者是基于样本之间距离的聚类,后者是基于样本集密度的聚类。殊途同…

  • 两数之和,两数之积

    两数之和,两数之积已知两个1~30之间的数字,甲知道两数之和,乙知道两数之积。 甲问乙:”你知道是哪两个数吗?”乙说:”不知道”; 乙问甲:”你知道是哪两个数吗?”甲说:”也不知道”; 于是,乙说:”那我知道了”; 随后甲也说:”那我也知道了”; 这两个数是什么?答案:答案1:为x=1,y=6;甲知道和A=x+y=7,乙知道积B=x*y=6 答案2:为x=1,y=8;甲知道和A=

  • vue使用md5_vuepress在线编辑文档

    vue使用md5_vuepress在线编辑文档1,需求一直在找一个好用的富文本编辑器,但是发现现在富文本已经不流行了,现在流行md所以找md编辑器找到一个好用的:mavon-editorgithub:https://github.com/hinesboy/mavonEditor2,配置main.jsimportVuefrom”vue”;importAppfrom”./App.vue”;import…

  • DHCP简单配置-CISCO

    DHCP简单配置-CISCO

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号