Merge pull request #49 from kiruma524/dev

Tutorial and images
This commit is contained in:
Alexander Nozik 2021-07-29 17:08:05 +03:00 committed by GitHub
commit 4a2b891b83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 218 additions and 12 deletions

View File

@ -19,7 +19,7 @@
* [visionforge-gdml](#visionforge-gdml) * [visionforge-gdml](#visionforge-gdml)
* [Visualization for External Systems](#visualization-for-external-systems) * [Visualization for External Systems](#visualization-for-external-systems)
* [Demonstrations](#demonstrations) * [Demonstrations](#demonstrations)
* [Simple Example - Spatial Showcase](#simple-example---spatial-showcase) * [Simple Example - Solid Showcase](#simple-example---solid-showcase)
* [Full-Stack Application Example - Muon Monitor](#full-stack-application-example---muon-monitor-visualization) * [Full-Stack Application Example - Muon Monitor](#full-stack-application-example---muon-monitor-visualization)
* [GDML Example](#gdml-example) * [GDML Example](#gdml-example)
@ -118,16 +118,16 @@ The `demo` module contains several example projects (demonstrations) of using th
They are briefly described in this section, for more details please consult the corresponding per-project They are briefly described in this section, for more details please consult the corresponding per-project
README file. README file.
### Simple Example - Spatial Showcase ### Simple Example - Solid Showcase
Contains a simple demonstration with a grid including a few shapes that you can rotate, move camera, and so on. Contains a simple demonstration with a grid including a few shapes that you can rotate, move camera, and so on.
Some shapes will also periodically change their color and visibility. Some shapes will also periodically change their color and visibility.
[More details](demo/spatial-showcase/README.md) [More details](demo/solid-showcase/README.md)
**Example view:** **Example view:**
![](docs/images/spatial-showcase.png) ![](docs/images/solid-showcase.png)
### Full-Stack Application Example - Muon Monitor Visualization ### Full-Stack Application Example - Muon Monitor Visualization
@ -156,4 +156,4 @@ Visualization example for geometry defined as GDML file.
## Thanks and references ## Thanks and references
The original three.js bindings were made by [Lars Ivar Hatledal](https://github.com/markaren), but the project is discontinued right now. The original three.js bindings were made by [Lars Ivar Hatledal](https://github.com/markaren), but the project is discontinued right now.
All other libraries are explicitly shown as dependencies. We would like to express specific thanks to JetBrains Kotlin-JS team for consulting us during the work. All other libraries are explicitly shown as dependencies. We would like to express specific thanks to JetBrains Kotlin-JS team for consulting us during the work.

View File

@ -1,12 +1,10 @@
### GDML Example ### GDML Example
Visualization example for geometry defined as GDML file. Visualization example for geometry defined as GDML file.
##### Building project ##### Building project
To build the app, run `demo/gdml/Tasks/distribution/jsBrowserDistribution` Gradle task, then open To build the app, run `demo/gdml/Tasks/kotlin browser/jsBrowserDistribution` Gradle task, then
`demo/gdml/build/distribuions/gdml-js-0.1.3-dev/index.html` file in your browser, and
drag-and-drop GDML file to the window to see visualization. For an example file, you can use drag-and-drop GDML file to the window to see visualization. For an example file, you can use
`demo/gdml/src/jsMain/resources/cubes.gdml`. `demo/gdml/src/jsMain/resources/cubes.gdml`.

View File

@ -26,9 +26,8 @@ with it.
##### Building project ##### Building project
To run full-stack Muon Monitor Visualization application (both JVM server and Web browser front-end), To run full-stack Muon Monitor Visualization application (both JVM server and Web browser front-end),
run `demo/muon-monitor/application/run` task. run `demo/muon-monitor/Tasks/application/run` task.
##### Example view: ##### Example view:
![](../../docs/images/muon-monitor.png) ![](../../docs/images/muon-monitor.png)

View File

@ -5,8 +5,8 @@ Some shapes will also periodically change their color and visibility.
##### Building project ##### Building project
To see the JS demo: run `demo/spatial-showcase/Tasks/distribution/jsBrowserDistribution` Gradle task, then open To see the JS demo: run `demo/solid-showcase/Tasks/kotlin browser/jsBrowserRun` Gradle task, then open
`build/distribuions/spatial-showcase-js-0.1.3-dev/index.html` file in your browser. `build/distribuions/solid-showcase-js-0.1.3-dev/index.html` file in your browser.
To see Java FX demo, run `demo/spatial-showcase/Tasks/application/run` Gradle task, or `main()` from `FXDemoApp.kt`. To see Java FX demo, run `demo/spatial-showcase/Tasks/application/run` Gradle task, or `main()` from `FXDemoApp.kt`.

BIN
docs/images/all-solids.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
docs/images/box.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
docs/images/cone-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
docs/images/cone-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
docs/images/cylinder-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
docs/images/cylinder-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
docs/images/cylinder.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
docs/images/high-box.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
docs/images/scheme.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
docs/images/small-box.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
docs/images/sphere.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
docs/images/tube.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
docs/images/two-boxes-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
docs/images/two-boxes-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
docs/images/wide-box.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

209
docs/tutorial.md Normal file
View File

@ -0,0 +1,209 @@
#Tutorial
###The main goal of this tutorial is to show all capabilities of ... (this part will be supplemented)
The simple visualization can be made with function `main`. (this part will be supplemented as well)
```kotlin
import kotlinx.html.div
import space.kscience.dataforge.context.Context
import space.kscience.visionforge.html.ResourceLocation
import space.kscience.visionforge.solid.*
import java.nio.file.Paths
fun main(){
val context = Context{
plugin(Solids)
}
context.makeVisionFile (
Paths.get("customFile.html"),
resourceLocation = ResourceLocation.EMBED
){
div {
vision {
solid {
}
}
}
}
}
```
##Solids properties
**We will analyze which basic properties solids have using `box` solid.**
Basic properties:
1. `opacity` - It is set in `float`. It takes on values from 0 to 1, which represent percents of solid opacity. It's initial value is 1.
2. `color` - It can be specified as `Int`, `String`, or as three `Ubytes`, which represent color in `rgb`. Elementally, the solid will have `green` color.
3. `rotation` - it's the point, around which the solid will be rotated. Initially, the value is `Point3D(0, 0, 0)`
4. position, which is given by values `x`, `y`, `z`. Initial values are `x = 0`, `y = 0`, `z = 0`
Let's see how properties are set in solids.
The `small box` will have elemental values of properties. If you will not set properties, it will have the same `position`, `color`, `rotation`, and `opacity` values.
***You can see that `box` take four values. Later, we will discuss what they are doing in more detail. Now, it does not really matter.***
```kotlin
box(10, 10, 10, name = "small box"){
x = 0
y = 0
z = 0
opacity = 1 //100% opacity
color("red") //as string
rotation = Point3D(0, 0, 0)
}
```
![](../docs/images/small-box.png)
The `big box` will have properties with custom values.
```kotlin
box(40, 40, 40, name = "big box"){
x = 20
y = 10
z = 60
opacity = 0.5 //50% opacity
color(0u, 179u, 179u) //color in rgb
rotation = Point3D(60, 80, 0)
}
```
![](../docs/images/big-rotated-box.png)
If we compare these boxes, we will see all differences.
Here is the function `main` with both boxes.
```kotlin
fun main(){
val context = Context{
plugin(Solids)
}
context.makeVisionFile (
Paths.get("customFile.html"),
resourceLocation = ResourceLocation.EMBED
){
div {
vision {
solid {
box(10, 10, 10, name = "small box"){
x = 0
y = 0
z = 0
opacity = 1 //100% opacity
color("red") //as string
rotation = Point3D(0, 0, 0)
}
box(40, 40, 40, name = "big box"){
x = 20
y = 10
z = 60
opacity = 0.5 //50% opacity
color(0u, 179u, 179u) //rgb
rotation = Point3D(60, 80, 0)
}
}
}
}
}
}
```
![](../docs/images/two-boxes-1.png)
![](../docs/images/two-boxes-2.png)
###Basic Solids
Now, let's see which solids can be visualized:
1) PolyLine
2) Box
```kotlin
box(50, 50, 50, name = "box") {
x = 0
y = 0
z = 0
color("pink")
}
```
![](../docs/images/box.png)
```kotlin
box(10, 25, 10, name = "high_box") {
x = 0
y = 0
z = 0
color("black")
}
```
![](../docs/images/high-box.png)
```kotlin
box(65, 40, 40, name = "wide_box") {
x = 0
y = 0
z = 0
color("black")
}
```
![](../docs/images/wide-box.png)
3) Sphere
```kotlin
sphere(50, name = "sphere") {
x = 0
y = 0
z = 0
color("blue")
}
```
![](../docs/images/sphere.png)
4) Hexagon
```kotlin
hexagon(
Point3D(25, 30, 25),
Point3D(35, 30, 25),
Point3D(35, 30, 15),
Point3D(25, 30, 15),
Point3D(30, 18, 20),
Point3D(40, 18, 20),
Point3D(40, 18, 10),
Point3D(30, 18, 10),
name = "classic_hexagon"){
color("green")
}
```
![](../docs/images/classic-hexagon.png)
```kotlin
hexagon(
Point3D(5, 30, 5),
Point3D(24, 30, 8),
Point3D(20, 30, -10),
Point3D(5, 30, -7),
Point3D(8, 16, 0),
Point3D(12, 16, 0),
Point3D(10, 16, -5),
Point3D(6.5, 12, -3),
name = "custom_hexagon"){
color("brown")
}
```
![](../docs/images/custom-hexagon.png)
5) Cone
```kotlin
cone(60, 80, name = "cone") {
x = 0
y = 0
z = 0
color("beige")
}
```
![](../docs/images/cone-1.png)
![](../docs/images/cone-2.png)
6) Cone Surface
```kotlin
coneSurface(60, 50, 30, 10, 100, name = "cone_surface") {
x = 0
y = 0
z = 0
color("red")
rotation = Point3D(2, 50, -9)
}
```
![](../docs/images/cone-surface-1.png)
![](../docs/images/cone-surface-2.png)
7) Extruded