Low-Code 3D SCADA Graphic Visualization Development Platform
Published: 2023-04-23 14:03:54

**Business Background**

The concept of Industry 4.0 has ushered in a new round of industrial revolution worldwide. The exponential growth of big data has provided a solid foundation for the rise of industrial intelligence. The production mode of traditional manufacturing, which is characterized by high pollution, high energy consumption, and low efficiency, no longer meets the requirements of modern industry.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4daszebuf9yprf11imj.png)
Disadvantages of traditional factories:

- Machinery and equipment are isolated from each other.
- There are too many inventory items in the factory, and the warehouse is not integrated with production.
- Products cannot be comprehensively traced and managed.
- Process flow cannot be fool-proof controlled.
- Labor costs for the enterprise are high.
- Equipment failures is not easy to be discovered, analyzed, and dealt with immediately.
- The production process can not be controlled by ERP.
Traditional factories have many shortcomings that seriously affect production efficiency. Intelligent factories built using UI configuration and 3D configuration can greatly improve production output and defect detection rates. To promote the transformation and upgrading of their operations, traditional factories need to adopt technologies such as automation, artificial intelligence (AI), IoT, edge computing, cloud computing, 5G, and digital twins.

**Intelligent factory**
To evolve a traditional factory into a smart factory, it is necessary to share data between manufacturing systems, such as products, equipment, production lines, and workshops. It is also important to integrate modules such as R&D, customization, production, and logistics, and to verify the production process online.

Hightopo has created a 3D SCADA Graphic Editor by relying on its thousands of industry cases. This editor has rich UI components and supports the user to build 2D and 3D web industrial configurations with 0 code. This will help manufacturing companies to continuously improve their processes, prevent problems, optimize operational efficiency, and reshape the core competitiveness of enterprises.

Moreover, the intelligent factory created by this tool can not only improve the production efficiency of the factory, but also help accumulate and analyze big data to build a highly efficient, energy-saving, green, environmentally-friendly, and comfortable humanized factory.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5z47mwzqxkfmw3jk4yp.png)
Smart Factory Features
- The smart factory can cover many aspects of the production process, including design, equipment monitoring, production monitoring, and environmental monitoring. It supports real-time monitoring, timely early warning, and intelligent diagnosis of the entire production process, effectively controlling the occurrence of failures in the production process.
- Compared with traditional configuration software like InTouch/IFix/WinCC, the editor’s web-based platform is better suited for the trend toward transformation from C/S to B/S. Its rich visual components and fast data binding methods allow for quick creation and deployment of configuration products. Through IoT configuration, you can visually view the operating status of each production line and its corresponding equipment in the plant.
- Hightopo 3D visualization technology adopts B/S architecture and supports seamless integration with other mainstream front-end frameworks such as Angular, React, and Vue. Users can access the 3D visualization system anytime and anywhere through PC, pad, or smartphone to realize remote monitoring and control.
{% embed https://youtu.be/0HMe3GRnbr4 %}

Hightopo software once took the SMT production line as an example, used rich 3D and UI components, built a digital twin system for SMT process monitoring and management . Created an intelligent and green digital smart factory.

**Editor introduction**

**Page Layout**
The Hightopo 3D SCADA Graphic Editor comprises a drawing area, topology components, a menu bar, and a property panel. Users can easily design workshop layouts and process flows by dragging and dropping objects. This can be done using a PC or mobile phone. The software supports the creation of digital models of various equipment, allowing for digital management of the entire process of planning, production, and operation.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l7gdmg943z6alipe41d.gif)
There are two buttons, edit and preview, on the left menu bar of the editor. Click “edit” to create and save the 3D configuration, and click “preview” to view the effect after saving. At the bottom of the editor, topology components can be freely selected and dragged to the drawing area to form a production line. Users can arrange equipment in accordance with the production process of the workshop, and simulate the production process of the product online.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25forz5t62agc6isu29m.gif)

**Hot Key**
To copy and paste the model, use the shortcut keys Ctrl+C and Ctrl+V. You can also hold down the Ctrl key to make multiple selections on the model. Once you have made your selection, press the Delete key can delete them.

This editor uses the “HT for Web” 3D engine, which isolates the underlying WebGL operations from the application layer. As a result, users don’t need to care about the cumbersome and complicated code operations. They only need to focus on the business layer of the application, thereby saving development costs and speeding up the development process.

**Drawing Area**
The size of the drawing area can be adjusted freely using four buttons that allow you to shrink or expand the X-axis and Y-axis. If you need to monitor multiple production lines together, you can enlarge the drawing area.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dik1hzbf3ftltridntfn.gif)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68411gr2s7qesafrdlpf.gif)
**Model Manipulation**
The example models include a six-axis robot, engraving machine, CNC, AGV, material library, polisher, cleaning tank, and production line models. Each model can be parameterized independently, including name, length, width, height, coloring, and more. Users can also rotate and move these models.

The editor uses a building block structure, allowing users to flexibly build and recreate the product production process in the workshop by simply combining the models.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c369r6dpbhkodocvtgb.gif)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yt448k4410eo45hg1akp.gif)
The traditional numerically-controlled system provides diagnosis feedback through code, but the Hightopo visualization product can provide event feedback to help operators identify problems. For example, it can monitor engraving machines, polishing machines, and other equipment and store historical operational data. This is convenient for maintenance personnel to conduct fault analysis. By setting an alarm threshold, alarm signals such as a flashing red light can be triggered if the threshold is exceeded, making the early warning effect more intuitive.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy3czd417fn3wisfv0va.gif)
Additionally, the editor also supports drawing the movement trajectory of AGV vehicles in the scene, thus enabling workshop inspections.

**Data Binding**
In the workshop, sensors are installed on assets, devices, and equipment. On-site control and data acquisition stations then collect and transmit data to the computer at the production monitoring level via the network.

The production monitoring layer conducts centralized operation and management of the data from the process control layer, such as various optimization calculations, statistical reports, fault diagnosis, display alarms, etc., and finally uploads them to the Hightopo 3D editor, raising the predictive maintenance of the workshop to a new level.

**Chart Operation**
There’re three buttons for chart in the editor: production index, operation index, and environmental protection index. Clicking on any of these buttons will pop up the corresponding chart box, which can be moved to any position on the screen. Once the data is connected, these charts can display the factory’s product production quantity, equipment operation data, carbon dioxide emissions, and other relevant information. By recording information such as material usage time, processing progress, and energy consumption, the editor can provide workshop managers with an analysis of the completion of orders and plans. Additionally, it can integrate material consumption and labor costs through the financial system, allowing managers to grasp the workshop’s operating costs in a timely manner.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bckkq30gieo3adwbv4dp.gif)
The editor supports various operations, such as zooming, panning, and rotating. Each device in the scene can support interaction events. The system has built-in UI components, 3D components, IT O&M, electric power, flowchart, and other industry models. These models support connecting to public or local data sources and realize digital map linkage after data binding.

The editor also provides JS-SDK to meet the needs of low-code secondary development business . Relying on the data assets of thousands of cases, Hightopo software provides more practical visual operation solutions for various industries.

In addition, the editor provides a JS-SDK to meet the requirements of secondary development. Leveraging data assets from thousands of use cases, Hightopo software offers practical, industry-specific visual operation solutions.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dzrf6y0hgx2emju1yui.gif)
For example, the Hightopo software is used in the automobile manufacturing industry to realize 3D visualization of the production line in the automobile assembly workshop. This makes the automobile production process more transparent and management more refined and efficient, ultimately improving the efficiency of production and the quality of products.

**Realized Value**
Hightopo 3D SCADA Graphic Editor constitutes a one-stop data visualization solution from scene building to data binding , which can help users quickly realize modern, high-performance, cross-platform (desktop/mobile/virtual reality) Graphic display effect and interactive experience. Its underlying framework HT for Web’s original vector rendering engine pursues the ultimate performance, and all components can withstand tens of thousands or even hundreds of thousands of graphics elements . With tens of thousands of tabular data, network topology primitives and instrument charts, it has broken through the traditional limits of many industry applications and can better adapt to the needs of the Internet of Things big data era.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1lfyybhz596tbrdgpma.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm4gc4p09fc4np8z7zrp.gif)
Hightopo software adheres to the principle of Heavily Canvas Based for Ultimate Performance at the beginning of its software design, making full use of graphics optimization (memory/CPU/GPU) techniques such as partial refresh, batch aggregation, image caching, minimal DOM elements, etc.

**Summarize**
The Hightopo 3D SCADA Graphic Editor is a tool that can assist with product planning, design, and process simulation. It allows product information to flow through design, manufacturing, quality, logistics, and other links, and enables product lifecycle management (PLM). By combining sensors and radio frequency identification (RFI) technologies, it establishes a production process data supervisory control and data acquisition (SCADA) system that can fully collect production site information. It also enables data integration and analysis with the workshop manufacturing execution system, and realizes closed-loop management through digital process construction. Additionally, it supports integration with enterprise resource planning (ERP) management systems.

The Hightopo 3D SCADA Graphic Editor breaks the traditional manufacturing model by leveraging technologies such as digital twin, Internet of Everything, and intelligent decision-making. It enables the creation of a “transparent, green, digital, intelligent, and lean” smart factory with zero code, enabling rapid deployment.

You can go to our official website to view more cases and effects:
[https://www.hightopo.com/demos/en-index.html](https://www.hightopo.com/demos/en-index.html)

Hightopo YouTube: [https://www.youtube.com/hightopo](https://www.youtube.com/hightopo)
Hightopo LinkedIn: [https://www.linkedin.com/company/hightopo](https://www.linkedin.com/company/hightopo)
Hightopo Facebook: [https://www.facebook.com/hightopo2d3d](https://www.facebook.com/hightopo2d3d)
Hightopo Twitter: [https://twitter.com/hightopo2d3d](https://twitter.com/hightopo2d3d)
Hightopo Instagram: [https://www.instagram.com/hightopo](https://www.instagram.com/hightopo)