Engee 文档
Notebook

使用web应用程序管理Engee模型

在本演示中,我们将分析实现模型管理应用程序的原则,并使用以下方法比较两个模型管理选项 GenieFramework 和Engee指挥管理。

我们将使用正弦波发生器模型和跟踪信号输出的例子来考虑这些方面。 我们将"模拟时间"参数设置为"无限"。

image.png

管理此类模型的第一个选项是从Engee工作区显式指定参数。

image.png

现在让我们更详细地看一下应用程序本身的逻辑。 逻辑和界面本身呈现在应用程序中。jl文件。 此代码使用GenieFramework框架以及用于可视化的StippleUI和PlotlyBase库创建交互式web应用程序。 该应用程序允许您通过滑块控制正弦信号的参数,并实时显示图形。

@app 定义数据模型:

``'茱莉亚
@应用程序开始
@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。布局(#图表显示设置
    xaxis=attr(标题="时间",showgrid=true),
    yaxis=attr(标题="值",showgrid=true)

)


当我们更改参数A,Fs或P时,我们更新图表并将数据传输到模型中,但正如您所看到的,我们不再通过Engee工作区执行此操作,而是通过命令 `set_param`:

``'茱莉亚
    @onchange A,Fs,P开始
        #使用新参数更新图表数据
        plotdata=[scatter(x=vec(T),y=vec(A。*罪。(2π*Fs。*T。+P)))]
        
        #通过Engee发送参数
        恩吉。精灵。发送("A",A)
        恩吉。精灵。发送("Fs",Fs)
        恩吉。精灵。发送("P",P)
        
        #在SIN/Sin中设置参数
恩吉。set_param模块!("罪/罪",
                 "振幅"=>Float64(A),
                 "频率"=>Float64(Fs),
                 "阶段"=>Float64(P))
    结束
结束

功能 ui() 定义网页的结构:

``'茱莉亚
功能ui()
行([
列([#带控件的左列
h6("幅度={{a}}",样式="margin-bottom:-10px"),
滑块(0.1:0.20:10,:a,color="red",style="margin-bottom:20px"),

        h6("频率={Fs}",样式="边距-底部:-10px"),

滑块(0.1:0.20:10,:Fs,color="green",style="margin-bottom:20px"),

        h6("阶段={P}}",样式="边距-底部:-10px"),

滑块(0.0:0.20:2π,:P,颜色="蓝色",样式="边距-底部:20px")
],style="width:40%;padding:20px;"),

    列([#右列带图

plot(:plotdata,layout=:plotlayout)
],style="width:60%;padding:20px;background-color:#f9f9f9;border-radius:10px;")
])
结束


为主页创建路由:

``'茱莉亚
@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")
URL: https://engee.com/prod/user/demo54365636-yurev/genie/genieframework_and_model/

应用程序可以通过点击链接或在里面启动它来打开。 ngscript.

In [ ]:
# display(
#         MIME("text/html"), 
#         """<iframe 
#                 src="$app_url" 
#                 width="750" height="500" 
#                 style="border: none;">
#         </iframe>"""
#         )
image_2.png

下图显示了模型在web应用程序控制下的行为。

Запись 2025-06-05 174535.gif

您可以使用以下命令关闭应用程序:

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

结论

此示例展示了使用GenieFramework同时管理模型的两种方法,还展示了使用团队管理在该领域实施更大项目的可能性。

示例中使用的块