使用web应用程序管理Engee模型
在本演示中，我们将分析实现模型管理应用程序的原则，并使用以下方法比较两个模型管理选项 GenieFramework 和Engee指挥管理。
我们将使用正弦波发生器模型和跟踪信号输出的例子来考虑这些方面。 我们将"模拟时间"参数设置为"无限"。
.png)
管理此类模型的第一个选项是从Engee工作区显式指定参数。
.png)
现在让我们更详细地看一下应用程序本身的逻辑。 逻辑和界面本身呈现在应用程序中。jl文件。 此代码使用GenieFramework框架以及用于可视化的StippleUI和PlotlyBase库创建交互式web应用程序。 该应用程序允许您通过滑块控制正弦信号的参数，并实时显示图形。
座 @app 定义数据模型:
@app begin
@in A = 1.0 # Амплитуда сигнала (начальное значение 1.0)
@in Fs = 1.0 # Частота сигнала (начальное значение 1.0)
@in P = 0.0 # Фаза сигнала (начальное значение 0.0)
@out plotdata = [scatter(x=vec(T), y=vec(sin.(2π .* T)))] # Начальные данные графика
@out plotlayout = PlotlyBase.Layout( # Настройки отображения графика
xaxis=attr(title="Время", showgrid=true),
yaxis=attr(title="Значение", showgrid=true)
)
当我们更改参数A，Fs或P时，我们更新图表并将数据传输到模型中，但正如您所看到的，我们不是通过Engee工作区来做到这一点，而是通过命令 set_param:
@onchange A, Fs, P begin
# Обновление данных графика с новыми параметрами
plotdata = [scatter(x=vec(T), y=vec(A .* sin.(2π * Fs .* T .+ P)))]
# Отправка параметров через Engee
engee.genie.send("A", A)
engee.genie.send("Fs", Fs)
engee.genie.send("P", P)
# Установка параметров в модуль SIN/Sin
engee.set_param!("SIN/Sin",
"Amplitude" => Float64(A),
"Frequency" => Float64(Fs),
"Phase" => Float64(P))
end
end
功能 ui() 定义网页的结构:
function ui()
row([
column([ # Левая колонка с элементами управления
h6("Амплитуда = {{A}}", style="margin-bottom: -10px"),
slider(0.1:0.20:10, :A, color="red", style="margin-bottom: 20px"),
h6("Частота = {{Fs}}", style="margin-bottom: -10px"),
slider(0.1:0.20:10, :Fs, color="green", style="margin-bottom: 20px"),
h6("Фаза = {{P}}", style="margin-bottom: -10px"),
slider(0.0:0.20:2π, :P, color="blue", style="margin-bottom: 20px")
], style="width: 40%; padding: 20px;"),
column([ # Правая колонка с графиком
plot(:plotdata, layout=:plotlayout)
], style="width: 60%; padding: 20px; background-color: #f9f9f9; border-radius: 10px;")
])
end
为主页创建路由:
@page("/", ui, debounce=1)
接下来，我们将使用 GenieFramework.
In [ ]:
app_url = string(engee.genie.start(string(@__DIR__,"/app.jl")))
app_url = replace((match(r"https?://[^\s\\]+", app_url)).match, r"\e$" => "")
println("URL: $app_url")
应用程序可以通过点击链接或在里面启动它来打开。 ngscript.
In [ ]:
# display(
# MIME("text/html"),
# """<iframe
# src="$app_url"
# width="750" height="500"
# style="border: none;">
# </iframe>"""
# )
.png)
下图显示了模型在web应用程序控制下的行为。
.gif)
您可以使用以下命令关闭应用程序:
In [ ]:
# engee.genie.stop(string(@__DIR__,"/app.jl"))
结论
在这个例子中，同时展示了使用GenieFramework管理模型的两种方法，并演示了使用团队管理在该领域实施更大项目的可能性。