From 10af708a87465e257336b5430d5ff9dd0fa88264 Mon Sep 17 00:00:00 2001 From: Niels Date: Mon, 5 Feb 2024 18:26:54 +0100 Subject: [PATCH] Dynamically update viewport size and sync to MINDFulPluto --- Manifest.toml | 34 +++++------ Project.toml | 2 + data/scripts/GetViewportSize.js | 52 +++++++++++++++++ data/scripts/SwitchViews.js | 100 ++++++++++++++++++++++++++++++++ plutodash.jl | 31 +++++++++- 5 files changed, 200 insertions(+), 19 deletions(-) create mode 100644 data/scripts/GetViewportSize.js create mode 100644 data/scripts/SwitchViews.js diff --git a/Manifest.toml b/Manifest.toml index 8f0a1d2..fe9e563 100644 --- a/Manifest.toml +++ b/Manifest.toml @@ -2,7 +2,7 @@ julia_version = "1.10.0" manifest_format = "2.0" -project_hash = "94aa9dd18a3dc1858855750ce09d3233627befa1" +project_hash = "222b0e27afe33d3897c9ec4b74adb00311fe8574" [[deps.AbstractFFTs]] deps = ["LinearAlgebra"] @@ -172,9 +172,9 @@ version = "0.5.1" [[deps.ChainRulesCore]] deps = ["Compat", "LinearAlgebra"] -git-tree-sha1 = "0d12ee16b3f62e4e33c3277773730a5b21a74152" +git-tree-sha1 = "1287e3872d646eed95198457873249bd9f0caed2" uuid = "d360d2e6-b24c-11e9-a2a3-2a2ae2dbcce4" -version = "1.20.0" +version = "1.20.1" weakdeps = ["SparseArrays"] [deps.ChainRulesCore.extensions] @@ -188,15 +188,15 @@ version = "1.3.5" [[deps.CodecBzip2]] deps = ["Bzip2_jll", "Libdl", "TranscodingStreams"] -git-tree-sha1 = "c0ae2a86b162fb5d7acc65269b469ff5b8a73594" +git-tree-sha1 = "9b1ca1aa6ce3f71b3d1840c538a8210a043625eb" uuid = "523fee87-0ab8-5b00-afb7-3ecf72e48cfd" -version = "0.8.1" +version = "0.8.2" [[deps.CodecZlib]] deps = ["TranscodingStreams", "Zlib_jll"] -git-tree-sha1 = "cd67fc487743b2f0fd4380d4cbd3a24660d0eec8" +git-tree-sha1 = "59939d8a997469ee05c4b4944560a820f9ba0d73" uuid = "944b1d66-785c-5afd-91f1-9de20f533193" -version = "0.7.3" +version = "0.7.4" [[deps.ColorBrewer]] deps = ["Colors", "JSON", "Test"] @@ -1058,8 +1058,8 @@ uuid = "23b02573-35f2-499b-a490-fd32d1f018b6" version = "0.1.0" [[deps.MINDFulPluto]] -deps = ["GraphIO", "Graphs", "HypertextLiteral", "MINDFul", "MINDFulMakie", "MetaGraphs", "NestedGraphs", "NestedGraphsIO", "Pluto", "PlutoUI", "Revise", "Unitful", "WGLMakie"] -git-tree-sha1 = "c0295604d3e5a1ac7e5269d2b2912c6a48f149ab" +deps = ["GraphIO", "Graphs", "HypertextLiteral", "Logging", "MINDFul", "MINDFulMakie", "MetaGraphs", "NestedGraphs", "NestedGraphsIO", "Pluto", "PlutoUI", "PrecompileTools", "Revise", "Unitful", "WGLMakie"] +git-tree-sha1 = "99a688d4059278a86cad4b141c7542dcee282471" repo-rev = "main" repo-url = "https://github.com/UniStuttgart-IKR/MINDFulPluto.jl" uuid = "2169b6f5-785b-460d-ad6a-2192ac02d426" @@ -1106,9 +1106,9 @@ uuid = "d6f4376e-aef5-505a-96c1-9c027394607a" [[deps.MathOptInterface]] deps = ["BenchmarkTools", "CodecBzip2", "CodecZlib", "DataStructures", "ForwardDiff", "JSON", "LinearAlgebra", "MutableArithmetics", "NaNMath", "OrderedCollections", "PrecompileTools", "Printf", "SparseArrays", "SpecialFunctions", "Test", "Unicode"] -git-tree-sha1 = "e2ae8cf5ac6daf5a3959f7f6ded9c2028b61d09d" +git-tree-sha1 = "8b40681684df46785a0012d352982e22ac3be59e" uuid = "b8f27783-ece8-5eb3-8dc8-9495eed66fee" -version = "1.25.1" +version = "1.25.2" [[deps.MathTeXEngine]] deps = ["AbstractTrees", "Automa", "DataStructures", "FreeTypeAbstraction", "GeometryBasics", "LaTeXStrings", "REPL", "RelocatableFolders", "UnicodeFun"] @@ -1217,7 +1217,7 @@ weakdeps = ["AttributeGraphs", "MetaGraphs"] [[deps.NestedGraphsIO]] deps = ["DocStringExtensions", "EzXML", "GraphIO", "Graphs", "MetaGraphs", "NestedGraphs"] -git-tree-sha1 = "00f69fa779a5c2cecbc29d37b6eea8d6d88472fd" +git-tree-sha1 = "b201d5df422f63d413d47428afaa8cfc02365782" repo-rev = "main" repo-url = "https://github.com/UniStuttgart-IKR/NestedGraphsIO.jl" uuid = "4bcdce80-1129-4e34-b1b9-f101712b434d" @@ -1304,10 +1304,10 @@ uuid = "efe28fd5-8261-553b-a9e1-b2916fc3738e" version = "0.5.5+0" [[deps.Optim]] -deps = ["Compat", "FillArrays", "ForwardDiff", "LineSearches", "LinearAlgebra", "NLSolversBase", "NaNMath", "Parameters", "PositiveFactorizations", "Printf", "SparseArrays", "StatsBase"] -git-tree-sha1 = "01f85d9269b13fedc61e63cc72ee2213565f7a72" +deps = ["Compat", "FillArrays", "ForwardDiff", "LineSearches", "LinearAlgebra", "MathOptInterface", "NLSolversBase", "NaNMath", "Parameters", "PositiveFactorizations", "Printf", "SparseArrays", "StatsBase"] +git-tree-sha1 = "47fea72de134f75b105a5d4a1abe5c6aec89d390" uuid = "429524aa-4258-5aef-a3af-852621145aeb" -version = "1.7.8" +version = "1.9.1" [[deps.Opus_jll]] deps = ["Artifacts", "JLLWrappers", "Libdl", "Pkg"] @@ -1693,9 +1693,9 @@ version = "0.1.1" [[deps.StaticArrays]] deps = ["LinearAlgebra", "PrecompileTools", "Random", "StaticArraysCore"] -git-tree-sha1 = "f68dd04d131d9a8a8eb836173ee8f105c360b0c5" +git-tree-sha1 = "7b0e9c14c624e435076d19aea1e5cbdec2b9ca37" uuid = "90137ffa-7385-5640-81b9-e52037218182" -version = "1.9.1" +version = "1.9.2" weakdeps = ["ChainRulesCore", "Statistics"] [deps.StaticArrays.extensions] diff --git a/Project.toml b/Project.toml index e846a07..0fe7ab1 100644 --- a/Project.toml +++ b/Project.toml @@ -1,4 +1,5 @@ [deps] +AbstractPlutoDingetjes = "6e696c72-6542-2067-7265-42206c756150" AttributeGraphs = "d091dd56-f8c5-469d-b7f7-ff847498145f" CairoMakie = "13f3f980-e62b-5c42-98c6-ff1f3baf88f0" DiscreteEvents = "127e53a7-d08a-4bd9-afb0-daf0d2b65a85" @@ -25,6 +26,7 @@ Unitful = "1986cc42-f94f-5a68-af5c-568840ba703d" WGLMakie = "276b4fcb-3e11-5398-bf8b-a0c2d153d008" [compat] +MINDFulPluto = ">=0.1.0" GraphMakie = "0.5.5" MINDFul = "0.2" NestedGraphMakie = "0.1" diff --git a/data/scripts/GetViewportSize.js b/data/scripts/GetViewportSize.js new file mode 100644 index 0000000..9f68e40 --- /dev/null +++ b/data/scripts/GetViewportSize.js @@ -0,0 +1,52 @@ +function getViewportSize() { + var viewportWidth; + var viewportHeight; + // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight + if (typeof window.innerWidth != 'undefined') { + viewportWidth = window.innerWidth, + viewportHeight = window.innerHeight + windowDevicePixelRatio = window.devicePixelRatio + } + + //TODO: Add DPR to older versions + /* // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) + else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { + viewportWidth = document.documentElement.clientWidth, + viewportHeight = document.documentElement.clientHeight + } + // older versions of IE + else { + viewportWidth = document.getElementsByTagName('body')[0].clientWidth, + viewportHeight = document.getElementsByTagName('body')[0].clientHeight + } */ + + + const viewportHeightInput = document.getElementById('viewportHeight'); + const viewportWidthInput = document.getElementById('viewportWidth'); + const windowDevicePixelRatioInput = document.getElementById('windowDevicePixelRatio'); + + viewportHeightInput.value = viewportHeight; + viewportHeightInput.dispatchEvent(new CustomEvent("input")); + + viewportWidthInput.value = viewportWidth; + viewportWidthInput.dispatchEvent(new CustomEvent("input")); + + windowDevicePixelRatioInput.value = windowDevicePixelRatio; + windowDevicePixelRatioInput.dispatchEvent(new CustomEvent("input")); + + console.log("Set viewport fields") +} + +window.addEventListener("resize", () => { + getViewportSize(); +}) + +//while element windowDevicePixelRatio is not set, keep trying to set it +const vpIntervalID = setInterval(() => { + if (document.getElementById('windowDevicePixelRatio').value == "") { + getViewportSize(); + } + else { + clearInterval(vpIntervalID); + } +}, 1000); \ No newline at end of file diff --git a/data/scripts/SwitchViews.js b/data/scripts/SwitchViews.js new file mode 100644 index 0000000..4488ca5 --- /dev/null +++ b/data/scripts/SwitchViews.js @@ -0,0 +1,100 @@ +function change_view_display(target, visible) { + const display = visible ? 'block' : 'none'; + const display_flex = visible ? 'flex' : 'none'; + + if (visible === true) { + change_view_display('visualisation', false); + change_view_display('intenttable', false); + change_view_display('devmode', false); + } + + switch (target) { + case "visualisation": + //hide content > .row (vis) + document.querySelectorAll('.content > .row').forEach((card, i) => { + card.style.display = display_flex; + }); + + //hide plotting cells + Array.prototype.slice.call(document.querySelectorAll('.code_folded'), -3).forEach((card, i) => { + card.style.display = display; + }); + break; + + case "intenttable": + //hide content > .table-container + document.querySelectorAll('.content > .table-container').forEach((card, i) => { + card.style.display = display_flex; + }); + break; + + case "devmode": + //hide last 2 cells (dev mode) + var cells = document.querySelectorAll('.show_input '); + cells = Array.prototype.slice.call(cells, -2); + cells.forEach((cell, i) => { + cell.style.display = display; + }); + change_devmode_cell_style(); + break; + + default: + break; + } +} + +function change_devmode_cell_style() { + //get last 3 cells + let cells = document.querySelectorAll('.show_input '); + + //only last 3 cells + cells = Array.prototype.slice.call(cells, -2); + + //move cells to top of screen in a grid + cells.forEach((cell, i) => { + cell.querySelector('.cm-editor').style.background = 'transparent'; + + cell.style.display = 'inline-block'; + cell.style.verticalAlign = 'top'; + cell.style.width = '30vw'; + cell.style.margin = '2.5%'; + cell.style.textAlign = 'start'; + + cell.style.background = 'rgba(217, 147, 232, 0.1)'; + cell.style.borderRadius = '16px'; + cell.style.boxShadow = '0 4px 30px rgba(0, 0, 0, 0.1)'; + + cell.style.padding = '20px 20px 20px 20px'; + + //find element pluto-trafficlight + cell.querySelector('pluto-trafficlight').style.display = 'none'; + + var log_container = cell.querySelector('pluto-logs-container'); + if (log_container != null) { + log_container.style.display = 'transparent'; + } + + //remove pluto-log-icon + var log_icon = cell.querySelector('pluto-log-icon'); + if (log_icon != null) { + log_icon.style.display = 'none'; + } + + //find class=Stdout and change style + var stdout = cell.querySelector('pluto-log-dot') + if (stdout != null) { + stdout.style.background = 'transparent'; + stdout.style.border = '2px solid #FFFFFF'; + } + + + + }); + + //change pluto-notebook style + var p_nb = document.getElementsByTagName('pluto-notebook')[0]; + p_nb.style.marginTop = '1.5vh'; + p_nb.style.marginLeft = '20vw'; + p_nb.style.marginRight = '-25vw'; + p_nb.style.backgroundColor = 'transparent'; +} \ No newline at end of file diff --git a/plutodash.jl b/plutodash.jl index a015719..9806e88 100644 --- a/plutodash.jl +++ b/plutodash.jl @@ -128,6 +128,31 @@ begin end end +# ╔═╡ 0ed42b9e-dba7-40cb-b58d-7bd306dd384e +begin + #get javascript values + viewport_height_bind = @bind viewport_height html"""""" + viewport_width_bind = @bind viewport_width html"""""" + window_dpr_bind = @bind window_dpr html"""""" + + + @htl(""" + + $(embed_display(viewport_height_bind)) + $(embed_display(viewport_width_bind)) + $(embed_display(window_dpr_bind)) + + """) +end + +# ╔═╡ 01e839e5-8cb4-4402-a5a3-ff2fdc89c035 +begin + viewport_height, viewport_width, window_dpr + MINDFulPluto.viewport_settings["width"] = viewport_width + MINDFulPluto.viewport_settings["height"] = viewport_height + MINDFulPluto.viewport_settings["dpr"] = window_dpr +end + # ╔═╡ e9acb26d-07de-45d4-8bcd-88616842565d #= begin install_button @@ -141,10 +166,10 @@ MINDFulPluto.resize_cells() MINDFulPluto.trigger_update_of_draw_cell(draw_button) # ╔═╡ daceb10a-f60c-4f4f-b2ac-ff8bf68f8c8a -MINDFulPluto.intent_list +MINDFulPluto.viewport_settings # ╔═╡ 77b3716e-aac5-47f0-8618-253afc079b4b -intent_states = [MINDFulPluto.get_intent_state(MINDFulPluto.intent_list[i]["ibns"][MINDFulPluto.intent_list[i]["sn"]], MINDFulPluto.intent_list[i]["id"]) for i in 1:length(MINDFulPluto.intent_list)] +MINDFulPluto.intent_list # ╔═╡ Cell order: # ╠═5145f6b7-ddb7-45ac-a3c7-fb30dc364f15 @@ -172,6 +197,8 @@ intent_states = [MINDFulPluto.get_intent_state(MINDFulPluto.intent_list[i]["ibns # ╠═04b12cc9-e83c-46c7-b3fb-12bd01a56c40 # ╠═744c90ce-02a9-4924-874c-9de65209d557 # ╠═8807bcad-8926-4ea0-9ba2-40ea47500a87 +# ╠═0ed42b9e-dba7-40cb-b58d-7bd306dd384e +# ╠═01e839e5-8cb4-4402-a5a3-ff2fdc89c035 # ╠═e9acb26d-07de-45d4-8bcd-88616842565d # ╠═aa5dbee4-f5eb-4889-a0d5-8b9014570409 # ╠═c7fcbb44-29c2-471b-bab1-4d4b591840f4