Pluto 0.12 fix

Project.toml

@@ -1,7 +1,7 @@
 name = "PlutoUI"
 uuid = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
 authors = ["Fons van der Plas <[email protected]>"]
-version = "0.6.6"
+version = "0.6.7"
 
 [deps]
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"

assets/clock.js

@@ -1,5 +1,5 @@
 // const clock = this.querySelector("clock")
-const clock = this.currentScript.previousElementSibling
+const clock = (this == undefined ? currentScript : this.currentScript).previousElementSibling
 const tpsInput = clock.querySelector("input")
 const analogfront = clock.querySelector("analog front")
 const analogzoof = clock.querySelector("analog zoof")
@@ -13,8 +13,8 @@ tpsInput.oninput = (e) => {
     if (clock.classList.contains("inverted")) {
         dt = 1.0 / dt
     }
-    dt = (dt == Infinity || dt == 0) ? 1e9 : dt
-    analogzoof.style.opacity = 0.8 - Math.pow(dt, .2)
+    dt = dt == Infinity || dt == 0 ? 1e9 : dt
+    analogzoof.style.opacity = 0.8 - Math.pow(dt, 0.2)
     analogfront.style.animationDuration = dt + "s"
     e && e.stopPropagation()
 }

src/Images.jl

@@ -17,7 +17,7 @@ function show(io::IO, ::MIME"text/html", img::ImageInput)
         <span>
         <input type='file' accept="image/*">
         <script>
-        const span = this.currentScript.parentElement
+        const span = (this == undefined ? currentScript : this.currentScript).parentElement
         const input = span.querySelector("input")
         const img = html`<img crossOrigin="anonymous">`
         
@@ -57,4 +57,70 @@ function show(io::IO, ::MIME"text/html", img::ImageInput)
 end
 
 # the default is a 0x0 image
-get(img::ImageInput) = zeros(Float64, 0, 0)
+get(img::ImageInput) = Dict(
+    "width" => 0,
+    "height" => 0,
+    "data" => zeros(UInt8, 0, 0),
+)
+
+
+export CameraInput
+
+struct CameraInput
+    default_url::AbstractString
+    maxsize::Integer
+end
+
+function show(io::IO, ::MIME"text/html", img::CameraInput)
+    result = if cam.use_camera
+
+    else
+        """
+        <span>
+        <input type='file' accept="image/*">
+        <script>
+        const span = (this == undefined ? currentScript : this.currentScript).parentElement
+        const input = span.querySelector("input")
+        const img = html`<img crossOrigin="anonymous">`
+        
+        const maxsize = $(img.maxsize)
+        
+        img.onload = () => {
+            const scale = Math.min(1.0, maxsize / img.width, maxsize / img.height)
+        
+            const width = Math.floor(img.width * scale)
+            const height = Math.floor(img.height * scale)
+        
+            const canvas = html`<canvas width=\${width} height=\${height}>`
+            const ctx = canvas.getContext("2d")
+            ctx.drawImage(img, 0, 0, width, height)
+        
+            span.value = {
+                width: width,
+                height: height,
+                data: Array.from(ctx.getImageData(0, 0, width, height).data),
+            }
+            span.dispatchEvent(new CustomEvent("input"))
+        }
+        
+        input.oninput = (e) => {
+            img.src = URL.createObjectURL(input.files[0])
+            e.stopPropagation()
+        }
+        
+        // set default URL so that you have something to look at:
+        img.src = "$(cam.default_url)"
+        
+        </script>
+        </span>
+        """
+    end
+    write(io, result)
+end
+
+# the default is a 0x0 image
+get(cam::CameraInput) = Dict(
+    "width" => 0,
+    "height" => 0,
+    "data" => zeros(UInt8, 0, 0),
+)