forked from kscience/visionforge
Sidebar and layering support
This commit is contained in:
parent
e9d73b28fe
commit
41a987bcc4
@ -7,11 +7,17 @@ import hep.dataforge.vis.spatial.gdml.GDMLTransformer
|
|||||||
import hep.dataforge.vis.spatial.gdml.LUnit
|
import hep.dataforge.vis.spatial.gdml.LUnit
|
||||||
import hep.dataforge.vis.spatial.gdml.toVisual
|
import hep.dataforge.vis.spatial.gdml.toVisual
|
||||||
import hep.dataforge.vis.spatial.opacity
|
import hep.dataforge.vis.spatial.opacity
|
||||||
|
import hep.dataforge.vis.spatial.three.ThreeOutput
|
||||||
import hep.dataforge.vis.spatial.three.ThreePlugin
|
import hep.dataforge.vis.spatial.three.ThreePlugin
|
||||||
import hep.dataforge.vis.spatial.three.output
|
import hep.dataforge.vis.spatial.three.output
|
||||||
import kotlinx.coroutines.CoroutineScope
|
import kotlinx.coroutines.CoroutineScope
|
||||||
import kotlinx.coroutines.GlobalScope
|
import kotlinx.coroutines.GlobalScope
|
||||||
import kotlinx.coroutines.launch
|
import kotlinx.coroutines.launch
|
||||||
|
import kotlinx.html.InputType
|
||||||
|
import kotlinx.html.dom.append
|
||||||
|
import kotlinx.html.js.div
|
||||||
|
import kotlinx.html.js.input
|
||||||
|
import org.w3c.dom.Element
|
||||||
import org.w3c.dom.HTMLDivElement
|
import org.w3c.dom.HTMLDivElement
|
||||||
import org.w3c.dom.events.Event
|
import org.w3c.dom.events.Event
|
||||||
import org.w3c.files.FileList
|
import org.w3c.files.FileList
|
||||||
@ -74,6 +80,29 @@ private class GDMLDemoApp : ApplicationBase() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fun setupSidebar(element: Element, output: ThreeOutput) {
|
||||||
|
element.clear()
|
||||||
|
(0..9).forEach{layer->
|
||||||
|
element.append {
|
||||||
|
div("row") {
|
||||||
|
+"layer $layer"
|
||||||
|
input(type = InputType.checkBox).apply {
|
||||||
|
if (layer == 0 || layer == 1) {
|
||||||
|
checked = true
|
||||||
|
}
|
||||||
|
onchange = {
|
||||||
|
if (checked) {
|
||||||
|
output.camera.layers.enable(layer)
|
||||||
|
} else {
|
||||||
|
output.camera.layers.disable(layer)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
override fun start(state: Map<String, Any>) {
|
override fun start(state: Map<String, Any>) {
|
||||||
|
|
||||||
@ -81,7 +110,8 @@ private class GDMLDemoApp : ApplicationBase() {
|
|||||||
val three = context.plugins.load(ThreePlugin)
|
val three = context.plugins.load(ThreePlugin)
|
||||||
//val url = URL("https://drive.google.com/open?id=1w5e7fILMN83JGgB8WANJUYm8OW2s0WVO")
|
//val url = URL("https://drive.google.com/open?id=1w5e7fILMN83JGgB8WANJUYm8OW2s0WVO")
|
||||||
|
|
||||||
val canvas = document.getElementById("canvas") ?: error("Element with id canvas not found on page")
|
val canvas = document.getElementById("canvas") ?: error("Element with id 'canvas' not found on page")
|
||||||
|
val sidebar = document.getElementById("sidebar") ?: error("Element with id 'sidebar' not found on page")
|
||||||
canvas.clear()
|
canvas.clear()
|
||||||
|
|
||||||
val action: suspend CoroutineScope.(String) -> Unit = { it ->
|
val action: suspend CoroutineScope.(String) -> Unit = { it ->
|
||||||
@ -121,7 +151,7 @@ private class GDMLDemoApp : ApplicationBase() {
|
|||||||
}
|
}
|
||||||
launch { message("Rendering") }
|
launch { message("Rendering") }
|
||||||
val output = three.output(canvas) {
|
val output = three.output(canvas) {
|
||||||
// "axis" to {
|
// "axis" to {
|
||||||
// "size" to 100
|
// "size" to 100
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
@ -129,6 +159,8 @@ private class GDMLDemoApp : ApplicationBase() {
|
|||||||
//output.camera.layers.disable(0)
|
//output.camera.layers.disable(0)
|
||||||
output.camera.layers.enable(1)
|
output.camera.layers.enable(1)
|
||||||
|
|
||||||
|
setupSidebar(sidebar, output)
|
||||||
|
|
||||||
output.render(visual)
|
output.render(visual)
|
||||||
launch {
|
launch {
|
||||||
message(null)
|
message(null)
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
|
||||||
<title>Three js demo for particle physics</title>
|
<title>Three js demo for particle physics</title>
|
||||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
||||||
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||||
@ -21,7 +21,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="container loader" id="loader" style="display:none;"></div>
|
<div class="container loader" id="loader" style="display:none;"></div>
|
||||||
<div class="container animate-bottom" id="message" style="display:none;"></div>
|
<div class="container animate-bottom" id="message" style="display:none;"></div>
|
||||||
<div class="container" id="canvas"></div>
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-9" id="canvas"></div>
|
||||||
|
<div class="col-3" id="sidebar"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
||||||
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
||||||
|
Loading…
Reference in New Issue
Block a user