From 7aaf134a3672ac712744ce475b7ea5810a4655c3 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Wed, 26 Jun 2024 13:15:54 -0700 Subject: [PATCH 1/3] Size the viewer window automatically --- engine-proto/ConstructionViewer.jl | 40 +++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/engine-proto/ConstructionViewer.jl b/engine-proto/ConstructionViewer.jl index efa7293..563857a 100644 --- a/engine-proto/ConstructionViewer.jl +++ b/engine-proto/ConstructionViewer.jl @@ -3,7 +3,7 @@ module Viewer using Blink using Colors -export ConstructionViewer, display! +export ConstructionViewer, display!, opentools!, closetools! # === Blink utilities === @@ -24,17 +24,23 @@ mutable struct ConstructionViewer function ConstructionViewer() # create window and open developer console - win = Window() - opentools(win) + win = Window(Blink.Dict(:width => 620, :height => 620)) # set stylesheet style!(win, """ - /* needed to keep Ganja canvas from blowing up */ + body { + background-color: #c8c0d0; + } + + /* maximum dimensions are needed to keep Ganja canvas from blowing up */ canvas { min-width: 600px; max-width: 600px; min-height: 600px; max-height: 600px; + margin-top: 10px; + margin-left: 10px; + border-radius: 10px; } """) @@ -50,8 +56,9 @@ mutable struct ConstructionViewer var elements = []; var palette = []; - // declare visualization handle + // declare handles for the visualization and its options var graph; + var graphOpt; // create scene function function scene() { @@ -65,14 +72,13 @@ mutable struct ConstructionViewer # create view @js win begin - graph = CGA3.graph( - scene, - Dict( - "conformal" => true, - "gl" => true, - "grid" => true - ) + graphOpt = Dict( + :conformal => true, + :gl => true, + :grid => true, + :devicePixelRatio => window.devicePixelRatio ) + graph = CGA3.graph(scene, graphOpt) document.body.replaceChildren(graph) end @@ -105,6 +111,16 @@ function display!(viewer::ConstructionViewer, elements::Matrix) @js viewer.win requestAnimationFrame(graph.update.bind(graph, scene)); end +function opentools!(viewer::ConstructionViewer) + size(viewer.win, 1240, 620) + opentools(viewer.win) +end + +function closetools!(viewer::ConstructionViewer) + closetools(viewer.win) + size(viewer.win, 620, 620) +end + end # ~~~ sandbox setup ~~~ From 3eb4fc6c91a58bc7c6a43a311847d4e89b1d857a Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Wed, 26 Jun 2024 15:24:31 -0700 Subject: [PATCH 2/3] Add element visibility controls --- engine-proto/ConstructionViewer.jl | 110 +++++++++++++++++++++++------ 1 file changed, 90 insertions(+), 20 deletions(-) diff --git a/engine-proto/ConstructionViewer.jl b/engine-proto/ConstructionViewer.jl index 563857a..2c51ce6 100644 --- a/engine-proto/ConstructionViewer.jl +++ b/engine-proto/ConstructionViewer.jl @@ -2,6 +2,7 @@ module Viewer using Blink using Colors +using Printf export ConstructionViewer, display!, opentools!, closetools! @@ -24,23 +25,41 @@ mutable struct ConstructionViewer function ConstructionViewer() # create window and open developer console - win = Window(Blink.Dict(:width => 620, :height => 620)) + win = Window(Blink.Dict(:width => 620, :height => 830)) # set stylesheet style!(win, """ body { - background-color: #c8c0d0; + background-color: #ccc; } - /* maximum dimensions are needed to keep Ganja canvas from blowing up */ - canvas { - min-width: 600px; - max-width: 600px; - min-height: 600px; - max-height: 600px; + /* the maximum dimensions keep Ganja from blowing up the canvas */ + #view { + display: block; + width: 600px; + height: 600px; margin-top: 10px; margin-left: 10px; border-radius: 10px; + background-color: #f0f0f0; + } + + #control-panel { + width: 600px; + height: 200px; + box-sizing: border-box; + padding: 5px 10px 5px 10px; + margin-top: 10px; + margin-left: 10px; + border-radius: 10px; + background-color: #f0f0f0; + } + + #control-panel > div { + margin-top: 5px; + padding: 2px; + border-radius: 5px; + font-family: monospace; } """) @@ -56,30 +75,46 @@ mutable struct ConstructionViewer var elements = []; var palette = []; - // declare handles for the visualization and its options - var graph; - var graphOpt; + // declare handles for the view and its options + var view; + var viewOpt; + + // declare handles for the controls + var controlPanel; + var visControls; // create scene function function scene() { commands = []; for (let n = 0; n < elements.length; ++n) { - commands.push(palette[n], elements[n]); + if (visControls[n].checked) { + commands.push(palette[n], elements[n]); + } } return commands; } + + function updateView() { + requestAnimationFrame(view.update.bind(view, scene)); + } """) - # create view @js win begin - graphOpt = Dict( + # create view + viewOpt = Dict( :conformal => true, :gl => true, - :grid => true, :devicePixelRatio => window.devicePixelRatio ) - graph = CGA3.graph(scene, graphOpt) - document.body.replaceChildren(graph) + view = CGA3.graph(scene, viewOpt) + view.setAttribute(:id, "view") + view.removeAttribute(:style) + document.body.replaceChildren(view) + + # create control panel + controlPanel = document.createElement(:div) + controlPanel.setAttribute(:id, "control-panel") + document.body.appendChild(controlPanel) end new(win) @@ -107,18 +142,53 @@ function display!(viewer::ConstructionViewer, elements::Matrix) palette_packed = [RGB24(c).color for c in palette] @js viewer.win palette = $palette_packed + # generate visibility controls + @js viewer.win begin + controlPanel.replaceChildren() + visControls = [] + end + for n in 1:size(elements, 2) + index_str = string(n) + vec_str = join(map(t -> @sprintf("%.3f", t), elements[:, n]), ", ") + style_str = "background-color: #$(hex(palette[n]));" + println(style_str) + @js viewer.win begin + # create container + @var container = document.createElement(:div) + container.setAttribute(:style, $style_str) + + # create checkbox + @var checkbox = document.createElement(:input) + checkbox.setAttribute(:type, "checkbox") + checkbox.setAttribute(:id, $index_str) + checkbox.setAttribute(:checked, "true") + checkbox.addEventListener(:input, updateView) + visControls.push(checkbox) + container.appendChild(checkbox) + + # create label + @var label = document.createElement(:label); + label.setAttribute(:for, $index_str) + label.appendChild(document.createTextNode($vec_str)) + container.appendChild(label) + + # add the control to the control panel + controlPanel.appendChild(container) + end + end + # update view - @js viewer.win requestAnimationFrame(graph.update.bind(graph, scene)); + @js viewer.win updateView() end function opentools!(viewer::ConstructionViewer) - size(viewer.win, 1240, 620) + size(viewer.win, 1240, 830) opentools(viewer.win) end function closetools!(viewer::ConstructionViewer) closetools(viewer.win) - size(viewer.win, 620, 620) + size(viewer.win, 620, 830) end end From 5ea32ac53cfac68e1267d8863338c32695214c05 Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Wed, 26 Jun 2024 15:51:57 -0700 Subject: [PATCH 3/3] Streamline visibility controls --- engine-proto/ConstructionViewer.jl | 55 +++++++++++++----------------- 1 file changed, 24 insertions(+), 31 deletions(-) diff --git a/engine-proto/ConstructionViewer.jl b/engine-proto/ConstructionViewer.jl index 2c51ce6..2486cc9 100644 --- a/engine-proto/ConstructionViewer.jl +++ b/engine-proto/ConstructionViewer.jl @@ -57,8 +57,9 @@ mutable struct ConstructionViewer #control-panel > div { margin-top: 5px; - padding: 2px; + padding: 4px; border-radius: 5px; + border: solid; font-family: monospace; } """) @@ -81,13 +82,13 @@ mutable struct ConstructionViewer // declare handles for the controls var controlPanel; - var visControls; + var visToggles; // create scene function function scene() { commands = []; for (let n = 0; n < elements.length; ++n) { - if (visControls[n].checked) { + if (visToggles[n].checked) { commands.push(palette[n], elements[n]); } } @@ -142,38 +143,30 @@ function display!(viewer::ConstructionViewer, elements::Matrix) palette_packed = [RGB24(c).color for c in palette] @js viewer.win palette = $palette_packed - # generate visibility controls + # create visibility toggles @js viewer.win begin controlPanel.replaceChildren() - visControls = [] + visToggles = [] end - for n in 1:size(elements, 2) - index_str = string(n) - vec_str = join(map(t -> @sprintf("%.3f", t), elements[:, n]), ", ") - style_str = "background-color: #$(hex(palette[n]));" - println(style_str) + for (elt, c) in zip(eachcol(elements), palette) + vec_str = join(map(t -> @sprintf("%.3f", t), elt), ", ") + color_str = "#$(hex(c))" + style_str = "background-color: $color_str; border-color: $color_str;" @js viewer.win begin - # create container - @var container = document.createElement(:div) - container.setAttribute(:style, $style_str) - - # create checkbox - @var checkbox = document.createElement(:input) - checkbox.setAttribute(:type, "checkbox") - checkbox.setAttribute(:id, $index_str) - checkbox.setAttribute(:checked, "true") - checkbox.addEventListener(:input, updateView) - visControls.push(checkbox) - container.appendChild(checkbox) - - # create label - @var label = document.createElement(:label); - label.setAttribute(:for, $index_str) - label.appendChild(document.createTextNode($vec_str)) - container.appendChild(label) - - # add the control to the control panel - controlPanel.appendChild(container) + @var toggle = document.createElement(:div) + toggle.setAttribute(:style, $style_str) + toggle.checked = true + toggle.addEventListener( + "click", + () -> begin + toggle.checked = !toggle.checked + toggle.style.backgroundColor = toggle.checked ? $color_str : "inherit"; + updateView() + end + ) + toggle.appendChild(document.createTextNode($vec_str)) + visToggles.push(toggle); + controlPanel.appendChild(toggle); end end