Genie Discord forum

Author AvatarLincoln_Hannah
1/27/2023, 5:55:46 AM

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 ?

Author Avatarabhimanyuaryan
1/27/2023, 6:17:57 PM

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

Author AvatarPere
1/27/2023, 8:07:22 PM

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

Author AvatarPere
1/27/2023, 8:07:42 PM

`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() `

Author AvatarPere
1/27/2023, 8:26:50 PM

@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

Author AvatarLincoln_Hannah
1/30/2023, 10:59:40 AM

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.

Author AvatarLincoln_Hannah
1/30/2023, 11:02:13 AM

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.

Author AvatarLincoln_Hannah
1/30/2023, 11:16:59 AM

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

Author AvatarLincoln_Hannah
1/30/2023, 11:18:11 AM

do you do 1-1s for a fee ?

Author AvatarPere
1/30/2023, 5:35:34 PM

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

Author AvatarPere
1/30/2023, 5:39:19 PM

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.

Author AvatarPere
1/30/2023, 5:42:02 PM

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 😃

Author AvatarLincoln_Hannah
1/31/2023, 3:22:55 AM
using GenieFramework

s = ["hi1","hi2","hi3"]
@out s_out = first(s)

function ui()  "{{s_out}}"  end

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

Author AvatarLincoln_Hannah
1/31/2023, 3:25:18 AM

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

Author AvatarLincoln_Hannah
1/31/2023, 3:27:01 AM

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

Author AvatarLincoln_Hannah
1/31/2023, 3:59:35 AM

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

Author AvatarPere
1/31/2023, 6:50:55 PM

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

Author AvatarLincoln_Hannah
2/3/2023, 3:07:38 AM

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.

Author AvatarLincoln_Hannah
2/3/2023, 3:09:02 AM

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

Author AvatarLincoln_Hannah
2/3/2023, 3:09:59 AM

e.g. with current syntax one can write

Author AvatarLincoln_Hannah
2/3/2023, 3:10:02 AM

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");; options=:S1s), size = 2 ) cell( h3("S2");; options=:S2s), size = 2 ) ])

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

Author Avatarabhimanyuaryan
2/3/2023, 6:31:04 AM

you can declare them in global scope

Author Avatarabhimanyuaryan
2/3/2023, 6:31:27 AM

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

Author Avatarabhimanyuaryan
2/3/2023, 6:33:20 AM
@app begin

@in # _____
@out # ______

@button _____ 

@onchange ____

to stay consistent with vuejs style of app creation

import { createApp } from 'vue'

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