kaze/orx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[orx-gui] Add GUIAppearance to configure base color and bar width

Browse Source
This commit is contained in:
Edwin Jakobs
2022-09-29 11:40:03 +02:00
parent b6d77837c6
commit 6e493b3fb2
8 changed files with 98 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
orx-jvm/orx-gui/src/demo/kotlin/DemoAppearance01.kt Normal file
View File

@@ -0,0 +1,58 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extensions.SingleScreenshot
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.shape.Circle
/**
* A simple demonstration of a GUI for drawing some circles
*/
fun main() = application {
program {
// -- this block is for automation purposes only
if (System.getProperty("takeScreenshot") == "true") {
extend(SingleScreenshot()) {
this.outputFile = System.getProperty("screenshotPath")
}
}
val gui = GUI(GUIAppearance(barWidth = 400))
gui.compartmentsCollapsedByDefault = false
val settings = @Description("Settings") object {
@DoubleParameter("radius", 0.0, 100.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)
// note we can only change the visibility after the extend
gui.visible = true
extend {
// determine visibility through mouse x-coordinate
//gui.visible = mouse.position.x < gui.appearance.barWidth
drawer.fill = settings.color
drawer.circle(settings.position * drawer.bounds.position(1.0, 1.0), settings.radius)
drawer.circles(
settings.radii.mapIndexed { i, radius ->
Circle(width - 50.0, 60.0 + i * 70.0, radius)
}
)
}
}
}

14
orx-jvm/orx-gui/src/demo/kotlin/DemoHide01.kt
View File

@@ -11,17 +11,9 @@ import org.openrndr.shape.Circle
*/
fun main() = application {
program {
// -- this block is for automation purposes only
if (System.getProperty("takeScreenshot") == "true") {
extend(SingleScreenshot()) {
this.outputFile = System.getProperty("screenshotPath")
}
}
val gui = GUI()
gui.compartmentsCollapsedByDefault = false
val settings = @Description("Settings") object {
@DoubleParameter("radius", 0.0, 100.0)
var radius = 50.0
@@ -48,9 +40,9 @@ fun main() = application {
drawer.fill = settings.color
drawer.circle(settings.position * drawer.bounds.position(1.0, 1.0), settings.radius)
drawer.circles(
settings.radii.mapIndexed { i, radius ->
Circle(width - 50.0, 60.0 + i * 70.0, radius)
}
settings.radii.mapIndexed { i, radius ->
Circle(width - 50.0, 60.0 + i * 70.0, radius)
}
)
}
}

9
orx-jvm/orx-gui/src/demo/kotlin/DemoOptions01.kt
View File

@@ -16,13 +16,6 @@ enum class BackgroundColors {
fun main() = application {
program {
// -- this block is for automation purposes only
if (System.getProperty("takeScreenshot") == "true") {
extend(SingleScreenshot()) {
this.outputFile = System.getProperty("screenshotPath")
}
}
val gui = GUI()
gui.compartmentsCollapsedByDefault = false
val settings = @Description("Settings") object {
@@ -33,7 +26,7 @@ fun main() = application {
gui.add(settings)
extend(gui)
extend {
when(settings.option) {
when (settings.option) {
BackgroundColors.Pink -> drawer.clear(ColorRGBa.PINK)
BackgroundColors.Black -> drawer.clear(ColorRGBa.BLACK)
BackgroundColors.Yellow -> drawer.clear(ColorRGBa.YELLOW)

15
orx-jvm/orx-gui/src/demo/kotlin/DemoPresets01.kt
View File

@@ -13,13 +13,6 @@ import org.openrndr.extra.parameters.*
*/
fun main() = application {
program {
// -- this block is for automation purposes only
if (System.getProperty("takeScreenshot") == "true") {
extend(SingleScreenshot()) {
this.outputFile = System.getProperty("screenshotPath")
}
}
val gui = GUI()
gui.compartmentsCollapsedByDefault = false
@@ -47,8 +40,8 @@ fun main() = application {
drawer.stroke = settings.background
drawer.fill = settings.foreground
// Draw a pattern based on modulo
for(i in 0 until 100) {
if(i % settings.a == 0 || i % settings.b == 0) {
for (i in 0 until 100) {
if (i % settings.a == 0 || i % settings.b == 0) {
val x = (i % 10) * 64.0
val y = (i / 10) * 48.0
drawer.rectangle(x, y, 64.0, 48.0)
@@ -57,8 +50,8 @@ fun main() = application {
}
keyboard.keyDown.listen {
when (it.name) {
in "0" .. "9" -> {
if(keyboard.pressedKeys.contains("left-shift")) {
in "0".."9" -> {
if (keyboard.pressedKeys.contains("left-shift")) {
// 1. Get the current gui state, store it in a list
presets[it.name.toInt()] = gui.toObject()
} else {

6
orx-jvm/orx-gui/src/demo/kotlin/DemoSideCanvas01.kt
View File

@@ -1,6 +1,7 @@
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.panel.elements.draw
@@ -14,14 +15,13 @@ fun main() = application {
width = 800
height = 800
windowResizable = true
}
program {
val gui = GUI(baseColor = ColorRGBa.GRAY.shade(0.25))
val gui = GUI(GUIAppearance(baseColor = ColorRGBa.GRAY.shade(0.25)))
gui.compartmentsCollapsedByDefault = false
gui.enableSideCanvas = true
val settings = @Description("Settings") object {
@DoubleParameter("radius", 0.0, 100.0)
var radius = 50.0

6
orx-jvm/orx-gui/src/demo/kotlin/DemoSimple01.kt
View File

@@ -40,9 +40,9 @@ fun main() = application {
drawer.fill = settings.color
drawer.circle(settings.position * drawer.bounds.position(1.0, 1.0), settings.radius)
drawer.circles(
settings.radii.mapIndexed { i, radius ->
Circle(width - 50.0, 60.0 + i * 70.0, radius)
}
settings.radii.mapIndexed { i, radius ->
Circle(width - 50.0, 60.0 + i * 70.0, radius)
}
)
}
}

19
orx-jvm/orx-gui/src/demo/kotlin/DemoXYParameter.kt
View File

@@ -12,22 +12,17 @@ fun main() = application {
}
program {
// -- this block is for automation purposes only
if (System.getProperty("takeScreenshot") == "true") {
extend(SingleScreenshot()) {
this.outputFile = System.getProperty("screenshotPath")
}
}
val gui = GUI()
gui.compartmentsCollapsedByDefault = false
val settings = @Description("Settings") object {
@XYParameter("Position", 0.0, 800.0, 0.0, 800.0,
precision = 2,
invertY = false,
showVector = true)
var position: Vector2 = Vector2(0.0,0.0)
@XYParameter(
"Position", 0.0, 800.0, 0.0, 800.0,
precision = 2,
invertY = false,
showVector = true
)
var position: Vector2 = Vector2(0.0, 0.0)
}
gui.add(settings)

34
orx-jvm/orx-gui/src/main/kotlin/Gui.kt
View File

@@ -72,8 +72,12 @@ private fun <T : Any> setAndPersist(compartmentLabel: String, property: KMutable
private val logger = KotlinLogging.logger { }
class GUIAppearance(val baseColor: ColorRGBa = ColorRGBa.GRAY, val barWidth:Int = 200)
@Suppress("unused", "UNCHECKED_CAST")
class GUI(val baseColor:ColorRGBa = ColorRGBa.GRAY, val defaultStyles: List<StyleSheet> = defaultStyles()) : Extension {
class GUI(val appearance: GUIAppearance = GUIAppearance(),
val defaultStyles: List<StyleSheet> = defaultStyles()) : Extension {
private var onChangeListener: ((name: String, value: Any?) -> Unit)? = null
override var enabled = true
@@ -174,7 +178,7 @@ class GUI(val baseColor:ColorRGBa = ColorRGBa.GRAY, val defaultStyles: List<Styl
styleSheet(has class_ "container") {
this.display = Display.FLEX
this.flexDirection = FlexDirection.Column
this.width = 200.px
this.width = appearance.barWidth.px
this.height = 100.percent
}
@@ -183,10 +187,10 @@ class GUI(val baseColor:ColorRGBa = ColorRGBa.GRAY, val defaultStyles: List<Styl
this.flexDirection = FlexDirection.Column
this.height = 5.px
this.width = 100.percent
this.background = Color.RGBa(baseColor.shade(0.9))
this.background = Color.RGBa(appearance.baseColor.shade(0.9))
and(has state "hover") {
this.background = Color.RGBa(baseColor.shade(1.1))
this.background = Color.RGBa(appearance.baseColor.shade(1.1))
}
}
@@ -195,7 +199,7 @@ class GUI(val baseColor:ColorRGBa = ColorRGBa.GRAY, val defaultStyles: List<Styl
this.width = 100.percent
this.display = Display.FLEX
this.flexDirection = FlexDirection.Row
this.background = Color.RGBa(baseColor.copy(alpha = 0.99))
this.background = Color.RGBa(appearance.baseColor.copy(alpha = 0.99))
}
styleSheet(has class_ "collapsed") {
@@ -207,40 +211,40 @@ class GUI(val baseColor:ColorRGBa = ColorRGBa.GRAY, val defaultStyles: List<Styl
}
styleSheet(has class_ "sidebar") {
this.width = 200.px
this.width = appearance.barWidth.px
this.paddingBottom = 20.px
this.paddingTop = 10.px
this.paddingLeft = 10.px
this.paddingRight = 10.px
this.marginRight = 2.px
this.height = 100.percent
this.background = Color.RGBa(baseColor.copy(alpha = 0.99))
this.background = Color.RGBa(appearance.baseColor.copy(alpha = 0.99))
this.overflow = Overflow.Scroll
//<editor-fold desc="1) setup control style">
descendant(has type "colorpicker-button") {
this.width = 175.px
this.width = (appearance.barWidth-25).px
}
descendant(has type "slider") {
this.width = 175.px
this.width = (appearance.barWidth-25).px
}
descendant(has type "button") {
this.width = 175.px
this.width = (appearance.barWidth-25).px
}
descendant(has type "textfield") {
this.width = 175.px
this.width = (appearance.barWidth-25).px
}
descendant(has type "toggle") {
this.width = 175.px
this.width = (appearance.barWidth-25).px
}
descendant(has type "xy-pad") {
this.width = 175.px
this.height = 175.px
this.width = (appearance.barWidth-25).px
this.height = (appearance.barWidth-25).px
}
descendant(has type listOf(
@@ -249,7 +253,7 @@ class GUI(val baseColor:ColorRGBa = ColorRGBa.GRAY, val defaultStyles: List<Styl
"sliders-vector3",
"sliders-vector4"
)) {
this.width = 175.px
this.width = (appearance.barWidth-25).px
this.height = 100.px
}
//</editor-fold>