Using WGLMakie.jl with Dash.jl

Hello, I want to create an interactive GUI based on Dash.jl.
in this GUI I want to plot an image and pick a pixel using the mouse.
in Makie.jl this is strait forward issue, I found that WGLMakie.jl can pass the makie plot to an HTML page.
so my questions are:

  1. Will I have all the interactive abilities as in the Makie standard plot?
  2. If the answer to (1.) is Yes, then how can I pass the plot to the Dash.jl app as html_div?

thanks in ahead.

I don’t think there is a straightforward way to use WGLMakie with Dash (I would be happy to be proved wrong, though). However, you can use PlotlyJS.jl with Dash, which also has interactive capabilities.

I got this from @sdanisch

using WGLMakie, JSServe
WGLMakie.activate!()
open("dashboard.html", "w") do io
    println(io, """
        <div>
    """)
    show(io, MIME"text/html"(), Page(exportable=true, offline=true))
    show(io, MIME"text/html"(), scatter(1:4))
    show(io, MIME"text/html"(), surface(rand(4, 4)))
    # or anything else from JSServe, or that can be displayed as html:
    show(io, MIME"text/html"(), JSServe.Slider(1:3))
    println(io, """
        </div>
    """)
end

(you can add head/body to be a complete html file).
this was part of a WIP here, unfortunately I haven’t had time to finish the app (dashboard) if you do something I would like to know. (this has problems in safari, but on other browsers should be visible).

Hi, can I “plot” image with in PlotlyJS?
I source the web and couldn’t find any example or API that i can use for this issue.

I think you should be able to display an image directly in Dash using the corresponding html component html_img().

Thank you for the answer, but my main issue is with the ability to interact with the picture…
can I get the pixel coordinates when clicked with a mouse on an entity of type html_img?
As I understand html_img only display the image.

No, html_img() would serve a static image. You can include interactive Plotly plots and query mouse state in Dash (here’s the documentation on how to do it in python but it should be relatively similar in Julia). On the other hand, if you know how to do what you want in WGLMakie, maybe using JSServe.jl for the dashboard, as proposed by @lazarusA, is the better option. It isn’t really documented yet but there are many examples in the repo.

Thank you, I’ll check it.