To be able to edit code and run cells, you need to run the notebook yourself. Where would you like to run the notebook?

This notebook takes about 20 seconds to run.

In the cloud (experimental)

Binder is a free, open source service that runs scientific notebooks in the cloud! It will take a while, usually 2-7 minutes to get a session.

On your computer

(Recommended if you want to store your changes.)

  1. Copy the notebook URL:
  2. Run Pluto

    (Also see: How to install Julia and Pluto)

  3. Paste URL in the Open box

Frontmatter

If you are publishing this notebook on the web, you can set the parameters below to provide HTML metadata. This is useful for search engines and social media.

Author 1
👀 Reading hidden code
using HypertextLiteral
: @htl, @htl_str

3.8 ms
Error message

MethodError: no method matching iterate(::Missing)

Closest candidates are:

iterate(::Union{LinRange, StepRangeLen}) at /opt/hostedtoolcache/julia/1.7.3/x64/share/julia/base/range.jl:826

iterate(::Union{LinRange, StepRangeLen}, ::Integer) at /opt/hostedtoolcache/julia/1.7.3/x64/share/julia/base/range.jl:826

iterate(::T) where T<:Union{Base.KeySet{<:Any, <:Dict}, Base.ValueIterator{<:Dict}} at /opt/hostedtoolcache/julia/1.7.3/x64/share/julia/base/dict.jl:695

...

Stack trace

Here is what happened, the most recent locations are first:

  1. indexed_iterate(I::Missing, i::Int64)
  2. center_position, scale = result;
Silly computer!
👀 Reading hidden code
center_position, scale = result;
---
Error message

Another cell defining center_position contains errors.

Probably not your fault!
👀 Reading hidden code
---
Error message

Another cell defining scale contains errors.

Oh no! 🙀
scale
👀 Reading hidden code
---
@bind result @htl """

<div class="zoomjs container" style="width: 600px; height: 600px;">


<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/1024px-Pluto_in_True_Color_-_High-Res.jpg">

<script>

let value = [[], 1]

const {default: zoomjs} = await import("https://esm.sh/vanilla-js-wheel-zoom@6.16.0?pin=v96")

const parent = currentScript.parentElement
const img = parent.firstElementChild


let zoomjs_result
const update_value = () => {
parent.value = [
[
zoomjs_result.content.currentLeft,
zoomjs_result.content.currentTop,
],
zoomjs_result.content.currentScale,
]
parent.dispatchEvent(new CustomEvent("input"))
}
zoomjs_result = zoomjs.create(img, {
maxScale: 10,
rescale: update_value,
dragScrollableOptions: {
onMove: update_value,
},
})

update_value()
</script>

<style>
.zoomjs.container {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #999;
}

.zoomjs img {
position: relative;
display: flex;
align-items: center;
}
</style>
</span>

"""
👀 Reading hidden code
487 ms