Genie Discord forum

Author Avatarmi-ti
12/28/2023, 12:03:04 AM

currently I can add a tag in the html file and then update it by draw a figure in julia and change its url to the figure file. I wonder if there any way to control and update the web component from server side? for example:

function plotAndSave()
  return fig_url
@onchange plot 
fig_url = plotAndSave()

addToWeb( " <img url = \"$(fig_url)\" " )


I need this feature since I have many different types of output result. I want to update them dynamically , rander than define all of them in the html layout.

Author AvatarPere
12/29/2023, 11:01:11 AM

you can define a reactive variable with the component's code, and then include it in the page as:

@out code="<p>Hello there</p>"
<h1>A header</h1>

Or if you're using the low-code API

ui() = [ h1("a header"), "{{code}}"]

Finally, in case you dont need to dynamically change the code you can define a normal julia variable and include it as

code="<p>Hello there</p>"
ui() = [ h1("a header"), "$code"]

or in HTML

<h1>A header</h1>
Author Avatarhhaensel
12/29/2023, 10:34:07 PM

If you are using Stipple, I would take advantage of the binding syntax, e.g.

using Stipple, Stipple.ReactiveTools
using StippleUI

ui() = [
        btn("New plot", @click(:new_plot), color = "primary")
        row([cell(), img(src! = :plot_url), cell()])

@app begin
    @in new_plot = false
    @out plot_url = "$(rand(1:500))/200/300"

    @onbutton new_plot begin
        plot_url = "$(rand(1:500))/200/300"

route("/") do
    model = @init
    page(model, ui) |> html

up(open_browser = true)