HTML5教程
最火前端Web组态软件(可视化)
友情提示：本文为原创文章，转载请注明出处，商务合作请私信！！！
前言：
随着物联网、大数据等技术高速发展，我们逐步向数字化、可视化的人工智能（AI）时代的方向不断迈进。智能时代是工业 4.0 时代，我国工业领域正努力从“制造”迈向“智造”的新跨越。
正文：
1.mxgraph：
介绍：开源免费，但是需要解决的问题很多，国内学习参考资料少。但是，可视化组态的实现基本都是借助于这个框架来实现的。
演示demo：
mxgraph官方文档API：
最大的交流社区：
交流社区2：
github：
效果：
2.乐吾乐2D可视化：
介绍：
演示demo：
Github：
效
3.draw.io
介绍：和mxgraph相比，在其基础上加了一些东西，更加完善。但是都是出自同一家公司之手。
演示demo：
github:
社区博客：
效果：
4.
演示demo：
全部demo：
github：图扑软件
社区博客：
效果：
3D地铁站台：
2D电力相关：
editor参考：
3D
5.3D可视化楼宇、水站实时监测系统：
介绍：3D可视化楼宇管理系统，实时监测楼宇相关的各方面的数据。提到工业互联网往往会涉及：物联网、IoT、5G、数字孪生、边缘计算、PaaS平台、SaaS应用、产业互联网、互联网+、工业4.0、智慧城市、智慧园区、智慧楼宇、智能制造等概念，但本文将围绕可视化的话题，围绕更基础的 HTML5/WebGL/WebVR 等底层技术，我们觉得业界还没达到智能化、平台化的成熟阶段，走得太快即使是
演示demo:
github：图扑软件
效果：
效果：
6、前端设计Mqtt（订阅、发布）
参考：
7.OSHMI
效果：
介绍：适用于变电站，物联网和自动化应用的移动和云友好型SCADA HMI。
github:
官网：
博客：
图形参考来源1：
8.HslControls控件库
效果：
介绍：HslControls是一个工业物联网的控件库，基于C#开发，配套HslCommunication组件可以实现工业上位机软件的快速开发，支持常用的工业图形化控件，快速的集成界面开发。 主要包含了按钮，开关，进度条，信号灯，数码管，时钟，曲线显示控件，仪表盘控件，管道控件，瓶子控件，饼图控件，传送带控件，温度计控件，鼓风机控件，阀门控件，电池控件等等。
开发语言：c#
github：
博客：
注意：前端主要是JavaScript语言开发，c#我也不懂，只是做参考，看看人家的思路啥的。
9.VUE组态-支持拖动
效果：
介绍：个人基于vue+quasar的web组态，核心代码基于vue，quasar仅仅是为了方便构建
github预览访问如下地址：
demo：
github：
博客：
10.WTScada HTML5组态百软度件
效果：
介绍：基于HT框架的web组态软件，HTML5技术，道在线专组态运属行.
demo：
github：暂无
11、WebGL
介绍：WebGL是目前最为流行的3D绘图协议
12、WVGL
介绍：V虚拟现实行业
13、iNeuOS
效果：
介绍：一个工业物联网的web组态，将组态和操作系统结合的模式，登录平台类似进入一台服务器；可以有效防止源码泄露；应该也是基于mxgraph前端框架。他的界面优化的挺好的，图元种类丰富，也是svg.点击图元分类的时候，有的时候很卡这个也需要优化加载速度。
demo：
博客(文章)：
14、Tempo
效果：
介绍：一款基于angular8开发的开源web组态编辑器：
开发语言：angular8、node.js
github：
demo：
博客：
注意：这个支持拖拽元素，可以选择固定和不固定，右侧属性绑定做的比较好，预览较为流畅，还有一些管理也不错，最重要的是博主个人进行开源。目前不支持双击元素到画布的操作，元素不可以旋转特别是连线也不能旋转，大家可以去Github给别人打打星星。
15.Web前端组态软件(可视化绘图编辑器)
效果：
架构：
博客原文：
参考文章：
[1].
[2].
[3].
成功案例（公司）：
感悟：
物联网平台上，可以有地图支持，实时报警，历史告警，实时数据，组态工业软件功能，数据解析等等，为客户提供导航定位，车辆故障，传感器组图表，工业协议数据变成可读数据;智能家居上，可以有语音识别，视频画面，无线配置等等，为客户提供语音控制，安防控制，蓝牙wifi连接的配置等等服务；工业水处理上，可以有报警功能，温度度量，水为位置，视频监控等等，为客户提供遇到紧急报警，温度过高或者过低提醒，水位高度测量，视频时时查看等等服务；光伏项目中，可以有实时数据，历史数据，当日产能，收益计算，活跃报警，历史报警等功能....
当你自己一点一滴去实现每一个功能而没有参考的时候，你才会发现和别人的差距，开源不易，很多公司基于别人的开源项目二次开发，最后研发自己的软件，贴上自己的广告。大多数看着很相似，但是人家就说是自己实现的，你有什么办法呢？而且这一块开源的非常之少，不过对于物联网公司算是一个大的需求了，也许未来的某一天，学生坐在教室，看着8k屏幕上的实验室或者科创空间的传回来的可视化画面和实时数据的时候，我们也会感到欣慰，致敬每一个在幕后默默付出，用行动践行工业4.0的人！
-
在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案？-icode9专业技术文章分享11-22
-
html 自带属性有哪些？-icode9专业技术文章分享11-22
-
Sass教程：新手入门及初级技巧11-21
-
Sass学习：初学者必备的简单教程11-21
-
Elmentplus入门：新手必看指南11-21
-
Sass入门：初学者的简单教程11-21
-
前端页面设计教程：新手入门指南11-21
-
Elmentplus教程：初学者必备指南11-21
-
SASS教程：从入门到实践的简单指南11-21
-
前端页面设计项目实战：新手入门教程11-21
-
Elmentplus项目实战：从入门到简单应用11-21
-
Sass项目实战：新手入门教程11-21
-
ElementPlus资料入门教程：轻松上手组件库11-21
-
Sass资料入门指南：初学者必备教程11-21
-
前端页面设计教程：新手入门必备指南11-20
