Add descriptions to demos

This commit is contained in:
Abe Pazos
2025-11-22 19:08:30 +01:00
parent 72368deb85
commit 522627ca51
45 changed files with 608 additions and 89 deletions

View File

@@ -7,7 +7,10 @@ import org.openrndr.math.Vector2
import org.openrndr.shape.Circle
/**
* A simple demonstration of a GUI for drawing some circles
* Demonstrates how to customize the appearance of the GUI by using
* `GUIAppearance()`.
*
* In this demo, we make the GUI wider (400 pixels) and translucent.
*/
fun main() = application {
program {

View File

@@ -6,7 +6,7 @@ import org.openrndr.math.Vector2
import org.openrndr.shape.Circle
/**
* A simple demonstration of a GUI for drawing some circles
* Demonstrates how to hide the GUI when the mouse pointer is outside of it.
*/
fun main() = application {
program {
@@ -29,7 +29,7 @@ fun main() = application {
gui.add(settings)
extend(gui)
// note we can only change the visibility after the extend
// note we can only change the visibility after the `extend`
gui.visible = false
extend {

View File

@@ -6,7 +6,7 @@ import org.openrndr.window
import kotlin.system.exitProcess
/**
* Demonstration of multi window GUI in the manual way
* Demonstration of a multi window GUI in the manual way
*/
fun main() {
// skip this demo on CI

View File

@@ -4,7 +4,7 @@ import org.openrndr.extra.parameters.DoubleParameter
import kotlin.system.exitProcess
/**
* Demonstration of multi window GUI using WindowedGUI extension
* Demonstration of a multi window GUI using the `WindowedGUI` extension
*/
fun main() {
// skip this demo on CI

View File

@@ -5,7 +5,9 @@ import org.openrndr.extra.parameters.Description
import org.openrndr.extra.parameters.OptionParameter
/**
* A simple demonstration of a GUI with a drop down menu
* A simple demonstration of a GUI with a drop-down menu.
*
* The entries in the drop-down menu are taken from an `enum class`.
*/
enum class BackgroundColors {
@@ -15,6 +17,10 @@ enum class BackgroundColors {
}
fun main() = application {
configure {
width = 720
height = 360
}
program {
val gui = GUI()
gui.compartmentsCollapsedByDefault = false

View File

@@ -0,0 +1,43 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.gui.GUI
import org.openrndr.extra.parameters.Description
import org.openrndr.extra.parameters.OptionParameter
/**
* A simple demonstration of a GUI with a drop-down menu.
*
* The entries in the drop-down menu are taken from an `enum class`.
* The `enum class` entries contain both a name (used in the drop-down)
* and a `ColorRGBa` instance (used for rendering).
*/
enum class BackgroundColors2(val color: ColorRGBa) {
Pink(ColorRGBa.PINK),
Black(ColorRGBa.BLACK),
Yellow(ColorRGBa.YELLOW)
}
fun main() = application {
configure {
width = 720
height = 360
}
program {
val gui = GUI()
gui.compartmentsCollapsedByDefault = false
val settings = @Description("Settings") object {
@OptionParameter("Background color")
var option = BackgroundColors2.Pink
}
gui.add(settings)
extend(gui)
gui.onChange { name, value ->
println("$name: $value")
}
extend {
drawer.clear(settings.option.color)
}
}
}

View File

@@ -4,6 +4,18 @@ import org.openrndr.extra.parameters.Description
import org.openrndr.extra.parameters.PathParameter
import org.openrndr.extra.propertywatchers.watchingImagePath
/**
* Demonstrates how to include a button for loading images in a GUI, and how to display
* the loaded image.
*
* The program applies the `@PathParameter` annotation to a `String` variable, which gets
* rendered by the GUI as an image-picker button. Note the allowed file `extensions`.
*
* This mechanism only updates the `String` containing the path of an image file.
*
* The `watchingImagePath()` delegate property is used to automatically load an image
* when its `String` argument changes.
*/
fun main() = application {
program {
val gui = GUI()

View File

@@ -7,12 +7,18 @@ import org.openrndr.extra.parameters.Description
import org.openrndr.extra.parameters.IntParameter
/**
* Shows how to store and retrieve in-memory gui presets.
* Shows how to store and retrieve in-memory GUI presets,
* each containing two integer values and two colors.
*
* Keyboard controls:
* [Left Shift] + [0]..[9] => store current gui values to a preset
* [Left Shift] + [0]..[9] => store current GUI values to a preset
* [0]..[9] => recall a preset
*/
fun main() = application {
configure {
width = 720
height = 480
}
program {
val gui = GUI()
gui.compartmentsCollapsedByDefault = false
@@ -43,9 +49,9 @@ fun main() = application {
// Draw a pattern based on modulo
for (i in 0 until 100) {
if (i % settings.a == 0 || i % settings.b == 0) {
val x = (i % 10) * 64.0
val x = (i % 10) * 72.0
val y = (i / 10) * 48.0
drawer.rectangle(x, y, 64.0, 48.0)
drawer.rectangle(x, y, 72.0, 48.0)
}
}
}

View File

@@ -2,18 +2,29 @@ import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extra.gui.GUI
import org.openrndr.extra.gui.GUIAppearance
import org.openrndr.extra.parameters.*
import org.openrndr.math.Vector2
import org.openrndr.extra.parameters.ColorParameter
import org.openrndr.extra.parameters.Description
import org.openrndr.extra.parameters.DoubleParameter
import org.openrndr.panel.elements.draw
/**
* A simple demonstration of a GUI for drawing some circles
* Demonstrates the `GUI.enableSideCanvas` feature.
*
* When set to true, the `GUI` provides a `canvas` property where one can draw.
* The size of this canvas is the window size minus the GUI size.
*
* That's why if we draw a circle at `drawer.width / 2.0` it is centered
* on the `canvas`, not on the window.
*
* This demo sets the window to resizable, so if you resize the window
* you should see tha the circle stays at the center of the canvas.
*
*/
fun main() = application {
configure {
width = 800
height = 800
width = 720
height = 720
windowResizable = true
}
@@ -23,17 +34,11 @@ fun main() = application {
gui.enableSideCanvas = true
val settings = @Description("Settings") object {
@DoubleParameter("radius", 0.0, 100.0)
@DoubleParameter("radius", 0.0, 200.0)
var radius = 50.0
@Vector2Parameter("position", 0.0, 1.0)
var position = Vector2(0.6, 0.5)
@ColorParameter("color")
var color = ColorRGBa.PINK
@DoubleListParameter("radii", 5.0, 30.0)
var radii = mutableListOf(5.0, 6.0, 8.0, 14.0, 20.0, 30.0)
}
gui.add(settings)
extend(gui)
@@ -42,7 +47,7 @@ fun main() = application {
val width = drawer.width
val height = drawer.height
drawer.fill = settings.color
drawer.circle(width/2.0, height/2.0, 100.0)
drawer.circle(width / 2.0, height / 2.0, settings.radius)
}
}
}

View File

@@ -6,11 +6,22 @@ import org.openrndr.math.Vector2
import org.openrndr.shape.Circle
/**
* A simple demonstration of a GUI for drawing some circles
* Demonstrates how to create a simple GUI with 4 inputs:
* - A `ColorParameter` which creates a color picker.
* - A `DoubleParameter` to control the radius of a circle.
* - A `Vector2Parameter` to set the position of that circle.
* - A `DoubleListParameter` which sets the radii of six circles.
*
* The demo also shows how to use the variables controlled by the GUI
* inside the program, so changes to those variables affect
* the rendering in real time.
*/
fun main() = application {
configure {
width = 720
height = 450
}
program {
val gui = GUI()
gui.compartmentsCollapsedByDefault = false

View File

@@ -4,6 +4,13 @@ import org.openrndr.extra.parameters.Description
import org.openrndr.extra.parameters.XYParameter
import org.openrndr.math.Vector2
/**
* Demonstrates the use of the `@XYParameter` annotation applied to a `Vector2` variable.
*
* This annotation creates an interactive XY control in a GUI that can be used to update
* a `Vector2` variable. In this demo it sets the position of a circle.
*
*/
fun main() = application {
configure {
width = 800