Genie Discord forum

using PlotlyJS

text="Click and drag<br> to draw a rectangle <br><br> or select another shape <br>in the modebar"

fig = plot(
    Layout(
        annotations=[
            attr(
                x=0.5,
                y=0.5,
                text=text,
                xref="paper",
                yref="paper",
                showarrow=false,
                font_size=20
            )
        ],
        shapes=[
            attr(
                line_color="yellow",
                fillcolor="turquoise",
                opacity=0.4,
                editable=true,
                x0=0, x1=1, y0=2, y1=3,
                xref="x", yref="y"
            )
        ],

        dragmode="drawrect",
        # style of new shapes
        newshape=attr(
            line_color="yellow",
            fillcolor="turquoise",
            opacity=0.5
        )
    ),
    config=PlotConfig(
        modeBarButtonsToAdd=[
            "drawline",
            "drawopenpath",
            "drawclosedpath",
            "drawcircle",
            "drawrect",
            "eraseshape"
        ]
    )
)

config_user = GenieFramework.PlotConfig(staticplot = false, displaymodebar="drawcircle")

 plot(:appData, layout=:appLayout, config=config_user)

using GenieFramework
using PlotlyBase

data = scatter(Dict(
    :name => "",
    :x => [0, 1],
    :y => [0, 0.5],
    :marker => Dict(:color => "red")
))

myconfig = PlotlyBase.PlotConfig( displaylogo=true,
    modeBarButtonsToAdd=["drawline", "drawopenpath", "drawcircle","eraseshape"]
)

function ui()
    [
        h1("StipplePlotly 🧞 interactive example")
        plot(:appData, config=:appConfig)
    ]
end

@app begin
    @out appData = [ data]
    @out appConfig = myconfig
end

@page("/", ui)

up()