Commonly used front-end visual Web configuration tools

foreword

With the continuous development of the industrial Internet of Things driven by innovative technologies, the diverse data generated by the Internet of devices, big data analysis at the edge and the cloud, has become a demand for digitalization of industrial application scenarios. It can be used across systems and achieve seamless integration without hardware restrictions. The monitoring and configuration software SCADA has become the key to the success of various industrial applications in the Internet of Things era.

concept

Configuration (Configure): Contains meanings such as "configuration", "setting", and "setting", so the industrial configuration system refers to a system that does not need to write computer programs and completes industrial application development in a way similar to "configuration". These applications can be used in scenarios such as PMC (production process management), Andon (workbench safety production), process, equipment counter-control, equipment operation and maintenance, and production kanban in the factory's manufacturing workshop. Configuration is an essential industrial software system for all manufacturing companies.

tool

mxGraph

mxGraph is a JavaScript chart library that can quickly create interactive graph and chart applications, using SVG and HTML for rendering, the mxGraph library does not use third-party software, it does not require plug-ins, and can be integrated into almost any framework.


Demo Demo: Grapheditor

User Manual: mxGraph 4.2.2

Github: GitHub - jgraph/mxgraph: mxGraph is a fully client side JavaScript diagramming library

JointJS

JointJS is a powerful JavaScript diagramming library for creating fully interactive diagrams on the canvas Draw Svg graphics that support dragging, and can export JSON, and can also directly generate graphics through JSON configuration import. It is extremely easy to use and simple to operate, and supports all modern browsers.


Demo: Ready-to-use demo applications and features – JointJS

User Manual: JointJS Docs

Github: GitHub - clientIO/joint: A proven SVG-based JavaScript diagramming library powering exceptional UIs

GoJS

GoJS is a JavaScript library used on the Web Build interactive charts and graphs. Build applications using flowcharts, org charts, BPMN, UML, modeling, and other visual graph types.


Demo: GoJS Sample Diagrams for JavaScript and HTML, by Northwoods Software

User Manual: Get Started with GoJS

Github: GitHub - NorthwoodsSoftware/GoJS: JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

Draw. io

Draw.io is a free online drawing and diagramming application with a clean interface, extensive features, and good support. It's a great choice for anyone who needs to create diagrams, flowcharts, org charts, mind maps, or network diagrams.

Demo: Flowchart Maker & Online Diagram Software

User Manual: draw.io Documentation

Github: GitHub - jgraph/drawio-desktop: Official electron build of draw.io

Sovit2D

Sovit2D is an online visual development platform, developed based on B/S architecture, conforming to HTML5 standard, supporting Web-side rendering, and supporting convenient human-computer interaction on the browser side, and the visual page design can be completed simply by dragging and dropping. The platform provides a personal version that can be tried for free. Sovit2D can flexibly and quickly create various interactive conventional screens and large-scale visualization screens. It has more than 100 built-in cool components and component animation effects to obtain more vivid and intuitive visual presentation. The current 3D version - Sovit3D has also been launched.


Demonstration Demo: 2D visualization Web front-end configuration interface template_-Digital

User Manual: Sovit2D Scene Development_Sovit2D User Manual_Digital

HT for Web

can be used for rapid creation and deployment, highly customizable, and has powerful interactive functions Applications such as topological graphics and dial charts. HT for Web is very suitable for the interface presentation of real-time monitoring systems, and is widely used in telecommunications network topology and equipment management, as well as industrial automation (HMI/SCADA) fields such as electric power and gas.


Demo: Mapping Software - Everything You Need to Build Advanced 2D and 3D Visualizations

OSHMI

OSHMI is an HMI software designed for substation control and general SCADA applications, distributed as open source (GPL) with no license fees. It can also be used in any other field of automation.

Demo: OSHMI

Github: GitHub - riclolsen/OSHMI: SCADA HMI for substations and automation applications.
 

Summarize


With the development of information technology and Internet technology, the Industrial Internet has gradually become an important technology application in the industrial field, and the Web-based configuration software will be widely used, with rich multi-element visual components and fast data binding methods, Can be used for rapid creation and deployment, simple drag and drop to complete the layout design of visual pages, quickly build SCADA, HMI, dashboard, IIOT systems, widely used in industry, water conservancy, electric power, energy, oil and gas, environment, parks, transportation and other fields.

Guess you like

Origin blog.csdn.net/u011916503/article/details/131717272