diff --git a/demo/js-playground/src/main/kotlin/JsPlaygroundApp.kt b/demo/js-playground/src/main/kotlin/JsPlaygroundApp.kt index 74ff9fd9..a54e48c9 100644 --- a/demo/js-playground/src/main/kotlin/JsPlaygroundApp.kt +++ b/demo/js-playground/src/main/kotlin/JsPlaygroundApp.kt @@ -9,11 +9,11 @@ import react.dom.render import ringui.SmartTabs import ringui.Tab import space.kscience.dataforge.context.Context -import space.kscience.gdml.GdmlShowCase +import space.kscience.plotly.models.Trace +import space.kscience.plotly.models.appendXY import space.kscience.plotly.scatter import space.kscience.visionforge.Application import space.kscience.visionforge.VisionClient -import space.kscience.visionforge.gdml.toVision import space.kscience.visionforge.plotly.PlotlyPlugin import space.kscience.visionforge.ring.ThreeCanvasWithControls import space.kscience.visionforge.ring.ThreeWithControlsPlugin @@ -36,6 +36,8 @@ private class JsPlaygroundApp : Application { val element = document.getElementById("playground") ?: error("Element with id 'playground' not found on page") + val bouncingSphereTrace = Trace() + val bouncingSphere = SolidGroup { sphere(5.0, "ball") { detail = 16 @@ -52,20 +54,19 @@ private class JsPlaygroundApp : Application { time += dt velocity -= g * dt y = y.toDouble() + velocity * dt - if (y.toDouble() <= 2.5){ - velocity = sqrt(2*g*h) + bouncingSphereTrace.appendXY(time, y) + if (y.toDouble() <= 2.5) { + //conservation of energy + velocity = sqrt(2 * g * h) } } } } - box(200, 5, 200, name = "floor"){ + box(200, 5, 200, name = "floor") { y = -2.5 } } - - val visionOfD0 = GdmlShowCase.babyIaxo().toVision() - val random = Random(112233) val visionOfSpheres = SolidGroup { @@ -92,22 +93,41 @@ private class JsPlaygroundApp : Application { } SmartTabs("gravity") { Tab("gravity") { - child(ThreeCanvasWithControls) { - attrs { - context = playgroundContext - solid = bouncingSphere + styledDiv { + css{ + height = 50.vh + } + child(ThreeCanvasWithControls) { + attrs { + context = playgroundContext + solid = bouncingSphere + } + } + } + styledDiv { + css{ + height = 40.vh + } + + Plotly { + attrs { + context = playgroundContext + plot = space.kscience.plotly.Plotly.plot { + traces(bouncingSphereTrace) + } + } } } } - Tab("D0") { - child(ThreeCanvasWithControls) { - attrs { - context = playgroundContext - solid = visionOfD0 - } - } - } +// Tab("D0") { +// child(ThreeCanvasWithControls) { +// attrs { +// context = playgroundContext +// solid = GdmlShowCase.babyIaxo().toVision() +// } +// } +// } Tab("spheres") { child(ThreeCanvasWithControls) { attrs { diff --git a/demo/js-playground/src/main/kotlin/plotlyComponent.kt b/demo/js-playground/src/main/kotlin/plotlyComponent.kt index 7e456a69..9480c68b 100644 --- a/demo/js-playground/src/main/kotlin/plotlyComponent.kt +++ b/demo/js-playground/src/main/kotlin/plotlyComponent.kt @@ -1,4 +1,4 @@ -import kotlinx.css.* +import kotlinx.css.flex import org.w3c.dom.Element import org.w3c.dom.HTMLElement import react.RProps @@ -27,8 +27,6 @@ val Plotly = functionalComponent("Plotly"){props -> styledDiv { css { - maxWidth = 100.vw - maxHeight = 100.vh flex(1.0) } ref = elementRef