A configuration picture real-time generation method, an interaction system and related devices

Abstract

The application discloses a configuration picture real-time generation method, an interactive system and related devices, relates to the technical field of configuration picture generation, and comprises the following steps: performing lexical analysis and syntax analysis on an obtained current round of interpretative interface description instructions to obtain an abstract syntax tree of the current round; generating a virtual DOM of the current round based on the abstract syntax tree of the current round; when the current round is the first round, the virtual DOM of the current round is determined as a total virtual DOM; when the current round is the nth round, the virtual DOM of the previous round is updated based on a Diff algorithm and the virtual DOM of the current round to obtain an updated virtual DOM of the current round, and the virtual DOM of the current round is determined as the total virtual DOM, wherein n is greater than or equal to 2; and the total virtual DOM is transmitted to a real DOM rendering engine to generate a configuration picture. The application can generate interpretative interface description instructions according to user requirements, so that the configuration picture can be generated in real time.

Description

Technical Field

[0001] This application relates to the field of configuration screen generation technology, and in particular to a method for real-time generation of configuration screens, an interactive system, and related devices. Background Technology

[0002] Traditional HMI (Human-Machine Interface) screens in industrial control are compiled, requiring the screen to be created and its content edited in configuration software, including the creation of graphical components and the binding of these components to third-party device data. After editing, the screen needs to be compiled to generate a project file, which is then downloaded to the HMI device. The HMI device also needs to be restarted for the changes to take effect. This entire process is relatively cumbersome for users. When the scope of user modifications is relatively simple and clear, it cannot be completed quickly and easily. Summary of the Invention

[0003] The purpose of this application is to provide a method, interactive system and related devices for real-time generation of configuration screens, which can realize the real-time generation of configuration screens.

[0004] To achieve the above objectives, this application provides the following solution: Firstly, this application provides a method for real-time generation of configuration screens, including: Obtain the explanatory interface description instruction for the current round; the explanatory interface description instruction is used to describe the configuration screen content designed by the user.

[0005] Lexical analysis and syntax parsing are performed on the explanatory interface description instructions of the current round to obtain the abstract syntax tree of the current round.

[0006] The virtual DOM for the current iteration is generated based on the abstract syntax tree of the current iteration.

[0007] When the current round is round 1, the virtual DOM of the current round is determined as the total virtual DOM.

[0008] When the current round is the nth round, based on the Diff algorithm and the virtual DOM of the current round, the virtual DOM of the previous round is updated to obtain the updated virtual DOM of the current round, and the updated virtual DOM of the current round is determined as the total virtual DOM; n≥2.

[0009] The total virtual DOM is passed to the real DOM rendering engine; the real DOM rendering engine is used to generate configuration screens based on the total virtual DOM.

[0010] Optionally, the explanatory interface description instructions include one or more of the following: root node instructions, structure instructions, style instructions, dynamic instructions, data binding instructions, dynamic interaction instructions, and import instructions.

[0011] The root node instruction includes the height and width values ​​of the root container; the root node instruction is used to create the root container.

[0012] The structural instructions include component type and component information; the structural instructions are used to create components.

[0013] The style instruction includes style type and style information; the style instruction is used to describe the visual style of a component or the global context.

[0014] The dynamic instructions include variable definition information, variable interpolation information, and variable condition information; the dynamic instructions are used to describe the dynamic changes in the screen.

[0015] The data binding instruction includes a device ID, a device variable ID, and a data type; the data binding instruction is used to synchronize device variable data.

[0016] The dynamic interaction instructions include event types and event parameters; the dynamic interaction instructions are used to describe dynamically changing screen content.

[0017] The import instruction includes an import instruction path; the import instruction is used to obtain general style or reusable component information.

[0018] Secondly, this application provides an industrial Internet of Things (IoT) terminal, including: a memory, a processor, and a computer program stored in the memory and capable of running on the processor, wherein the processor executes the computer program to implement the steps of the configuration screen real-time generation method described in any one of the above.

[0019] Thirdly, this application provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the real-time configuration screen generation method described above.

[0020] Fourthly, this application provides an interactive system, including a configuration screen design terminal and a data processing system.

[0021] The configuration screen design terminal is used for: Obtain user operation information for the current round; the user operation information includes configuration screen content information.

[0022] Based on the user operation information of the current round, an explanatory interface description instruction for the current round is generated and sent to the data processing system.

[0023] The data processing system is used to execute the steps of the real-time configuration screen generation method described in any one of the above statements.

[0024] According to the specific embodiments provided in this application, this application has the following technical effects: This application provides a method, interactive system, and related apparatus for real-time generation of configuration screens. First, it obtains the current round of interpretive interface description instructions (used to describe the configuration screen content designed by the user), and performs lexical analysis and syntax parsing on these instructions to obtain the current round's abstract syntax tree. In other words, this application uses structured interpretive interface description instructions to describe the content information of the configuration screen (such as the components, styles, and interaction information of the configuration screen). This allows the configuration screen content information to be directly used to generate an abstract syntax tree, thereby constructing a virtual DOM. When the current round is round 1, this is passed to the real DOM rendering engine to generate the corresponding configuration screen. When a new round of interpretive interface description instructions is generated (i.e., an incremental description instruction is generated), based on the Diff algorithm, the virtual DOM generated by parsing the incremental description instruction is compared with the previous virtual DOM to update the virtual DOM. This allows the screen content corresponding to the incremental description instruction to be displayed and updated in real time, achieving real-time generation of the configuration screen. Attached Figure Description

[0025] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0026] Figure 1 This is an application environment diagram of a real-time configuration screen generation method according to an embodiment of this application; Figure 2 A flowchart illustrating a real-time configuration screen generation method provided in an embodiment of this application; Figure 3 This is a schematic diagram of the configuration screen design content provided in one embodiment of this application; Figure 4 A configuration screen real-time generation method provided in an embodiment of this application is shown in the following image during execution. Figure 1 ; Figure 5 A configuration screen real-time generation method provided in an embodiment of this application is shown in the following image during execution. Figure 2 ; Figure 6 This is a schematic diagram of the structure of an industrial Internet of Things (IoT) terminal provided in one embodiment of this application; Figure 7 This application provides a schematic diagram of an interactive system structure according to an embodiment of the present application; Figure 8 This application provides a timing diagram of a method for real-time generation of configuration screens in an interactive system, according to one embodiment. Detailed Implementation

[0027] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0028] To make the above-mentioned objectives, features and advantages of this application more apparent and understandable, the application will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0029] The real-time configuration screen generation method provided in this application embodiment can be applied to, for example... Figure 1 In the application environment shown, terminal 102 communicates with server 104 via a network. A data storage system can store the data that server 104 needs to process. The data storage system can be set up independently, integrated into server 104, or placed in the cloud or on another server. Terminal 102 can send the current round's interpreted interface description instruction to be processed to server 104. After receiving the current round's interpreted interface description instruction, server 104 performs lexical analysis and syntax parsing on the instruction to be processed, obtaining the current round's abstract syntax tree; generates the current round's virtual DOM based on the current round's abstract syntax tree; when the current round is round 1, the current round's virtual DOM is determined as the total virtual DOM; when the current round is round n, based on the Diff algorithm and the current round's virtual DOM, the previous round's virtual DOM is updated to obtain the updated current round's virtual DOM, and the updated current round's virtual DOM is determined as the total virtual DOM; n≥2; the total virtual DOM is then passed to the real DOM rendering engine. In addition, in some embodiments, the real-time configuration screen generation method can also be implemented by the server 104 or the terminal 102 separately. For example, the terminal 102 can directly perform real-time configuration screen generation processing for the explanatory interface description instructions of the current round to be processed, or the server 104 can obtain the explanatory interface description instructions of the current round to be processed from the data storage system and perform real-time configuration screen generation processing for the explanatory interface description instructions of the current round to be processed.

[0030] The terminal 102 can be, but is not limited to, various desktop computers, laptops, smartphones, tablets, IoT devices, and portable wearable devices. IoT devices can include industrial IoT screens, industrial HMI devices, smart speakers, smart TVs, smart air conditioners, and smart vehicle devices. Portable wearable devices can include smartwatches, smart bracelets, and head-mounted devices. The server 104 can be implemented using a standalone server or a server cluster composed of multiple servers, or it can be a cloud server.

[0031] In one exemplary embodiment, such as Figure 2 As shown, a method for real-time generation of configuration screens is provided. This method is executed by a computer device, specifically by a terminal or server alone, or by both a terminal and a server. In this embodiment, the method is applied to... Figure 1 Taking server 104 as an example, the explanation includes the following steps 201 to 205. Wherein: Step 201: Obtain the explanatory interface description instruction for the current round; the explanatory interface description instruction is used to describe the configuration screen content designed by the user.

[0032] The rounds can be divided either by function keys or automatically according to a preset number of entries.

[0033] Step 202: Perform lexical analysis and syntax parsing on the explanatory interface description instructions of the current round to obtain the abstract syntax tree of the current round.

[0034] Step 203: Generate the virtual DOM for the current round based on the abstract syntax tree of the current round.

[0035] Step 204: When the current round is round 1, determine the virtual DOM of the current round as the total virtual DOM. When the current round is round n, based on the Diff algorithm and the virtual DOM of the current round, update the virtual DOM of the previous round to obtain the updated virtual DOM of the current round, and determine the updated virtual DOM of the current round as the total virtual DOM; n≥2.

[0036] Step 205: Pass the total virtual DOM to the real DOM rendering engine; the real DOM rendering engine is used to generate configuration screens based on the total virtual DOM.

[0037] By implementing steps 201 to 205 above, the content information of the configuration screen (such as the components, styles, and interaction information of the configuration screen) is described using structured interpretive interface description instructions. In this way, the content information of the configuration screen can be directly generated into an abstract syntax tree, and then a virtual DOM is constructed. When the current round is the first round, it is passed to the real DOM rendering engine to generate the corresponding configuration screen. When a new round of interpretive interface description instructions is generated (i.e., an incremental description instruction is generated), the virtual DOM generated by parsing the incremental description instruction is compared with the previous virtual DOM based on the Diff algorithm to update the virtual DOM. This allows the screen content corresponding to the incremental description instruction to be displayed and updated in real time, realizing the real-time generation of the configuration screen.

[0038] As an optional implementation, a set of structured, interpretive interface description instructions is defined for the design content of the configuration screen. These instructions describe the structure, style, and interaction logic of the screen. The syntax design references the tag-based features of HTML but focuses more on the screen composition scenario. The instruction definitions follow the following unified rules: Syntax style: Employs XML tag-based structure (compatible with HTML parsing habits, reducing development costs), with tags either paired or self-closing.

[0039] Case sensitivity rules: Tag names, attribute names, and keywords (such as If, For, bind) are strictly case-sensitive (e.g.: <container> ≠ <container>, onClick ≠ onclick).

[0040] Attribute format: All attribute values are wrapped in double quotes "", and multiple attributes are separated by spaces; support for static values, variable interpolation ({{variable name}}), and expressions.

[0041] Variable rules: Variable names are composed of letters, numbers, and underscores (the first character is not a number), and support for array / object indexing (such as {{sensorList[0].value}}).

[0042] Coding specification: Instruction strings uniformly use UTF-8 encoding, and special characters need to be escaped ("→", <→<, >→>).

[0043] Comment format: <!-- Comment content --> (not involved in parsing, only used for document description).

[0044] Instruction priority: Inline style (style attribute) > global style ( <style>标签）；本地变量（<Var>）＞设备绑定变量（bind）。

[0045] 所述解释型界面描述指令包括：根节点指令、结构指令、样式指令、动态指令、数据绑定指令、动态交互指令和引入指令中的一种或多种。

[0046] 所述根节点指令包括根容器的高度值和宽度值；所述根节点指令用于创建根容器。

[0047] 根节点指令包括HMI根节点，格式例如：<HMI width="数值" height="数值" title="字符串">...< / HMI>。

[0048] 其中，width：画面宽度（像素，必填）；height：画面高度（像素，必填）；title：面板标题（可选）。

[0049] 整个HMI画面的根容器，所有元素必须嵌套其中（唯一根节点）。

[0050] 所述结构指令包括组件类型和组件信息；所述结构指令用于创建组件。

[0051] 组件类型包括容器组件、按钮组件、文本组件、数值显示组件、进度条组件、图片组件、列表组件等。

[0052] 容器组件对应的结构指令格式可以为：<Container id="字符串" layout="flex / grid" direction="row / column" gap="数值" padding="数值">...< / Container>。

[0053] 其中，id：唯一标识（可选）；layout：布局方式（flex / grid，必填）；direction：flex方向（仅 layout=flex 时有效）；gap：子元素间距（像素，可选）；padding：内边距（像素，可选）。

[0054] 容器组件对应的结构指令可以用于界面布局分组，支持嵌套（如划分标题区、数据区）。

[0055] 按钮组件对应的结构指令格式可以为：<Button id="字符串" text="字符串" class="字符串" onClick="函数名(参数)" style="样式">...< / Button>。

[0056] 其中，text：按钮文本（必填）；class：样式类名（关联<Style>标签，可选）；onClick：点击事件（绑定函数，可选）。

[0057] 按钮组件对应的结构指令可以用于触发交互操作（设备控制、页面跳转等）。

[0058] 文本组件对应的结构指令格式可以为：<Text id="字符串" text="字符串 / {{变量}}" style="样式">...< / Text>。

[0059] 其中，text：显示内容（支持变量插值，必填）；支持所有样式属性（可选）。

[0060] 文本组件对应的结构指令可以用于静态 / 动态文本显示（如标题、状态描述）。

[0061] 数值显示组件对应的结构指令格式可以为：<NumberDisplay id="字符串" bind="deviceId:xxx, varId:xxx, dataType:xxx, unit:xxx, refresh:xxx" style="样式" onValueChange="函数名(参数)" / >。

[0062] 其中，bind：数据绑定参数（必填，用逗号分隔）；onValueChange：数值变化事件（可选）。

[0063] 数值显示组件对应的结构指令可以用于实时显示设备数值型数据（温度、压力、负荷等）。

[0064] 进度条组件对应的结构指令格式可以为：<Progress id="字符串" bind="deviceId:xxx,varId:xxx" min="数值" max="数值" fill="颜色" height="数值" / >。

[0065] 其中，bind：绑定进度变量（必填）；min / max：取值范围（默认 0-100，可选）；fill：填充颜色（可选）；height：进度条高度（可选）。

[0066] 进度条组件对应的结构指令可以用于可视化展示百分比数据（运行负荷、填充进度等）。

[0067] 图片组件对应的结构指令格式可以为：<Image id="字符串" src="路径" width="数值" height="数值" visible="布尔 / {{表达式}}" / >。

[0068] 其中，src：图片路径（本地 / HTTP，必填）；visible：是否显示（支持表达式，可选）。

[0069] 图片组件对应的结构指令可以用于显示设备图标、状态图标等。

[0070] 列表组件对应的结构指令格式可以为：<For each="item in 数组变量" key="item.唯一字段">...< / For>。

[0071] 其中，each：循环语法（item为循环项，数组变量为数据源，必填）；key：循环项唯一标识（必填，避免重复）。

[0072] 列表组件对应的结构指令可以用于批量渲染列表数据（多传感器、多设备状态）。

[0073] 所述样式指令包括样式类型和样式信息；所述样式指令用于描述组件或全局的视觉样式。

[0074] 所述样式类型包括内联样式指令和全局样式指令。

[0075] 内联样式对应的样式指令格式可以为：<组件 style="属性名:值; 属性名:值;..." / >。

[0076] 支持 CSS 核心样式：width / height / color / background / font-size / border等。

[0077] 内联样式对应的样式指令可以直接为单个组件设置样式（优先级最高）。

[0078] 全局样式对应的样式指令格式可以为：<Style>#id选择器 { 样式属性:值;}.class选择器 { 样式属性:值;}标签选择器 { 样式属性:值;}< / style> .

[0079] Among them, selectors: Support #id (match by ID),.class (match by class name), and tag name (match by component type).

[0080] The style instructions corresponding to the global style can define global styles and be applied to multiple components in batches (with a lower priority than the inline style).

[0081] The dynamic instructions include variable definition information (corresponding to variable definition instructions), variable interpolation information (corresponding to variable interpolation instructions), and variable condition information (corresponding to conditional instructions); the dynamic instructions are used to describe the dynamic change relationship of the screen.

[0082] The format of the variable definition instruction can be: <var name="变量名" type="int / float / string / bool / array / object" value="初始值">< / var> .

[0083] Among them, name: variable name (required); type: variable type (required); value: initial value (required).

[0084] The variable definition instruction can be used to define local static variables for interface instructions to reference.

[0085] The format of the variable interpolation instruction can be: {{variable name}} / {{variable.property}} / {{expression}}.

[0086] The variable interpolation instruction supports arithmetic operations ({{(a+b) / 2}}), logical operations ({{status === 'running'}}), and function calls ({{num.toFixed(2)}}).

[0087] Variable interpolation commands can be used to dynamically replace variable values ​​and update displayed content.

[0088] The format of a conditional directive can be: <if condition="布尔表达式"> child elements< / if> .

[0089] Wherein, condition: trigger condition (boolean expression, required); child element: render when the condition is true.

[0090] Conditional commands can be used to conditionally display interface elements (such as alarm prompts for exceeding limits).

[0091] The data binding instruction includes a device ID, a device variable ID, and a data type; the data binding instruction is used to synchronize device variable data.

[0092] The data binding instruction format can be: bind="deviceId:device ID, varId:variable ID, dataType:data type, unit:unit, refresh:refresh frequency".

[0093] Among them, deviceId: unique device ID (required); varId: device variable ID (required); dataType: data type (int / float / string / bool, required); unit: display unit (optional); refresh: refresh rate (milliseconds, optional, default 1000).

[0094] Data binding commands can be used to synchronize device variable data in real time and automatically update the interface.

[0095] The dynamic interaction instructions include event types and event parameters; the dynamic interaction instructions are used to describe dynamically changing screen content.

[0096] The event types include click events and numerical change events.

[0097] The format of the dynamic interaction command corresponding to the click event can be: onClick="function_name(parameter1, parameter2, ...)".

[0098] Among them, function name: supports built-in functions (startDevice / stopDevice) or user-defined functions; parameters: supports static values ​​and variable interpolation.

[0099] The dynamic interactive instructions corresponding to the click event can be used to trigger logic (device control, variable modification, etc.) when the component is clicked.

[0100] The dynamic interactive command format corresponding to the numerical change event can be: onValueChange="functionName({{variable}})".

[0101] Among them, the triggering time is when the value of the bound device variable changes; the parameter is the current value of the variable (variable interpolation is supported).

[0102] Dynamic interactive commands corresponding to numerical change events can be used to trigger callbacks when data changes (such as over-temperature alarms and threshold reminders).

[0103] The import instruction includes an import instruction path; the import instruction is used to obtain general style or reusable component information.

[0104] Introducing instruction formats, for example: <import src="外部指令文件路径" / > .

[0105] Wherein, src: file path (local / HTTP, required).

[0106] Import directives can be used to import common directive fragments (general styles, reusable components) to reduce redundancy.

[0107] In one exemplary embodiment, such as Figure 3 As shown, the configuration screen design includes: Displays basic device information (device ID, name); displays core data in real time (temperature, pressure, operating load); displays device start / stop control buttons (click to start / stop, update status); displays a red alarm when temperature exceeds the limit; displays real-time data from 3 sensors; the interface layout is "top title bar + left control area + middle data area + right sensor list".

[0108] Step 202 specifically includes: Step 2021: Perform lexical analysis on the explanatory interface description instructions in the current round to obtain multiple lexical units; each lexical unit includes an instruction tag and instruction tag information corresponding to the instruction tag; the instruction tag information includes an instruction tag name, an instruction tag type, and an instruction tag attribute type; the instruction tag type includes non-self-closing tags and self-closing tags; the instruction tag attribute type includes static attributes, variable interpolation attributes, bound expression attributes, function call attributes, and dynamic logic attributes.

[0109] Lexical analysis is used to split the instruction string into tokens, for example: Tag Token: <hmi> 、 <container> 、 <button>、.

[0110] Attribute Token: width="800", onClick="startDevice(...), bind="deviceId:1001...".

[0111] Text Token: "Start Device", "Real-time Temperature:".

[0112] Variable Token: {{targetDeviceId}}, {{sensor.value}}.

[0113] Step 2022 involves parsing each lexical unit to obtain an AST node, and constructing an abstract syntax tree based on all AST nodes; wherein, parsing each lexical unit may specifically include: The instruction tag is parsed into an AST node; wherein, when the instruction tag is a self-closing tag, the AST node corresponding to the instruction tag is marked as a self-closing tag node; when the instruction tag is a double tag, the AST node corresponding to the instruction tag is marked as a non-self-closing tag node, and the sub-tags of the double tag are stored in the sub-nodes of the non-self-closing tag node.

[0114] The type field of the AST node is determined to be the instruction label name.

[0115] Specifically, the instruction tag (root tag). <hmi>The corresponding Program.root node in the AST has type: "HMI".

[0116] in, <hmi>The attributes (width / height / title) are extracted into the props field of the AST node. The root node has no parent node, and all other nodes are its child nodes.

[0117] For example, the instruction: <hmi width="800" height="600" title="一号反应釜PLC监控面板">The corresponding AST nodes are: { type: "HMI", props: { width: "800", height: "600", title: "No. 1 Reactor PLC Monitoring Panel"}, children: []}.

[0118] Other instruction tags: <var> / <style> / <Container> / <Text> / <Button> / <NumberDisplay> / <If> / <For>，对应AST节点的type字段（值为标签名，大小写一致）。

[0119] 自闭合标签（如<Var / >）在AST中标记selfClosing: true，无子节点。

[0120] 双标签（如<If>< / If>）标记selfClosing: false，子标签存入子节点。

[0121] 例如指令：<Var name="deviceId" type="int" value="1001" / >，对应的AST节点：{type: "Var", props: { name: "deviceId", type: "int", value: "1001"}, selfClosing: true, comments: "设备唯一ID"}。

[0122] 当所述指令标签的指令标签属性类型为静态属性时，将所述指令标签的值解析为所述AST节点的props字段。

[0123] 当所述指令标签的指令标签属性类型为变量插值属性时，在所述AST节点下增加Interpolation类型的子节点，并对变量插值属性的内容进行解析。

[0124] 当所述指令标签的指令标签属性类型为绑定表达式属性时，在所述AST节点下增加BindExpression类型的子节点，并拆分参数。

[0125] 当所述指令标签的指令标签属性类型为函数调用属性时，在所述AST节点下增加FunctionCall类型的子节点，并提取函数名和参数。

[0126] 静态属性：值为纯文本，直接存入props[属性名]；变量插值属性：值含{{}}，解析为Interpolation类型子节点；绑定表达式属性（如bind）：解析为BindExpression类型子节点，拆分参数；函数调用属性（如onClick）：解析为FunctionCall类型子节点，提取函数名+参数。例如：指令：<Button onClick="startDevice(deviceId={{deviceId}}, delay=1000)" / >，对应的AST节点为：{ type: "Button", props: { onClick: { type: "FunctionCall", name: "startDevice", parameters: [{name: "deviceId", value: {type: "Variable", name:"deviceId"}}, {name: "delay", value: {type: "Literal", value: "1000"}}]}}}。

[0127] 其中，对变量插值属性的内容进行解析，包括：将变量名解析为Variable节点，将数组和对象访问解析为VariableAccess节点，将三元表达式解析为ConditionExpression节点。

[0128] 具体的，指令中{{变量名}}解析为AST的Variable节点（type: "Variable"，name:变量名）；数组 / 对象访问（如{{sensorList[0].threshold}}）解析为VariableAccess节点（name: 数组名，index: 索引，property: 属性名）；三元表达式（如{{deviceStatus === '运行中' ? '#2ecc71' : '#95a5a6'}}）解析为ConditionExpression节点（left / operator / right / trueValue / falseValue）。

[0129] 例如指令：指令：text="{{deviceStatus === '运行中' ? '#2ecc71' : '#95a5a6'}}"，对应的AST节点：{ type: "ConditionExpression", left: {type: "Variable", name: "deviceStatus"}, operator: "===", right: {type: "Literal", value: "运行中"},trueValue: {type: "Literal", value: "#2ecc71"}, falseValue: {type: "Literal",value: "#95a5a6"}}。

[0130] 当所述指令标签的指令标签属性类型为动态逻辑属性时，将条件逻辑表达式解析为条件节点；将循环逻辑表达式解析为循环节点。例如：指令<If condition="表达式">解析为AST的If节点，props.condition为ConditionExpression类型；<If>的子标签存入AST的子节点，仅当条件为true时保留。指令：<If condition="reactor_temp>{{sensorList[0].threshold}}"><Text>超标< / Text>< / If>，对应的AST节点为：{ type: "If", props: { condition: { type: "ConditionExpression",left: {type: "Variable", name: "reactor_temp"}, operator: ">", right: {type:"VariableAccess", name: "sensorList", index: 0, property: "threshold"}}},children: [{type: "Text", props: {text: "超标"}}]}。

[0131] 指令<For each="item in array" key="key">解析为AST的For节点；props.each：item为循环项名，array为Variable节点；props.key：VariableAccess节点（指定循环唯一标识）；循环体子标签存入children。

[0132] 指令：<For each="sensor in sensorList" key="sensor.sensorId"><Text>{{sensor.name}}< / Text>< / For>，对应的AST节点为：{ type: "For", props: { each: {item: "sensor", array: {type: "Variable", name: "sensorList"}}, key: {type: "VariableAccess", name: "sensor", property: "sensorId"}}, children: [{type: "Text", props: {text:{type: "VariableAccess", name: "sensor", property: "name"}}}]}。

[0133] 对样式信息进行解析，包括：将样式信息中的CSS文本直接存入AST节点的content字段。

[0134] 具体的，指令<Style>内的CSS文本直接存入AST的content字段；CSS选择器 / 属性不解析（保留原始文本，由前端后续处理）。

[0135] 例如指令：<Style>#titleBar { background: #2c3e50;}< / style> The corresponding AST node: { type: "Style", props: {}, content: "#titleBar { background: #2c3e50;}", comments: "Global style definition"}.

[0136] When parsing the comment information, the <!-- Comment content --> is parsed into the comments field of the AST node; the inline comment (such as <var>< / var> <!-- Device ID -->) is bound to the comments of the corresponding node; the block comment (such as <!--1. Define variables -->) is bound to the comments of the parent node.

[0137] For example, the instruction: <!-- Unique device ID --> <var name="deviceId" type="int" value="1001">< / var> The corresponding AST node: { type: "Var", props: {...}, comments: "Unique device ID"}.

[0138] Preferably, after step 202 is executed, semantic verification is further included, specifically: Check the legality of the label (such as <hmi> 、 <container>(These are predefined tags; no illegal tags exist).

[0139] Validate the bind attribute parameters (deviceId, varId, dataType) to ensure they are complete and refresh is a positive integer.

[0140] Check function bindings (startDevice and stopDevice are built-in HMI functions, exist and their parameters match).

[0141] Variable reference validation ({{deviceStatus}} was not in) <var>(Defined in the document, but belongs to device dynamic variables, allowing delayed binding).

[0142] After successful validation, the complete AST (Abstract Syntax Tree) is output.

[0143] Step 203 includes mapping the AST nodes of the current round of the abstract syntax tree to JavaScript objects, that is, recursively creating DOM elements: root node <hmi>correspond ； <container>correspond ； < / container> < / hmi> < / var> < / container> < / hmi> < / var> < / hmi> < / hmi> < / hmi> < / button> <button> correspond< / button> <button id="startBtn" class="btn-start" style="..."> Start the device< / button> ； <numberdisplay>correspond -- ℃ (Display "--" when there is no data initially); Mount all DOM elements hierarchically to the page container of the HMI device (e.g., document.getElementById("hmi-container")).

[0144] The abstract syntax tree includes view element nodes, style element nodes, and logic control element nodes; step 203 also includes: Step 2031: Generate the calculated style for the current round based on the view element node and the style element node of the current round.

[0145] Step 2032: parse the logic control element node of the current round to obtain the dynamic instruction parsing result of the current round.

[0146] Step 2033: Based on the calculation style and the dynamic instruction parsing result of the current round, construct the virtual DOM for the current round.

[0147] Step 2031 includes: S10, for the style element node in the current round, extract the class selector and style attribute set from the CSS text in the style element node, and construct a global style registry based on the class selector and the style attribute set; the global style registry includes the mapping relationship between the class selector and the style attribute set.

[0148] S11, extract the class attribute and inline style attribute of the view element node in the current round, and use the class name contained in the class attribute as an index to retrieve the corresponding style attribute set from the global style registry as the class style.

[0149] S12, merge the class styles corresponding to each class name according to the definition order of the class names in the class attributes, and merge the merged class styles with the inline style attributes according to a preset priority to generate the calculation style for the current round; the preset priority is: inline style has a higher priority than class style.

[0150] Step 2031 involves combining inline styles (the `style` attribute) with... <style>标签中的全局样式合并（内联样式优先级更高），例如Button的最终样式为border: none; border-radius:4px; padding:10px 20px; color:white; background:#2ecc71（btn-start类样式）。

[0151] 所述逻辑控制元素节点包括条件渲染元素节点和循环元素节点；步骤2032包括：S21，从当前轮次的所述条件渲染元素节点中提取condition属性值作为条件表达式，解析所述条件表达式引用的状态变量，当判定所述状态变量未初始化时，标记所述状态变量为待数据绑定状态。

[0152] S22，从当前轮次的所述循环元素节点中提取each属性值作为集合表达式，解析所述集合表达式中的集合变量及迭代变量，并根据所述集合变量对应的集合元素数量，生成对应数量的虚拟DOM子节点模板；所述虚拟DOM子节点模板中以所述迭代变量作为占位符索引。

[0153] 步骤2032是完成动态指令解析，例如：<If condition="temp>80">：初始无temp变量值，暂标记为"待数据绑定后渲染”；<For each="sensor in sensorList">：遍历sensorList数组（3个元素），生成3个对应虚拟DOM子节点。

[0154] 本实施例中，采用Web-based HMI设备，虚拟DOM在HMI设备中创建，真实DOM渲染引擎为浏览器，执行步骤205前，界面如图4所示，此时界面显示内容为空，执行步骤205后，界面（如图5所示），将呈现：800×600像素的监控面板，顶部显示"一号反应釜（设备 ID：1001）”。

[0155] 左侧有绿色"启动设备”和红色"停止设备”按钮，点击后1秒内设备状态从"停止”变为"运行中”（绿色文字）。

[0156] 中间区域显示实时温度（如25.3℃）、压力（如0.75MPa）、运行负荷（如65%进度条）。

[0157] 当温度超过80℃时，自动显示红色"温度超标！”提示。

[0158] 右侧循环显示3个传感器的数据（传感器A：24.5℃、传感器B：0.75MPa、传感器C：65%）。

[0159] 所有数据每500毫秒刷新一次，界面无卡顿，操作即时生效。

[0160] 应用效果：画面的图元的交互响应。

[0161] 1.用户点击"启动设备”按钮（例如，图5中左上角的按钮）：真实DOM的onClick事件触发，执行startDevice(1001,1000)函数；函数向设备发送启动指令，同时更新本地动态变量deviceStatus为"运行中”。

[0162] 2.变量更新触发重新解析：deviceStatus变化后，指令解析引擎重新解析包含{{deviceStatus}}的指令片段，生成新的虚拟DOM节点；Diff算法识别到<Textid="statusText">的text属性从"停止”变为"运行中”，颜色从#95a5a6变为#2ecc71。

[0163] 3.界面实时更新：渲染引擎执行差异操作，仅更新statusText的文本和颜色，用户立即看到设备状态变化，无需手动刷新。

[0164] 配图：工程画面生成了可交互的"开关”按钮，并实际绑定到了变量中，且传感器也为可输入状态。

[0165] 本申请采用实时解释型方式（解释型界面描述指令），HMI工控界面显示技术底层采用HMTL5技术。基于HTML技术，设计专用的解释型界面描述指令，构建类React的虚拟DOM（Virtual DOM）机制。实现解释型界面描述指令的实时解析、动态画面元素与数据绑定、前端最终运行界面的高效渲染，最终达成"指令输入即界面呈现”的即时响应效果，无需预编译环节。支持从多个数据链路的下发工程画面操作指令，如包括通过HTTP接口、快捷指令编辑界面、配套APP等方式。最终构建完成的工程画面将实时展示到现有HMI的界面上，无需重新，立即生效。

[0166] 在一示例性的实施例中，提供了一种工业物联网终端，该工业物联网终端可以是服务器或者终端，其内部结构图可以如图6所示。该工业物联网终端包括处理器、存储器、输入 / 输出接口(Input / Output，简称I / O）和通信接口。其中，处理器、存储器和输入 / 输出接口通过系统总线连接，通信接口通过输入 / 输出接口连接到系统总线。其中，该工业物联网终端的处理器用于提供计算和控制能力。该工业物联网终端的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该工业物联网终端的数据库用于当前轮次的解释型界面描述指令。该工业物联网终端的输入 / 输出接口用于处理器与外部设备之间交换信息。该工业物联网终端的通信接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现上述任一项组态画面实时生成方法。

[0167] 本领域技术人员可以理解，图6中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的工业物联网终端的限定，具体的工业物联网终端可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。在一个示例性的实施例中，提供了一种工业物联网终端，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。

[0168] 在一个示例性的实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述中任一项所述的组态画面实时生成方法的步骤。

[0169] 在一个示例性的实施例中，提供了一种交互系统，如图7所示，包括组态画面设计终端和数据处理系统。组态画面设计终端中安装有组态软件，可以提供组态画面编辑设计功能；数据处理系统可以为服务器、工业物联网终端或工业物联网屏。

[0170] 所述组态画面设计终端，用于：获取当前轮次的用户操作信息；所述用户操作信息包括组态画面内容信息。

[0171] 基于当前轮次的所述用户操作信息生成当前轮次的解释型界面描述指令，并将当前轮次的解释型界面描述指令发送给所述数据处理系统。

[0172] 所述数据处理系统，用于执行上述中任一项所述的组态画面实时生成方法的步骤。

[0173] 作为一种实施方式，所述数据处理系统为HMI设备；所述真实DOM渲染引擎设置在所述HMI设备中；所述HMI设备还用于基于总虚拟DOM生成组态画面并显示组态画面。

[0174] 如图8所示，为交互系统实施上述组态画面实时生成方法的时序图，其中，快捷界面 / API接口配置在组态画面设计终端；指令接收、HMI画面指令解析引擎和实时画面配置在HMI设备中。图中的指令和规范指令是指解释型界面描述指令；指令解析为工程画面语法结构指令，是指对解释型界面描述指令解析并构建抽象语法树；工程画面渲染语法配置，是指基于抽象语法树生成虚拟DOM得到总虚拟DOM并传递；实时画面渲染引擎是指真实DOM渲染引擎，该引擎基于总虚拟DOM生成组态画面。

[0175] 作为另一实施方式，所述数据处理系统包括处理单元和HMI设备；所述处理单元用于执行上述中任一项所述的组态画面实时生成方法的步骤；所述HMI设备用于基于总虚拟DOM生成组态画面并显示组态画面。其中，处理单元可以为服务器。

[0176] 需要说明的是，本申请所涉及的用户信息（包括但不限于用户设备信息、用户个人信息等）和数据（包括但不限于用于分析的数据、存储的数据、展示的数据等），均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集动作、使用动作和处理动作都是在遵照所在地国家相应的数据保护法规政策的前提下，并获得由相应装置所有者给予授权的情况下进行的。

[0177] 本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器（Read-OnlyMemory，ROM）、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器（ReRAM）、磁变存储器（Magnetoresistive Random Access Memory，MRAM）、铁电存储器（Ferroelectric Random Access Memory，FRAM）、相变存储器（Phase Change Memory，PCM）、石墨烯存储器等。易失性存储器可包括随机存取存储器（Random Access Memory，RAM）或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器（Static Random Access Memory，SRAM）或动态随机存取存储器（DynamicRandomAccess Memory，DRAM）等。

[0178] 本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

[0179] 以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

[0180] 本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。< / style> < / numberdisplay> < / container> < / hmi> < / container> < / container>

Claims

1. A method for real-time generation of configuration screens, characterized in that, The method for real-time generation of configuration screens includes: Obtain the explanatory interface description instruction for the current round; the explanatory interface description instruction is used to describe the configuration screen content designed by the user; Lexical analysis and syntax parsing are performed on the interpreted interface description instructions of the current round to obtain the abstract syntax tree of the current round; Generate the virtual DOM for the current round based on the abstract syntax tree of the current round; When the current round is round 1, the virtual DOM of the current round is determined as the total virtual DOM; When the current round is the nth round, based on the Diff algorithm and the virtual DOM of the current round, the virtual DOM of the previous round is updated to obtain the updated virtual DOM of the current round, and the updated virtual DOM of the current round is determined as the total virtual DOM; n≥2; The total virtual DOM is passed to the real DOM rendering engine; the real DOM rendering engine is used to generate configuration screens based on the total virtual DOM.

2. The method for real-time generation of configuration screens according to claim 1, characterized in that, The explanatory interface description instructions include one or more of the following: root node instructions, structure instructions, style instructions, dynamic instructions, data binding instructions, dynamic interaction instructions, and import instructions; The root node instruction includes the height and width values ​​of the root container; the root node instruction is used to create the root container. The structural instructions include component type and component information; the structural instructions are used to create components. The style instruction includes style type and style information; the style instruction is used to describe the visual style of a component or the global style. The dynamic instructions include variable definition information, variable interpolation information, and variable condition information; the dynamic instructions are used to describe the dynamic changes in the screen. The data binding instruction includes a device ID, a device variable ID, and a data type; the data binding instruction is used to synchronize device variable data. The dynamic interaction command includes an event type and event parameters; the dynamic interaction command is used to describe dynamically changing screen content. The import instruction includes an import instruction path; the import instruction is used to obtain general style or reusable component information.

3. The method for real-time generation of configuration screens according to claim 1, characterized in that, Lexical analysis and syntax parsing are performed on the interpreted interface description instructions of the current round to obtain the abstract syntax tree of the current round, specifically including: Lexical analysis is performed on the explanatory interface description instructions in the current round to obtain multiple lexical units; each lexical unit includes an instruction tag and instruction tag information corresponding to the instruction tag; the instruction tag information includes instruction tag name, instruction tag type, and instruction tag attribute type; the instruction tag type includes non-self-closing tags and self-closing tags; the instruction tag attribute type includes static attributes, variable interpolation attributes, bound expression attributes, function call attributes, and dynamic logic attributes; Syntax parsing is performed on each lexical unit to obtain AST nodes, and an abstract syntax tree is constructed based on all AST nodes.

4. The method for real-time generation of configuration screens according to claim 3, characterized in that, Syntax parsing is performed on each lexical unit, specifically including: The instruction tag is parsed into an AST node; wherein, when the instruction tag is a self-closing tag, the AST node corresponding to the instruction tag is marked as a self-closing tag node; when the instruction tag is a double tag, the AST node corresponding to the instruction tag is marked as a non-self-closing tag node, and the sub-tags of the double tag are stored in the sub-nodes of the non-self-closing tag node. The type field of the AST node is determined as the instruction label name; When the instruction tag attribute type of the instruction tag is static attribute, the value of the instruction tag is parsed into the props field of the AST node; When the instruction tag attribute type of the instruction tag is variable interpolation attribute, add a child node of type Interpolation under the AST node and parse the content of the variable interpolation attribute; When the instruction tag attribute type of the instruction tag is a binding expression attribute, add a child node of type BindExpression under the AST node and split the parameters; When the instruction tag attribute type of the instruction tag is function call attribute, add a child node of type FunctionCall under the AST node and extract the function name and parameters; When the instruction tag attribute type of the instruction tag is dynamic logic attribute, the conditional logic expression is parsed into a condition node; the loop logic expression is parsed into a loop node.

5. The method for real-time generation of configuration screens according to claim 4, characterized in that, The parsing of the variable interpolation attribute content includes: Variable names are resolved to Variable nodes, array and object accesses are resolved to VariableAccess nodes, and ternary expressions are resolved to ConditionExpression nodes.

6. The method for real-time generation of configuration screens according to claim 1, characterized in that, The abstract syntax tree includes view element nodes, style element nodes, and logic control element nodes; The virtual DOM for the current iteration is generated based on the abstract syntax tree of the current iteration, specifically including: Based on the view element nodes and style element nodes in the abstract syntax tree of the current round, generate the calculated style for the current round; The logical control element nodes in the abstract syntax tree of the current round are parsed to obtain the dynamic instruction parsing result of the current round; Based on the calculation style and dynamic instruction parsing results of the current round, construct the virtual DOM for the current round.

7. An industrial Internet of Things (IoT) terminal, comprising: A memory, a processor, and a computer program stored in the memory and capable of running on the processor, characterized in that the processor executes the computer program to implement the real-time generation method of configuration screen according to any one of claims 1-6.

8. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by the processor, it implements the real-time configuration screen generation method according to any one of claims 1-6.

9. An interactive system, characterized in that, The interactive system includes a configuration screen design terminal and a data processing system; The configuration screen design terminal is used for: Obtain user operation information for the current round; the user operation information includes configuration screen content information. Based on the user operation information of the current round, generate an explanatory interface description instruction for the current round, and send the explanatory interface description instruction for the current round to the data processing system; The data processing system is used to execute the real-time configuration screen generation method according to any one of claims 1-6.

10. The interactive system according to claim 9, characterized in that, The data processing system includes a processing unit and an HMI device; the processing unit is used to execute the real-time configuration screen generation method according to any one of claims 1-6; the HMI device is used to generate and display the configuration screen based on the total virtual DOM.

Images