PlotLayoutImage for displaying background images

[Wikunia]

I would love to use the Zoom on Static Images part from https://plotly.com/julia/images/ with StipplePlotly.
If I understand StipplePlotly correctly I only need to change the attr part in each argument like yaxis= to this kind of form yaxis=PlotLayoutAxis(...

Unfortunately there doesn't seem to be a struct for PlotLayoutImage or something like that yet.
It would be awesome to have that functionality as part of this project to easily display images on the web that are zoomable.

[hhaensel]

@Wikunia
Whenever you want to try out a functionality, you can try to use the PlotlyBase inferface for defining Plots. It (still) supports more options than StipplePlotly's own implementation.

using PlotlyBase
using Stipple, StippleUI, StipplePlotly

trace = scatter(x = [0, 0.5, 1, 2, 2.2], y = [1.23, 2.5, 0.42, 3, 1])

# Add images
layout = Layout(
    template = templates.plotly_white,
    images = [
        attr(
            source = "https://upload.wikimedia.org/wikipedia/commons/1/1f/Julia_Programming_Language_Logo.svg",
            xref = "x",
            yref = "y",
            x = 0,
            y = 3,
            sizex = 2,
            sizey = 2,
            sizing = "stretch",
            opacity = 0.5,
            layer = "below"
        )
    ]
)

plt = Plot(trace, layout)

@reactive mutable struct Example <: ReactiveModel
    plot::R{Plot} = deepcopy(plt)
end

function ui(model)
    page(model, layout = plotly(:plot))
end

route("/") do
    init(Example, debounce = 0) |> ui |> html
end
    
up()

[hhaensel]

Note that I used PlotlyBase instead of PlotlyJS, as Stipple has its own connection to the backend. It is highly inspired by PlotlyJS, though!

[hhaensel]

Alternatively, you can just use PlotlyBase.Layout as fieldtype for layout.

@reactive mutable struct Example <: ReactiveModel
    data::R{Vector{PlotData}} = deepcopy(plt)
    layout::R{PlotlyBase.Layout} = layout # as defined above
end

This should also work.