Genie Discord forum

I have a stream of stock prices feeding into a DataFrame, via a function called with @async. Is it possible to have a StipplePlotly chart continuously refreshing with the new data ?

Also Is it possible to manually alter global variables while the server is running? e.g. clear the above dataframe of existing data. Can I execute myDF = DataFrame() within VSCode/GenieBuilder and have it refer to the myDF used by the running app ?

as long as that reactive data property is updated it should update the plot

I'm working on a similar case, you just have to update the PlotData and it will refresh on the webpage

Here's my code

`using GenieFramework @genietools

t = 0 t_end=2e5

@handlers begin p = @task 1+1 schedule(p) @in δ = 0.00 @out linplot = PlotData() @onchange δ begin z = if istaskdone(p) == true p = @task begin @show p._state for t in 1:t_end sleep(0.1) linplot = PlotData(x = collect(1:t), y = z, plot=StipplePlotly.Charts.PLOT_TYPE_LINE) push!(z, t^δ) end end schedule(p) end end end

function ui() row(slider(1:1:3, :δ ; label=true)) row(plot(:linplot)) end

@page("/", ui) Server.isrunning() || Server.up() `

@Lincoln_Hannah What do you mean variables used by the running app? do you mean vars tagged with @in or @out inside the @handlers block? If so, those vars can only be modified inside the @handlers

With your above example. while the web-page is running you can Ctrl+Enter execute a line (e.g. change a global variable ) and it will show on the web page.

This doesn't work if you're using the Genie Builder for the layout. while the app is running you can change the @handlers block. But to execute any other code you have to stop and re-start the app.

.

The GenieBuilder creates a HTML file but your example version uses Julia to define the layout. Is there any plan to align them? it would be nice to take the above example and be able to edit the layout in the no-code editor

do you do 1-1s for a fee ?

mmm I don't know how you are sending lines to the REPL, I guess it's the VSCode Julia extension but I tried and it doesn't work for me. Otherwise the REPL should be locked with no input allowed. Other than this, any change you make to the code should be reflected in the UI after an automatic reload.

If what you're trying to do is modify reactive variables (@in or @out) from the REPL, that is not possible. These variables must be modified inside an @onchange block, otherwise changes made to them are not reflected in the UI

As for the align betwen the low-code API and Genie Builder, they serve different purposes:

• low-code is for those wo want to write the UI in pure Julia
• no-code (Genie Builder ) is for those who want to build their UI visually

It would be great if we could switch from one to another but atm I don't think that's something we can do.

Still, both methods actually generate HTML code. You can see the HTML code for the low-code UI with print(ui()). You should get:

ParsedHTMLString["<div class=\"row\"><q-slider :min=1 v-model=\"δ\" label :max=3 :step=1 ></q-slider></div>", "<div class=\"row\"><plotly :data=\"linplot\" :layout=\"{}\" :displaylogo=\"false\"></plotly></div>"]

(Edit: It should look better if you print every component in the array)

which you could then paste into the app.jl.html file and then edit with the no-code editor in Genie Builder. Perhaps we could automate this low code -> no code conversion, I'll note it as a feature request 😃

Execute the last line (Ctrl+Enter) and refresh the webpage. The result flows through.

I think this is useful because you cant start, stop and edit other processes while the page is running

In your example, can you set it to also run the @onchange δ block when the page first loads or is refreshed?

Yes you can do that with the isready variable. That is, with @onchange isready begin…. This variable is created by the @handlers macro and it changes to true when the page finishes loading

😀

Instead of having the @handlers block what about having an @in block defining al in variables, @out block defining all out variables and @onchange blocks as per current.

I find it easier to read if things are grouped this way

e.g. with current syntax one can write

using GenieFramework @genietools

@out const S1s = "1","2","3" @out const S2s = "1","2","3" @out T1 = "0" @out T2 = "0"

@in S1 = "1" @in S2 = "1"

@handlers @onchangeany isready, S1, S2 begin T1 = S1 T2 = S2 end

function ui() h3("null null") row([ cell( h3("S1"); Stipple.select(:S1; options=:S1s), size = 2 ) cell( h3("S2"); Stipple.select(:S2; options=:S2s), size = 2 ) ])
end

@page("/", ui) Server.isrunning() || Server.up()

you can declare them in global scope

also according to latest stipple release. We moved to @app macro

@app begin

@in # _____
@out # ______

@button _____ 

@onchange ____
end

to stay consistent with vuejs style of app creation

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

read more about it here: https://github.com/GenieFramework/Stipple.jl/pull/159#issuecomment-1407087035