Фигуры Лиссажу

using GenieFramework, Stipple, PlotlyBase

@genietools

@app begin
    @in a = 1.0
    @in b = 1.0
    @in φ = 0.0
    
    @out график = PlotlyBase.Plot(PlotlyBase.scatter(x=[0], y=[0], line=PlotlyBase.attr(color="blue")))
    @out layout = PlotlyBase.Layout(
        title = "Фигуры Лиссажу",
        xaxis = PlotlyBase.attr(title="x", showgrid=true),
        yaxis = PlotlyBase.attr(title="y", showgrid=true),
        width = 800, 
        height = 550)

    @onchange a, b, φ begin
        t = collect(-100.0:0.01:100.0)
        new_plot = PlotlyBase.Plot(PlotlyBase.scatter(
            x = sin.(a[] * t .+ φ[]), 
            y = sin.(b[] * t),
            line = PlotlyBase.attr(color="blue", width=2),
            mode = "lines",
            name = "Фигура Лиссажу"
        ))
        график = new_plot
    end
end

function ui()
    row([
        column([
            h6("x = sin({{a}}t + {{φ}})", style="margin-bottom: -10px"),
            slider(0.0:0.1:9, :a, color="purple", style="margin-bottom: 20px; width: 100%;"),
            h6("y = sin({{b}}t)", style="margin-bottom: -10px"), 
            slider(0.0:0.1:9, :b, color="orange", style="margin-bottom: 20px; width: 100%;"),
            h6("φ = {{φ}}", style="margin-bottom: -10px"),  
            slider(-2π:0.01:2π, :φ, color="green", style="margin-bottom: 20px; width: 100%;"),
        ], style="width: 30%; padding: 20px;"),
        column([
            plotly(:график, layout=:layout)
        ], style="width: 70%; padding: 20px; background-color: #f9f9f9; border-radius: 10px;")
    ])
end

@page("/", ui)