 bondscell_results$7ff9aa7e-e603-11ea-1955-c7907182b1ecqueued¤logsrunning¦outputbodymsg=MethodError: no method matching getindex(::Missing, ::String)stacktracecall_short0unwrap_js_image_data(raw_js_image_data::Missing)inlined£urlٔhttps://github.com/fonsp/disorganised-mess/tree/6d5f6e46c196925a19e151358b6656510197d2e1//drawoncanvas.jl#==#a5353288-e601-11ea-09cc-5d049ce1bc93#L1pathm/home/runner/work/disorganised-mess/disorganised-mess/drawoncanvas.jl#==#a5353288-e601-11ea-09cc-5d049ce1bc93source_packagecall0unwrap_js_image_data(raw_js_image_data::Missing)linfo_typeCore.MethodInstancelinefile7drawoncanvas.jl#==#a5353288-e601-11ea-09cc-5d049ce1bc93funcunwrap_js_image_dataparent_modulefrom_ccall_short5process_raw_js_image_data(raw_js_image_data::Missing)inlined£urlٔhttps://github.com/fonsp/disorganised-mess/tree/6d5f6e46c196925a19e151358b6656510197d2e1//drawoncanvas.jl#==#fb5112f0-e605-11ea-2f00-6d621a6c36a1#L1pathm/home/runner/work/disorganised-mess/disorganised-mess/drawoncanvas.jl#==#fb5112f0-e605-11ea-2f00-6d621a6c36a1source_packagecall5process_raw_js_image_data(raw_js_image_data::Missing)linfo_typeCore.MethodInstancelinefile7drawoncanvas.jl#==#fb5112f0-e605-11ea-2f00-6d621a6c36a1funcprocess_raw_js_image_dataparent_modulefrom_ccall_shorttop-level scopeinlinedãurlpathm/home/runner/work/disorganised-mess/disorganised-mess/drawoncanvas.jl#==#7ff9aa7e-e603-11ea-1955-c7907182b1ecsource_packagecalltop-level scopelinfo_typeNothinglinefile7drawoncanvas.jl#==#7ff9aa7e-e603-11ea-1955-c7907182b1ecfunc##function_wrapped_cell#313parent_modulefrom_c¤mime'application/vnd.pluto.stacktrace+objectrootassigneelast_run_timestampA&(persist_js_state·has_pluto_hook_features§cell_id$7ff9aa7e-e603-11ea-1955-c7907182b1ecdepends_on_disabled_cells§runtimepublished_object_keysdepends_on_skipped_cells§errored$46a589f4-e604-11ea-345f-397b1b0c4f80queued¤logsrunning¦outputbody]<bond def="n" unique_id="skBz7dI1WJPv"><input type='range' min='1' max='20' value='1'></bond>mimetext/htmlrootassigneelast_run_timestampAwΰpersist_js_state·has_pluto_hook_features§cell_id$46a589f4-e604-11ea-345f-397b1b0c4f80depends_on_disabled_cells§runtimepublished_object_keysdepends_on_skipped_cells§errored$a5353288-e601-11ea-09cc-5d049ce1bc93queued¤logsrunning¦outputbody5unwrap_js_image_data (generic function with 1 method)mimetext/plainrootassigneelast_run_timestampAʍztpersist_js_state·has_pluto_hook_features§cell_id$a5353288-e601-11ea-09cc-5d049ce1bc93depends_on_disabled_cells§runtime Vpublished_object_keysdepends_on_skipped_cells§errored$4dea78e4-e603-11ea-395c-a34b645dba9equeued¤logsrunning¦outputbodymimetext/plainrootassigneelast_run_timestampAvpersist_js_state·has_pluto_hook_features§cell_id$4dea78e4-e603-11ea-395c-a34b645dba9edepends_on_disabled_cells§runtime 'published_object_keysdepends_on_skipped_cells§errored$7f4b0e1e-7f16-11ea-02d3-7955921a70bdqueued¤logsrunning¦outputbodyg<bond def="img" unique_id="vuTSe//0ouqf"><canvas width="200" height="200" style="position: relative; display: block;"></canvas>
<button>Clear</button>

<script>
const canvas = this.querySelector("canvas")
const button = this.querySelector("button")
const ctx = canvas.getContext("2d")

function send_image(){
	// 🐸 We send the value back to Julia 🐸 //
	canvas.value = {
		width: 200,
		height: 200,
		data: ctx.getImageData(0,0,200,200).data,
	}
	canvas.dispatchEvent(new CustomEvent("input"))
}

var prev_pos = [80, 40]

function clear(){
	ctx.fillStyle = '#ffecec'
	ctx.fillRect(0, 0, 200, 200)

	send_image()
}
clear()

function onmove(e){
	const new_pos = [e.layerX, e.layerY]
	ctx.lineTo(...new_pos)
	ctx.stroke()
	prev_pos = new_pos

	send_image()
}

canvas.onmousedown = e => {
	prev_pos = [e.layerX, e.layerY]
	ctx.strokeStyle = '#003d6d'
	ctx.lineWidth = 5
	ctx.beginPath()
	ctx.moveTo(...prev_pos)
	canvas.onmousemove = onmove
}

button.onclick = clear

canvas.onmouseup = e => {
	canvas.onmousemove = null
}

// Fire a fake mousemoveevent to show something
onmove({layerX: 130, layerY: 160})

</script>
</bond>mimetext/htmlrootassigneelast_run_timestampA~Ӱpersist_js_state·has_pluto_hook_features§cell_id$7f4b0e1e-7f16-11ea-02d3-7955921a70bddepends_on_disabled_cells§runtime21published_object_keysdepends_on_skipped_cells§errored$fb5112f0-e605-11ea-2f00-6d621a6c36a1queued¤logsrunning¦outputbody:process_raw_js_image_data (generic function with 1 method)mimetext/plainrootassigneelast_run_timestampAʙupersist_js_state·has_pluto_hook_features§cell_id$fb5112f0-e605-11ea-2f00-6d621a6c36a1depends_on_disabled_cells§runtime published_object_keysdepends_on_skipped_cells§errored$3d9d9c80-e603-11ea-3845-cf9ee612316fqueued¤logsrunning¦outputbody-svd_compress (generic function with 1 method)mimetext/plainrootassigneelast_run_timestampA0{persist_js_state·has_pluto_hook_features§cell_id$3d9d9c80-e603-11ea-3845-cf9ee612316fdepends_on_disabled_cells§runtime published_object_keysdepends_on_skipped_cells§errored$548722e2-e601-11ea-3a1f-770d7456c77cqueued¤logslinemsg@[32m[1m  Activating[22m[39m new project at `/tmp/jl_5hzq8y`
text/plaincell_id$548722e2-e601-11ea-3a1f-770d7456c77ckwargsidPlutoRunner_d1acb81efileP/home/runner/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/io/stdout.jlgroupstdoutlevelLogLevel(-555)running¦outputbodymimetext/plainrootassigneelast_run_timestampAǷ/persist_js_state·has_pluto_hook_features§cell_id$548722e2-e601-11ea-3a1f-770d7456c77cdepends_on_disabled_cells§runtimepublished_object_keysdepends_on_skipped_cells§errored$8f3a3e06-e601-11ea-201d-23a204daa10fqueued¤logslinemsg.[32m[1m    Updating[22m[39m registry at `~/.julia/registries/General.toml`
[32m[1m   Resolving[22m[39m package versions...
[32m[1m    Updating[22m[39m `/tmp/jl_5hzq8y/Project.toml`
 [90m [82e4d734] [39m[92m+ ImageIO v0.6.9[39m
 [90m [6218d12a] [39m[92m+ ImageMagick v1.4.2[39m
 [90m [916415d5] [39m[92m+ Images v0.26.2[39m
[32m[1m    Updating[22m[39m `/tmp/jl_5hzq8y/Manifest.toml`
 [90m [621f4979] [39m[92m+ AbstractFFTs v1.5.0[39m
 [90m [79e6a3ab] [39m[92m+ Adapt v3.7.2[39m
 [90m [66dad0bd] [39m[92m+ AliasTables v1.1.3[39m
 [90m [ec485272] [39m[92m+ ArnoldiMethod v0.4.0[39m
 [90m [4fba245c] [39m[92m+ ArrayInterface v7.5.1[39m
 [90m [13072b0f] [39m[92m+ AxisAlgorithms v1.1.0[39m
 [90m [39de3d68] [39m[92m+ AxisArrays v0.4.7[39m
 [90m [62783981] [39m[92m+ BitTwiddlingConvenienceFunctions v0.1.6[39m
 [90m [fa961155] [39m[92m+ CEnum v0.5.0[39m
 [90m [2a0fbf3d] [39m[92m+ CPUSummary v0.2.6[39m
 [90m [aafaddc9] [39m[92m+ CatIndices v0.2.2[39m
 [90m [d360d2e6] [39m[92m+ ChainRulesCore v1.25.1[39m
 [90m [9e997f8a] [39m[92m+ ChangesOfVariables v0.1.10[39m
 [90m [fb6a15b2] [39m[92m+ CloseOpenIntervals v0.1.13[39m
 [90m [aaaa29a8] [39m[92m+ Clustering v0.15.8[39m
 [90m [35d6a980] [39m[92m+ ColorSchemes v3.29.0[39m
 [90m [3da002f7] [39m[92m+ ColorTypes v0.12.1[39m
 [90m [c3611d14] [39m[92m+ ColorVectorSpace v0.11.0[39m
 [90m [5ae59095] [39m[92m+ Colors v0.13.1[39m
 [90m [bbf7d656] [39m[92m+ CommonSubexpressions v0.3.1[39m
 [90m [34da2185] [39m[92m+ Compat v4.16.0[39m
 [90m [ed09eef8] [39m[92m+ ComputationalResources v0.3.2[39m
 [90m [187b0558] [39m[92m+ ConstructionBase v1.5.8[39m
 [90m [150eb455] [39m[92m+ CoordinateTransformations v0.6.3[39m
 [90m [adafc99b] [39m[92m+ CpuId v0.3.1[39m
 [90m [dc8bdbbb] [39m[92m+ CustomUnitRanges v1.0.2[39m
 [90m [9a962f9c] [39m[92m+ DataAPI v1.16.0[39m
 [90m [864edb3b] [39m[92m+ DataStructures v0.18.22[39m
 [90m [163ba53b] [39m[92m+ DiffResults v1.1.0[39m
 [90m [b552c78f] [39m[92m+ DiffRules v1.15.1[39m
 [90m [b4f34e82] [39m[92m+ Distances v0.10.12[39m
 [90m [ffbed154] [39m[92m+ DocStringExtensions v0.9.5[39m
 [90m [4f61f5a4] [39m[92m+ FFTViews v0.3.2[39m
 [90m [7a1cc6ca] [39m[92m+ FFTW v1.9.0[39m
 [90m [5789e2e9] [39m[92m+ FileIO v1.17.0[39m
 [90m [53c48c17] [39m[92m+ FixedPointNumbers v0.8.5[39m
 [90m [f6369f11] [39m[92m+ ForwardDiff v1.0.1[39m
 [90m [a2bd30eb] [39m[92m+ Graphics v1.1.3[39m
 [90m [86223c79] [39m[92m+ Graphs v1.12.1[39m
 [90m [2c695a8d] [39m[92m+ HistogramThresholding v0.3.1[39m
 [90m [3e5b6fbb] [39m[92m+ HostCPUFeatures v0.1.17[39m
 [90m [615f187c] [39m[92m+ IfElse v0.1.1[39m
 [90m [2803e5a7] [39m[92m+ ImageAxes v0.6.12[39m
 [90m [c817782e] [39m[92m+ ImageBase v0.1.7[39m
 [90m [cbc4b850] [39m[92m+ ImageBinarization v0.3.1[39m
 [90m [f332f351] [39m[92m+ ImageContrastAdjustment v0.3.12[39m
 [90m [a09fc81d] [39m[92m+ ImageCore v0.10.5[39m
 [90m [89d5987c] [39m[92m+ ImageCorners v0.1.3[39m
 [90m [51556ac3] [39m[92m+ ImageDistances v0.2.17[39m
 [90m [6a3955dd] [39m[92m+ ImageFiltering v0.7.10[39m
 [90m [82e4d734] [39m[92m+ ImageIO v0.6.9[39m
 [90m [6218d12a] [39m[92m+ ImageMagick v1.4.2[39m
 [90m [bc367c6b] [39m[92m+ ImageMetadata v0.9.10[39m
 [90m [787d08f9] [39m[92m+ ImageMorphology v0.4.6[39m
 [90m [2996bd0c] [39m[92m+ ImageQualityIndexes v0.3.7[39m
 [90m [80713f31] [39m[92m+ ImageSegmentation v1.9.0[39m
 [90m [4e3cecfd] [39m[92m+ ImageShow v0.3.8[39m
 [90m [02fcd773] [39m[92m+ ImageTransformations v0.10.2[39m
 [90m [916415d5] [39m[92m+ Images v0.26.2[39m
 [90m [9b13fd28] [39m[92m+ IndirectArrays v1.0.0[39m
 [90m [d25df0c9] [39m[92m+ Inflate v0.1.5[39m
 [90m [1d092043] [39m[92m+ IntegralArrays v0.1.6[39m
 [90m [a98d9a8b] [39m[92m+ Interpolations v0.15.1[39m
 [90m [8197267c] [39m[92m+ IntervalSets v0.7.11[39m
 [90m [3587e190] [39m[92m+ InverseFunctions v0.1.17[39m
 [90m [92d709cd] [39m[92m+ IrrationalConstants v0.2.4[39m
 [90m [c8e1da08] [39m[92m+ IterTools v1.4.0[39m
 [90m [033835bb] [39m[92m+ JLD2 v0.5.12[39m
 [90m [692b3bcd] [39m[92m+ JLLWrappers v1.7.0[39m
 [90m [b835a17e] [39m[92m+ JpegTurbo v0.1.6[39m
 [90m [10f19ff3] [39m[92m+ LayoutPointers v0.1.17[39m
 [90m [8cdb02fc] [39m[92m+ LazyModules v0.3.1[39m
 [90m [2ab3a3ac] [39m[92m+ LogExpFunctions v0.3.28[39m
 [90m [bdcacae8] [39m[92m+ LoopVectorization v0.12.172[39m
 [90m [1914dd2f] [39m[92m+ MacroTools v0.5.16[39m
 [90m [d125e4d3] [39m[92m+ ManualMemory v0.1.8[39m
 [90m [dbb5928d] [39m[92m+ MappedArrays v0.4.2[39m
 [90m [626554b9] [39m[92m+ MetaGraphs v0.8.0[39m
 [90m [e1d29d7a] [39m[92m+ Missings v1.2.0[39m
 [90m [e94cdb99] [39m[92m+ MosaicViews v0.3.4[39m
 [90m [77ba4419] [39m[92m+ NaNMath v1.0.3[39m
 [90m [b8a86587] [39m[92m+ NearestNeighbors v0.4.21[39m
 [90m [f09324ee] [39m[92m+ Netpbm v1.1.1[39m
 [90m [6fe1bfb0] [39m[92m+ OffsetArrays v1.17.0[39m
 [90m [52e1d378] [39m[92m+ OpenEXR v0.3.3[39m
 [90m [bac558e1] [39m[92m+ OrderedCollections v1.8.1[39m
 [90m [f57f5aa1] [39m[92m+ PNGFiles v0.4.4[39m
 [90m [5432bcbf] [39m[92m+ PaddedViews v0.5.12[39m
 [90m [d96e819e] [39m[92m+ Parameters v0.12.3[39m
 [90m [eebad327] [39m[92m+ PkgVersion v0.3.3[39m
 [90m [1d0040c9] [39m[92m+ PolyesterWeave v0.2.2[39m
 [90m [f27b6e38] [39m[92m+ Polynomials v4.0.19[39m
 [90m [aea7be01] [39m[92m+ PrecompileTools v1.2.1[39m
 [90m [21216c6a] [39m[92m+ Preferences v1.4.3[39m
 [90m [92933f4c] [39m[92m+ ProgressMeter v1.10.4[39m
 [90m [43287f4e] [39m[92m+ PtrArrays v1.3.0[39m
 [90m [4b34888f] [39m[92m+ QOI v1.0.1[39m
 [90m [94ee1d12] [39m[92m+ Quaternions v0.7.6[39m
 [90m [b3c3ace0] [39m[92m+ RangeArrays v0.3.2[39m
 [90m [c84ed2f1] [39m[92m+ Ratios v0.4.5[39m
 [90m [c1ae055f] [39m[92m+ RealDot v0.1.0[39m
 [90m [3cdcf5f2] [39m[92m+ RecipesBase v1.3.4[39m
 [90m [189a3867] [39m[92m+ Reexport v1.2.2[39m
 [90m [dee08c22] [39m[92m+ RegionTrees v0.3.2[39m
 [90m [ae029012] [39m[92m+ Requires v1.3.1[39m
 [90m [6038ab10] [39m[92m+ Rotations v1.7.1[39m
 [90m [fdea26ae] [39m[92m+ SIMD v3.7.1[39m
 [90m [94e857df] [39m[92m+ SIMDTypes v0.1.0[39m
 [90m [476501e8] [39m[92m+ SLEEFPirates v0.6.43[39m
 [90m [efcf1570] [39m[92m+ Setfield v1.1.2[39m
 [90m [699a6c99] [39m[92m+ SimpleTraits v0.9.4[39m
 [90m [47aef6b3] [39m[92m+ SimpleWeightedGraphs v1.5.0[39m
 [90m [45858cf5] [39m[92m+ Sixel v0.1.3[39m
 [90m [a2af1166] [39m[92m+ SortingAlgorithms v1.2.1[39m
 [90m [276daf66] [39m[92m+ SpecialFunctions v2.5.1[39m
 [90m [cae243ae] [39m[92m+ StackViews v0.1.2[39m
 [90m [aedffcd0] [39m[92m+ Static v0.8.9[39m
 [90m [0d7ed370] [39m[92m+ StaticArrayInterface v1.6.0[39m
 [90m [90137ffa] [39m[92m+ StaticArrays v1.9.13[39m
 [90m [1e83bf80] [39m[92m+ StaticArraysCore v1.4.3[39m
 [90m [82ae8749] [39m[92m+ StatsAPI v1.7.1[39m
 [90m [2913bbd2] [39m[92m+ StatsBase v0.34.4[39m
 [90m [62fd8b95] [39m[92m+ TensorCore v0.1.1[39m
 [90m [8290d209] [39m[92m+ ThreadingUtilities v0.5.5[39m
 [90m [731e570b] [39m[92m+ TiffImages v0.11.4[39m
 [90m [06e1c1a7] [39m[92m+ TiledIteration v0.5.0[39m
 [90m [3bb67fe8] [39m[92m+ TranscodingStreams v0.11.3[39m
 [90m [3a884ed6] [39m[92m+ UnPack v1.0.2[39m
 [90m [3d5dd08c] [39m[92m+ VectorizationBase v0.21.71[39m
 [90m [e3aaa7dc] [39m[92m+ WebP v0.1.3[39m
 [90m [efce3f68] [39m[92m+ WoodburyMatrices v1.0.0[39m
 [90m [f5851436] [39m[92m+ FFTW_jll v3.3.11+0[39m
 [90m [61579ee1] [39m[92m+ Ghostscript_jll v9.55.0+4[39m
 [90m [59f7168a] [39m[92m+ Giflib_jll v5.2.3+0[39m
 [90m [c73af94c] [39m[92m+ ImageMagick_jll v7.1.1048+0[39m
 [90m [905a6f67] [39m[92m+ Imath_jll v3.1.11+0[39m
 [90m [1d5cc7b8] [39m[92m+ IntelOpenMP_jll v2025.0.4+0[39m
 [90m [aacddb02] [39m[92m+ JpegTurbo_jll v3.1.1+0[39m
 [90m [88015f11] [39m[92m+ LERC_jll v3.0.0+1[39m
 [90m [7e76a0d4] [39m[92m+ Libglvnd_jll v1.7.1+1[39m
 [90m [89763e89] [39m[92m+ Libtiff_jll v4.5.1+1[39m
 [90m [d3a379c0] [39m[92m+ LittleCMS_jll v2.16.0+0[39m
 [90m [856f044c] [39m[92m+ MKL_jll v2025.0.1+1[39m
 [90m [18a262bb] [39m[92m+ OpenEXR_jll v3.2.4+0[39m
 [90m [643b3616] [39m[92m+ OpenJpeg_jll v2.5.4+0[39m
 [90m [efe28fd5] [39m[92m+ OpenSpecFun_jll v0.5.6+0[39m
 [90m [ffd25f8a] [39m[92m+ XZ_jll v5.8.1+0[39m
 [90m [4f6342f7] [39m[92m+ Xorg_libX11_jll v1.8.12+0[39m
 [90m [0c0b7dd1] [39m[92m+ Xorg_libXau_jll v1.0.13+0[39m
 [90m [a3789734] [39m[92m+ Xorg_libXdmcp_jll v1.1.6+0[39m
 [90m [1082639a] [39m[92m+ Xorg_libXext_jll v1.3.7+0[39m
 [90m [c7cfdc94] [39m[92m+ Xorg_libxcb_jll v1.17.1+0[39m
 [90m [c5fb5394] [39m[92m+ Xorg_xtrans_jll v1.6.0+0[39m
 [90m [3161d3a3] [39m[92m+ Zstd_jll v1.5.7+1[39m
 [90m [b53b4c65] [39m[92m+ libpng_jll v1.6.49+0[39m
 [90m [075b6546] [39m[92m+ libsixel_jll v1.10.5+0[39m
 [90m [c5f90fcd] [39m[92m+ libwebp_jll v1.4.0+0[39m
 [90m [1317d2d5] [39m[92m+ oneTBB_jll v2022.0.0+0[39m
 [90m [0dad84c5] [39m[92m+ ArgTools[39m
 [90m [56f22d72] [39m[92m+ Artifacts[39m
 [90m [2a0f44e3] [39m[92m+ Base64[39m
 [90m [ade2ca70] [39m[92m+ Dates[39m
 [90m [8ba89e20] [39m[92m+ Distributed[39m
 [90m [f43a241f] [39m[92m+ Downloads[39m
 [90m [7b1f6079] [39m[92m+ FileWatching[39m
 [90m [9fa8497b] [39m[92m+ Future[39m
 [90m [b77e0a4c] [39m[92m+ InteractiveUtils[39m
 [90m [4af54fe1] [39m[92m+ LazyArtifacts[39m
 [90m [b27032c2] [39m[92m+ LibCURL[39m
 [90m [76f85450] [39m[92m+ LibGit2[39m
 [90m [8f399da3] [39m[92m+ Libdl[39m
 [90m [37e2e46d] [39m[92m+ LinearAlgebra[39m
 [90m [56ddb016] [39m[92m+ Logging[39m
 [90m [d6f4376e] [39m[92m+ Markdown[39m
 [90m [a63ad114] [39m[92m+ Mmap[39m
 [90m [ca575930] [39m[92m+ NetworkOptions[39m
 [90m [44cfe95a] [39m[92m+ Pkg[39m
 [90m [de0858da] [39m[92m+ Printf[39m
 [90m [3fa0cd96] [39m[92m+ REPL[39m
 [90m [9a3f8284] [39m[92m+ Random[39m
 [90m [ea8e919c] [39m[92m+ SHA[39m
 [90m [9e88b42a] [39m[92m+ Serialization[39m
 [90m [1a1011a3] [39m[92m+ SharedArrays[39m
 [90m [6462fe0b] [39m[92m+ Sockets[39m
 [90m [2f01184e] [39m[92m+ SparseArrays[39m
 [90m [10745b16] [39m[92m+ Statistics[39m
 [90m [4607b0f0] [39m[92m+ SuiteSparse[39m
 [90m [fa267f1f] [39m[92m+ TOML[39m
 [90m [a4e569a6] [39m[92m+ Tar[39m
 [90m [8dfed614] [39m[92m+ Test[39m
 [90m [cf7118a7] [39m[92m+ UUIDs[39m
 [90m [4ec0a83e] [39m[92m+ Unicode[39m
 [90m [e66e0078] [39m[92m+ CompilerSupportLibraries_jll[39m
 [90m [deac9b47] [39m[92m+ LibCURL_jll[39m
 [90m [29816b5a] [39m[92m+ LibSSH2_jll[39m
 [90m [c8ffd9c3] [39m[92m+ MbedTLS_jll[39m
 [90m [14a3606d] [39m[92m+ MozillaCACerts_jll[39m
 [90m [4536629a] [39m[92m+ OpenBLAS_jll[39m
 [90m [05823500] [39m[92m+ OpenLibm_jll[39m
 [90m [83775a58] [39m[92m+ Zlib_jll[39m
 [90m [8e850b90] [39m[92m+ libblastrampoline_jll[39m
 [90m [8e850ede] [39m[92m+ nghttp2_jll[39m
 [90m [3f19e933] [39m[92m+ p7zip_jll[39m
[32m[1m   Resolving[22m[39m package versions...
[32m[1m    Updating[22m[39m `/tmp/jl_5hzq8y/Project.toml`
 [90m [7f904dfe] [39m[92m+ PlutoUI v0.7.64[39m
[32m[1m    Updating[22m[39m `/tmp/jl_5hzq8y/Manifest.toml`
 [90m [6e696c72] [39m[92m+ AbstractPlutoDingetjes v1.3.2[39m
 [90m [47d2ed2b] [39m[92m+ Hyperscript v0.0.5[39m
 [90m [ac1192a8] [39m[92m+ HypertextLiteral v0.9.5[39m
 [90m [b5f81e59] [39m[92m+ IOCapture v0.2.5[39m
 [90m [682c06a0] [39m[92m+ JSON v0.21.4[39m
 [90m [6c6e2e6c] [39m[92m+ MIMEs v1.1.0[39m
 [90m [69de0a69] [39m[92m+ Parsers v2.8.3[39m
 [90m [7f904dfe] [39m[92m+ PlutoUI v0.7.64[39m
 [90m [410a4b4d] [39m[92m+ Tricks v0.1.10[39m
 [90m [5c2747f8] [39m[92m+ URIs v1.5.2[39m
text/plaincell_id$8f3a3e06-e601-11ea-201d-23a204daa10fkwargsidPlutoRunner_d1acb81efileP/home/runner/.julia/packages/Pluto/6smog/src/runner/PlutoRunner/src/io/stdout.jlgroupstdoutlevelLogLevel(-555)running¦outputbodymimetext/plainrootassigneelast_run_timestampAnpersist_js_state·has_pluto_hook_features§cell_id$8f3a3e06-e601-11ea-201d-23a204daa10fdepends_on_disabled_cells§runtime   "ǵpublished_object_keysdepends_on_skipped_cells§errored±cell_dependencies$7ff9aa7e-e603-11ea-1955-c7907182b1ecprecedence_heuristic	cell_id$7ff9aa7e-e603-11ea-1955-c7907182b1ecdownstream_cells_mapupstream_cells_mapprocess_raw_js_image_data$fb5112f0-e605-11ea-2f00-6d621a6c36a1|>img$7f4b0e1e-7f16-11ea-02d3-7955921a70bdsvd_compress$3d9d9c80-e603-11ea-3845-cf9ee612316fredn$46a589f4-e604-11ea-345f-397b1b0c4f80$46a589f4-e604-11ea-345f-397b1b0c4f80precedence_heuristic	cell_id$46a589f4-e604-11ea-345f-397b1b0c4f80downstream_cells_mapn$7ff9aa7e-e603-11ea-1955-c7907182b1ecupstream_cells_mapCoreBase:PlutoRunner.create_bondPlutoRunnerCore.applicable@bindBase.getSlider$a5353288-e601-11ea-09cc-5d049ce1bc93precedence_heuristic	cell_id$a5353288-e601-11ea-09cc-5d049ce1bc93downstream_cells_mapunwrap_js_image_data$fb5112f0-e605-11ea-2f00-6d621a6c36a1upstream_cells_mapUInt8:reshape/adjointconjend$4dea78e4-e603-11ea-395c-a34b645dba9eprecedence_heuristiccell_id$4dea78e4-e603-11ea-395c-a34b645dba9edownstream_cells_mapLinearAlgebraupstream_cells_map$7f4b0e1e-7f16-11ea-02d3-7955921a70bdprecedence_heuristic	cell_id$7f4b0e1e-7f16-11ea-02d3-7955921a70bddownstream_cells_mapimg$7ff9aa7e-e603-11ea-1955-c7907182b1ecupstream_cells_mapBasePlutoRunner.Base.get@html_str#PlutoRunner.PlutoRunner.create_bondPlutoRunnerBase.Docs.HTML@bindPlutoRunner.Core.applicable$fb5112f0-e605-11ea-2f00-6d621a6c36a1precedence_heuristic	cell_id$fb5112f0-e605-11ea-2f00-6d621a6c36a1downstream_cells_mapprocess_raw_js_image_data$7ff9aa7e-e603-11ea-1955-c7907182b1ecupstream_cells_mapunwrap_js_image_data$a5353288-e601-11ea-09cc-5d049ce1bc93RGB$3d9d9c80-e603-11ea-3845-cf9ee612316fprecedence_heuristic	cell_id$3d9d9c80-e603-11ea-3845-cf9ee612316fdownstream_cells_mapsvd_compress$7ff9aa7e-e603-11ea-1955-c7907182b1ecupstream_cells_map:Diagonalsvd|>*Gray$548722e2-e601-11ea-3a1f-770d7456c77cprecedence_heuristiccell_id$548722e2-e601-11ea-3a1f-770d7456c77cdownstream_cells_mapPkg$548722e2-e601-11ea-3a1f-770d7456c77c$8f3a3e06-e601-11ea-201d-23a204daa10fupstream_cells_mapPkg$548722e2-e601-11ea-3a1f-770d7456c77cPkg.activatemktempdir$8f3a3e06-e601-11ea-201d-23a204daa10fprecedence_heuristiccell_id$8f3a3e06-e601-11ea-201d-23a204daa10fdownstream_cells_mapImagesPlutoUIupstream_cells_mapPkg.addPkg$548722e2-e601-11ea-3a1f-770d7456c77ccell_execution_order$548722e2-e601-11ea-3a1f-770d7456c77c$8f3a3e06-e601-11ea-201d-23a204daa10f$4dea78e4-e603-11ea-395c-a34b645dba9e$3d9d9c80-e603-11ea-3845-cf9ee612316f$46a589f4-e604-11ea-345f-397b1b0c4f80$7f4b0e1e-7f16-11ea-02d3-7955921a70bd$a5353288-e601-11ea-09cc-5d049ce1bc93$fb5112f0-e605-11ea-2f00-6d621a6c36a1$7ff9aa7e-e603-11ea-1955-c7907182b1eclast_hot_reload_time        shortpathdrawoncanvas.jlprocess_statusreadypathE/home/runner/work/disorganised-mess/disorganised-mess/drawoncanvas.jlpluto_versionv0.19.47last_save_timeAžcell_order$548722e2-e601-11ea-3a1f-770d7456c77c$8f3a3e06-e601-11ea-201d-23a204daa10f$4dea78e4-e603-11ea-395c-a34b645dba9e$3d9d9c80-e603-11ea-3845-cf9ee612316f$46a589f4-e604-11ea-345f-397b1b0c4f80$7ff9aa7e-e603-11ea-1955-c7907182b1ec$7f4b0e1e-7f16-11ea-02d3-7955921a70bd$a5353288-e601-11ea-09cc-5d049ce1bc93$fb5112f0-e605-11ea-2f00-6d621a6c36a1published_objectsnbpkginstall_time_nsinstantiatedòinstalled_versionsterminal_outputsenabled·restart_recommended_msgrestart_required_msgbusy_packageswaiting_for_permission,waiting_for_permission_but_probably_disabled«cell_inputs$7ff9aa7e-e603-11ea-1955-c7907182b1eccell_id$7ff9aa7e-e603-11ea-1955-c7907182b1eccodeGlet
	i = process_raw_js_image_data(img)
	svd_compress(i .|> red, n)
endmetadatashow_logsèdisabled®skip_as_script«code_folded$46a589f4-e604-11ea-345f-397b1b0c4f80cell_id$46a589f4-e604-11ea-345f-397b1b0c4f80code@bind n Slider(1:20)metadatashow_logsèdisabled®skip_as_script«code_folded$a5353288-e601-11ea-09cc-5d049ce1bc93cell_id$a5353288-e601-11ea-09cc-5d049ce1bc93code2function unwrap_js_image_data(raw_js_image_data)
	# the raw image data is a long byte array, we need to transform it into something
	# more "Julian" - something with more _structure_.
	
	# The encoding of the raw byte stream is:
	# every 4 bytes is a single pixel
	# every pixel has 4 values: Red, Green, Blue, Alpha
	# (we ignore alpha for this notebook)
	
	# So to get the red values for each pixel, we take every 4th value, starting at 
	# the 1st:
	reds_flat = UInt8.(raw_js_image_data["data"][1:4:end])
	greens_flat = UInt8.(raw_js_image_data["data"][2:4:end])
	blues_flat = UInt8.(raw_js_image_data["data"][3:4:end])
	
	# but these are still 1-dimensional arrays, nicknamed 'flat' arrays
	# We will 'reshape' this into 2D arrays:
	
	width = raw_js_image_data["width"]
	height = raw_js_image_data["height"]
	
	# shuffle and flip to get it in the right shape
	reds = reshape(reds_flat, (width, height))' / 255.0
	greens = reshape(greens_flat, (width, height))' / 255.0
	blues = reshape(blues_flat, (width, height))' / 255.0
	
	(reds=reds, greens=greens, blues=blues)
endmetadatashow_logsèdisabled®skip_as_script«code_folded$4dea78e4-e603-11ea-395c-a34b645dba9ecell_id$4dea78e4-e603-11ea-395c-a34b645dba9ecodeusing LinearAlgebrametadatashow_logsèdisabled®skip_as_script«code_folded$7f4b0e1e-7f16-11ea-02d3-7955921a70bdcell_id$7f4b0e1e-7f16-11ea-02d3-7955921a70bdcodeL@bind img html"""
<canvas width="200" height="200" style="position: relative; display: block;"></canvas>
<button>Clear</button>

<script>
const canvas = this.querySelector("canvas")
const button = this.querySelector("button")
const ctx = canvas.getContext("2d")

function send_image(){
	// 🐸 We send the value back to Julia 🐸 //
	canvas.value = {
		width: 200,
		height: 200,
		data: ctx.getImageData(0,0,200,200).data,
	}
	canvas.dispatchEvent(new CustomEvent("input"))
}

var prev_pos = [80, 40]

function clear(){
	ctx.fillStyle = '#ffecec'
	ctx.fillRect(0, 0, 200, 200)

	send_image()
}
clear()

function onmove(e){
	const new_pos = [e.layerX, e.layerY]
	ctx.lineTo(...new_pos)
	ctx.stroke()
	prev_pos = new_pos

	send_image()
}

canvas.onmousedown = e => {
	prev_pos = [e.layerX, e.layerY]
	ctx.strokeStyle = '#003d6d'
	ctx.lineWidth = 5
	ctx.beginPath()
	ctx.moveTo(...prev_pos)
	canvas.onmousemove = onmove
}

button.onclick = clear

canvas.onmouseup = e => {
	canvas.onmousemove = null
}

// Fire a fake mousemoveevent to show something
onmove({layerX: 130, layerY: 160})

</script>
"""metadatashow_logsèdisabled®skip_as_script«code_folded$fb5112f0-e605-11ea-2f00-6d621a6c36a1cell_id$fb5112f0-e605-11ea-2f00-6d621a6c36a1codefunction process_raw_js_image_data(raw_js_image_data)
	# we have our 2D array for each color
	# Let's create a single 2D array, where each value contains the R, G and B value of 
	# that pixel
	
	RGB.(unwrap_js_image_data(raw_js_image_data)...)
endmetadatashow_logsèdisabled®skip_as_script«code_folded$3d9d9c80-e603-11ea-3845-cf9ee612316fcell_id$3d9d9c80-e603-11ea-3845-cf9ee612316fcodeofunction svd_compress(i, N)
	📚 = svd(i)
	📚.U[:,1:N] * Diagonal(📚.S[1:N]) * 📚.Vt[1:N,:] .|> Gray
endmetadatashow_logsèdisabled®skip_as_script«code_folded$548722e2-e601-11ea-3a1f-770d7456c77ccell_id$548722e2-e601-11ea-3a1f-770d7456c77ccode0begin
	import Pkg
	Pkg.activate(mktempdir())
endmetadatashow_logsèdisabled®skip_as_script«code_folded$8f3a3e06-e601-11ea-201d-23a204daa10fcell_id$8f3a3e06-e601-11ea-201d-23a204daa10fcodeUbegin
	# we will work with the package Images.jl, and to display images on the screen,
	# we also need ImageIO and ImageMagick
	Pkg.add(["Images", "ImageIO", "ImageMagick"])
	# we also use PlutoUI for some interactivity
	Pkg.add("PlutoUI")
	
	# now that it is installed, we can import it inside out notebook:
	using Images
	using PlutoUI
endmetadatashow_logsèdisabled®skip_as_script«code_folded«notebook_id$554f4a08-4aa9-11f0-1ed1-6d9dad83eee8in_temp_dir¨metadata