GenieFramework / Stipple.jl

The reactive UI library for interactive data applications with pure Julia.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

q-img not updating image when URL changes

PGimenez opened this issue · comments

I have a short code example in which a new random image is generated on button click, and the new image is displayed. This was working a few weeks ago. Now, the image i not updating on the page.

Has there been any recent change that could've broken this?

[4acbeb90] Stipple v0.27.0
  [5789e2e9] FileIO v1.16.1
  [a59fdf5c] GenieFramework v1.19.0
  [82e4d734] ImageIO v0.6.6
  [5ae59095] Colors v0.12.10

Jun-08-2023 11-56-37

#=
Generate a new image and refresh it in the browser every time a button is pressed.
=#

using FileIO, ImageIO, Colors
using GenieFramework
@genietools

const IMGPATH = "public/demo.png"
const BASEURL = "/demo.png"

@app begin
    @in refresh = false
    @out img = rand(RGB, 100, 100)
    @out imageurl = "/demo.png"
    @onchange refresh begin
        img = rand(RGB, 100, 100)
        # add an (invalid) anchor to the imagepath in order to trigger a reload in the Quasar/Vue backend
        save(IMGPATH, img)
        imageurl = "$BASEURL#$(Base.time())"
    end
end
        
function ui()
    [button("Refresh", @click("refresh = !refresh"))
    imageview(src=:imageurl, spinnercolor="white", style="height: 140px; max-width: 150px")]
end

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

@PGimenez are you using a different version of Stipple/StippleUI now vs a few weeks ago? If yes, I suggest downgrading till it works again to confirm where the change occurred.

@PGimenez did you get a chance to find the issue? Or I'll take it and find out based on what Adrian suggested

Apparently it's a browser issue. It doesn't work on Chrome or Safari, but it works on Firefox. Can you please check to confirm @AbhimanyuAryan ?

@PGimenez weird I will check

Seems to work

using FileIO, ImageIO, Colors
using GenieFramework
@genietools

const IMGPATH = "public/demo.png"
const BASEURL = "/demo.png"

@app begin
    @in refresh = false
    @out img = rand(RGB, 100, 100)
    @out imageurl = "https://picsum.photos/500/300"
    @onchange refresh begin
        img = rand(RGB, 100, 100)
        # add an (invalid) anchor to the imagepath in order to trigger a reload in the Quasar/Vue backend
        save(IMGPATH, img)
        imageurl = "$BASEURL#$(Base.time())"
    end
end
        
function ui()
    [button("Refresh", @click("refresh = !refresh"))
    imageview(src=:imageurl, spinnercolor="white", style="height: 140px; max-width: 150px")]
end

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

bad_image