Add element visibility controls
This commit is contained in:
parent
7aaf134a36
commit
3eb4fc6c91
@ -2,6 +2,7 @@ module Viewer
|
|||||||
|
|
||||||
using Blink
|
using Blink
|
||||||
using Colors
|
using Colors
|
||||||
|
using Printf
|
||||||
|
|
||||||
export ConstructionViewer, display!, opentools!, closetools!
|
export ConstructionViewer, display!, opentools!, closetools!
|
||||||
|
|
||||||
@ -24,23 +25,41 @@ mutable struct ConstructionViewer
|
|||||||
|
|
||||||
function ConstructionViewer()
|
function ConstructionViewer()
|
||||||
# create window and open developer console
|
# create window and open developer console
|
||||||
win = Window(Blink.Dict(:width => 620, :height => 620))
|
win = Window(Blink.Dict(:width => 620, :height => 830))
|
||||||
|
|
||||||
# set stylesheet
|
# set stylesheet
|
||||||
style!(win, """
|
style!(win, """
|
||||||
body {
|
body {
|
||||||
background-color: #c8c0d0;
|
background-color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* maximum dimensions are needed to keep Ganja canvas from blowing up */
|
/* the maximum dimensions keep Ganja from blowing up the canvas */
|
||||||
canvas {
|
#view {
|
||||||
min-width: 600px;
|
display: block;
|
||||||
max-width: 600px;
|
width: 600px;
|
||||||
min-height: 600px;
|
height: 600px;
|
||||||
max-height: 600px;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
border-radius: 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 elements = [];
|
||||||
var palette = [];
|
var palette = [];
|
||||||
|
|
||||||
// declare handles for the visualization and its options
|
// declare handles for the view and its options
|
||||||
var graph;
|
var view;
|
||||||
var graphOpt;
|
var viewOpt;
|
||||||
|
|
||||||
|
// declare handles for the controls
|
||||||
|
var controlPanel;
|
||||||
|
var visControls;
|
||||||
|
|
||||||
// create scene function
|
// create scene function
|
||||||
function scene() {
|
function scene() {
|
||||||
commands = [];
|
commands = [];
|
||||||
for (let n = 0; n < elements.length; ++n) {
|
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;
|
return commands;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateView() {
|
||||||
|
requestAnimationFrame(view.update.bind(view, scene));
|
||||||
|
}
|
||||||
""")
|
""")
|
||||||
|
|
||||||
# create view
|
|
||||||
@js win begin
|
@js win begin
|
||||||
graphOpt = Dict(
|
# create view
|
||||||
|
viewOpt = Dict(
|
||||||
:conformal => true,
|
:conformal => true,
|
||||||
:gl => true,
|
:gl => true,
|
||||||
:grid => true,
|
|
||||||
:devicePixelRatio => window.devicePixelRatio
|
:devicePixelRatio => window.devicePixelRatio
|
||||||
)
|
)
|
||||||
graph = CGA3.graph(scene, graphOpt)
|
view = CGA3.graph(scene, viewOpt)
|
||||||
document.body.replaceChildren(graph)
|
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
|
end
|
||||||
|
|
||||||
new(win)
|
new(win)
|
||||||
@ -107,18 +142,53 @@ function display!(viewer::ConstructionViewer, elements::Matrix)
|
|||||||
palette_packed = [RGB24(c).color for c in palette]
|
palette_packed = [RGB24(c).color for c in palette]
|
||||||
@js viewer.win palette = $palette_packed
|
@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
|
# update view
|
||||||
@js viewer.win requestAnimationFrame(graph.update.bind(graph, scene));
|
@js viewer.win updateView()
|
||||||
end
|
end
|
||||||
|
|
||||||
function opentools!(viewer::ConstructionViewer)
|
function opentools!(viewer::ConstructionViewer)
|
||||||
size(viewer.win, 1240, 620)
|
size(viewer.win, 1240, 830)
|
||||||
opentools(viewer.win)
|
opentools(viewer.win)
|
||||||
end
|
end
|
||||||
|
|
||||||
function closetools!(viewer::ConstructionViewer)
|
function closetools!(viewer::ConstructionViewer)
|
||||||
closetools(viewer.win)
|
closetools(viewer.win)
|
||||||
size(viewer.win, 620, 620)
|
size(viewer.win, 620, 830)
|
||||||
end
|
end
|
||||||
|
|
||||||
end
|
end
|
||||||
|
Loading…
Reference in New Issue
Block a user