glimmer-dsl-libui 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 56c014bad471f47e7af8a1a36bd6e1642f613c5c5ff0371e16ccd037401831a0
-  data.tar.gz: adcbb03e5e80604fac25a6c167aefca3b451f6b5a9bc29bbc2679a6e19fce4fc
+  metadata.gz: 94f447a302c22ea118d50c6d8f1b81c3a74cbd81fb7b6b6d61a7bb0cf22e9dd3
+  data.tar.gz: 50faeffb8a2e2efaece4464432ecb6a51080e9662b4778f606f872a8286332a9
 SHA512:
-  metadata.gz: 65003a4c358b09c6ec0d2f5215245808af2f6510ea2901067b33363e918ee9b9713005546d0baf925a16ccb1ad490229217f1ed4ae8ec375085bb6d3770c1b5a
-  data.tar.gz: d2c5824d177dc82351857efe565f151711f34034b8522bef1045224728b805c3e9645f4098a448458564f3417981eab3c354c6d61299d8a96cf97bf56fa4a776
+  metadata.gz: 570a7e4002cb5da3dcd49d6eb03c5554817036626c293faf3cbc2abc72063b83954e1c4795ad64a1b975ff6b8bca9d84b31a142914489777754ca5afb0d73cc0
+  data.tar.gz: 0bdfb434406fc6bb3b1dcc08562ca0507d3d58821306dafec68089248910cb4e325fb0dd3282f2424754980682d46595b8fae1e658a5e4636b680f1e9ce52fff

data/CHANGELOG.md

@@ -1,8 +1,30 @@
 # Change Log
 
+## 0.1.6
+
+- Update default `window` `width` to `190`
+- Improve layout of examples/meta_example.rb
+- Enhance examples/meta_example.rb to enable choosing versions with a spinbox instead of adding them to examples list
+- Nest control proxies under `Glimmer::LibUI::ControlProxy` namespace
+- Nest shapes under `Glimmer::LibUI::Shape` namespace
+- Nest `vertical_box` and `horizontal_box` under `Glimmer::LibUI::ControlProxy::Box` namespace
+- Nest columns under `Glimmer::LibUI::ControlProxy::Column` namespace
+- Nest menu item proxies under `Glimmer::LibUI::ControlProxy::MenuItemProxy` namespace
+- Nest date time picker proxies under `Glimmer::LibUI::ControlProxy::DateTimePickerProxy` namespace
+- Nest multiline entry proxies under `Glimmer::LibUI::ControlProxy::MultinlineEntryProxy` namespace
+- Support `time_picker` control explicitly
+- Support X11 color names (via [color](https://github.com/halostatue/color) gem)
+- Support passing :red, :green, :blue, :alpha keys to fill/stroke (not just :r,:g,:b,:a)
+- Support 3-number hex color shorthand
+- Support ability to set fill/stroke to x11/Integer/String color directly (e.g. `fill 'steelblue'` , optionally with extra hash key/value pairs e.g. `fill 0x238232, a: 0.5`)
+- Support ability to set color_button.color to {color: x11/Integer/String}
+- Default main_window_proxy first argument for `msg_box`/`msg_box_error` (and empty strings for following args if not passed)
+- Default main_window_proxy argument for `open_file` and `save_file`
+
 ## 0.1.5
 
 - Support examples/histogram.rb
+- Support examples/basic_transform.rb
 - Support `color_button` `color=`/`set_color` setter
 - Switch `color_button` `color` API to return a hash of `{:r, :g, :b, :a}` instead of an array for consistency with other libui APIs (like fill and stroke brush)
 - Implement `color_button` fine-grained setters (e.g. `cg.red = 144`)

data/README.md

@@ -1,4 +1,4 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.1.4
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.1.6
 ## Prerequisite-Free Ruby Desktop Development GUI Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-libui.svg)](http://badge.fury.io/rb/glimmer-dsl-libui)
 [![Maintainability](https://api.codeclimate.com/v1/badges/ce2853efdbecf6ebdc73/maintainability)](https://codeclimate.com/github/AndyObtiva/glimmer-dsl-libui/maintainability)
@@ -143,7 +143,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
 
 ## Table of Contents
 
-- [Glimmer DSL for LibUI 0.1.4](#-glimmer-dsl-for-libui-014)
+- [Glimmer DSL for LibUI 0.1.6](#-glimmer-dsl-for-libui-016)
   - [Glimmer GUI DSL Concepts](#glimmer-gui-dsl-concepts)
   - [Usage](#usage)
   - [Girb (Glimmer IRB)](#girb-glimmer-irb)
@@ -249,10 +249,10 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('hello world', 300, 200) { |w|
+window('hello world', 300, 200) {
   button('Button') {
     on_clicked do
-      msg_box(w, 'Information', 'You clicked the button')
+      msg_box('Information', 'You clicked the button')
     end
   }
   
@@ -273,7 +273,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.1.4'
+gem 'glimmer-dsl-libui', '~> 0.1.6'
 ```
 
 Add `require 'glimmer-dsl-libui'` at the top, and then `include Glimmer` into the top-level main object for testing or into an actual class for serious usage.
@@ -378,8 +378,8 @@ Control(Args) | Properties | Listeners
 `menu(text as String)` | None | None
 `menu_item(text as String)` | `checked` (Boolean) | `on_clicked`
 `multiline_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
-`msg_box(window as Glimmer::LibUI::WindowProxy, title as String, description as String)` | None | None
-`msg_box_error(window as Glimmer::LibUI::WindowProxy, title as String, description as String)` | None | None
+`msg_box(window = main_window as Glimmer::LibUI::WindowProxy, title as String, description as String)` | None | None
+`msg_box_error(window = main_window as Glimmer::LibUI::WindowProxy, title as String, description as String)` | None | None
 `non_wrapping_multiline_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
 `path` | `fill` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`), `stroke` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, `:cap` as `Numeric`, `:join` as `Numeric`, `:thickness` as `Numeric`, `:miter_limit` as `Numeric` ) | None
 `preferences_menu_item` | None | `on_clicked`
@@ -395,7 +395,7 @@ Control(Args) | Properties | Listeners
 `tab_item(name as String)` | `index` [read-only] (`Integer`), `margined` (Boolean), `name` [read-only] (`String`) | None
 `table` | `cell_rows` (`Array` (rows) of `Arrays` (row columns) of cell values (e.g. `String` values for `text_column` cells or `Array` of `image`/`String` for `image_text_column`)), `editable` as Boolean | None
 `text_column(name as String)` | `editable` (Boolean) | None
-`time_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`, `mday` as `Integer`, `mon` as `Integer`, `year` as `Integer`, `wday` as `Integer`, `yday` as `Integer`, `dst` as Boolean) | `on_changed`
+`time_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`) | `on_changed`
 `vertical_box` | `padded` (Boolean) | None
 `window(title as String, width as Integer, height as Integer, has_menubar as Boolean)` | `borderless` (Boolean), `content_size` (width `Numeric`, height `Numeric`), `fullscreen` (Boolean), `margined` (Boolean), `title` (`String`) | `on_closing`, `on_content_size_changed`, `on_destroy`
 
@@ -606,6 +606,8 @@ The `area_draw_params` argument for `on_draw` block is a hash consisting of the
 
 In general, it is recommended to use declarative stable paths whenever feasible since they require less code and simpler maintenance. But, in more advanced cases, semi-declarative dynamic paths could be used instead, especially if there are thousands of dynamic paths that need maximum performance and low memory footprint.
 
+Note that when nesting an `area` directly underneath `window` (without a layout control like `vertical_box`), it is automatically reparented with `vertical_box` in between the `window` and `area` since it would not show up on Linux otherwise.
+
 To redraw an `area`, you may call the `#queue_redraw_all` method, or simply `#redraw`.
 
 A transform `matrix` can be set on a path by building a `matrix(m11 = nil, m12 = nil, m21 = nil, m22 = nil, m31 = nil, m32 = nil) {operations}` proxy object and then setting via `transform` property, or alternatively by building and setting the matrix in one call to `transform(m11 = nil, m12 = nil, m21 = nil, m22 = nil, m31 = nil, m32 = nil) {operations}` passing it the matrix arguments and/or content operations.
@@ -638,7 +640,7 @@ window('Basic Transform', 350, 350) {
         square(0, 0, 100)
         
         fill r: [255 - n*5, 0].max, g: [n*5, 255].min, b: 0, a: 0.5
-        stroke color: 0, thickness: 2
+        stroke :black, thickness: 2
         transform {
           skew 0.15, 0.15
           translate 50, 50
@@ -673,12 +675,18 @@ transform m1
 
 Note that `area`, `path`, and nested shapes are all truly declarative, meaning they do not care about the ordering of calls to `fill`, `stroke`, and `transform`. Furthermore, any transform that is applied is reversed at the end of the block, so you never have to worry about the ordering of `transform` calls among different paths. You simply set a transform on the `path`s that need it and it is guaranteed to be called before all its content is drawn, and then undone afterwards to avoid affecting later paths. Matrix `transform` can be set on an entire `area` too, applying to all nested `path`s.
 
+`fill` and `stroke` accept [X11](https://en.wikipedia.org/wiki/X11_color_names) color `Symbol`s/`String`s like `:skyblue` and `'sandybrown'` or 6-number hex or 3-number hex-shorthand (as `Integer` or `String` with or without `0x` prefix)
+
+Check [Basic Transform](#basic-transform) example for use of [X11](https://en.wikipedia.org/wiki/X11_color_names) colors.
+
+Check [Histogram](#histogram) example for use of hex colors.
+
 ### Smart Defaults and Conventions
 
 - `horizontal_box`, `vertical_box`, `grid`, and `form` controls have `padded` as `true` upon instantiation to ensure more user-friendly GUI by default
 - `group` controls have `margined` as `true` upon instantiation to ensure more user-friendly GUI by default
 - All controls nested under a `horizontal_box`, `vertical_box`, and `form` have `stretchy` property (fill maximum space) as `true` by default (passed to `box_append`/`form_append` method)
-- `window` instatiation args can be left off, having the following defaults when unspecified: `title` as `''`, `width` as `150`, `height` as `150`, and `has_menubar` as `true`)
+- `window` instatiation args can be left off, having the following defaults when unspecified: `title` as `''`, `width` as `190`, `height` as `150`, and `has_menubar` as `true`)
 - `window` has an `on_closing` listener by default that quits application upon hitting the close button (can be overridden with a manual `on_closing` implementation that returns integer `0` for success)
 - `group` has `title` property default to `''` if not specified in instantiation args, so it can be instantiated without args with `title` property specified in nested block (e.g. `group {title 'Address'; ...}`)
 - `button`, `checkbox`, and `label` have `text` default to `''` if not specified in instantiation args, so they can be instantiated without args with `text` property specified in nested block (e.g. `button {text 'Greet'; on_clicked {puts 'Hello'}}`)
@@ -706,6 +714,9 @@ Note that `area`, `path`, and nested shapes are all truly declarative, meaning t
 - Observe `path` `fill` and `stroke` hashes for changes and automatically redraw containing area accordingly
 - All controls are protected from garbage collection until no longer needed (explicitly destroyed), so there is no need to worry about surprises.
 - All resources are freed automatically once no longer needed or left to garbage collection.
+- When nesting an `area` directly underneath `window` (without a layout control like `vertical_box`), it is automatically reparented with `vertical_box` in between the `window` and `area` since it would not show up on Linux otherwise.
+- Colors may be passed in as a hash of `:r`, `:g`, `:b`, `:a`, or `:red`, `:green`, `:blue`, `:alpha`, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color like `:skyblue`, or 6-number hex or 3-number hex (as `Integer` or `String` with or without `0x` prefix)
+- Color alpha value defaults to `1.0` when not specified.
 
 ### API Gotchas
 
@@ -783,7 +794,7 @@ class MetaExample
   end
   
   def launch
-    window('Meta-Example', 700, 500) { |w|
+    window('Meta-Example', 700, 500) {
       margined true
       
       horizontal_box {
@@ -805,7 +816,7 @@ class MetaExample
                 meta_example_file = File.join(Dir.home, '.meta_example.rb')
                 File.write(meta_example_file, @nwme.text)
                 result = `ruby -r #{glimmer_dsl_libui_file} #{meta_example_file} 2>&1`
-                msg_box(w, 'Error Running Example', result) if result.include?('error')
+                msg_box('Error Running Example', result) if result.include?('error')
               rescue => e
                 puts 'Unable to write code changes! Running original example...'
                 system "ruby -r #{glimmer_dsl_libui_file} #{file_path_for(@examples[@rbs.selected])}"
@@ -970,10 +981,10 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('hello world', 300, 200) { |w|
+window('hello world', 300, 200) {
   button('Button') {
     on_clicked do
-      msg_box(w, 'Information', 'You clicked the button')
+      msg_box('Information', 'You clicked the button')
     end
   }
   
@@ -1057,7 +1068,7 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('Basic Entry', 300, 50) { |w|
+window('Basic Entry', 300, 50) {
   horizontal_box {
     e = entry {
       # stretchy true # Smart default option for appending to horizontal_box
@@ -1073,7 +1084,7 @@ window('Basic Entry', 300, 50) { |w|
       
       on_clicked do
         text = e.text
-        msg_box(w, 'You entered', text)
+        msg_box('You entered', text)
       end
     }
   }
@@ -1177,12 +1188,12 @@ ruby -r glimmer-dsl-libui -e "require 'examples/midi_player'"
 Mac
 
 ![glimmer-dsl-libui-mac-midi-player.png](images/glimmer-dsl-libui-mac-midi-player.png)
-![glimmer-dsl-libui-mac-midi-player-version-msg-box.png](images/glimmer-dsl-libui-mac-midi-player-version-msg-box.png)
+![glimmer-dsl-libui-mac-midi-player-msg-box.png](images/glimmer-dsl-libui-mac-midi-player-msg-box.png)
 
 Linux
 
 ![glimmer-dsl-libui-linux-midi-player.png](images/glimmer-dsl-libui-linux-midi-player.png)
-![glimmer-dsl-libui-linux-midi-player-version-msg-box.png](images/glimmer-dsl-libui-linux-midi-player-version-msg-box.png)
+![glimmer-dsl-libui-linux-midi-player-msg-box.png](images/glimmer-dsl-libui-linux-midi-player-msg-box.png)
 
 [LibUI](https://github.com/kojix2/LibUI) Original Version:
 
@@ -1328,23 +1339,22 @@ class TinyMidiPlayer
     end
   end
 
-  def show_version(main_window)
-    msg_box(main_window,
-               'Tiny Midi Player',
-               "Written in Ruby\n" \
-               "https://github.com/kojix2/libui\n" \
-               "Version #{VERSION}")
+  def show_version
+    msg_box('Tiny Midi Player',
+              "Written in Ruby\n" \
+                "https://github.com/kojix2/libui\n" \
+                "Version #{VERSION}")
   end
 
   def create_gui
     menu('Help') { |m|
       menu_item('Version') {
         on_clicked do
-          show_version(@main_window)
+          show_version
         end
       }
     }
-    @main_window = window('Tiny Midi Player', 200, 50) {
+    window('Tiny Midi Player', 200, 50) {
       horizontal_box {
         vertical_box {
           stretchy false
@@ -1360,7 +1370,7 @@ class TinyMidiPlayer
             end
           }
         }
-        
+
         combobox { |c|
           items @midi_files.map { |path| File.basename(path) }
           
@@ -1370,8 +1380,7 @@ class TinyMidiPlayer
           end
         }
       }
-    }
-    @main_window.show
+    }.show
   end
 end
 
@@ -1607,14 +1616,14 @@ include Glimmer
 menu('File') {
   menu_item('Open') {
     on_clicked do
-      file = open_file(MAIN_WINDOW)
+      file = open_file
       puts file unless file.nil?
     end
   }
 
   menu_item('Save') {
     on_clicked do
-      file = save_file(MAIN_WINDOW)
+      file = save_file
       puts file unless file.nil?
     end
   }
@@ -1657,7 +1666,7 @@ MAIN_WINDOW = window('Control Gallery', 600, 500) {
             stretchy false
 
             on_clicked do
-              msg_box(MAIN_WINDOW, 'Information', 'You clicked the button')
+              msg_box('Information', 'You clicked the button')
             end
           }
 
@@ -1665,7 +1674,7 @@ MAIN_WINDOW = window('Control Gallery', 600, 500) {
             stretchy false
 
             on_toggled do |c|
-              checked = c.checked == 1
+              checked = c.checked?
               MAIN_WINDOW.title = "Checkbox is #{checked}"
               c.text = "I am the checkbox (#{checked})"
             end
@@ -2119,7 +2128,7 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('Form') { |w|
+window('Form') {
   margined true
   
   vertical_box {
@@ -2135,7 +2144,7 @@ window('Form') { |w|
     
     button('Display Name') {
       on_clicked do
-        msg_box(w, 'Name', "#{@first_name_entry.text} #{@last_name_entry.text}")
+        msg_box('Name', "#{@first_name_entry.text} #{@last_name_entry.text}")
       end
     }
   }
@@ -3893,31 +3902,29 @@ Y_OFF_TOP    = 20
 X_OFF_RIGHT  = 20
 Y_OFF_BOTTOM = 20
 POINT_RADIUS = 5
-
 COLOR_BLUE   = 0x1E90FF
 
+@datapoints   = 10.times.map {Random.new.rand(90)}
+
 def graph_size(area_width, area_height)
   graph_width = area_width - X_OFF_LEFT - X_OFF_RIGHT
   graph_height = area_height - Y_OFF_TOP - Y_OFF_BOTTOM
   [graph_width, graph_height]
 end
 
-def point_locations(datapoints, width, height)
+def point_locations(width, height)
   xincr = width / 9.0 # 10 - 1 to make the last point be at the end
   yincr = height / 100.0
 
-  data = []
-  datapoints.each_with_index do |dp, i|
-    val = 100 - dp.value
-    data << [xincr * i, yincr * val]
-    i += 1
+  @datapoints.each_with_index.map do |value, i|
+    val = 100 - value
+    [xincr * i, yincr * val]
   end
-
-  data
 end
 
-def graph_path(datapoints, width, height, should_extend, &block)
-  locations = point_locations(datapoints, width, height)
+# method-based custom control representing a graph path
+def graph_path(width, height, should_extend, &block)
+  locations = point_locations(width, height)
   path {
     first_location = locations[0] # x and y
     figure(first_location[0], first_location[1]) {
@@ -3932,7 +3939,7 @@ def graph_path(datapoints, width, height, should_extend, &block)
       end
     }
     
-    # now transform the coordinate space so (0, 0) is the top-left corner of the graph
+    # apply a transform to the coordinate space for this path so (0, 0) is the top-left corner of the graph
     transform {
       translate X_OFF_LEFT, Y_OFF_TOP
     }
@@ -3948,12 +3955,13 @@ window('histogram example', 640, 480) {
     vertical_box {
       stretchy false
       
-      @datapoints = 10.times.map do
-        spinbox(0, 100) { |datapoint|
+      10.times do |i|
+        spinbox(0, 100) { |sb|
           stretchy false
-          value Random.new.rand(90)
+          value @datapoints[i]
           
           on_changed do
+            @datapoints[i] = sb.value
             @area.queue_redraw_all
           end
         }
@@ -3974,7 +3982,7 @@ window('histogram example', 640, 480) {
         path {
           rectangle(0, 0, area_draw_params[:area_width], area_draw_params[:area_height])
           
-          fill color: 0xFFFFFF
+          fill 0xFFFFFF
         }
         
         graph_width, graph_height = *graph_size(area_draw_params[:area_width], area_draw_params[:area_height])
@@ -3985,16 +3993,16 @@ window('histogram example', 640, 480) {
             line(X_OFF_LEFT + graph_width, Y_OFF_TOP + graph_height)
           }
           
-          stroke color: 0x000000, thickness: 2, miter_limit: 10
+          stroke 0x000000, thickness: 2, miter_limit: 10
         }
       
         # now create the fill for the graph below the graph line
-        graph_path(@datapoints, graph_width, graph_height, true) {
+        graph_path(graph_width, graph_height, true) {
           fill @color_button.color.merge(a: 0.5)
         }
         
         # now draw the histogram line
-        graph_path(@datapoints, graph_width, graph_height, false) {
+        graph_path(graph_width, graph_height, false) {
           stroke @color_button.color.merge(thickness: 2, miter_limit: 10)
         }
       end
@@ -4046,7 +4054,7 @@ window('Basic Transform', 350, 350) {
         square(0, 0, 100)
         
         fill r: [255 - n*5, 0].max, g: [n*5, 255].min, b: 0, a: 0.5
-        stroke color: 0, thickness: 2
+        stroke :black, thickness: 2
         transform {
           skew 0.15, 0.15
           translate 50, 50

data/VERSION

@@ -1 +1 @@
-0.1.5
+0.1.6

data/examples/basic_button.rb

@@ -4,10 +4,10 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('hello world', 300, 200) { |w|
+window('hello world', 300, 200) {
   button('Button') {
     on_clicked do
-      msg_box(w, 'Information', 'You clicked the button')
+      msg_box('Information', 'You clicked the button')
     end
   }
   

data/examples/basic_entry.rb

@@ -4,7 +4,7 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('Basic Entry', 300, 50) { |w|
+window('Basic Entry', 300, 50) {
   horizontal_box {
     e = entry {
       # stretchy true # Smart default option for appending to horizontal_box
@@ -20,7 +20,7 @@ window('Basic Entry', 300, 50) { |w|
       
       on_clicked do
         text = e.text
-        msg_box(w, 'You entered', text)
+        msg_box('You entered', text)
       end
     }
   }

data/examples/basic_transform.rb

@@ -14,7 +14,7 @@ window('Basic Transform', 350, 350) {
         square(0, 0, 100)
         
         fill r: [255 - n*5, 0].max, g: [n*5, 255].min, b: 0, a: 0.5
-        stroke color: 0, thickness: 2
+        stroke :black, thickness: 2
         transform {
           skew 0.15, 0.15
           translate 50, 50

data/examples/control_gallery.rb

@@ -7,14 +7,14 @@ include Glimmer
 menu('File') {
   menu_item('Open') {
     on_clicked do
-      file = open_file(MAIN_WINDOW)
+      file = open_file
       puts file unless file.nil?
     end
   }
 
   menu_item('Save') {
     on_clicked do
-      file = save_file(MAIN_WINDOW)
+      file = save_file
       puts file unless file.nil?
     end
   }
@@ -57,7 +57,7 @@ MAIN_WINDOW = window('Control Gallery', 600, 500) {
             stretchy false
 
             on_clicked do
-              msg_box(MAIN_WINDOW, 'Information', 'You clicked the button')
+              msg_box('Information', 'You clicked the button')
             end
           }
 

data/examples/form.rb

@@ -4,7 +4,7 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('Form') { |w|
+window('Form') {
   margined true
   
   vertical_box {
@@ -20,7 +20,7 @@ window('Form') { |w|
     
     button('Display Name') {
       on_clicked do
-        msg_box(w, 'Name', "#{@first_name_entry.text} #{@last_name_entry.text}")
+        msg_box('Name', "#{@first_name_entry.text} #{@last_name_entry.text}")
       end
     }
   }

data/examples/histogram.rb

@@ -9,31 +9,29 @@ Y_OFF_TOP    = 20
 X_OFF_RIGHT  = 20
 Y_OFF_BOTTOM = 20
 POINT_RADIUS = 5
-
 COLOR_BLUE   = 0x1E90FF
 
+@datapoints   = 10.times.map {Random.new.rand(90)}
+
 def graph_size(area_width, area_height)
   graph_width = area_width - X_OFF_LEFT - X_OFF_RIGHT
   graph_height = area_height - Y_OFF_TOP - Y_OFF_BOTTOM
   [graph_width, graph_height]
 end
 
-def point_locations(datapoints, width, height)
+def point_locations(width, height)
   xincr = width / 9.0 # 10 - 1 to make the last point be at the end
   yincr = height / 100.0
 
-  data = []
-  datapoints.each_with_index do |dp, i|
-    val = 100 - dp.value
-    data << [xincr * i, yincr * val]
-    i += 1
+  @datapoints.each_with_index.map do |value, i|
+    val = 100 - value
+    [xincr * i, yincr * val]
   end
-
-  data
 end
 
-def graph_path(datapoints, width, height, should_extend, &block)
-  locations = point_locations(datapoints, width, height)
+# method-based custom control representing a graph path
+def graph_path(width, height, should_extend, &block)
+  locations = point_locations(width, height)
   path {
     first_location = locations[0] # x and y
     figure(first_location[0], first_location[1]) {
@@ -48,7 +46,7 @@ def graph_path(datapoints, width, height, should_extend, &block)
       end
     }
     
-    # now transform the coordinate space so (0, 0) is the top-left corner of the graph
+    # apply a transform to the coordinate space for this path so (0, 0) is the top-left corner of the graph
     transform {
       translate X_OFF_LEFT, Y_OFF_TOP
     }
@@ -64,12 +62,13 @@ window('histogram example', 640, 480) {
     vertical_box {
       stretchy false
       
-      @datapoints = 10.times.map do
-        spinbox(0, 100) { |datapoint|
+      10.times do |i|
+        spinbox(0, 100) { |sb|
           stretchy false
-          value Random.new.rand(90)
+          value @datapoints[i]
           
           on_changed do
+            @datapoints[i] = sb.value
             @area.queue_redraw_all
           end
         }
@@ -90,7 +89,7 @@ window('histogram example', 640, 480) {
         path {
           rectangle(0, 0, area_draw_params[:area_width], area_draw_params[:area_height])
           
-          fill color: 0xFFFFFF
+          fill 0xFFFFFF
         }
         
         graph_width, graph_height = *graph_size(area_draw_params[:area_width], area_draw_params[:area_height])
@@ -101,16 +100,16 @@ window('histogram example', 640, 480) {
             line(X_OFF_LEFT + graph_width, Y_OFF_TOP + graph_height)
           }
           
-          stroke color: 0x000000, thickness: 2, miter_limit: 10
+          stroke 0x000000, thickness: 2, miter_limit: 10
         }
       
         # now create the fill for the graph below the graph line
-        graph_path(@datapoints, graph_width, graph_height, true) {
+        graph_path(graph_width, graph_height, true) {
           fill @color_button.color.merge(a: 0.5)
         }
         
         # now draw the histogram line
-        graph_path(@datapoints, graph_width, graph_height, false) {
+        graph_path(graph_width, graph_height, false) {
           stroke @color_button.color.merge(thickness: 2, miter_limit: 10)
         }
       end