PLC programming environment based on web technology stack and construction method thereof

Abstract

The invention discloses a PLC programming environment based on a web technology stack and a construction method thereof, and relates to the field of industrial intelligent control, and the PLC programming environment comprises an expansion framework module, a user interface module, an equipment management module, a communication protocol module, a project management module and a monitoring debugging module. The PLC programming environment adopts a VS Code expansion architecture, integrates a modern Web technology, and constructs a graphical PLC integrated development environment. The environment supports the functions of PLC project management, task programming, equipment configuration, bus management, real-time monitoring, variable debugging and the like. The problems that a traditional PLC programming environment is insufficient in expansibility, poor in user experience and the like are solved, and the problem that different manufacturers lack a unified development platform is solved.

Description

Technical Field

[0001] This invention relates to the field of industrial intelligent control technology, specifically to a PLC programming environment based on a web technology stack and its construction method. Background Technology

[0002] Programmable Logic Controllers (PLCs) are core control devices in the field of industrial automation, widely used in automation control systems in industries such as manufacturing, chemical, power, and transportation. With the deepening development of Industry 4.0 and intelligent manufacturing, the shortcomings of traditional PLC programming environments in terms of functionality, ease of use, and integration have become increasingly prominent, making it difficult to meet the development needs of modern industries.

[0003] Traditional PLC programming environments are mostly built upon dedicated desktop applications, such as Siemens TIA Portal, Rockwell Studio 5000, Schneider Unity Pro, and 3S CODESYS. These tools generally suffer from six core technical pain points:

[0004] (1) Strong architecture closure: Based on proprietary architecture and protocol development, using traditional desktop technologies such as C++ and .NET, the interface rendering relies on traditional GUI frameworks, the functional extensibility and customization capabilities are weak, and developers cannot deeply customize or flexibly integrate third-party tools as needed.

[0005] (2) Lagging interactive experience: The UI / UX design concept is outdated, the interaction mode is rigid, the interface response speed is slow, the multi-window management logic is complex, the operation efficiency is low, and it is out of touch with the usage habits of modern engineers.

[0006] (3) Limited support for communication protocols: Insufficient integration with mainstream industrial fieldbus protocols such as CANopen and Modbus RTU / TCP; cumbersome equipment configuration process; complex parameter setting operation; lack of a unified visual interface for equipment management.

[0007] (4) Poor cross-platform compatibility: It only supports Windows systems and cannot be adapted to operating systems such as Linux and macOS, which limits development scenarios and causes engineers to face serious compatibility obstacles when collaborating across systems.

[0008] (5) Insufficient monitoring and debugging capabilities: The PLC operation status monitoring, real-time variable tracking, log analysis and other functions are simply designed and lack modern data visualization methods, resulting in low efficiency in real-time performance monitoring and fault diagnosis.

[0009] (6) Low integration of toolchain: Most of them are independent software tools, which are disconnected from the modern software engineering system and cannot be seamlessly connected to mainstream development practices such as code version control, project collaborative management, continuous integration / continuous deployment (CI / CD).

[0010] To address the aforementioned technical challenges, the industry urgently needs a PLC programming environment with a UI / UX that aligns with modern software. Based on this need, a PLC programming environment using a web technology stack can provide a more flexible, user-friendly, and scalable development experience, while also possessing excellent cross-platform compatibility and device communication capabilities. Summary of the Invention

[0011] In view of the above-mentioned shortcomings of the existing technology, the present invention provides a PLC programming environment based on web technology stack and its construction method, which can effectively solve the problems of the existing technology.

[0012] To achieve the above objectives, the present invention is implemented through the following technical solutions;

[0013] This invention discloses a PLC programming environment based on a web technology stack, including: an extension framework module for providing the infrastructure and lifecycle management of VS Code extensions;

[0014] User interface module, used to provide a web-based visual interactive interface;

[0015] The device management module is used to discover, connect to, and manage the status of PLC devices;

[0016] The communication protocol module is used to support data exchange using multiple industrial communication protocols.

[0017] The project management module provides complete support for the PLC program development lifecycle.

[0018] The monitoring and debugging module is used to implement real-time data monitoring and program debugging functions;

[0019] The device management module includes: a device scanner for automatically discovering PLC devices and industrial equipment in the network; a connection manager for establishing and maintaining communication connections with PLC devices; and a status monitor for real-time monitoring of device operating status and parameter changes.

[0020] The communication protocol module includes: a CANopen protocol processor for handling CANopen network communication and device configuration; and a Modbus protocol processor for handling Modbus RTU and TCP communication protocols.

[0021] This invention also claims protection for a method for constructing a PLC programming environment based on a web technology stack as described above, comprising the following steps:

[0022] S1 is the core framework for building a VS Code extension architecture, which defines view containers, command sets, and menu contribution points through extension manifest files.

[0023] S2 implements a web-based user interface layer, using the React framework to build a component-based interface and integrating a modern UI component library;

[0024] S3, establish a PLC equipment management system to realize the functions of scanning, connecting, logging in and monitoring PLC equipment;

[0025] S4, builds a multi-protocol communication support framework, and integrates CANopen master-slave device management and Modbus RTU / TCP communication protocol;

[0026] S5 is a development project and task management system that supports PLC project creation, task source code editing, building and compiling, uploading and downloading.

[0027] S6 enables real-time monitoring and debugging, providing variable tracking, program tracing, log analysis, and performance monitoring.

[0028] S7 establishes a cross-platform compatibility mechanism, ensuring consistent operation of the programming environment across multiple operating systems based on Web technology.

[0029] Furthermore, in step S1,

[0030] The extended manifest file is defined in JSON format and includes view container configuration, command registration information, menu item mapping relationships, and activation event triggering conditions.

[0031] The view container includes an activity bar view container and a solution view. The context title is set through the contextualTitle property, and the display status is controlled through the visibility property.

[0032] Furthermore, in step S2, the construction of the user interface layer includes the following steps:

[0033] (1) TypeScript is used as the development language, and Vite is used as the Web interface building tool for component-based development;

[0034] (2) Integrate the Material-UI component library to provide a unified interface component specification;

[0035] (3) Extend the bundling tool through Webpack to support hot reloading and code splitting optimization;

[0036] The process of using TypeScript in step (1) includes:

[0037] Define the device management interface specification, declare device attributes and method signatures using the `interface` keyword; establish type-safe data transmission objects to ensure type consistency in front-end and back-end data interaction; implement a generic constraint mechanism to support unified management of different types of PLC devices;

[0038] The process of integrating the Material-UI component library in step (2) includes:

[0039] Include the @mui / material dependency package; configure theme customization parameters, including color scheme, font specifications, and spacing settings; encapsulate custom components to implement a dedicated device status display and parameter configuration interface for PLCs.

[0040] Furthermore, in step S3, the PLC equipment management system includes an equipment scanning module, a connection management module, and a status monitoring module. It organizes the hierarchical relationship of equipment through a tree structure and supports the addition, deletion, modification, and query operations of equipment.

[0041] Furthermore, in step S4, the multi-protocol communication support framework includes:

[0042] (a) CANopen protocol stack implementation, supporting master device scanning and slave device configuration;

[0043] (b) Modbus protocol stack implementation, supporting RTU serial communication and TCP network communication;

[0044] (c) A unified device abstraction layer that defines standardized device interfaces and data formats.

[0045] Furthermore, the implementation process of the CANopen protocol stack in step (a) includes:

[0046] Implement the CANopen master manager class CanMasterManagerItem, which is responsible for network configuration and node management.

[0047] Implement the CANopen slave manager class CanSlaveManagerItem to handle device parameters and status information.

[0048] Establish an EDS file parsing mechanism to automatically identify device functions and parameter configurations.

[0049] Furthermore, in step S5, the project and task management system includes project file structure management, source code editor integration, compilation and building process, and program upload and download functions, supporting MATLAB model import and multi-task parallel execution.

[0050] Furthermore, in step S6, the real-time monitoring and debugging function establishes a bidirectional communication connection with the PLC device using the WebSocket protocol, acquires device operation data in real time, and realizes data visualization display through the echarts-for-react component library.

[0051] Furthermore, in step S7, the cross-platform compatibility mechanism is implemented based on the extended API of the VS Code platform, which shields the underlying differences between different operating systems through a unified file system interface and process management interface.

[0052] Compared with the known prior art, the technical solution provided by this invention has the following beneficial effects:

[0053] (1) Significantly improved architectural flexibility: Based on the VS Code extended architecture and Web technology stack, this invention provides a highly scalable and customizable development environment, which solves the problem of closed architecture of traditional PLC programming tools. Developers can extend functions and customize interfaces according to specific needs.

[0054] (2) Significantly improved user experience: It adopts modern Web UI technology and component library, providing an intuitive and friendly user interface and smooth interactive experience. Compared with traditional desktop application interfaces, the operating efficiency is improved by more than 30%, and the learning cost is significantly reduced.

[0055] (3) Excellent cross-platform compatibility: Based on Web technology and VS Code platform, it achieves true cross-platform operation, supports mainstream operating systems such as Windows, Linux, and macOS, solves the limitation problem of traditional tool platforms, and expands the scope of use scenarios.

[0056] (4) Enhanced device communication capabilities: It integrates support for multiple industrial communication protocols, especially the deep integration of CANopen and Modbus protocols, providing a unified device management interface and simplifying the device configuration and management work in complex industrial sites.

[0057] (5) Significantly improved development efficiency: Combining modern software engineering practices, it supports functions such as project version control, modular development, and continuous integration. Compared with the traditional development environment, the project development efficiency is improved by more than 40%, and the maintenance cost is reduced.

[0058] (6) Excellent real-time and visualization capabilities: It provides rich real-time monitoring and data visualization functions, supports multi-dimensional equipment status display and trend analysis, helps engineers quickly locate problems, and improves the efficiency of fault diagnosis and system optimization. Attached Figure Description

[0059] Figure 1This is a functional diagram of a PLC programming environment based on a web technology stack.

[0060] Figure 2 This is a basic configuration diagram for a web-based PLC programming environment. Detailed Implementation

[0061] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort are within the scope of protection of the present invention.

[0062] The present invention will be further described below with reference to embodiments.

[0063] The PLC programming environment based on the Web technology stack of this invention adopts the VS Code extended architecture, integrates modern Web technologies, and constructs a graphical PLC integrated development environment. This environment supports functions such as PLC project management, task programming, device configuration, bus management, real-time monitoring, and variable debugging. This invention solves the problems of insufficient scalability and poor user experience in traditional PLC programming environments, as well as the lack of a unified development platform among different manufacturers. By introducing the modern Web technology stack, it breaks through the technical limitations of traditional desktop applications and achieves a more flexible and scalable architecture design. This invention achieves the following beneficial effects: (1) providing a modern user interface and interactive experience; (2) supporting unified management and configuration of various PLC devices; (3) realizing real-time data monitoring, variable debugging, and log tracking; (4) possessing good scalability, facilitating the integration of new device types and functional modules; (5) based on the VS Code platform, fully utilizing its rich ecosystem. This programming environment significantly improves PLC development efficiency and user experience.

[0064] A method for constructing a PLC programming environment based on a web technology stack includes the following steps:

[0065] S1 is the core framework built on the VS Code extension architecture. It defines view containers, command sets, and menu contribution points through extension manifest files, and implements command registration, global public methods, and basic project management capabilities through three classes: "extension", "disposer", and "solution".

[0066] The extended manifest file is defined in JSON format and includes view container configuration, command registration information, menu item mapping relationships, and activation event triggering conditions. The view container includes the activity bar view container and the solution view, with the context title set through the contextualTitle property and the display status controlled through the visibility property.

[0067] This step forms the core architecture for creating a VS Code extension, defining the extension's basic information and contributions through the package.json manifest file. See also... Figure 2 In `viewsContainers`, the activity bar container is defined with the ID "taotech-views-container-solution" and the title "PLC IDE". The specific view "taotech-view-solution" is configured in `views`, set to visible status, and its context title is "PLC IDE". Over 130 commands are defined through the `commands` array, covering functions such as project management (taotech.project.new), PLC operations (taotech.plc.scan, taotech.plc.login), task management (taotech.task.add, taotech.task.upload), and device configuration. The extension activation logic is implemented in `extension.ts`, command handlers and event listeners are registered, and the IDE core class is established to manage the entire system lifecycle. Global resource management is implemented in `disposer`, achieving automatic resource cleanup by inheriting the "Disposer" class and manually registering recyclable resources, ensuring smooth operation. The core project management class is implemented in `solution`, responsible for the unified management of all PLC projects within the workspace, providing project discovery, creation, display, and lifecycle management.

[0068] S2 implements a web-based user interface layer, using the React framework to build a component-based interface and integrating a modern UI component library;

[0069] This step utilizes a modern web technology stack to build the user interface, using React as the main framework, TypeScript for type safety, and Vite as the build tool. It integrates the Material-UI component library to provide unified UI controls, including forms, tables, charts, and other components. The React application is embedded into VS Code via a WebView container, achieving seamless integration between native extensions and the web interface. The UI components for each functional module are organized in the ui / src / pages directory, such as plc-monitor-ui for PLC monitoring, plc-variables-ui for variable management, and task-monitor-ui for task monitoring. Responsive layout and theme adaptation are implemented using CSS-in-JS and Tailwind CSS.

[0070] In step S2, the Web user interface layer is constructed as follows:

[0071] TypeScript is used as the development language, Vite as the build tool, and Webpack for module bundling. The interface layer uses the React framework for component-based development, integrates echarts for data visualization, and uses material-react-table to provide table component functionality. Responsive layout and theme customization are achieved through CSS-in-JS technology and the Tailwind CSS framework.

[0072] Specifically, the user interface layer construction includes the following steps:

[0073] (1) TypeScript is used as the development language, and Vite is used as the Web interface building tool for component-based development;

[0074] (2) Integrate the Material-UI component library to provide a unified interface component specification;

[0075] (3) Extend the bundling tool through Webpack to support hot reloading and code splitting optimization;

[0076] The process of using TypeScript in step (1) includes:

[0077] Define the device management interface specification, declare device attributes and method signatures using the `interface` keyword; establish type-safe data transmission objects to ensure type consistency in front-end and back-end data interaction; implement a generic constraint mechanism to support unified management of different types of PLC devices;

[0078] The process of integrating the Material-UI component library in step (2) includes:

[0079] Include the @mui / material dependency package; configure theme customization parameters, including color scheme, font specifications, and spacing settings; encapsulate custom components to implement a dedicated device status display and parameter configuration interface for PLCs.

[0080] S3, establish a PLC equipment management system to realize the functions of scanning, connecting, logging in and monitoring PLC equipment;

[0081] This step implements the core functions of PLC device management in the src / plc directory. The PlcItem class is responsible for PLC device instance management, including attributes such as IP address, device ID, and connection status. Automatic PLC device scanning is implemented via UDP broadcast to scan for available devices within the network segment. A token-based authentication mechanism is established, using the login method to handle device connection and user authentication. Device status monitoring is implemented, including online status detection, connection quality assessment, and device information acquisition. Device operation interfaces are provided, supporting control commands such as start, stop, and restart. Device configuration management is established, supporting the reading and modification of network parameters and operating parameters.

[0082] The PLC equipment management system includes an equipment scanning module, a connection management module, and a status monitoring module. It organizes the hierarchical relationship of equipment through a tree structure and supports adding, deleting, modifying, and querying equipment.

[0083] S4, builds a multi-protocol communication support framework, and integrates CANopen master-slave device management and Modbus RTU / TCP communication protocol;

[0084] This step implements industrial communication protocol support in the src / bus-manager directory. CANopen protocol support includes: can-master-manager-ui provides the master device configuration interface, supporting node ID setting, synchronization cycle configuration, heartbeat monitoring, and other functions; can-slave-manager-ui provides slave device management, supporting device scanning, parameter configuration, and status monitoring. Modbus protocol support includes: implementing RTU mode master-slave communication; and implementing TCP mode client-server communication. A unified bus manager, bus-manager-item, coordinates device access across different protocols, providing a standardized data exchange interface.

[0085] In step S4, the multi-protocol communication support framework includes:

[0086] Establish a bus manager abstraction layer to define a unified device interface specification; implement the CANopen protocol stack to support automatic scanning, configuration management, and status monitoring of master and slave devices; integrate Modbus protocol support, including master-slave communication in both RTU and TCP transmission modes; establish a device configuration interface to provide visual parameter setting and status display functions; and implement device tree structure management to support hierarchical organization and batch operations of devices.

[0087] The specific construction steps are as follows:

[0088] (a) CANopen protocol stack implementation, supporting master device scanning and slave device configuration;

[0089] (b) Modbus protocol stack implementation, supporting RTU serial communication and TCP network communication;

[0090] (c) A unified device abstraction layer that defines standardized device interfaces and data formats.

[0091] The implementation process of the CANopen protocol stack in step (a) includes:

[0092] Implement the CANopen master manager class CanMasterManagerItem, which is responsible for network configuration and node management.

[0093] Implement the CANopen slave manager class CanSlaveManagerItem to handle device parameters and status information.

[0094] Establish an EDS file parsing mechanism to automatically identify device functions and parameter configurations.

[0095] S5 is a development project and task management system that supports PLC project creation, task source code editing, building and compiling, uploading and downloading.

[0096] This step implements project management functionality within the `project` directory. The `ProjectItem` class manages the lifecycle of a PLC project, including creation, configuration, and building. It integrates the CMake build system, supporting the compilation and linking of C / C++ task code. Task management is implemented in the `src / task` directory, with the `TaskItem` class responsible for task attribute configuration, code editing, debugging, and execution. Multiple programming languages ​​(C, C++) are supported, with compilation options and dependencies configured via `CMakeLists.txt`. Code templates and wizards are provided to simplify the task creation process. Project file management is implemented, including the organization and version control of source code files, configuration files, and resource files. MATLAB model import is supported, converting Simulink models into C code and integrating them into the PLC project.

[0097] The project and task management system includes project file structure management, source code editor integration, compilation and build process, and program upload and download functions, and supports MATLAB model import and multi-task parallel execution.

[0098] S6 enables real-time monitoring and debugging, providing variable tracking, program tracing, log analysis, and performance monitoring.

[0099] Develop a multi-layered monitoring and debugging system. Variable tracing is implemented using plc-trace-ui, establishing a real-time data connection via the WebSocket protocol, and managing the data cache using a sliding window algorithm (maintaining 5000 data points). The algorithm is as follows:

[0100]

[0101] in It is the processed new dataset. This is the current dataset. This is the maximum window size. It refers to the amount of data to be retained.

[0102] Data visualization is achieved through the ECharts chart library. The program tracing function provides debugging tools such as breakpoint setting, single-step execution, and variable monitoring. The log analysis system collects and displays system operation logs by encapsulating custom table components, supporting log filtering, searching, and exporting. Performance monitoring includes real-time statistics and historical trend analysis of metrics such as CPU utilization, memory usage, task execution time, and cycle jitter. Web Workers are used to achieve parallel computing for data processing, improving interface responsiveness.

[0103] In step S6, the real-time monitoring and debugging function establishes a bidirectional communication connection with the PLC device using the WebSocket protocol, acquires device operation data in real time, and realizes data visualization display through the echarts-for-react component library.

[0104] Specifically, the real-time monitoring and debugging functions include the following steps: establishing a real-time communication connection with the PLC device and obtaining device status data using WebSocket or HTTP polling; implementing a variable monitoring interface that supports real-time display of variable values ​​and historical trend analysis; developing a program tracing function that provides breakpoint debugging, single-step execution, and program flow visualization; building a log management system that supports the categorized display and filtered querying of running logs, error logs, and communication logs; and integrating a performance monitoring panel to display key indicators such as CPU utilization, memory usage, and communication status in real time.

[0105] S7 establishes a cross-platform compatibility mechanism, ensuring consistent operation of the programming environment across multiple operating systems based on Web technology.

[0106] Leveraging the inherent cross-platform nature of web technologies, this ensures consistent operation of the programming environment across operating systems such as Windows, Linux, and macOS. VS Code's cross-platform capabilities allow extensions to be seamlessly installed and run on different operating system versions of VS Code. Standard Web APIs and Node.js interfaces are used to avoid platform-specific system calls. A responsive design adapts to different screen sizes and resolutions. Webpack bundling and compression optimize resource loading, ensuring stable operation under varying network conditions. A unified configuration management mechanism supports cross-platform synchronization and migration of user configurations.

[0107] In step S7, the cross-platform compatibility mechanism is implemented based on the extended API of the VS Code platform, which shields the underlying differences between different operating systems through a unified file system interface and process management interface.

[0108] The above embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions will not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A PLC programming environment based on a web technology stack, characterized in that, include: The extension framework module provides the infrastructure and lifecycle management for VS Code extensions; User interface module, used to provide a web-based visual interactive interface; The device management module is used to discover, connect to, and manage the status of PLC devices; The communication protocol module is used to support data exchange using multiple industrial communication protocols. The project management module provides complete support for the PLC program development lifecycle. The monitoring and debugging module is used to implement real-time data monitoring and program debugging functions; The device management module includes: a device scanner for automatically discovering PLC devices and industrial equipment in the network; a connection manager for establishing and maintaining communication connections with PLC devices; and a status monitor for real-time monitoring of device operating status and parameter changes. The communication protocol module includes: a CANopen protocol processor for handling CANopen network communication and device configuration; and a Modbus protocol processor for handling Modbus RTU and TCP communication protocols.

2. A method for constructing a PLC programming environment based on a web technology stack as described in claim 1, characterized in that, Includes the following steps: S1 is the core framework for building a VS Code extension architecture, which defines view containers, command sets, and menu contribution points through extension manifest files. S2 implements a web-based user interface layer, using the React framework to build a component-based interface and integrating a modern UI component library; S3, establish a PLC equipment management system to realize the functions of scanning, connecting, logging in and monitoring PLC equipment; S4, builds a multi-protocol communication support framework, and integrates CANopen master-slave device management and Modbus RTU / TCP communication protocol; S5 is a development project and task management system that supports PLC project creation, task source code editing, building and compiling, uploading and downloading. S6 enables real-time monitoring and debugging, providing variable tracking, program tracing, log analysis, and performance monitoring. S7 establishes a cross-platform compatibility mechanism, ensuring consistent operation of the programming environment across multiple operating systems based on Web technology.

3. The method for constructing a PLC programming environment based on a web technology stack as described in claim 2, characterized in that: In step S1, The extended manifest file is defined in JSON format and includes view container configuration, command registration information, menu item mapping relationships, and activation event triggering conditions. The view container includes an activity bar view container and a solution view. The context title is set through the contextualTitle property, and the display status is controlled through the visibility property.

4. The method for constructing a PLC programming environment based on a web technology stack as described in claim 2, characterized in that, In step S2, the construction of the user interface layer includes the following steps: (1) TypeScript is used as the development language, and Vite is used as the Web interface building tool for component-based development; (2) Integrate the Material-UI component library to provide a unified interface component specification; (3) Extend the bundling tool through Webpack to support hot reloading and code splitting optimization; The process of using TypeScript in step (1) includes: Define the device management interface specification, declare device attributes and method signatures using the `interface` keyword; establish type-safe data transmission objects to ensure type consistency in front-end and back-end data interaction; implement a generic constraint mechanism to support unified management of different types of PLC devices; The process of integrating the Material-UI component library in step (2) includes: Include the @mui / material dependency package; configure theme customization parameters, including color scheme, font specifications, and spacing settings; encapsulate custom components to implement a dedicated device status display and parameter configuration interface for PLCs.

5. The method for constructing a PLC programming environment based on a web technology stack as described in claim 2, characterized in that: In step S3, the PLC equipment management system includes an equipment scanning module, a connection management module, and a status monitoring module. It organizes the hierarchical relationship of equipment through a tree structure and supports the addition, deletion, modification, and query operations of equipment.

6. The method for constructing a PLC programming environment based on a web technology stack as described in claim 2, characterized in that: In step S4, the multi-protocol communication support framework includes: (a) CANopen protocol stack implementation, supporting master device scanning and slave device configuration; (b) Modbus protocol stack implementation, supporting RTU serial communication and TCP network communication; (c) A unified device abstraction layer that defines standardized device interfaces and data formats.

7. The method for constructing a PLC programming environment based on a web technology stack as described in claim 6, characterized in that, The implementation process of the CANopen protocol stack in step (a) includes: Implement the CANopen master manager class CanMasterManagerItem, which is responsible for network configuration and node management. Implement the CANopen slave manager class CanSlaveManagerItem to handle device parameters and status information. Establish an EDS file parsing mechanism to automatically identify device functions and parameter configurations.

8. The method for constructing a PLC programming environment based on a web technology stack as described in claim 2, characterized in that: In step S5, the project and task management system includes project file structure management, source code editor integration, compilation and build process, and program upload and download functions, and supports MATLAB model import and multi-task parallel execution.

9. The method for constructing a PLC programming environment based on a web technology stack as described in claim 2, characterized in that: In step S6, the real-time monitoring and debugging function establishes a bidirectional communication connection with the PLC device using the WebSocket protocol, acquires device operation data in real time, and realizes data visualization display through the echarts-for-react component library.

10. The method for constructing a PLC programming environment based on a web technology stack as described in claim 2, characterized in that: In step S7, the cross-platform compatibility mechanism is implemented based on the extended API of the VS Code platform, which shields the underlying differences between different operating systems through a unified file system interface and process management interface.

Images