Add element visibility controls
This commit is contained in:
parent
7aaf134a36
commit
3eb4fc6c91
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user