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

orx-jvm/orx-gui/src/demo/kotlin/DemoAppearance01.kt

@@ -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)
+                    }
+            )
+        }
+    }
+}

orx-jvm/orx-gui/src/demo/kotlin/DemoHide01.kt

@@ -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 ->
+                settings.radii.mapIndexed { i, radius ->
-                        Circle(width - 50.0, 60.0 + i * 70.0, radius)
+                    Circle(width - 50.0, 60.0 + i * 70.0, radius)
-                    }
+                }
             )
         }
     }

orx-jvm/orx-gui/src/demo/kotlin/DemoOptions01.kt

@@ -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)

orx-jvm/orx-gui/src/demo/kotlin/DemoPresets01.kt

@@ -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) {
+            for (i in 0 until 100) {
-                if(i % settings.a == 0 || i % settings.b == 0) {
+                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" -> {
+                in "0".."9" -> {
-                    if(keyboard.pressedKeys.contains("left-shift")) {
+                    if (keyboard.pressedKeys.contains("left-shift")) {
                         // 1. Get the current gui state, store it in a list
                         presets[it.name.toInt()] = gui.toObject()
                     } else {

orx-jvm/orx-gui/src/demo/kotlin/DemoSideCanvas01.kt

@@ -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

orx-jvm/orx-gui/src/demo/kotlin/DemoSimple01.kt

@@ -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 ->
+                settings.radii.mapIndexed { i, radius ->
-                        Circle(width - 50.0, 60.0 + i * 70.0, radius)
+                    Circle(width - 50.0, 60.0 + i * 70.0, radius)
-                    }
+                }
             )
         }
     }

orx-jvm/orx-gui/src/demo/kotlin/DemoXYParameter.kt

@@ -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,
+            @XYParameter(
-                    precision = 2,
+                "Position", 0.0, 800.0, 0.0, 800.0,
-                    invertY = false,
+                precision = 2,
-                    showVector = true)
+                invertY = false,
-            var position: Vector2 = Vector2(0.0,0.0)
+                showVector = true
+            )
+            var position: Vector2 = Vector2(0.0, 0.0)
         }
 
         gui.add(settings)

orx-jvm/orx-gui/src/main/kotlin/Gui.kt

@@ -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.width = (appearance.barWidth-25).px
-                    this.height = 175.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>