kscience/visionforge
8
1
Fork 1
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Sidebar and layering support

Browse Source
This commit is contained in:
Alexander Nozik 2019-09-15 19:50:18 +03:00
parent e9d73b28fe
commit 41a987bcc4
2 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
dataforge-vis-spatial-gdml/src/jsMain/kotlin/hep/dataforge/vis/spatial/gdml/demo/GDMLDemoApp.kt
View File

@ -7,11 +7,17 @@ import hep.dataforge.vis.spatial.gdml.GDMLTransformer
import hep.dataforge.vis.spatial.gdml.LUnit
import hep.dataforge.vis.spatial.gdml.toVisual
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.output
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.GlobalScope
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.events.Event
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>) {
@ -81,7 +110,8 @@ private class GDMLDemoApp : ApplicationBase() {
val three = context.plugins.load(ThreePlugin)
//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()
val action: suspend CoroutineScope.(String) -> Unit = { it ->
@ -121,7 +151,7 @@ private class GDMLDemoApp : ApplicationBase() {
}
launch { message("Rendering") }
val output = three.output(canvas) {
// "axis" to {
// "axis" to {
// "size" to 100
// }
}
@ -129,6 +159,8 @@ private class GDMLDemoApp : ApplicationBase() {
//output.camera.layers.disable(0)
output.camera.layers.enable(1)
setupSidebar(sidebar, output)
output.render(visual)
launch {
message(null)

9
dataforge-vis-spatial-gdml/src/jsMain/web/index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<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>
<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">
@ -21,7 +21,12 @@
</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" 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"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"