Intelligent design picture-to-industrial man-machine interaction system and method

Abstract

The invention relates to a system and a method for converting intelligent design pictures into industrial man-machine interaction. The system comprises a design drawing recognition unit and an interface generation unit, the design drawing recognition unit analyzes the to-be-converted design drawing to obtain design drawing information of the to-be-converted design drawing; the interface generation unit converts the design drawing information into display information of an interface based on a set corresponding rule, generates an interface standard code, and draws to obtain a visual editing view of the to-be-converted design drawing; the design drawing is dynamically analyzed and converted into standard interface codes, and visual real-time editing is carried out, so that the development difficulty is greatly simplified, the development cost is reduced, and the industrial man-machine interaction system is created better and more conveniently in a low-code manner.

Description

Technical Field

[0001] The present invention relates to the field of computers, and in particular to a method and system for converting an intelligent design picture into an industrial human-computer interaction system. Background Art

[0002] Human-computer interaction systems is the field that studies the interaction methods and interface design between humans and computer systems. It aims to improve the interaction between users and computer systems and make them more efficient and easy to use. Industrial human-computer interaction systems are human-computer interaction technologies applied in industrial environments to monitor, control and manage industrial processes and equipment. These systems are widely used in manufacturing, factory automation, energy production, transportation and other fields to improve production efficiency, ensure safety and reduce costs.

[0003] Most of the existing industrial HMIs use specific UI interface operations to control equipment. The development process relies on equipment configuration software and equipment control software, which have the following defects: 1. Various configuration software operations are complex, with high learning and development costs. 2. UI design images may not be well reflected in the configuration software interface. 3. As business needs change, HMI interface development needs to be continuously adjusted, and the subsequent maintenance cost is high. Summary of the invention

[0004] In view of the technical problems existing in the prior art, the present invention provides an intelligent design picture to industrial human-computer interaction system and method, which adopts a method of dynamically parsing design drawings and converting them into standard interface codes, and performing visual real-time editing. In a low-code way, the development difficulty is greatly simplified, the development cost is reduced, and the industrial human-computer interaction system is created better and more conveniently.

[0005] According to a first aspect of the present invention, there is provided an intelligent design picture to industrial human-computer interaction system, comprising: a design picture recognition unit and an interface generation unit; The design drawing recognition unit analyzes the design drawing to be transferred to obtain the design drawing information of the design drawing to be transferred; The interface generation unit converts the design drawing information into interface display information based on set corresponding rules, generates interface standard code, and draws a visual editing view of the design drawing to be converted.

[0006] Based on the above technical solution, the present invention can also make the following improvements.

[0007] Optionally, the design drawing recognition unit includes: a general processing unit, a design drawing processing unit and a standardized data unit connected in sequence; The general processing unit is used to perform general processing on the design drawing to be transferred, including: file name and file format recognition; The design drawing processing unit is used to analyze the core elements in the design drawing to be converted and display the analysis results, and the core elements include: layers, mark points, pictures, styles and icons, etc.; The standardized data unit is used to output the parsing result of the design drawing processing unit in a structured manner, and save it after marking the resource version information through the background service.

[0008] Optionally, the design drawing processing unit includes design drawing processing modules corresponding to various file formats; Various design drawing processing modules and the design drawing processing unit are integrated into the system in a plug-in mode.

[0009] Optionally, the interface generation unit includes: an interface parsing service unit, an interface drawing unit and a visual editing view unit; The interface parsing service unit is used to convert the result output by the design drawing recognition unit into structured data of the display information of the interface, wherein the display information includes: layout, elements, attributes and events; The interface drawing unit is used to convert the structured data output by the interface parsing service unit into formatted codes; The visual editing view is used to automatically load the formatted code and display it to provide real-time editing services to users.

[0010] Optionally, the system further includes: a background service unit; The background service unit is used to provide data support for the design drawing recognition unit and the interface generation unit.

[0011] Optionally, the background service unit includes: a file / interface version management unit, a file information storage unit, a device communication service unit, an interface data communication service unit and a design drawing processing extension unit; The file / interface version management unit is used to manage the version modification of the file of the design drawing to be transferred and the version management of the modified interface; The file information storage management unit is used to manage structured data and image resources in the system; The design drawing processing extension unit is used to manage the plug-in of the design drawing processing unit and integrate it into the system; The device communication service unit is used to communicate data with industrial equipment and store and bind data at each data point; The interface data communication service unit is used to link the attribute data and event binding operations attached to the unified management interface and device communication behind the visual display interface.

[0012] According to a second aspect of the present invention, there is provided an intelligent design picture-to-industry human-computer interaction method, comprising: Step 1, parsing the design drawing to be transferred to obtain the design drawing information of the design drawing to be transferred; Step 2: convert the design drawing information into interface display information based on set corresponding rules, generate interface standard code, and draw a visual editing view of the design drawing to be converted.

[0013] Optionally, parsing the design drawing to be transferred in step 1 includes: standardizing and outputting the design drawing information after splitting the layers, marking points, naming rules, image resources and styles; The design drawing information converted into the display information of the interface in step 2 includes: structured data of the layout, elements, attributes and events of the interface.

[0014] According to a third aspect of the present invention, there is provided an electronic device comprising a memory and a processor, wherein the processor is used to implement the steps of a method for converting an intelligent design image into an industrial human-computer interaction system when executing a computer management program stored in the memory.

[0015] According to a fourth aspect of the present invention, there is provided a computer-readable storage medium on which a computer management program is stored, and when the computer management program is executed by a processor, the steps of the method for converting an intelligent design picture into an industrial human-computer interaction system are implemented.

[0016] The embodiment of the present invention provides an intelligent design picture to industrial human-computer interaction system, method, electronic device and storage medium, which adopts the method of dynamically generating interfaces. The generated human-computer interaction system can complete most of the program codes after the design stage. The software operation interface is simple and basically can be used, and the software interface development cost is greatly reduced. In addition, the user learning cost is very low, the operation interaction efficiency is high, and it is foolproof; according to changes in business needs, only the design drawing needs to be changed, and the system will perform version judgment and automatically generate a new interface version, and only fine-tuning is required to complete the system update; the design drawing processing unit integrates the system in a plug-in manner and provides a standard implementation interface template to expand the system recognition function more quickly; the visual editing view is a dynamically generated low-code platform that quickly and efficiently binds attribute data and events. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 A structural block diagram of an intelligent design picture-to-industrial human-computer interaction system provided by the present invention; Figure 2 A flow chart of an intelligent design picture-to-industrial human-computer interaction method provided by the present invention; Figure 3 A schematic diagram of the hardware structure of a possible electronic device provided by the present invention; Figure 4 A schematic diagram of the hardware structure of a possible computer-readable storage medium provided by the present invention. DETAILED DESCRIPTION

[0018] The principles and features of the present invention are described below in conjunction with the accompanying drawings. The examples given are only used to explain the present invention and are not used to limit the scope of the present invention.

[0019] Figure 1 A method flow chart of converting an intelligent design picture into an industrial human-computer interaction system provided by the present invention, such as Figure 1 As shown, the system includes: a design drawing recognition unit and an interface generation unit.

[0020] The design drawing recognition unit analyzes the design drawing to be transferred to obtain the design drawing information of the design drawing to be transferred.

[0021] The interface generation unit converts the design drawing information into the display information of the interface based on the set corresponding rules, generates the interface standard code, and draws the visual editing view of the design drawing to be converted.

[0022] The present invention provides an intelligent design picture to industrial human-computer interaction system, which dynamically analyzes the design drawing and converts it into a standard interface code, and performs visual real-time editing. In a low-code way, it greatly simplifies the development difficulty, reduces the development cost, and creates an industrial human-computer interaction system better and more conveniently.

[0023] Example 1 Embodiment 1 provided by the present invention is an embodiment of an intelligent design picture to industrial human-computer interaction system provided by the present invention, combined with Figure 1 It can be seen that the embodiment of the system includes: a design drawing recognition unit and an interface generation unit.

[0024] The design drawing recognition unit analyzes the design drawing to be transferred to obtain the design drawing information of the design drawing to be transferred.

[0025] In a possible implementation manner, the design drawing recognition unit includes: a general processing unit, a design drawing processing unit, and a standardized data unit connected in sequence.

[0026] The general processing unit is used to perform general processing on the design drawings to be transferred, including: file name and file format recognition.

[0027] In a specific implementation, the file formats of the design drawings to be converted include at least: PSD files, figma files, sketch files, etc. The general processing unit performs unified standard image processing on various types of design drawings to be converted, and automatically loads the design drawing processing unit after the processing is completed.

[0028] The design drawing processing unit is used to parse the core elements in the design drawing to be converted and display the parsing results. The core elements include: layers, markers, pictures, styles and icons, etc.

[0029] In specific implementation, the analysis results can be customized and modified.

[0030] The standardized data unit is used to output the parsing results of the design drawing processing unit in a structured manner and save them after marking the resource version information through the background service.

[0031] In a possible embodiment, the design drawing processing unit includes design drawing processing modules corresponding to various file formats.

[0032] Various design drawing processing modules and design drawing processing units are integrated into the system in plug-in mode, and custom processing unit plug-ins can be implemented according to standard interfaces.

[0033] The interface generation unit converts the design drawing information into the display information of the interface based on the set corresponding rules, generates the interface standard code, and draws the visual editing view of the design drawing to be converted.

[0034] In a possible implementation manner, the interface generation unit includes: an interface parsing service unit, an interface drawing unit, and a visual editing view unit.

[0035] The interface parsing service unit is used to convert the output result of the design drawing recognition unit into structured data of the display information of the interface, and the display information includes: layout, elements, attributes and events, etc.

[0036] The interface drawing unit is used to convert the structured data output by the interface parsing service unit into formatted codes.

[0037] The visual editing view is used to automatically load formatted code and display it to provide real-time editing services to users.

[0038] In a possible implementation manner, the system further includes: a background service unit.

[0039] The background service unit is used to provide data support for the design drawing recognition unit and the interface generation unit.

[0040] In a possible implementation manner, the background service unit includes: a file / interface version management unit, a file information storage unit, a device communication service unit, an interface data communication service unit and a design drawing processing extension unit.

[0041] The file / interface version management unit is used to manage the version modification of the files of the design drawings to be transferred and the version management of the modified interfaces.

[0042] The file information storage management unit is mainly used to manage files such as structured data and image resources in the system.

[0043] The design drawing processing extension unit is used to manage the plug-ins of the design drawing processing unit and integrate them into the system.

[0044] The device communication service unit is used to communicate data with industrial equipment and store and bind data at each data point.

[0045] The interface data communication service unit is used to link the attribute data and event binding operations attached to the unified management interface and device communication behind the visual display interface.

[0046] In a possible implementation mode, select the design file to be converted, enter the general processing unit 101 in the design identification unit 100, first determine the file name and format content, and use the MD5 algorithm to calculate the information summary, and compare it with the information recorded in the file / interface version management 301 in the background service 300. If it exists, create a new version and compare it with the data of the parameters in the subsequent steps one by one to record the change points. If it does not exist, continue to automatically load the corresponding specific processing unit in the design processing unit 110 according to the current file format. And synchronously call the file information storage 302 service to store the information of the current file.

[0047] In a possible embodiment, the design drawing processing unit 110 uses a dynamic plug-in method to load the processing unit. The preferred development language here is nodejs, and the npm dependency package method is dynamically referenced, but it is not limited to this. The dynamic loading of jar in java language, C / C++ language dll dynamic library, etc. can also be used. And a standard template interface is provided to provide different design drawing scalability. The core template processing interface is 1. Read the file header: basic information, such as file version, image size, color mode, etc.; 2. Parse layer information: read the information of each layer. The information includes the size, position, visibility, transparency, etc. of the layer; 3. Parse layer data: each layer contains image data according to the file specification, you need to decompress and parse this data to obtain the pixel information of each layer; 4. Process layer styles and effects: usually contain information such as style, effect and mask; process text information: parse these layers to obtain text content, font information, size, etc., 5. Process other elements: other elements can be customized.

[0048] In a possible embodiment, the standardized data unit 120 outputs structured data, and it is recommended to use JSON format. To ensure that different design drawings output uniform format content, the unified output resource types include layers, components, text boxes, shapes and styles (color, font, size, border, etc.), and synchronously call the file information storage 302 service to store the information of the current file.

[0049] In a possible implementation mode, the core of the interface parsing service 201 includes a custom parser and a parsing outputter. The parser outputter parses the content output by the standardized data unit 120 into a standard interface display component and outputs the code. The custom parser is used to expand the conversion between the design drawing elements and the parsing interface components. The core of the custom parser implementation is the conversion between the design drawing components and the interface components, which contains shapes, simulated values, buttons, pictures, texts, input boxes, progress bars, lines, etc. The standard interface is implemented as a custom page layout, a custom element component, a custom attribute binding, and a custom event binding.

[0050] In a possible implementation manner, entering the interface drawing unit 210 mainly renders the code output by the interface parsing service 201 to the visual editing view 220, and the core drawing content is page layout, element components, attribute binding, and event binding.

[0051] In a possible embodiment, the visual editing view 220 preferably uses JavaScript as the underlying implementation language, and is used to create a JavaScript graphics library for graphical user interfaces (GUIs) and graphic modeling. Core content and functions: 1. Graphic drawing: Create various types of graphic elements, such as rectangles, circles, lines, arrows, etc.; 2. Graphic layout algorithms, tree layout, ring layout, hierarchical layout, etc., for automatic arrangement and layout of graphic elements; 3. Graphic editing, you can create, connect and edit graphics by dragging graphic elements. 4. Event handling adds event handlers to respond to user interactions, such as single click, double click, drag, etc.; 5. Style and appearance, you can customize the appearance of graphic elements, connecting lines and the entire graphic, and support the integration of CSS styles and icon libraries. And provide dynamic integration of custom components with the interface parsing service 201.

[0052] In a possible embodiment, the background data unit is connected through the communication connection provided by the interface data communication service 304 in the background service 300. Preferably, the MQTT or websocket protocol is used for communication, and the operation of data event linkage is forwarded to the device communication service 303 and the specific device for control after logical processing by the interface data communication service 304.

[0053] In a possible implementation manner, the background service, as the underlying service support of the embodiment of the present invention, is mainly divided into two parts: a data communication layer and an interface service layer.

[0054] The data communication layer mainly includes device communication service 303 and interface data communication service 304. Node-Red is preferably used as the underlying service. The communication protocol between the dynamic expansion and the device can be fixed to the data linkage between the interfaces.

[0055] Interface communication service 304, the functions include data forwarding and data processing. Data forwarding and pushing: When a page is bound to a certain data attribute, it will be registered to the point of the current page communication service, and mapped one-to-one with the real-time data of the device communication service 303 to achieve two-way binding. Data processing, for data that needs to be calculated, you can customize the script to implement it, and provide virtual attribute fields to provide pages for binding. The interface service layer is used to support the design drawing conversion interface process. The HTTP interface is used for data transmission, and sqlite is used as the data storage middleware.

[0056] Example 2 Embodiment 2 provided by the present invention is an embodiment of an intelligent design picture to industrial human-computer interaction method provided by the present invention. Figure 2 A flowchart of an intelligent design picture to industrial human-computer interaction method provided by an embodiment of the present invention, combined with Figure 2 It can be seen that the embodiment of the method includes: Step 1: parse the design drawing to be transferred to obtain the design drawing information of the design drawing to be transferred.

[0057] Step 2: Convert the design drawing information into interface display information based on the set corresponding rules, generate interface standard code, and draw a visual editing view of the design drawing to be converted.

[0058] In a possible implementation manner, parsing the design drawing to be transferred in step 1 includes: splitting the layers, marking points, naming rules, image resources and styles, and then standardizing and outputting the design drawing information.

[0059] In a possible implementation manner, the design drawing information is converted into display information of the interface in step 2, including structured data of the layout, elements, attributes and events of the interface.

[0060] The present invention provides an intelligent design image to industrial human-computer interaction method, which selects the design drawing file that needs to be converted, and transfers it to the corresponding design drawing processing unit after preprocessing. The design drawing processing unit parses the file, splits the layers, marking points, naming rules, picture resources, styles, etc., and outputs the design drawing information in a standardized manner. The background service establishes a version library and saves the design drawing information, draws and displays the design information, and can modify and adjust it. After determining that conversion is required, it enters the interface design unit, and the parsing service converts the standard design drawing information into structured data such as layout, elements, attributes, events, etc. required for the interface. The surface drawing unit will generate the interface standard code in turn and reflect it in the visual editing view. The visual editing view will integrate the background data unit connection to perform data linkage and event operations.

[0061] It can be understood that the method of converting an intelligent design picture into an industrial human-computer interaction system provided by the present invention corresponds to the intelligent design picture into industrial human-computer interaction system provided by the aforementioned embodiments. The relevant technical features of the intelligent design picture into industrial human-computer interaction method can refer to the relevant technical features of the intelligent design picture into industrial human-computer interaction system, which will not be repeated here.

[0062] See also Figure 3 , Figure 3 Schematic diagram of an electronic device provided by an embodiment of the present invention. Figure 3 As shown, an embodiment of the present invention provides an electronic device, including a memory 1310, a processor 1320, and a computer program 1311 stored in the memory 1310 and executable on the processor 1320. When the processor 1320 executes the computer program 1311, the following steps are implemented: parsing the design drawing to be transferred to obtain the design drawing information of the design drawing to be transferred; converting the design drawing information into interface display information based on set corresponding rules, generating an interface standard code, and drawing a visual editing view of the design drawing to be transferred.

[0063] See also Figure 4 , Figure 4 Schematic diagram of an embodiment of a computer-readable storage medium provided by the present invention. Figure 4 As shown, this embodiment provides a computer-readable storage medium 1400, on which a computer program 1411 is stored. When the computer program 1411 is executed by a processor, the following steps are implemented: parsing the design drawing to be transferred to obtain the design drawing information of the design drawing to be transferred; converting the design drawing information into interface display information based on set corresponding rules, and generating interface standard code, and drawing a visual editing view of the design drawing to be transferred.

[0064] The embodiment of the present invention provides an intelligent design picture to industrial human-computer interaction system, method, electronic device and storage medium, which adopts the method of dynamically generating interfaces. The generated human-computer interaction system can complete most of the program codes after the design stage. The software operation interface is simple and basically can be used, and the software interface development cost is greatly reduced. In addition, the user learning cost is very low, the operation interaction efficiency is high, and it is foolproof; according to changes in business needs, only the design drawing needs to be changed, and the system will perform version judgment and automatically generate a new interface version, and only fine-tuning is required to complete the system update; the design drawing processing unit integrates the system in a plug-in manner and provides a standard implementation interface template to expand the system recognition function more quickly; the visual editing view is a dynamically generated low-code platform that quickly and efficiently binds attribute data and events.

[0065] It should be noted that in the above embodiments, the description of each embodiment has its own emphasis, and for parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0066] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0067] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded computer, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0068] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0069] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0070] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0071] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.

Claims

1. An intelligent design picture to industrial human-computer interaction system, characterized in that: The system comprises: a design drawing recognition unit and an interface generation unit; The design drawing recognition unit analyzes the design drawing to be transferred to obtain the design drawing information of the design drawing to be transferred; The interface generation unit converts the design drawing information into interface display information based on set corresponding rules, generates interface standard code, and draws a visual editing view of the design drawing to be converted.

2. The system according to claim 1, characterized in that The design drawing recognition unit comprises: a general processing unit, a design drawing processing unit and a standardized data unit connected in sequence; The general processing unit is used to perform general processing on the design drawing to be transferred, including: file name and file format recognition; The design drawing processing unit is used to analyze the core elements in the design drawing to be converted and display the analysis results, and the core elements include: layers, mark points, pictures, styles and icons, etc.; The standardized data unit is used to output the parsing result of the design drawing processing unit in a structured manner, and save it after marking the resource version information through the background service.

3. The system according to claim 2, characterized in that The design drawing processing unit includes design drawing processing modules corresponding to various file formats; Various design drawing processing modules and the design drawing processing unit are integrated into the system in a plug-in mode.

4. The system according to claim 1, characterized in that The interface generation unit includes: an interface parsing service unit, an interface drawing unit and a visual editing view unit; The interface parsing service unit is used to convert the result output by the design drawing recognition unit into structured data of the display information of the interface, wherein the display information includes: layout, elements, attributes and events; The interface drawing unit is used to convert the structured data output by the interface parsing service unit into formatted code; The visual editing view is used to automatically load the formatted code and display it to provide real-time editing services to users.

5. The system according to claim 1, characterized in that The system further comprises: a background service unit; The background service unit is used to provide data support for the design drawing recognition unit and the interface generation unit.

6. The system according to claim 5, characterized in that The background service unit includes: a file / interface version management unit, a file information storage unit, a device communication service unit, an interface data communication service unit and a design drawing processing extension unit; The file / interface version management unit is used to manage the version modification of the file of the design drawing to be transferred and the version management of the modified interface; The file information storage management unit is used to manage structured data and image resources in the system; The design drawing processing extension unit is used to manage the plug-in of the design drawing processing unit and integrate it into the system; The device communication service unit is used to communicate data with industrial equipment and store and bind data at each data point; The interface data communication service unit is used to link the attribute data and event binding operations attached to the unified management interface and device communication behind the visual display interface.

7. A method for converting intelligent design pictures into industrial human-computer interaction systems, characterized in that: The method comprises: Step 1, parsing the design drawing to be transferred to obtain the design drawing information of the design drawing to be transferred; Step 2: convert the design drawing information into interface display information based on set corresponding rules, generate interface standard code, and draw a visual editing view of the design drawing to be converted.

8. The method according to claim 7, characterized in that The analysis of the design drawing to be transferred in step 1 includes: after splitting the layers, marking points, naming rules, image resources and styles, standardizing and outputting the design drawing information; The design drawing information converted into the display information of the interface in step 2 includes: structured data of the layout, elements, attributes and events of the interface.

9. An electronic device, characterized in that: It includes a memory and a processor, and the processor is used to implement the steps of the intelligent design picture to industrial human-computer interaction system as described in any one of claims 1 to 6 when executing the computer management program stored in the memory.

10. A computer-readable storage medium, characterized in that: A computer management program is stored thereon, and when the computer management program is executed by a processor, the steps of the intelligent design picture to industrial human-computer interaction system as described in any one of claims 1 to 6 are implemented.

Images