From 3eb4fc6c91a58bc7c6a43a311847d4e89b1d857a Mon Sep 17 00:00:00 2001 From: Aaron Fenyes Date: Wed, 26 Jun 2024 15:24:31 -0700 Subject: [PATCH] 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