Control development method of human-computer interface and related device

Abstract

The invention discloses a human-computer interface control development method and related device.The method comprises the steps that a control template is obtained, and universal data structures, attributes and methods are preset in the control template, so that controls generated based on the control template have consistent interfaces and calling modes; on the basis of business demand data, expansion development is carried out on the basis of the control template, and a user-defined control is obtained; importing the user-defined control into a service configuration environment, and registering the user-defined control; and generating a control instance based on the custom control, and rendering a content area of the control instance. According to the scheme, definitions of general data structures, attributes and methods suitable for various controls are provided, so that all the controls have consistent interfaces and calling modes, a business party can expand the data structure of the control template according to own business requirements on the basis of the provided control template conforming to the content, and the service performance of the business party is improved. And various custom controls convenient for unified management and maintenance are efficiently developed.

Description

Technical Field

[0001] The present application relates to the field of computer application technology, and more specifically, to a control development method and related devices for a human-computer interface. Background Art

[0002] In the field of modern industrial production, real-time monitoring and control systems have become an indispensable component. Such systems need to have excellent characteristics such as high efficiency, reliability, and real-time. Traditional HMI (Human Machine Interface) systems usually provide basic monitoring and operation functions.

[0003] However, due to the complexity and diversity of industrial real-time monitoring systems, HMIs often need to be customized to meet the needs of different customers and the requirements of actual industrial production, and to achieve higher levels of functionality and flexibility. In this process, since each module needs to be developed, debugged, and maintained separately, and these modules have a lot of repetitive content, developers often need to spend a lot of time and energy to do some repetitive work to meet business needs on this basis. Summary of the invention

[0004] In view of this, this application provides the following technical solutions:

[0005] The first aspect of the present application provides a control development method for a human-computer interface, comprising:

[0006] Obtaining a control template, wherein the control template is pre-set with a common data structure, properties and methods, so that controls generated based on the control template have a consistent interface and calling method;

[0007] Based on the business demand data, expansion development is performed on the basis of the control template to obtain a custom control;

[0008] Importing the custom control into the business configuration environment and registering it;

[0009] A control instance is generated based on the custom control, and a content area of ​​the control instance is rendered.

[0010] In a possible implementation, after generating a control instance based on the custom control, the method further includes:

[0011] The resource data in the business configuration environment is passed to the control instance through parameters, so that the control instance supports the setting content corresponding to the resource.

[0012] In a possible implementation, based on the business demand data, on the basis of the control template, the extended development is performed according to the content defined in the control template to obtain a custom control, including:

[0013] Based on the business demand data, the control template is extended and developed according to the data structure and rendering method defined in the control template to obtain a custom control.

[0014] In a possible implementation, importing the custom control into a business configuration environment and registering it includes:

[0015] Packaging the custom control and importing it into a specified path in the business configuration environment;

[0016] After obtaining the resource of the custom component from the specified path, the custom component is registered in the business configuration environment.

[0017] In a possible implementation, generating a control instance based on the custom control and rendering a content area of ​​the control instance includes:

[0018] In the configuration environment, based on the dragging operation of the icon of the custom control in the control icon list, a control instance is obtained, wherein the dragging operation is an operation of dragging the custom control from the control list display area to the process drawing area;

[0019] Configuring the control instance based on the configuration data entered in the configuration field;

[0020] Saving the configured control instance;

[0021] Renders the content area of ​​the control instance.

[0022] In a possible implementation, the generation of the control icon list includes:

[0023] Request the resource of the custom control from the specified path and load the custom control list;

[0024] The custom control icon is identified through the standard interface provided by the custom control library, and the output control icon list is displayed in the configuration environment.

[0025] In a possible implementation, it also includes:

[0026] Preview the display effect of the control instance;

[0027] The configuration data of the control instance is adjusted based on the display effect.

[0028] The second aspect of the present application provides a control development device for a human-machine interface, comprising:

[0029] A template acquisition module, used to obtain a control template, wherein the control template is preset with a common data structure, properties and methods, so that the control generated based on the control template has a consistent interface and calling method;

[0030] A control development module is used to perform extended development based on the control template based on business demand data to obtain a custom control;

[0031] A control registration module, used to import the custom control into the business configuration environment and register it;

[0032] The control instance module is used to generate a control instance based on the custom control and render the content area of ​​the control instance.

[0033] A third aspect of the present application provides a computer program product, including computer-readable instructions. When the computer-readable instructions are executed on an electronic device, the electronic device implements any of the above-mentioned human-machine interface control development methods.

[0034] In a fourth aspect, the present application provides a computer storage medium, which carries one or more computer programs. When the one or more computer programs are executed by an electronic device, the electronic device can implement any of the above-mentioned human-computer interface control development methods.

[0035] It can be known from the above technical scheme that the embodiment of the present application discloses a control development method and related devices for a human-machine interface, the method comprising: obtaining a control template, the control template being pre-set with a general data structure, properties and methods, so that the control generated based on the control template has a consistent interface and calling method; based on business demand data, performing extended development on the basis of the control template to obtain a custom control; importing the custom control into a business configuration environment and registering it; generating a control instance based on the custom control, and rendering the content area of ​​the control instance. The above scheme provides definitions of general data structures, properties and methods applicable to various controls, so that all controls have a consistent interface and calling method. The business party can expand the data structure of the control template according to its own business needs based on the control template provided in accordance with the above content, and efficiently develop various custom controls that are easy to uniformly manage and maintain. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on the provided drawings without paying any creative work.

[0037] Figure 1 A flowchart of a space development method for a human-computer interface disclosed in an embodiment of the present application;

[0038] Figure 2 A schematic diagram of the data structure of the control disclosed in the embodiment of the present application;

[0039] Figure 3 A schematic diagram of the communication between the control disclosed in the embodiment of the present application and the configuration environment;

[0040] Figure 4 A schematic diagram of the usage of the control disclosed in the embodiment of the present application in a configuration environment;

[0041] Figure 5 A schematic diagram of communication between a control disclosed in an embodiment of the present application and a monitoring environment;

[0042] Figure 6 A schematic diagram of the use process of the industrial real-time monitoring scene control disclosed in the embodiment of the present application;

[0043] Figure 7 A schematic diagram of the structure of a control development device for a human-machine interface disclosed in an embodiment of the present application. DETAILED DESCRIPTION

[0044] For the purpose of reference and clarity, the descriptions, abbreviations or acronyms of the technical terms used below are summarized as follows:

[0045] HMI: short for Human Machine Interface, refers to the interface system that connects people and machines (or equipment), including various control panels used in industrial automation, mechanical equipment control, medical equipment, home appliances, etc. Through the HMI interface, users can interact with the machine, set, control and monitor operations, making the machine control more humane, efficient and intelligent, improving work efficiency and reliability, and facilitating user operation.

[0046] Configuration: In automation and control systems, configuration generally refers to the process of setting up and adjusting system components to ensure that they work together as expected. Configuration involves configuring hardware devices and software applications to meet specific application requirements. Some key aspects of configuration in automation and control systems include: hardware configuration, software configuration, network configuration, control logic configuration, parameter settings, user permissions and access control, etc.

[0047] Monitoring: In industrial scenarios, monitoring refers to the real-time monitoring and analysis of the operating status of automation and control systems. The main task of monitoring is to collect data and status of various sensors, actuators and other equipment in the system, monitor and analyze the signals, status, parameters, etc. of the equipment in real time, and display them to operators through a visual interface. The purpose of monitoring is to ensure that the system always runs in normal working conditions, detect and eliminate faults in a timely manner, and improve the stability, reliability and security of the system. Some key aspects of monitoring in automation and control systems include: hardware monitoring, software monitoring, equipment status monitoring, real-time data analysis, alarms and notifications, reports and trend analysis, etc.

[0048] Control: In software development, a block of code that can provide certain specific functions. For example, in a graphical user interface, buttons, text boxes, drop-down menus, check boxes, etc. are all controls. These controls can implement specific business functions through predefined properties and methods. In this article, controls refer to industrial real-time monitoring HMI special controls, which can be packaged and imported into the business environment for use. They provide preset properties and functions, which can improve development efficiency and realize customized functional requirements.

[0049] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0050] Figure 1 This is a flow chart of a space development method for a human-machine interface disclosed in an embodiment of the present application. Figure 1 As shown, the control development method of the human-machine interface may include:

[0051] Step 101: Obtain a control template, wherein the control template is pre-set with a common data structure, properties and methods, so that controls generated based on the control template have a consistent interface and calling method.

[0052] The common data structures, properties and methods are preset in the control template, which not only ensures that the custom controls obtained based on the control template have consistent interfaces and calling methods, but also avoids repetitive programming work for developers, helps to improve development efficiency and reduce development costs.

[0053] If the data structure can be in json data format, some basic properties of the control can be stored in json data format in the implementation. These properties can include but are not limited to size, position, scaling value, background color and other information. Figure 2 Example.

[0054] Step 102: Based on the business demand data, expansion development is performed on the basis of the control template to obtain a custom control.

[0055] In the implementation, the business developer can input the business requirement data to the execution subject of this application method, or directly input the relevant configuration operations based on the business requirements to realize the bare-metal development of the control template, thereby realizing the required business and obtaining a custom control dedicated to the specific business. Specifically, the business developer can carry out extended development according to the business requirements, according to the data structure and rendering method defined in the control template, to create a custom control and realize the business requirements.

[0056] Step 103: Import the custom control into the business configuration environment and register it.

[0057] After the custom control is developed, it can be packaged and imported into the business configuration environment. The custom control can be stored in the path specified by the business configuration environment and registered in the business configuration environment to facilitate the normal application of the custom control in the business configuration environment.

[0058] Step 104: Generate a control instance based on the custom control, and render the content area of ​​the control instance.

[0059] After completing the registration of the custom control, it can be identified and applied in the business configuration environment, generate the corresponding control instance, and display the control instance after rendering.

[0060] The above solution provides definitions of common data structures, properties, and methods applicable to various controls, so that all controls have consistent interfaces and calling methods. Business parties can expand the data structure of control templates based on their own business needs based on the control templates that meet the above content, and efficiently develop various custom controls that are easy to manage and maintain in a unified manner.

[0061] In the implementation, the control template needs to implement the code structure before it is put into use, encapsulate the logic and style files inside the control template, and provide the necessary interfaces. Implementing the code structure is equivalent to formulating a code rule. Users can expand the functions they need based on this rule to generate customized controls. Similarly, various controls can be quickly made based on the code structure. Finally, the made controls are applied to the product.

[0062] Specifically, based on the React framework, Vue framework or Angular framework, you can define a class named Control as the entry point for the entire control template. In the Control class, the data structure of the control is managed through the state management container class. At the same time, two more classes, Configuration and Runtime, can be defined to distinguish the logical processing of configuration and monitoring. Furthermore, by adopting a componentized development model and using the data in the state management to render the visual screen, the control display effect can be achieved. In addition, theme files, multi-language files, default icons, and basic examples can be provided for developers to use to complete the control template.

[0063] Therefore, by adopting the React framework, Vue framework or Angular framework and utilizing the component-based development model, various controls can be developed efficiently, improving development efficiency and saving development time.

[0064] In one implementation, after generating a control instance based on the custom control, the method may further include: passing resource data in the business configuration environment to the control instance through parameters, so that the control instance supports setting contents corresponding to the resources.

[0065] Specifically, after generating a control instance based on the custom control, the language environment variables, theme resources, data subscription and other information in the business configuration environment can be passed to the control module through parameters to achieve a more adaptive business effect. Figure 3 shown.

[0066] The parameters are some parameters in the configuration business environment. In many current industrial scenarios, it is necessary to support internationalization and multi-language usage scenarios. This information needs to be passed to the control through parameters. The control instance implements internationalization and multi-theme support internally according to different parameters and keeps synchronization with the product.

[0067] In this implementation, the definition and management of the control theme can be achieved by passing parameters in the business configuration environment. That is, developers are allowed to define and manage the theme of the control, including color, font, etc., so as to achieve personalized and customized appearance effects. On the other hand, resources in the business environment can be passed to the control for use, making the control more flexible and more versatile, and facilitating the use of complex industrial scenarios.

[0068] In one implementation, importing the custom control into a business configuration environment and registering it may include: packaging the custom control and importing it into a specified path in the business configuration environment; after obtaining the resources of the custom component from the specified path, registering the custom component in the business configuration environment.

[0069] In the implementation, in addition to importing custom controls into the business configuration environment, custom controls can also be packaged as npm packages (JavaScript modules that comply with npm specifications) and directly introduced and used in the business.

[0070] The generating of a control instance based on the custom control and rendering of the content area of ​​the control instance may include: in a configuration environment, obtaining a control instance based on a dragging operation of the icon of the custom control in a control icon list, wherein the dragging operation is an operation of dragging the custom control from a control list display area to a process drawing area; configuring the control instance based on configuration data input in a configuration field; saving the configured control instance; and rendering the content area of ​​the control instance.

[0071] The generation of the control icon list may include: requesting the resource of the custom control from the specified path and loading the custom control list; identifying the custom control icon through a standard interface provided by a custom control library, and displaying the output control icon list in a configuration environment.

[0072] Specifically, after the custom control is developed, it is packaged and imported into the business configuration environment. Each custom control is stored in a specific path of the business configuration environment. The business configuration environment will request the control module resources from the specified path and load the custom control list. Through the standard interface provided by the custom control library, the business configuration environment can identify the custom control icon and display the control icon list in the business configuration environment. At this point, the control module is registered to the business environment, and the Control class defined in the above content can be used to instantiate and create controls for use. The business party drags the control icon into the flow chart to generate a control instance, see Figure 4 shown.

[0073] After generating a control instance, you can use the configuration bar in the interface to set the required information for the control instance, such as common properties: position, size, scaling value, background color, etc. In addition, developers can add custom properties required by the control to meet business needs. After setting, save the operation. After saving, render the business screen in the monitoring environment according to the control configuration information. The communication process between the monitoring environment and the control is shown in Figure 5 shown.

[0074] Specifically, the storybook library can be used in the implementation, and developers can preview the different display effects of the controls under configuration and monitoring. Alternatively, the Webpack or Vite tools can be used, and the control preview effect can also be achieved after configuration. Based on this, the control development method of the human-computer interface can also include: previewing the display effect of the control instance; adjusting the configuration data of the control instance based on the display effect. That is, before the control instance corresponding to the custom control is put into use, it can be debugged and simulated in real time in the business configuration environment. Developers can instantly preview and operate the effects during development, which is convenient for debugging interactive effects.

[0075] It should be noted that in the configuration environment, in addition to rendering the control content area, the work content also needs to display the control configuration field to allow users to configure the required properties. In the monitoring environment, only the control content area needs to be rendered, and the real-time monitoring content that users need to see is displayed according to the configured properties.

[0076] Figure 6 This is a schematic diagram of the use of the industrial real-time monitoring scene control disclosed in the embodiment of this application, which can be combined with Figure 6 Understand the above embodiments.

[0077] The control development method of the human-machine interface provided in the embodiment of the present application can be run on the HMI editing tool of the terminal and the web page, and the terminal includes: desktop application, web browser, mobile terminal, head-mounted terminal, etc. In the implementation, the solution implementation logic can be packaged into a reusable module, which can be registered and used in the business environment to facilitate the integration of different business systems and realize customized control requirements.

[0078] For the aforementioned method embodiments, for the sake of simplicity, they are all described as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the order of the actions described, because according to the present application, some steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.

[0079] The method is described in detail in the embodiments disclosed in the above-mentioned application. The method of the application can be implemented by various forms of devices. Therefore, the application also discloses a device, and a specific embodiment is given below for detailed description.

[0080] Figure 7 This is a schematic diagram of the structure of a control development device for a human-machine interface disclosed in an embodiment of the present application. Figure 7 As shown, the control development device 70 of the human-machine interface may include:

[0081] The template acquisition module 701 is used to obtain a control template. The control template is preset with a common data structure, properties and methods so that the control generated based on the control template has a consistent interface and calling method.

[0082] The control development module 702 is used to perform extended development based on the control template based on business demand data to obtain a custom control.

[0083] The control registration module 703 is used to import the custom control into the business configuration environment and register it.

[0084] The control instance module 704 is used to generate a control instance based on the custom control and render the content area of ​​the control instance.

[0085] The above solution provides definitions of common data structures, properties, and methods applicable to various controls, so that all controls have consistent interfaces and calling methods. Business parties can expand the data structure of control templates based on their own business needs based on the control templates that meet the above content, and efficiently develop various custom controls that are easy to manage and maintain in a unified manner.

[0086] In one implementation, the device may further include: a parameter transfer module, configured to transfer resource data in the business configuration environment to the control instance through parameters, so that the control instance supports setting content corresponding to the resource.

[0087] In one implementation, the control development module can be specifically used to: based on business demand data, expand and develop the control template according to the data structure and rendering method defined in the control template to obtain a custom control.

[0088] In one implementation, the control registration module may include: a control import module, used to package the custom control and import it into a specified path in the business configuration environment; a control registration submodule, used to register the custom component in the business configuration environment after obtaining the resources of the custom component from the specified path.

[0089] In one implementation, the control instance module can be specifically used to: in a configuration environment, obtain a control instance based on a drag operation of the icon of the custom control in the control icon list, wherein the drag operation is to drag the custom control from the control list display area to the process drawing area; configure the control instance based on the configuration data entered in the configuration field; save the configured control instance; and render the content area of ​​the control instance.

[0090] In one implementation, the generation of the control icon list includes: requesting the resources of the custom control from the specified path and loading the custom control list; identifying the custom control icon through the standard interface provided by the custom control library, and displaying the output control icon list in the configuration environment.

[0091] In one implementation, the device may further include: a preview debugging module, configured to preview the display effect of the control instance; and adjust the configuration data of the control instance based on the display effect.

[0092] The specific implementation of the control development device of the above-mentioned human-machine interface and the various modules it contains can be found in the content introduction of the corresponding part of the method embodiment, and will not be repeated here.

[0093] Any one of the human-machine interface control development devices described in the above embodiments includes a processor and a memory. The template acquisition module, control development module, control registration module, control instance module, etc. in the above embodiments are all stored in the memory as program modules, and the processor executes the above program modules stored in the memory to implement corresponding functions.

[0094] The processor includes a kernel, which retrieves the corresponding program module from the memory. One or more kernels can be set, and the processing of the access data can be realized by adjusting the kernel parameters.

[0095] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one memory chip.

[0096] In an exemplary embodiment, a computer-readable storage medium is also provided, which can be directly loaded into the internal memory of a computer and contains software code. After being loaded and executed by a computer, the computer program can implement the steps shown in any embodiment of the above-mentioned human-computer interface control development method.

[0097] In an exemplary embodiment, a computer program product is also provided, which can be directly loaded into the internal memory of a computer, and contains software code. After being loaded and executed by a computer, the computer program can implement the steps shown in any embodiment of the human-computer interface control development method described above.

[0098] In this specification, each embodiment is described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the embodiments can be referred to each other. For the device disclosed in the embodiment, since it corresponds to the method disclosed in the embodiment, the description is relatively simple, and the relevant parts can be referred to the method part.

[0099] It should also be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0100] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0101] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A control development method for a human-computer interface, characterized in that: include: Obtaining a control template, wherein the control template is pre-set with a common data structure, properties and methods, so that controls generated based on the control template have a consistent interface and calling method; Based on the business demand data, expansion development is performed on the basis of the control template to obtain a custom control; Importing the custom control into the business configuration environment and registering it; A control instance is generated based on the custom control, and a content area of ​​the control instance is rendered.

2. The control development method of the human-machine interface according to claim 1, characterized in that: After generating a control instance based on the custom control, the method further includes: The resource data in the business configuration environment is passed to the control instance through parameters, so that the control instance supports the setting content corresponding to the resource.

3. The method for developing controls for a human-machine interface according to claim 1, characterized in that: Based on the business demand data, on the basis of the control template, the extended development is performed according to the content defined in the control template to obtain a custom control, including: Based on the business demand data, the control template is extended and developed according to the data structure and rendering method defined in the control template to obtain a custom control.

4. The method for developing controls for a human-machine interface according to claim 1, characterized in that: The step of importing the custom control into the business configuration environment and registering the custom control comprises: Packaging the custom control and importing it into a specified path in the business configuration environment; After obtaining the resource of the custom component from the specified path, the custom component is registered in the business configuration environment.

5. The method for developing controls for a human-machine interface according to claim 4, characterized in that: The generating a control instance based on the custom control and rendering the content area of ​​the control instance includes: In the configuration environment, based on the dragging operation of the icon of the custom control in the control icon list, a control instance is obtained, wherein the dragging operation is an operation of dragging the custom control from the control list display area to the process drawing area; Configuring the control instance based on the configuration data entered in the configuration field; Saving the configured control instance; Renders the content area of ​​the control instance.

6. The method for developing controls for a human-machine interface according to claim 5, characterized in that: The generation of the control icon list includes: Request the resource of the custom control from the specified path and load the custom control list; The custom control icon is identified through the standard interface provided by the custom control library, and the output control icon list is displayed in the configuration environment.

7. The method for developing controls for a human-machine interface according to claim 1, characterized in that: Also includes: Preview the display effect of the control instance; The configuration data of the control instance is adjusted based on the display effect.

8. A control development device for a human-machine interface, characterized in that: include: A template acquisition module, used to obtain a control template, wherein the control template is preset with a common data structure, properties and methods, so that the control generated based on the control template has a consistent interface and calling method; A control development module is used to perform extended development based on the control template based on business demand data to obtain a custom control; A control registration module, used to import the custom control into the business configuration environment and register it; The control instance module is used to generate a control instance based on the custom control and render the content area of ​​the control instance.

9. A computer program product, characterized in that It comprises computer-readable instructions, and when the computer-readable instructions are executed on an electronic device, the electronic device implements the control development method of a human-machine interface as claimed in any one of claims 1 to 7.

10. A computer storage medium, characterized in that: The storage medium carries one or more computer programs, and when the one or more computer programs are executed by an electronic device, the electronic device can implement the human-machine interface control development method as described in any one of claims 1 to 7.

Images