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


相关推荐

  • 数仓建模与分析建模_范式建模和维度建模

    数仓建模与分析建模_范式建模和维度建模数仓的建模或者分层,其实都是为了更好的去组织、管理、维护数据,所以当你站在更高的维度去看的话,所有的划分都是为了更好的管理。小到JVM内存区域的划分,JVM中堆空间的划分(年轻代、老年代、方法区等),大到国家的省市区的划分,无一例外的都是为了更好的组织管理方法论仅仅停留在理论层面上,落地实现的才真正决定了数仓设计的好坏,当然再好的方法,只有在合适的阶段使用,才有意义,才能发挥它最大的价值

  • Md编辑器_wife可以看电视但不能打游戏

    Md编辑器_wife可以看电视但不能打游戏文章目录为什么写这个?0.介绍一下md?1纯md语法的使用1.1快捷键1.2字符效果和横线等1.2.1横线1.2.2删除线1.2.3斜体字1.2.4粗体1.2.5粗斜体1.2.6上标与下标1.2.7**缩写(同HTML的abbr标签)**1.2.8引用Blockquotes1.3各级标签标签1标签2标签3标签4标签5标签61.4.列表1.4.1无序列表(…

  • Window系统内核版本号及其查看方法「建议收藏」

    Window系统内核版本号及其查看方法「建议收藏」一.WindowsNTWindwosNT是一系列操作系统的总称。WindowsNT(NewTechnology)是Microsoft在1993年推出的面向工作站、网络服务器和大型计算机的网络操作系统,也可做PC操作系统。它与通信服务紧密集成,基于OS/2NT基础编制。OS/2由微软和IBM联合研制,分为微软的MicrosoftOS/2NT与IBM的IBMOS/2。

  • Android开发更改应用图标无效的问题建议收藏

    引子:由于最近公司产品转战移动端,而且就要在年底前上线第一个版本,作为主工不得不立即投入到Android开发的学习中,昨天一天在家找了一些资料,看了一些视频,也试着弄了一个简单的应用。问题:本来开始随

    2021年12月20日
  • 【SSM进阶之路】使用Spring SqlSessionTemplate API实现查询数据[通俗易懂]

    【SSM进阶之路】使用Spring SqlSessionTemplate API实现查询数据[通俗易懂]该案例的实现是基于jar包org.mybatis.spring中的SqlSessionTemplateAPI进行使用的。主要是完成如何使用SqlSessionTemplate中的API封装一个通用的查询方法。1、首先定义一个业务层数据接口:packagecom.yihg.basic.api;importjava.util.List;importjava.util.Map;

  • 特殊符号大全复制_特殊符号大全爱好者工具讲解[通俗易懂]

    特殊符号大全复制_特殊符号大全爱好者工具讲解[通俗易懂]前言:明天将会举办第2期微信昵称悬赏令,第1期结果已公布,如果您还没准备好,可以先准备一下哦。下面是第1期的结果放榜-微悬令第1期活动结束,奖金会陆续发放给获奖同学!漂亮的网名昵称符号让我们在游戏或者其它平台里面显得与众不同,为了实现这样的目标,小编制作了网名在线生成器,这是一整套的工具,可以让我们快速定制出与众不同的符号特殊符号大全爱好者首先我们打开昵称符号加字器,这是个非常有用的网名…

发表回复

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

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