HMI custom component implementation method and device, equipment and storage medium

Abstract

The embodiment of the invention provides an HMI custom component implementation method which comprises the following steps: firstly, after a creation instruction is received, generating a component name input area on an HMI editing interface, receiving a custom component name input by a user, and creating a new record and setting a name in a custom component database after no repetition is retrieved; receiving and verifying a component icon file uploaded by a user, and associating the component icon file to a new record if the format is correct; then receiving a core code of the component, verifying the legitimacy of the reference by the external component, checking the integrity of the code by the original component, and associating to a new record; and finally, the user sets a component style, inputs a data identifier and associates the data identifier to the new record. According to the method, the user-defined component is efficiently created on the HMI editing interface, repeated calling, displaying and editing can be achieved, the customization and flexibility of the HMI interface are improved, the cost is reduced, the period is shortened, the user experience is optimized, and the requirement of a user for a personalized and efficient human-computer interaction interface in the fields of industrial automation and the like is met.

Description

Technical Field

[0001] Embodiments of the present disclosure relate to the technical field of human-machine interface and related technical fields, and in particular, to a method, apparatus, device and storage medium for implementing a custom HMI component. Background Art

[0002] As the demand for intelligent, personalized and efficient industrial production continues to increase, the HMI (human-machine interface) system, as a key link in human-machine interaction, has become increasingly extensive and complex in its application scenarios. However, the HMI system in the prior art has many defects:

[0003] On the one hand, its editability is severely limited. The operating interface of most HMI systems is pre-set by the equipment manufacturer, and the editing function is not open to customers, making it difficult for customers to make personalized adjustments based on their unique production processes and operating habits. Even if a few software open editing functions to customers, the available editing components are extremely limited, the component styles are simple and rough, and the interaction mode is also very simple. This makes it impossible for customers to freely and flexibly design various components according to their actual needs, and to deeply edit the HMI system to achieve rich and diverse functional interactions. This greatly limits the adaptability and practicality of the HMI system in different industrial scenarios, and cannot meet the development trend of diversification and customization of modern industrial production.

[0004] On the other hand, the maintenance cost of existing HMI systems remains high. When customers need to modify component styles or add specific components, they often have to rely on developers for secondary development. This not only incurs high development costs, but also requires a long waiting period, which seriously affects the efficiency and continuity of industrial production, brings a large economic burden and time cost to enterprises, and to some extent hinders the efficient advancement of industrial automation.

[0005] Therefore, a new HMI system design scheme is urgently needed to overcome the shortcomings of the above-mentioned traditional HMI system and better adapt to the needs of industrial automation development. Summary of the invention

[0006] The embodiments described herein provide a method, apparatus, device and storage medium for implementing an HMI custom component, which solve the problems existing in the prior art.

[0007] According to a first aspect of the present disclosure, a method for implementing an HMI custom component is provided, comprising:

[0008] In response to the instruction to create a custom component, a component name input area is generated in the HMI editing interface, the custom component name input by the user is received and searched in the custom component database, and if there is no duplication, a new component data record is created, and the name of the new component is set to the custom component name input by the user;

[0009] Receive and verify the component icon file uploaded by the user, and if the format is correct, set the component icon attribute to the uploaded component icon, and associate the icon with the newly created component data record;

[0010] Receive the component core code input by the user, if the code involves an external component, verify the legitimacy of its reference, if it is an original component, check the code integrity, set the core code attribute of the new component to the input component code, and associate it with the newly created component data record;

[0011] Receive the setting information of the component style by the user, set the style attribute of the new component to the component style set by the user, and associate it with the newly created component data record;

[0012] The data identification of the component input by the user is received, and the data identification attribute of the new component is bound to the input data identification of the component, and is associated with the newly created component data record.

[0013] In some embodiments of the present disclosure, after the step of receiving a new custom component name input by a user and searching in a custom component database using the new custom component name, the following steps are included:

[0014] Determining whether the same component name already exists in the database;

[0015] When the same component name exists in the database, a prompt message is sent to the user, which clearly informs the user that the unique component name needs to be re-entered, and the prompt message continues to be displayed until the user enters a component name that meets the uniqueness requirement.

[0016] In some embodiments of the present disclosure, after the step of associating with the newly created component data record, the method further includes:

[0017] After the configuration is completed, the complete data record of the component is saved to the custom component database, so that the custom component is displayed in the component list in the form of an icon. The icon display must accurately reflect the image content corresponding to the component icon file uploaded by the user, so that the user can intuitively identify and select the corresponding custom component.

[0018] In some embodiments of the present disclosure, after the step of saving the complete data record of the component to the custom component database, the method further includes:

[0019] Receive the user's query instruction for a specific component name, search the custom component database according to the name, and determine whether the component name exists in the database; if the component name exists, extract all attribute information of the component from the database, and send it to the front-end display interface in accordance with the established front-end display format and rules for user viewing and further editing, and the specific content and editable entry corresponding to each attribute information must be clearly and accurately presented on the front-end display interface.

[0020] In some embodiments of the present disclosure, after the step of saving the complete data record of the component to the custom component database, the method further includes:

[0021] Receiving a drag operation instruction of the user on the custom component, parsing and obtaining canvas position information and component name information;

[0022] According to the component name information, the core code of the component is queried from the custom component database, and the core code is used in combination with the canvas position information and the component style information to complete the rendering of the component on the canvas to obtain the rendered component. The rendering process must strictly follow the front-end code execution logic to ensure that the component is accurately rendered to the corresponding canvas position and the style meets the set requirements, and the relevant information of the rendered component is recorded in the memory. The relevant information covers key content such as the storage address and current status of the component in the memory, so that it can be accurately retrieved when performing related operations later.

[0023] In some embodiments of the present disclosure, after the step of recording the relevant information of the rendered component in the memory, the method further includes:

[0024] After receiving the external data, the external data is sent to the rendered component. The rendered component is re-rendered according to the external data and the preset page rendering logic to achieve real-time update of the component data. The update process must ensure the smoothness of the page display and the accuracy of the data, and display the updated component status on the screen. The display effect should meet the user's visual and functional expectations for real-time data display.

[0025] In some embodiments of the present disclosure, after the step of saving the complete data record of the component to the custom component database, the method further includes:

[0026] Receive event information triggered by the user, parse it to obtain the event type, query the component properties according to the event type to obtain the associated event identifier, and perform operations corresponding to the event identifier, including but not limited to activating other components in the system and executing specific workflows. During the execution of the operations, the consistency and accuracy of each operation link must be ensured to ensure that the entire system can trigger the normal flow of workflows based on events.

[0027] According to a second aspect of the present disclosure, a device for implementing an HMI custom component is provided, comprising:

[0028] A generating module, for generating a component name input area in the HMI editing interface in response to a command to create a custom component;

[0029] A creation module, used for receiving a custom component name input by a user and searching in a custom component database, creating a new component data record if there is no duplication, and setting the name of the new component to the custom component name input by the user;

[0030] A first setting module, configured to receive and verify the component icon file uploaded by the user, and if the format is correct, set the component icon attribute to the uploaded component icon, and associate the icon with the newly created component data record;

[0031] The second setting module is used to receive the component core code input by the user, verify the legitimacy of the reference if the code involves an external component, check the code integrity if it is an original component, set the core code attribute of the new component to the input component code, and associate it with the newly created component data record;

[0032] A third setting module, configured to receive the setting information of the component style by the user, set the style attribute of the new component to the component style set by the user, and associate it with the newly created component data record;

[0033] The association module is used to receive the data identification of the component input by the user, bind the data identification attribute of the new component to the data identification of the input component, and associate it with the newly created component data record.

[0034] In some embodiments of the present disclosure, it further includes:

[0035] A determination module, used to determine whether the same component name already exists in the database;

[0036] A prompt module, configured to send a prompt message to the user when the same component name exists in the database, the prompt content clearly notifying the user that the unique component name needs to be re-entered, and the prompt message continues to be displayed until the user enters a component name that meets the uniqueness requirement;

[0037] In some embodiments of the present disclosure, it further includes:

[0038] A saving module is used to save the complete data record of the component to the custom component database after the configuration is completed, so that the custom component can be displayed in the component list in the form of an icon. The icon display must accurately reflect the image content corresponding to the component icon file uploaded by the user, so that the user can intuitively identify and select the corresponding custom component;

[0039] In some embodiments of the present disclosure, it further includes:

[0040] The query display module is used to receive a user's query instruction for a specific component name, search the custom component database according to the name, and determine whether the component name exists in the database; if the component name exists, extract all attribute information of the component from the database, and send it to the front-end display interface according to the established front-end display format and rules for the user to view and further edit, and the specific content and editable entry corresponding to each attribute information must be clearly and accurately presented on the front-end display interface;

[0041] In some embodiments of the present disclosure, it further includes:

[0042] A rendering module is used to receive a user's drag and drop operation instruction for a custom component, parse and obtain canvas position information and component name information, query and obtain the core code of the component from the custom component database according to the component name information, use the core code in combination with the canvas position information and the component style information to complete the rendering of the component on the canvas, and obtain the rendered component. The rendering process must strictly follow the front-end code execution logic to ensure that the component is accurately rendered to the corresponding canvas position and the style meets the set requirements, and record the relevant information of the rendered component in the memory. The relevant information covers the key content such as the storage address and current status of the component in the memory, so that it can be accurately retrieved when performing related operations later;

[0043] In some embodiments of the present disclosure, it further includes:

[0044] The data update module is used to send the external data to the rendered component after receiving the external data. The rendered component is re-rendered according to the external data and the preset page rendering logic to achieve real-time update of component data. The update process needs to ensure the smoothness of page display and data accuracy, and display the updated component status on the screen. The display effect should meet the user's visual and functional expectations for real-time data display;

[0045] In some embodiments of the present disclosure, it further includes:

[0046] The event processing module is used to receive event information triggered by the user, parse it to obtain the event type, query the component properties according to the event type to obtain the associated event identifier, and perform operations corresponding to the event identifier. The operations include but are not limited to activating other components in the system and executing specific workflows. During the execution of the operations, the consistency and accuracy of each operation link must be guaranteed to ensure that the entire system can trigger the normal flow of workflows based on events.

[0047] According to a third aspect of the present disclosure, a device is provided, including a memory and a processor, wherein a program is stored in the memory, and when the processor executes the program, the steps of the method in any one of the above embodiments are implemented.

[0048] According to a fourth aspect of the present disclosure, a readable storage medium is provided, on which a program is stored. When the program is executed by a processor, the steps of the method in any one of the above embodiments are implemented.

[0049] The HMI custom component implementation method provided by the disclosed embodiment first receives the creation instruction, generates a component name input area in the HMI editing interface, receives the custom component name input by the user, and after searching for duplicates, creates a new record in the custom component database and sets the name; then receives and verifies the component icon file uploaded by the user, and associates it to the new record if the format is correct; then receives the component core code, verifies the legitimacy of the reference with external components, checks the code integrity of the original component, and then associates it to the new record; finally, the user sets the component style and inputs the data identifier, which is also associated to the new record. The efficient creation of custom components in the HMI editing interface is realized, so that the components can be repeatedly called, displayed and edited, which greatly improves the customization and flexibility of the HMI interface, reduces the development cost and cycle, enhances the user experience, and provides strong support for the development of human-computer interaction interfaces in the fields of industrial automation and intelligent monitoring.

[0050] The above description is only an overview of the technical solution of the embodiment of the present application. In order to more clearly understand the technical means of the embodiment of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the embodiment of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings of the embodiments will be briefly described below. It should be noted that the drawings described below only relate to some embodiments of the present disclosure, but are not intended to limit the present disclosure, wherein:

[0052] Figure 1 It is a flowchart of a method for implementing a HMI custom component provided by an embodiment of the present disclosure;

[0053] Figure 2 It is a structural diagram of an HMI custom component implementation device provided by an embodiment of the present disclosure;

[0054] Figure 3 It is a structural schematic diagram of a device provided by an embodiment of the present disclosure.

[0055] In the drawings, reference numerals with the same last two digits correspond to the same elements. It should be noted that the elements in the drawings are schematic and not drawn to scale. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solution and advantages of the embodiments of the present disclosure clearer, the technical solution of the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all of the embodiments. Based on the described embodiments of the present disclosure, all other embodiments obtained by those skilled in the art without creative work also fall within the scope of protection of the present disclosure.

[0057] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase "embodiments" in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0058] The term "and / or" in this article is only a description of the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists, A and B exist at the same time, and B exists. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0059] Furthermore, in all embodiments of the present disclosure, terms such as “first” and “second” are used only to distinguish one component (or a part of a component) from another component (or another part of a component).

[0060] In the description of the present application, unless otherwise specified, "plurality" means more than two (including two), and similarly, "multiple groups" means more than two groups (including two).

[0061] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0062] There are many defects in the HMI system in the prior art: on the one hand, its editability is severely limited. The operating interface of most HMI systems is pre-set by the equipment manufacturer, and the editing function is not open to customers, making it difficult for customers to make personalized adjustments according to their unique production processes and operating habits. Even if a few software open the editing function to customers, the available editing components are extremely limited, the component style is simple and rough, and the interaction mode is also very single. This makes it impossible for customers to fully and flexibly design various components according to their actual needs, and deeply edit the HMI system to achieve rich and diverse functional interactions, which greatly limits the adaptability and practicality of the HMI system in different industrial scenarios, and cannot meet the development trend of diversification and customization of modern industrial production. On the other hand, the maintenance cost of the existing HMI system remains high. When customers need to modify the component style or add specific components, they often have to rely on developers for secondary development. This not only incurs high development costs, but also goes through a long waiting period, which seriously affects the efficiency and continuity of industrial production, brings a large economic burden and time cost to enterprises, and to a certain extent hinders the efficient promotion of industrial automation.

[0063] Based on the problems existing in the existing technology, Figure 1 is a flow chart of a method for implementing a custom HMI component provided by an embodiment of the present disclosure, such as Figure 1 As shown, the specific process of implementing the HMI custom component method includes:

[0064] S110. In response to a command to create a custom component, a component name input area is generated in the HMI editing interface, the custom component name input by the user is received and searched in the custom component database, and if there is no duplication, a new component data record is created, and the name of the new component is set to the custom component name input by the user.

[0065] In a possible implementation, after the step of receiving the component name input by the user and searching in the custom component database, the following steps are included:

[0066] Determining whether the same component name already exists in the database;

[0067] When the same component name already exists in the database, a prompt message is sent to the user, requiring the user to re-enter a unique component name.

[0068] In the specific implementation process, first, when the user operates in the HMI editing interface, it is in a listening state, waiting to receive various instructions from the user. When the user chooses to create a custom component, a text box area dedicated to entering the component name is generated on the editing interface. The user enters the name of the custom component in this input box, and immediately starts the search program to find out whether the same name already exists in the custom component database stored in it. The database stores the detailed information of all created custom components, including name, icon, core code, style, data identifier and event identifier, etc. If no duplicate name is found, a new data record entry is created for the new component, and the name entered by the user is recorded in the entry as the new component name attribute. The customized component will be permanently retained in the component database and can be used again. Users can design their own unique style components as they please, not limited to general charts, and there is no need to redevelop the system. While reducing development and maintenance costs, the editability of HMI is greatly improved.

[0069] S120. Receive the component icon file uploaded by the user, verify whether the file format is one of the supported formats (png, svg, jpg), and if the format is correct, set the new component icon attributes to the uploaded component icon, and associate the icon with the newly created component data record.

[0070] In the specific implementation process, a file upload window is displayed on the editing interface to guide the user to upload the component icon. The user selects a local icon file to upload. After obtaining the uploaded file, first check whether its file format is one of the pre-set supported formats (png, svg, jpg). If the format meets the requirements, the icon file is associated with the previously created new component data record, stored in a specific file storage area, and the path and related attribute information of the icon file are recorded in the database so that it can be displayed in the component list as the icon of the component.

[0071] S130. Provide a code editing area to receive the component core code input by the user. If the code involves external components (such as echart components), verify the legitimacy of the reference, specifically verify whether the source of the referenced external components is compliant and the version is compatible, etc. If it is an original component, check the code integrity, including checking whether the html, js, and css codes are complete and comply with syntax specifications to ensure that the complete html+js+css code is included, set the core code attribute of the new component to the input component code, and associate it with the newly created component data record.

[0072] In the specific implementation process, a code editing area is provided on the editing interface where users can enter the core code of the component. If the user chooses to use an external component (such as an echart component), connect to the corresponding official website through the network to verify whether the code copied by the user complies with the specification and is legally referenced. For original components, the code syntax analysis tool is used to check whether the code entered by the user contains a complete html+js+css code structure to ensure the functionality and integrity of the component. Once the code passes the verification, it is recorded as a core code attribute in the data record of the new component.

[0073] S140. Receive the user's setting information on the component style, where the component style includes but is not limited to component size, background color, page margin, font size and color, and border style, set the style attributes of the new component to the component style set by the user, and associate it with the newly created component data record.

[0074] In the specific implementation process, after the code editing is completed, a series of style setting options are displayed to the user, and the user can adjust the size, background color, page margins, font size and color, border style and other parameters of the component according to their needs. The user's setting operation is obtained in real time, and the style information is recorded in the style attributes of the data record of the new component.

[0075] S150: Receive a component data identifier input by a user, bind the data identifier attribute of the new component to the input component data identifier, and associate it with the newly created component data record.

[0076] Optionally, the data identifier is used as a core identifier of a URL pushed by a websocket to receive data.

[0077] In the specific implementation process, users can set data identification for components, receive data identification information input by users, and bind it to the data record of the new component, so that when specific data is received later, the data can be accurately passed to the component for processing and display. At the same time, users can also set the event type and event identification of the component, and also record this information in the data record of the component. When the user triggers the corresponding event on the HMI interface (such as clicking on the component), specific operations can be performed according to these recorded event identifications, such as activating other components in the system or starting a specific workflow, thereby realizing interaction and collaborative work between components.

[0078] In addition, after implementing step S150, the following steps may also be included:

[0079] S160. After the configuration is completed, the complete data record of the new component is saved in the custom component database, so that the custom component is displayed in the component list in the form of an icon and can be used by the user for subsequent operations.

[0080] In the specific implementation process, when the user completes all the above component design steps, the data record of the entire component is completely saved in the custom component database. At this time, the custom component appears in the component list in the form of an icon, and the user can place it at a specific location on the HMI interface by dragging the component icon to the canvas area at any time. When the user drags, the canvas position information and component name information are obtained, the core code and style information of the component are extracted from the database, and the component is rendered on the canvas according to the canvas position information, forming a visual and interactive component interface.

[0081] In addition, after implementing step S160, the following steps may also be included:

[0082] S170. After receiving a user's query instruction for a specific component name, a search is performed in the custom component database based on the name to determine whether the component name exists in the database; if the component name exists, all attribute information of the component is extracted from the database and sent to the front-end display interface for the user to view and further edit.

[0083] In the specific implementation process, after the component rendering is completed, if the user modifies the style, code or other properties of the component, the data record of the corresponding component in the database is updated in real time by monitoring the user's operation instructions.

[0084] In addition, after implementing step S160, the following steps may also be included:

[0085] S180, after receiving the user's drag operation instruction for the custom component, parse and obtain canvas position information and component name information;

[0086] According to the component name information, the core code of the component is queried from the custom component database, and the core code is used in combination with the canvas position information and the component style information to complete the rendering of the component on the canvas to obtain the rendered component, and the relevant information of the rendered component is recorded in the memory.

[0087] In addition, after implementing step S180, the following steps may also be included:

[0088] S190, after receiving the external data, the component data identifier sends the data to the rendered component, and the rendered component is re-rendered according to the data to achieve real-time update of the component data and display the updated component status on the screen.

[0089] In the specific implementation process, when the component receives external data (through its bound data identifier), the data is passed to the component, and the component re-renders according to the data processing logic in its core code to display the latest data status and realize the real-time update function of the data. Similarly, when the user triggers an event of the component on the HMI interface (such as a click), the event type is parsed, the corresponding event identifier is found, and the operation associated with the event identifier is executed, thereby realizing the interactive function of the component and the automated execution of the workflow.

[0090] In addition, after implementing step S190, the following steps may also be included:

[0091] S1901, after receiving the event information triggered by the user, parse and obtain the event type, query the component properties according to the event type to obtain the associated event identifier, and execute the operation corresponding to the event identifier, which includes but is not limited to activating other components in the system or executing a specific workflow.

[0092] In the specific implementation process, when the event information triggered by the user on the HMI interface for a specific component is received, the event parsing program will be started immediately. By deeply analyzing the received event information, the corresponding event type is accurately parsed. Subsequently, a comprehensive and detailed query operation is quickly performed in the pre-stored attribute data of the component, aiming to accurately obtain the event identifier closely associated with the event type. Once the corresponding event identifier is successfully obtained, the specific operation that accurately corresponds to the event identifier will be executed in strict accordance with the preset program logic. The operations mentioned here cover a variety of different functional forms, including but not limited to activating other components in the system that are on standby so that they can collaboratively participate in the current workflow, thereby achieving efficient linkage and interaction between multiple components; at the same time, it is also possible to execute a series of carefully designed and pre-defined specific workflows, which are often specially customized according to the actual needs of users and the overall architecture of the system. The purpose is to meet diverse business scenarios and functional requirements, ensure that the entire HMI system can run efficiently, stably and intelligently, provide users with a smoother, more convenient and personalized human-computer interaction experience, give full play to the key role and value of this technology in the HMI system, and greatly enhance the flexibility and functionality of the system.

[0093] The HMI custom component implementation method provided by the disclosed embodiment first generates a component name input area in the HMI editing interface after receiving a creation instruction, receives the custom component name input by the user, and creates a new record in the custom component database and sets the name after searching for duplicates; then receives and verifies the component icon file uploaded by the user, and associates it to the new record if the format is correct; then receives the component core code, verifies the legitimacy of the reference to the external component, checks the code integrity of the original component, and then associates it to the new record; finally, the user sets the component style and inputs the data identifier, which is also associated to the new record. This realizes the efficient creation of custom components in the HMI editing interface, which can be repeatedly called, displayed and edited, improves the customization and flexibility of the HMI interface, reduces costs, shortens cycles, optimizes user experience, and meets the needs of users for personalized and efficient human-computer interaction interfaces in the fields of industrial automation.

[0094] Based on the above embodiments, the present disclosure also provides an HMI custom component implementation device, such as Figure 2 As shown, the HMI custom component implementation device includes:

[0095] A generating module 210, for generating a component name input area in the HMI editing interface in response to a command to create a custom component;

[0096] A creation module 220, for receiving a user-inputted custom component name and searching in a custom component database, and if there is no duplication, creating a new component data record, and setting the name of the new component to the user-inputted custom component name;

[0097] A first setting module 230 is used to receive and verify the component icon file uploaded by the user, and if the format is correct, set the component icon attribute to the uploaded component icon, and associate the icon with the newly created component data record;

[0098] The second setting module 240 is used to receive the component core code input by the user, verify the legitimacy of the reference if the code involves an external component, check the code integrity if it is an original component, set the core code attribute of the new component to the input component code, and associate it with the newly created component data record;

[0099] The third setting module 250 is used to receive the setting information of the component style by the user, set the style attribute of the new component to the component style set by the user, and associate it with the newly created component data record;

[0100] The association module 260 is used to receive the data identification of the component input by the user, bind the data identification attribute of the new component to the input data identification of the component, and associate it with the newly created component data record.

[0101] In a specific embodiment, it also includes:

[0102] The saving module 270 is used to save the complete data record of the component to the custom component database after the configuration is completed, so that the custom component can be displayed in the component list in the form of an icon. The icon display must accurately reflect the image content corresponding to the component icon file uploaded by the user, so that the user can intuitively identify and select the corresponding custom component;

[0103] In a specific embodiment, it also includes:

[0104] A determination module 2201 is used to determine whether the same component name already exists in the database;

[0105] Prompt module 2202, used for sending a prompt message to the user when the same component name exists in the database, the prompt content clearly notifying the user that the unique component name needs to be re-entered, and the prompt message is continuously displayed until the user enters a component name that meets the uniqueness requirement;

[0106] In a specific embodiment, it also includes:

[0107] The query and display module 2801 is used to, after receiving a user's query instruction for a specific component name, search the custom component database according to the name to determine whether the component name exists in the database; if the component name exists, extract all attribute information of the component from the database, and send it to the front-end display interface in accordance with the established front-end display format and rules for user viewing and further editing, and the specific content and editable entry corresponding to each attribute information must be clearly and accurately presented on the front-end display interface.

[0108] In a specific embodiment, it also includes:

[0109] The rendering module 2802 is used to parse and obtain canvas position information, including the coordinate position on the canvas when the mouse is released, and component name information after receiving the user's drag operation instruction for the custom component. According to the component name information, the core code of the component is queried from the custom component database, and the core code is used in combination with the canvas position information and the component style information to complete the rendering of the component on the canvas to obtain the rendered component. The rendering process must strictly follow the front-end code execution logic to ensure that the component is accurately rendered to the corresponding canvas position and the style meets the set requirements, and the relevant information of the rendered component is recorded in the memory. The relevant information covers key content such as the storage address and current status of the component in the memory, so that it can be accurately retrieved when performing related operations later.

[0110] In a specific embodiment, it also includes:

[0111] The data update module 2803 is used to send the external data to the rendered component after receiving the data. The rendered component is re-rendered according to the data and the preset page rendering logic to achieve real-time update of component data. The update process must ensure the smoothness of page display and data accuracy, and display the updated component status on the screen. The display effect should meet the user's visual and functional expectations for real-time data display.

[0112] In a specific embodiment, it also includes:

[0113] The event processing module 2804 is used to parse and obtain the event type, such as a click event, a double-click event, etc., after receiving the event information triggered by the user, query the associated event identifier in the component properties according to the event type, and perform the operation corresponding to the event identifier. The operation includes but is not limited to activating other components in the system and executing specific workflows, such as querying data from a custom data table, optimizing data through functions, pushing data to the HMI, etc., and during the execution of the operation, the consistency and accuracy of each operation link must be guaranteed to ensure that the entire system can trigger the normal flow of workflows based on events.

[0114] The HMI custom component implementation device provided in the embodiment of the present disclosure improves the editability and flexibility of the HMI system, reduces development and maintenance costs, optimizes the user experience, and meets the user's needs for personalized and efficient human-computer interaction interfaces in the fields of industrial automation and the like.

[0115] For the device embodiment, since it basically corresponds to the method embodiment, the relevant parts can refer to the partial description of the method embodiment. The device embodiment described above is only schematic, wherein the units described as separate components may or may not be physically separated, and the components displayed as units may or may not be physical units, that is, they may be located in one place, or they may be distributed on multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the scheme of the present invention. Ordinary technicians in this field can understand and implement it without paying creative work.

[0116] The present application also provides a device. Figure 3 , Figure 3 This is a basic structural block diagram of the device in this embodiment.

[0117] The device includes a memory 310 and a processor 320 that are connected to each other through a system bus. It should be noted that the figure only shows a device with components 310-320, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASIC), field-programmable gate arrays (Field-Programmable Gate Array, FPGA), digital processors (Digital Signal Processor, DSP), embedded devices, etc.

[0118] The device can be a computing device such as a desktop, notebook, PDA, or cloud server. The device can interact with the user through keyboard, mouse, remote control, touchpad, or voice control device.

[0119] The memory 310 includes at least one type of readable storage medium, and the readable storage medium includes a non-volatile memory or a volatile memory, such as a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., SD or DX memory, etc.), a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc., and the RAM may include a static RAM or a dynamic RAM. In some embodiments, the memory 310 may be an internal storage unit of the device, such as a hard disk or a memory of the device. In other embodiments, the memory 310 may also be an external storage device of the device, such as a plug-in hard disk, a smart memory card (SMC), a secure digital (SD) card, or a flash card (Flash Card), etc., equipped on the device. Of course, the memory 310 may also include both the internal storage unit of the device and its external storage device. In this embodiment, the memory 310 is generally used to store the operating system and various application software installed on the device, such as the program code of the above method, etc. In addition, the memory 310 may also be used to temporarily store various data that have been output or are to be output.

[0120] The processor 320 is generally used to perform the overall operation of the device. In this embodiment, the memory 310 is used to store program codes or instructions, the program codes include operation instructions, and the processor 320 is used to execute the program codes or instructions stored in the memory 310 or process data, such as running the program code of the above method.

[0121] In this article, the bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. The bus system can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, only one thick line is used in the figure, but it does not mean that there is only one bus or one type of bus.

[0122] Another embodiment of the present application further provides a readable medium, which may be a readable signal medium or a readable medium. A processor in the method reads a readable program code stored in the readable medium, so that the processor can execute the functional actions specified in each step or a combination of steps in the above method; and generates a device for implementing the functional actions specified in each block or a combination of blocks in the block diagram.

[0123] The readable medium includes but is not limited to electronic, magnetic, optical, electromagnetic, infrared memory or semiconductor systems, devices or apparatuses, or any appropriate combination of the foregoing, the memory is used to store program codes or instructions, the program codes include operating instructions, and the processor is used to execute the program codes or instructions of the above methods stored in the memory.

[0124] For the definitions of memory and processor, please refer to the description of the aforementioned device embodiment and will not be repeated here.

[0125] In the several embodiments provided in the present application, it should be understood that the disclosed systems, devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic, for example, the division of modules or units is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0126] Each functional unit or module in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0127] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for a device (which can be an individual, a server, or a network device, etc.) or a processor to perform all or part of the steps of each embodiment method of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program code.

[0128] Unless the context clearly indicates otherwise, the singular form of the words used herein and in the appended claims includes the plural and vice versa. Thus, when referring to the singular, the plural form of the corresponding term is generally included. Similarly, the words "comprise" and "include" are to be interpreted as inclusive rather than exclusive. Likewise, the terms "include" and "or" should be interpreted as inclusive unless such interpretation is expressly prohibited herein. Where the term "example" is used herein, particularly when it is located after a group of terms, the "example" is merely exemplary and illustrative and should not be considered exclusive or comprehensive.

[0129] Further aspects and scopes of adaptability become apparent from the description provided herein. It should be understood that various aspects of the present application can be implemented individually or in combination with one or more other aspects. It should also be understood that the description and specific embodiments herein are intended for purposes of illustration only and are not intended to limit the scope of the present application.

[0130] Several embodiments of the present disclosure are described in detail above, but it is obvious that those skilled in the art can make various modifications and variations to the embodiments of the present disclosure without departing from the spirit and scope of the present disclosure. The protection scope of the present disclosure is defined by the attached claims.

Claims

1. A method for implementing a HMI custom component, characterized in that: include: In response to the instruction to create a custom component, a component name input area is generated in the HMI editing interface; Receive the user-entered custom component name and search it in the custom component database, if there is no duplication, create a new component data record, and set the name of the new component to the user-entered custom component name; Receive and verify the component icon file uploaded by the user, and if the format is correct, set the component icon attribute to the uploaded component icon, and associate the icon with the newly created component data record; Receive the component core code input by the user, if the code involves an external component, verify the legitimacy of its reference, if it is an original component, check the code integrity, set the core code attribute of the new component to the input component code, and associate it with the newly created component data record; Receive the setting information of the component style by the user, set the style attribute of the new component to the component style set by the user, and associate it with the newly created component data record; The component data identifier input by the user is received, and the data identifier attribute of the new component is bound to the input component data identifier and associated with the newly created component data record.

2. The method according to claim 1, characterized in that After the step of receiving the new custom component name input by the user and searching the custom component database using the new custom component name, the method further includes: Determining whether the same component name already exists in the database; When the same component name exists in the database, a prompt message is sent to the user, which clearly informs the user that the unique component name needs to be re-entered, and the prompt message continues to be displayed until the user enters a component name that meets the uniqueness requirement.

3. The method according to claim 1, characterized in that After the step of associating with the newly created component data record, further comprising: After the configuration is completed, the complete data record of the component is saved to the custom component database, so that the custom component is displayed in the component list in the form of an icon. The icon display must accurately reflect the image content corresponding to the component icon file uploaded by the user, so that the user can intuitively identify and select the corresponding custom component.

4. The method according to claim 3, characterized in that After the step of saving the complete data record of the component to the custom component database, the method further includes: Receive the user's query instruction for a specific component name, search the custom component database according to the name, and determine whether the component name exists in the database; if the component name exists, extract all attribute information of the component from the database, and send it to the front-end display interface in accordance with the established front-end display format and rules for user viewing and further editing, and the specific content and editable entry corresponding to each attribute information must be clearly and accurately presented on the front-end display interface.

5. The method according to claim 3, characterized in that: After the step of saving the complete data record of the component to the custom component database, the method further includes: Receiving a drag operation instruction of the user on the custom component, parsing and obtaining canvas position information and component name information; According to the component name information, the core code of the component is queried from the custom component database, and the core code is used in combination with the canvas position information and the component style information to complete the rendering of the component on the canvas to obtain the rendered component. The rendering process must strictly follow the front-end code execution logic to ensure that the component is accurately rendered to the corresponding canvas position and the style meets the set requirements, and the relevant information of the rendered component is recorded in the memory. The relevant information covers key content such as the storage address and current status of the component in the memory, so that it can be accurately retrieved when performing related operations later.

6. The method according to claim 5, characterized in that After the step of recording the relevant information of the rendered component in the memory, the method further includes: After receiving the external data, the external data is sent to the rendered component. The rendered component is re-rendered according to the external data and the preset page rendering logic to achieve real-time update of the component data. The update process must ensure the smoothness of the page display and the accuracy of the data, and display the updated component status on the screen. The display effect should meet the user's visual and functional expectations for real-time data display.

7. The method according to claim 5, characterized in that After the step of saving the complete data record of the component to the custom component database, the method further includes: Receive event information triggered by the user, parse it to obtain the event type, query the component properties according to the event type to obtain the associated event identifier, and perform operations corresponding to the event identifier, including but not limited to activating other components in the system and executing specific workflows. During the execution of the operations, the consistency and accuracy of each operation link must be ensured to ensure that the entire system can trigger the normal flow of workflows based on events.

8. An HMI custom component implementation device, characterized in that: include: A generating module, for generating a component name input area in the HMI editing interface in response to a command to create a custom component; A creation module, used for receiving a custom component name input by a user and searching in a custom component database, creating a new component data record if there is no duplication, and setting the name of the new component to the custom component name input by the user; A first setting module, configured to receive and verify the component icon file uploaded by the user, and if the format is correct, set the component icon attribute to the uploaded component icon, and associate the icon with the newly created component data record; The second setting module is used to receive the component core code input by the user, verify the legitimacy of the reference if the code involves an external component, check the code integrity if it is an original component, set the core code attribute of the new component to the input component code, and associate it with the newly created component data record; A third setting module, configured to receive the setting information of the component style by the user, set the style attribute of the new component to the component style set by the user, and associate it with the newly created component data record; The association module is used to receive the data identification of the component input by the user, bind the data identification attribute of the new component to the data identification of the input component, and associate it with the newly created component data record.

9. A device, characterized in that: include: one or more processors; a storage device for storing one or more programs, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 7.

10. A readable storage medium having a program stored thereon, characterized in that: When the program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images