Add descriptions to demos
This commit is contained in:
@@ -12,6 +12,18 @@ import org.openrndr.draw.loadImage
|
||||
import kotlin.math.cos
|
||||
import kotlin.math.sin
|
||||
|
||||
/**
|
||||
* Demonstrates how to convert a PNG image into `ShapeContour`s using BoofCV.
|
||||
*
|
||||
* Two helper methods help convert data types between BoofCV and OPENRNDR.
|
||||
*
|
||||
* The `ColorBuffer.toGrayF32()` method converts an OPENRNDR `ColorBuffer` to `GrayF32` format,
|
||||
* required by BoofCV.
|
||||
*
|
||||
* The `.toShapeContours()` converts BoofCV contours to OPENRNDR `ShapeContour` instances.
|
||||
*
|
||||
* The resulting contours are animated zooming in and out while their colors change slowly.
|
||||
*/
|
||||
fun main() = application {
|
||||
program {
|
||||
// Load an image, convert to BoofCV format using orx-boofcv
|
||||
|
||||
@@ -2,19 +2,31 @@ import org.openrndr.application
|
||||
import org.openrndr.boofcv.binding.resizeBy
|
||||
import org.openrndr.color.ColorRGBa
|
||||
import org.openrndr.draw.loadImage
|
||||
import org.openrndr.math.Vector2
|
||||
|
||||
/**
|
||||
* Demonstrates how to scale down images using the `resizeBy` BoofCV-based
|
||||
* method.
|
||||
*/
|
||||
fun main() = application {
|
||||
program {
|
||||
// Load an image, convert to BoofCV format using orx-boofcv
|
||||
val input = loadImage("demo-data/images/image-001.png")
|
||||
|
||||
val scaled = input.resizeBy(0.5)
|
||||
val scaled2 = input.resizeBy(0.25, convertToGray = true)
|
||||
val scaled3 = input.resizeBy(0.1)
|
||||
|
||||
println("${input.width} x ${input.height}")
|
||||
println("${scaled.width} x ${scaled.height}")
|
||||
|
||||
extend {
|
||||
drawer.clear(ColorRGBa.BLACK)
|
||||
drawer.translate(0.0, (height - scaled.bounds.height) / 2.0)
|
||||
|
||||
// Display the loaded image to the right of `scaled` matching its size
|
||||
drawer.image(input, scaled.bounds.movedBy(Vector2.UNIT_X * scaled.bounds.width))
|
||||
|
||||
// Display actually scaled down versions of the loaded image
|
||||
drawer.image(scaled)
|
||||
drawer.image(scaled2, scaled.bounds.width, scaled.bounds.height - scaled2.height)
|
||||
drawer.image(scaled3, scaled.bounds.width + scaled2.bounds.width, scaled.bounds.height - scaled3.height)
|
||||
|
||||
@@ -3,17 +3,29 @@ import org.openrndr.boofcv.binding.resizeTo
|
||||
import org.openrndr.color.ColorRGBa
|
||||
import org.openrndr.draw.loadImage
|
||||
|
||||
/**
|
||||
* Demonstrates how to scale down images using the `resizeTo` BoofCV-based
|
||||
* method.
|
||||
*
|
||||
* If only the `newWidth` or the `newHeight` arguments are specified,
|
||||
* the resizing happens maintaining the original aspect ratio.
|
||||
*/
|
||||
fun main() = application {
|
||||
program {
|
||||
// Load an image, convert to BoofCV format using orx-boofcv
|
||||
val input = loadImage("demo-data/images/image-001.png")
|
||||
|
||||
val scaled = input.resizeTo(input.width / 3)
|
||||
val scaled2 = input.resizeTo(newHeight = input.height / 4, convertToGray = true)
|
||||
val scaled3 = input.resizeTo(input.width / 5, input.height / 5)
|
||||
|
||||
println("${input.width} x ${input.height}")
|
||||
println("${scaled.width} x ${scaled.height}")
|
||||
|
||||
extend {
|
||||
drawer.clear(ColorRGBa.BLACK)
|
||||
drawer.translate(0.0, (height - scaled.bounds.height) / 2.0)
|
||||
|
||||
// Display actually scaled down versions of the loaded image
|
||||
drawer.image(scaled)
|
||||
drawer.image(scaled2, scaled.bounds.width, scaled.bounds.height - scaled2.height)
|
||||
drawer.image(scaled3, scaled.bounds.width + scaled2.bounds.width, scaled.bounds.height - scaled3.height)
|
||||
|
||||
@@ -17,6 +17,18 @@ import org.openrndr.math.Vector2
|
||||
import org.openrndr.shape.Rectangle
|
||||
import org.openrndr.shape.ShapeContour
|
||||
|
||||
/**
|
||||
* When converting a `ColorBuffer` to `ShapeContour` instances using
|
||||
* `BoofCV`, simple shapes can have hundreds of segments and vertices.
|
||||
*
|
||||
* This demo shows how to use the `simplify()` method to greatly
|
||||
* reduce the number of vertices.
|
||||
*
|
||||
* Then it uses the simplified vertex lists to create smooth curves
|
||||
* (using `CatmullRomChain2`) and polygonal curves (using `ShapeContour.fromPoints`).
|
||||
*
|
||||
* Study the console to learn about the number of segments before and after simplification.
|
||||
*/
|
||||
fun main() = application {
|
||||
program {
|
||||
// Create a buffer where to draw something for boofcv
|
||||
@@ -41,6 +53,7 @@ fun main() = application {
|
||||
rectangle(0.0, -200.0, 60.0, 60.0)
|
||||
circle(0.0, 190.0, 60.0)
|
||||
}
|
||||
|
||||
// Convert the bitmap buffer into ShapeContours
|
||||
val vectorized = imageToContours(rt.colorBuffer(0))
|
||||
|
||||
@@ -73,8 +86,11 @@ fun main() = application {
|
||||
extend {
|
||||
drawer.run {
|
||||
fill = null // ColorRGBa.PINK.opacify(0.15)
|
||||
|
||||
stroke = ColorRGBa.PINK.opacify(0.7)
|
||||
contours(polygonal)
|
||||
|
||||
stroke = ColorRGBa.GREEN.opacify(0.7)
|
||||
contours(smooth)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
43
orx-jvm/orx-gui/src/demo/kotlin/DemoOptions02.kt
Normal file
43
orx-jvm/orx-gui/src/demo/kotlin/DemoOptions02.kt
Normal 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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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()
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -6,7 +6,17 @@ import org.openrndr.math.Vector2
|
||||
import org.openrndr.math.Vector3
|
||||
import org.openrndr.math.Vector4
|
||||
|
||||
|
||||
/**
|
||||
* Demonstrates how to use RabbitControl to create a web-based user interface for your program.
|
||||
*
|
||||
* A `settings` object is created using the same syntax used for `orx-gui`, including
|
||||
* annotations for different variable types.
|
||||
*
|
||||
* The program then passes these `settings` to the `RabbitControlServer`. A QR-code is displayed
|
||||
* to open the web user interface. A clickable URL is also displayed in the console.
|
||||
*
|
||||
* Once the UI is visible in a web browser we can use it to control the OPENRNDR program.
|
||||
*/
|
||||
fun main() = application {
|
||||
configure {
|
||||
width = 800
|
||||
|
||||
@@ -4,6 +4,12 @@ import org.openrndr.color.ColorRGBa
|
||||
import org.openrndr.extra.parameters.BooleanParameter
|
||||
|
||||
|
||||
/**
|
||||
* Demonstrates how the QR-code pointing at the Rabbit Control web-based user interface
|
||||
* can be displayed and hidden manually.
|
||||
*
|
||||
* To display the QR-code overlay in this demo, hold down the HOME key in the keyboard.
|
||||
*/
|
||||
fun main() = application {
|
||||
configure {
|
||||
width = 800
|
||||
|
||||
@@ -6,7 +6,15 @@ import org.openrndr.math.Vector2
|
||||
import org.openrndr.math.Vector3
|
||||
import org.openrndr.math.Vector4
|
||||
|
||||
|
||||
/**
|
||||
* Starts the RabbitControlServer with a `Rabbithole` using the key 'orxtest'.
|
||||
*
|
||||
* `Rabbithole` allows you to access your exposed parameters from Internet
|
||||
* connected computers that are not in the same network.
|
||||
*
|
||||
* To use it with this example use 'orxtest' as the tunnel-name in https://rabbithole.rabbitcontrol.cc
|
||||
*
|
||||
*/
|
||||
fun main() = application {
|
||||
configure {
|
||||
width = 800
|
||||
@@ -14,13 +22,6 @@ fun main() = application {
|
||||
}
|
||||
|
||||
program {
|
||||
/**
|
||||
* Start RabbitControlServer with a Rabbithole with key 'orxtest'
|
||||
* Please visit https://rabbithole.rabbitcontrol.cc for more information.
|
||||
*
|
||||
* Rabbithole allows you to access your exposed parameter from the internet.
|
||||
* To use it with this example just use 'orxtest' as tunnel-name on the main page.
|
||||
*/
|
||||
val rabbit = RabbitControlServer(false, 10000, 8080, "wss://rabbithole.rabbitcontrol.cc/public/rcpserver/connect?key=orxtest")
|
||||
val font = loadFont("demo-data/fonts/IBMPlexMono-Regular.ttf", 20.0)
|
||||
val settings = object {
|
||||
|
||||
Reference in New Issue
Block a user