AnyMath 文档
Notebook

创建仪表盘（Engee应用程序）

我们将探讨开发一个仪表盘的过程，该仪表盘从实时模型接收数据，并作为独立应用程序实现。

示例说明

Engee 平台提供了许多工具，可用于创建各种用于控制模型的自动化工具：指标、远程控制等。其中包括：

在本示例中，我们将探讨为虚拟仪表盘创建图形指标的过程。 该主题的另一个示例 演示了如何使用软件控制命令来控制模型的执行 （即如何实现一个用于启动模型执行的按钮）。

虚拟仪表盘将在Engee平台上作为独立服务器运行，其启动需要一定时间（数十秒）。

模型说明

在此示例中，指示器接受0到100范围内的数据。超出此范围的值将被截断。由于Engee中的默认数值格式为Float64，因此值发送模块中的代码设计为传输8字节数据包（64位）。 该模型已启用“即时显示”（位于模型设置中的“调试”面板），用于验证指示器是否正常工作；同时启用了“仿真速度控制”模式，可将模型的执行时间放缓至“实时”水平。

模型与设备之间的通信通过“Engee Function ”模块进行，这些模块接收输入数据并提供确认传输成功的信号。收到仪表盘的请求（Clear To Send信号）后，位于模型上的模块会发送更新后的数据以供显示。

Screenshot From 2025-09-18 14-32-21.png

配置 UDP 连接

模型与仪表盘之间的数据传输通过 UDP 协议进行。

为避免冲突，每个设备都需要建立 两个 UDP 连接。在第一个连接（连接到由参数port 指定的端口）上， 将发送8字节的数据。第二个连接则反向工作：“Engee Function ”模块会在端口cts_port （来自“Clear To Send”）上建立连接，并等待接收到“Clear To Send”（CTS）消息，该消息表示仪表盘已准备好接收数据。

在模型端，这些设置显示在每个模块的“参数”中以及指示器图标上。您可以在模块的遮罩下方查看这些设置。

image.png

创建指示器面板

仪表盘上有两个独立的指示器。

信息更新逻辑、应用程序图形部分的模型以及用于接收数据的端口均在应用程序代码中指定。app.jl 。

  • 左侧指示器在端口 5050 上等待数据，并向端口 5051 发送 CTS 信号，

  • 右侧指示器在向端口 5053 发送 CTS 消息后，通过端口 5052 接收数据。

至于指示器的图形模型，每个指示器组件的描述都包含与响应式变量相关的属性。一旦响应式字符串变量收到更新值，关联的组件就会自动更新。例如，以下代码行指定了左侧指示器上箭头的属性：

path(d="m21.287 24.405-6.1832 13.013 4.5464-13.716z", style="fill:#f00;stop-color:#000000;transition: transform .2s linear", transform! = "circular_gauge_string")

请注意属性 transform! = …`` 。语法 ! 允许您在Julia中创建响应式属性，并将它们的更新与数据模型中变量的更新关联起来。

由于设备由SVG矢量图形元素表示，因此可以通过修改其所在容器的宽度`` 和高度`` 来调整其大小。

Screenshot From 2025-09-18 17-07-14.png

启动应用程序

该应用程序在 Engee 平台上的独立服务器上运行，可通过地址app.url 访问。该页面的链接可直接在当前单元格的输出中打开，也可在单独的窗口中打开。

In [ ]: 
app = engee.genie.start("$(@__DIR__)/app.jl", log_file="$(@__DIR__)/log.txt");
# display("text/html", """<iframe src="$(string(app.url))" width="600" height="450" style="border: none;"></iframe>""";)

团队display 来自上一行代码；若取消此行的注释，即可在脚本内打开仪表盘。

一旦服务器停止运行应用程序，此处将仅显示“服务器可用”的提示，因此建议使用静态截图将界面纳入报告中。

要获取链接app.url 并在单独页面中打开，请运行以下单元格。该链接仅在运行应用程序的服务器处于活动状态时有效。

In [ ]: 
display("text/html", """<a href="$(string(app.url))" target="_blank" rel="noopener noreferrer">Open in a separate window</a>""")

若需为调试目的停止该服务器或将其重启，请取消该行的注释并运行以下代码：

In [ ]: 
# engee.genie.stop("$(@__DIR__)/app.jl");

仪表盘工作原理示意图

我们提供了一幅简要说明该仪表盘工作原理的示意图：

ezgif-823991725823c5.gif

结论

我们回顾了一个项目，该项目清晰地展示了开发自定义仪表盘的过程，该仪表盘可实时接收来自 Engee 模型的数据。