add bonito

Project.toml

@@ -4,6 +4,7 @@ authors = ["Makie contributors"]
 version = "1.0.0-DEV"
 
 [deps]
+Bonito = "824d6782-a2ef-11e9-3a09-e5662e0c26f8"
 Makie = "ee78f7c6-11fb-53f2-987a-cfe4a2b5a57a"
 Observables = "510215fc-4207-5dde-b226-833fc4488ee2"
 

bonito.jl

@@ -0,0 +1,79 @@
+
+using WGLMakie, Bonito
+
+function PlayButton(slider, range, session)
+    button = Bonito.Button("▶"; style=Styles("min-width" => "1rem", "height" => "2rem", "margin" => "0px"))
+    not_yet_open = true
+    playing = Threads.Atomic{Bool}(false)
+    time_per_frame = Threads.Atomic{Float64}(1/24)
+    last_elapsed = Float64[]
+    Base.errormonitor(@async let i = first(range)
+        while true
+            yield()
+            if isopen(session)
+                not_yet_open = false
+            end
+            if !isopen(session) && !not_yet_open
+                break
+            end
+            t = time()
+            if playing[]
+                i = mod1(i + 1, last(range))
+                slider[] = i
+            end
+            elapsed = time() - t
+            if length(last_elapsed) == 100
+                circshift!(last_elapsed, -1)
+                last_elapsed[end] = elapsed
+            else
+                push!(last_elapsed, elapsed)
+            end
+            time_per_frame[] = maximum(last_elapsed)
+            sleep(max(0.001, time_per_frame[] - elapsed))
+        end
+        println("done: ", not_yet_open, ", ", isopen(session))
+    end)
+    on(session, button.value) do _
+        if playing[]
+            playing[] = false
+            button.content[] = "▶"
+        else
+            playing[] = true
+            button.content[] = "❚❚"
+        end
+    end
+    return button
+end
+
+struct PlaySlider
+    name::String
+    range
+    value::Observable
+end
+
+PlaySlider(name::String, range) = PlaySlider(name, range, Observable(first(range)))
+
+function Bonito.jsrender(session::Session, ps::PlaySlider)
+    slider = Bonito.StylableSlider(ps.range)
+    button = PlayButton(slider, ps.range, session)
+    on(session, slider.value) do v
+        ps.value[] = v
+    end
+    label = Centered(Bonito.Label(ps.name))
+    widget_row = Bonito.Row(
+        label, button, slider, Bonito.Label(slider.value);
+        columns="4rem 4rem 1fr 4rem", align_items=:center)
+    return Bonito.jsrender(session, Card(widget_row))
+end
+
+function test()
+    App() do session
+        data = rand(Float32, 1024, 1024, 100)
+        f = Figure()
+        slice = Observable(view(data, :, :, 1))
+        play = PlaySlider("time", 1:100)
+        Makie.on_latest(i -> (slice[] = view(data, :, :, i)), session, play.value)
+        image(f[1,1], slice)
+        Col(play, f)
+    end
+end

examples/generic.jl

@@ -6,20 +6,30 @@ vars = collect(data_cube.Variable)
 
 temperature = convert(Array{Float32}, data_cube[Variable=At("temp")].data)
 
-data = (
-    data=temperature,
-    names=["x", "y", "z", "time"],
-);
-
-layers = [
-    Dict(
-        "type" => volume,
-        "data" => [1, 2, 3],
-    ),
-    Dict(
-        "type" => heatmap,
-        "data" => [1, 2],
-    )
-]
+data = (data=temperature,
+        names=["x", "y", "z", "time"]);
+
+layers = [Dict("type" => volume,
+               "data" => [1, 2, 3]),
+          Dict("type" => heatmap,
+               "data" => [1, 2])]
 
 NDViewer.plot_data(data, layers)
+
+using YAXArrays, WGLMakie, NDViewer
+using Zarr, DiskArrays
+using DimensionalData
+path = "gs://cmip6/CMIP6/ScenarioMIP/DKRZ/MPI-ESM1-2-HR/ssp585/r1i1p1f1/3hr/tas/gn/v20190710"
+g = open_dataset(zopen(path; consolidated=true))
+
+data_cube = DimensionalData.modify(g.tas) do arr
+    return DiskArrays.CachedDiskArray(arr)
+end
+
+data = (data=data_cube,
+        names=map(x -> name(x.dim), collect(axes(data_cube))));
+
+layers = [Dict("type" => heatmap,
+               "data" => [1, 2])]
+
+NDViewer.wgl_create_plot(data, layers)

src/NDViewer.jl

@@ -3,6 +3,8 @@ module NDViewer
 using Makie
 
 include("widgets.jl")
+include("bonito-widgets.jl")
+include("makie-widgets.jl")
 include("layers.jl")
 
 end

src/bonito-widgets.jl

@@ -0,0 +1,58 @@
+using Bonito
+
+function PlayButton(slider, range, session)
+    button = Bonito.Button("▶"; style=Styles("min-width" => "1rem", "height" => "2rem", "margin" => "0px"))
+    not_yet_open = true
+    playing = Threads.Atomic{Bool}(false)
+    time_per_frame = Threads.Atomic{Float64}(1 / 24)
+    last_elapsed = Float64[]
+    task = @async let i = first(range)
+        while true
+            yield()
+            if isopen(session)
+                not_yet_open = false
+            end
+            if !isopen(session) && !not_yet_open
+                break
+            end
+            t = time()
+            if playing[]
+                i = mod1(i + 1, last(range))
+                slider[] = i
+            end
+            elapsed = time() - t
+            if length(last_elapsed) == 100
+                circshift!(last_elapsed, -1)
+                last_elapsed[end] = elapsed
+            else
+                push!(last_elapsed, elapsed)
+            end
+            time_per_frame[] = maximum(last_elapsed)
+            sleep(max(0.001, time_per_frame[] - elapsed))
+        end
+        println("done: ", not_yet_open, ", ", isopen(session))
+    end
+    Base.errormonitor(task)
+    on(session, button.value) do _
+        if playing[]
+            playing[] = false
+            button.content[] = "▶"
+        else
+            playing[] = true
+            button.content[] = "❚❚"
+        end
+    end
+    return button
+end
+
+function Bonito.jsrender(session::Session, ps::PlaySlider)
+    slider = Bonito.StylableSlider(ps.range)
+    button = PlayButton(slider, ps.range, session)
+    on(session, slider.value) do v
+        return ps.value[] = v
+    end
+    label = Centered(Bonito.Label("Time"))
+    widget_row = Bonito.Row(label, button, slider, Bonito.Label(slider.value);
+                            columns="4rem 4rem 1fr 4rem", align_items=:center)
+    return Bonito.jsrender(session, Card(widget_row))
+end