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.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)

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

@ -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"