👀 Reading hidden code
Activating new project at `/tmp/jl_ZqEsWP` Updating registry at `~/.julia/registries/General.toml` Resolving package versions... Updating `/tmp/jl_ZqEsWP/Project.toml` [682c06a0] + JSON v0.21.4 [7f904dfe] + PlutoUI v0.6.11 Updating `/tmp/jl_ZqEsWP/Manifest.toml` [682c06a0] + JSON v0.21.4 [69de0a69] + Parsers v2.8.1 [7f904dfe] + PlutoUI v0.6.11 [aea7be01] + PrecompileTools v1.2.1 [21216c6a] + Preferences v1.4.3 [fd094767] + Suppressor v0.2.8 [2a0f44e3] + Base64 [ade2ca70] + Dates [56ddb016] + Logging [d6f4376e] + Markdown [a63ad114] + Mmap [de0858da] + Printf [9a3f8284] + Random [ea8e919c] + SHA [9e88b42a] + Serialization [fa267f1f] + TOML [cf7118a7] + UUIDs [4ec0a83e] + Unicode Precompiling project... ✓ PlutoUI 1 dependency successfully precompiled in 1 seconds (5 already precompiled)
this persistence
👀 Reading hidden code
Edit x!
👀 Reading hidden code
md"""
Edit `x`!
"""
80
200
500
👀 Reading hidden code
x = [80, 200, 500]
👀 Reading hidden code
(More info will follow, sorry!)
👀 Reading hidden code
Self updating cells
👀 Reading hidden code
Old value: 10
New value:
begin
# we need to reference potato in this cell --before assigning to potato-- to
# register as self-updating cell
if !@isdefined(potato)
# potato not defined means that this is the first run
# when the bond sets a value, the new value will be assigned to potato
# __before__ this cell is run.
# so potato defined means that this cell is running as
# response to the bond update
# set a default value
potato = 10
end
s = @bind potato Slider(1:100, default=potato)
# We now assigned to potato to register as self-update
# (`@bind x a` counts as assignment to `x`)
# bound values will only be set if they are assigned somewhere.
md"""
Old value: $potato
New value: $s
"""
end
👀 Reading hidden code
Comments:
You see that you can't slide the slider. This is because a new slider gets rendered every time the cell updates, which resets its internal (cursor) state.
If this is a problem, it can be fixed using the this persistence together with self-updating, see the next section.
👀 Reading hidden code
this persistence + self updating
The demo below uses both techniques, but you can see that the animations are not working when you click.
👀 Reading hidden code
2×2 Matrix{Float64}:
0.0 -1.0
1.0 -0.7A = [0 -1
1 -.7]
👀 Reading hidden code
begin
if !@isdefined(x0)
x0 = [0.5, 0.5]
end
@bind x0 wow(x0)
end |> with_d3_libs
👀 Reading hidden code
0.5
0.5
x0
👀 Reading hidden code
wow (generic function with 1 method)function wow(previous)
path = compute_path(previous)
c = """
<script id="aa">
const path = $(JSON.json(path))
const svg = this == null ? DOM.svg(600,400) : this
const s = this == null ? d3.select(svg) : this.s
svg.value = $(JSON.json(previous))
const xscale = d3.scaleLinear()
.domain([-3,3])
.range([20, 580])
const yscale = d3.scaleLinear()
.domain([-2,2])
.range([380, 20])
if(this == null) {
s.append("g")
.attr("transform", `translate(\${xscale(0)},0)`)
.call(d3.axisLeft(yscale))
s.append("g")
.attr("transform", `translate(0,\${yscale(0)})`)
.call(d3.axisBottom(xscale))
s.append("g").classed("thepath", true)
}
const down_handler =(e) => {
svg.value = [xscale.invert(e.clientX - svg.getBoundingClientRect().left), yscale.invert(e.clientY - svg.getBoundingClientRect().top)]
svg.dispatchEvent(new CustomEvent("input", {}))
}
svg.addEventListener("pointerdown", down_handler)
invalidation.then(() => svg.removeEventListener("pointerdown", down_handler))
s.select("g.thepath").selectAll("path")
.data([path])
.join("path")
.transition()
.duration(300)
.attr("d", d => d3.line()
.x(p => xscale(p[0]))
.y(p => yscale(p[1]))(d))
.attr("stroke", "gray")
.attr('stroke-width', 5)
.attr("fill", "none")
const output = svg
output.s = s
return output
</script>
"""
BondDefault(HTML(c), previous)
end
👀 Reading hidden code
500-element LinRange{Float64, Int64}:
0.0,0.12024,0.240481,0.360721,0.480962,0.601202,…,59.519,59.6393,59.7595,59.8798,60.0T = LinRange(0.0, 60.0, 500)
👀 Reading hidden code
0.12024048096192384ΔT = step(T)
👀 Reading hidden code
compute_path (generic function with 1 method)function compute_path(first)
accumulate(T; init=first) do x_prev, t
x_prev + ΔT * f(t,x_prev)
end
end
👀 Reading hidden code
f (generic function with 1 method)f(t,x) = A*x
👀 Reading hidden code
The next one is kinda broken, come back later!
👀 Reading hidden code
let
previous = if @isdefined(pos)
pos
else
100
end
x = previous * (1:10)
c = """
<script id="helloaza">
const x = $(JSON.json(x))
const svg = this == null ? DOM.svg(600,200) : this
const s = this == null ? d3.select(svg) : this.s
svg.value = $(previous)
const down_handler =(e) => {
svg.value = e.clientX - svg.getBoundingClientRect().left
svg.dispatchEvent(new CustomEvent("input", {}))
console.log(svg.value)
}
svg.addEventListener("pointerdown", down_handler)
invalidation.then(() => svg.removeEventListener("pointerdown", down_handler))
s.selectAll("circle")
.data(x)
.join("circle")
.transition()
.duration(300)
.attr("cx", d => d)
.attr("cy", 100)
.attr("r", 10)
.attr("fill", "gray")
const output = svg
output.s = s
return output
</script>
"""
with_d3_libs(@bind pos BondDefault(HTML(c), previous))
end
👀 Reading hidden code
100pos
👀 Reading hidden code
with_d3_libs (generic function with 1 method)with_d3_libs(content) = HTML("""
<script src="https://cdn.jsdelivr.net/npm/d3@6.2.0/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-scale@3.2.3/dist/d3-scale.min.js"></script>
$(repr(MIME"text/html"(), content))
""")
👀 Reading hidden code
begin
struct BondDefault
element
default
end
Base.show(io::IO, m::MIME"text/html", bd::BondDefault) = Base.show(io, m, bd.element)
Base.get(bd::BondDefault) = bd.default
end
👀 Reading hidden code