RubyGems - glimmer-dsl-libui - Versions diffs - 0.5.22 → 0.5.24 - Mend

glimmer-dsl-libui 0.5.22 → 0.5.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

checksums.yaml +4 -4
data/CHANGELOG.md +9 -0
data/README.md +24 -7
data/VERSION +1 -1
data/docs/examples/GLIMMER-DSL-LIBUI-ADVANCED-EXAMPLES.md +167 -2707
data/examples/gpt2_notepad.rb +107 -0
data/glimmer-dsl-libui.gemspec +0 -0
data/lib/glimmer/libui/custom_control/refined_table.rb +1 -1
metadata +4 -3

data/docs/examples/GLIMMER-DSL-LIBUI-ADVANCED-EXAMPLES.md CHANGED Viewed

@@ -11,6 +11,7 @@
   - [Editable Column Table](#editable-column-table)
   - [Editable Table](#editable-table)
   - [Form Table](#form-table)
+  - [GPT2 Notepad](#gpt2-notepad)
   - [Paginated Refined Table](#paginated-refined-table)
   - [Grid](#grid)
   - [Histogram](#histogram)
@@ -45,2815 +46,274 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-area-gallery.png](/images/glimmer-dsl-libui-mac-area-gallery.png) | ![glimmer-dsl-libui-windows-area-gallery.png](/images/glimmer-dsl-libui-windows-area-gallery.png) | ![glimmer-dsl-libui-linux-area-gallery.png](/images/glimmer-dsl-libui-linux-area-gallery.png)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
-```ruby
-require 'glimmer-dsl-libui'
-include Glimmer
-window('Area Gallery', 400, 400) {
-  area {
-    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
-      square(0, 0, 100)
-      square(100, 100, 400)
-      fill r: 102, g: 102, b: 204
-    }
-    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
-      rectangle(0, 100, 100, 400)
-      rectangle(100, 0, 400, 100)
-      # linear gradient (has x0, y0, x1, y1, and stops)
-      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-    }
-    polygon(100, 100, 100, 400, 400, 100, 400, 400) { # declarative stable path (implicit path syntax for a single shape nested directly under area)
-      fill r: 202, g: 102, b: 104, a: 0.5
-      stroke r: 0, g: 0, b: 0
-    }
-    polybezier(0, 0,
-               200, 100, 100, 200, 400, 100,
-               300, 100, 100, 300, 100, 400,
-               100, 300, 300, 100, 400, 400) { # declarative stable path (implicit path syntax for a single shape nested directly under area)
-      fill r: 202, g: 102, b: 204, a: 0.5
-      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
-    }
-    polyline(100, 100, 400, 100, 100, 400, 400, 400, 0, 0) { # declarative stable path (implicit path syntax for a single shape nested directly under area)
-      stroke r: 0, g: 0, b: 0, thickness: 2
-    }
-    arc(404, 216, 190, 90, 90, false) { # declarative stable path (implicit path syntax for a single shape nested directly under area)
-      # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
-      fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
-      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
-    }
-    circle(200, 200, 90) { # declarative stable path (implicit path syntax for a single shape nested directly under area)
-      fill r: 202, g: 102, b: 204, a: 0.5
-      stroke r: 0, g: 0, b: 0, thickness: 2
-    }
-    text(161, 40, 100) { # declarative stable text
-      string('Area Gallery') {
-        font family: 'Arial', size: (OS.mac? ? 14 : 11)
-        color :black
-      }
-    }
-    on_mouse_event do |area_mouse_event|
-      p area_mouse_event
-    end
-    on_mouse_moved do |area_mouse_event|
-      puts 'moved'
-    end
-    on_mouse_down do |area_mouse_event|
-      puts 'mouse down'
-    end
-    on_mouse_up do |area_mouse_event|
-      puts 'mouse up'
-    end
-    on_mouse_drag_started do |area_mouse_event|
-      puts 'drag started'
-    end
-    on_mouse_dragged do |area_mouse_event|
-      puts 'dragged'
-    end
-    on_mouse_dropped do |area_mouse_event|
-      puts 'dropped'
-    end
-    on_mouse_entered do
-      puts 'entered'
-    end
-    on_mouse_exited do
-      puts 'exited'
-    end
-    on_key_event do |area_key_event|
-      p area_key_event
-    end
-    on_key_up do |area_key_event|
-      puts 'key up'
-    end
-    on_key_down do |area_key_event|
-      puts 'key down'
-    end
-  }
-}.show
-```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (setting shape properties instead of arguments):
-```ruby
-require 'glimmer-dsl-libui'
-include Glimmer
-window('Area Gallery', 400, 400) {
-  area {
-    path { # declarative stable path with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
-      square {
-        x 0
-        y 0
-        length 100
-      }
-      square {
-        x 100
-        y 100
-        length 400
-      }
-      fill r: 102, g: 102, b: 204
-    }
-    path { # declarative stable path with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
-      rectangle {
-        x 0
-        y 100
-        width 100
-        height 400
-      }
-      rectangle {
-        x 100
-        y 0
-        width 400
-        height 100
-      }
-      # linear gradient (has x0, y0, x1, y1, and stops)
-      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-    }
-    figure { # declarative stable path with explicit attributes (implicit path syntax for a single shape nested directly under area)
-      x 100
-      y 100
-      line {
-        x 100
-        y 400
-      }
-      line {
-        x 400
-        y 100
-      }
-      line {
-        x 400
-        y 400
-      }
-      closed true # polygon figure is closed (last point forms a line with first point)
-      fill r: 202, g: 102, b: 104, a: 0.5
-      stroke r: 0, g: 0, b: 0
-    }
-    figure { # declarative stable path with explicit attributes (implicit path syntax for a single shape nested directly under area)
-      x 0
-      y 0
-      bezier {
-        c1_x 200
-        c1_y 100
-        c2_x 100
-        c2_y 200
-        end_x 400
-        end_y 100
-      }
-      bezier {
-        c1_x 300
-        c1_y 100
-        c2_x 100
-        c2_y 300
-        end_x 100
-        end_y 400
-      }
-      bezier {
-        c1_x 100
-        c1_y 300
-        c2_x 300
-        c2_y 100
-        end_x 400
-        end_y 400
-      }
-      fill r: 202, g: 102, b: 204, a: 0.5
-      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
-    }
-    figure { # declarative stable path with explicit attributes (implicit path syntax for a single shape nested directly under area)
-      x 100
-      y 100
-      line {
-        x 400
-        y 100
-      }
-      line {
-        x 100
-        y 400
-      }
-      line {
-        x 400
-        y 400
-      }
-      line {
-        x 0
-        y 0
-      }
-      stroke r: 0, g: 0, b: 0, thickness: 2
-    }
-    arc { # declarative stable path with explicit attributes (implicit path syntax for a single shape nested directly under area)
-      x_center 404
-      y_center 216
-      radius 190
-      start_angle 90
-      sweep 90
-      is_negative false
-      # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
-      fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
-      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
-    }
-    circle { # declarative stable path with explicit attributes (implicit path syntax for a single shape nested directly under area)
-      x_center 200
-      y_center 200
-      radius 90
-      fill r: 202, g: 102, b: 204, a: 0.5
-      stroke r: 0, g: 0, b: 0, thickness: 2
-    }
-    text { # declarative stable text with explicit attributes
-      x 161
-      y 40
-      width 100
-      string {
-        font family: 'Arial', size: (OS.mac? ? 14 : 11)
-        color :black
-        'Area Gallery'
-      }
-    }
-    on_mouse_event do |area_mouse_event|
-      p area_mouse_event
-    end
-    on_mouse_moved do |area_mouse_event|
-      puts 'moved'
-    end
-    on_mouse_down do |area_mouse_event|
-      puts 'mouse down'
-    end
-    on_mouse_up do |area_mouse_event|
-      puts 'mouse up'
-    end
-    on_mouse_drag_started do |area_mouse_event|
-      puts 'drag started'
-    end
-    on_mouse_dragged do |area_mouse_event|
-      puts 'dragged'
-    end
-    on_mouse_dropped do |area_mouse_event|
-      puts 'dropped'
-    end
-    on_mouse_entered do
-      puts 'entered'
-    end
-    on_mouse_exited do
-      puts 'exited'
-    end
-    on_key_event do |area_key_event|
-      p area_key_event
-    end
-    on_key_up do |area_key_event|
-      puts 'key up'
-    end
-    on_key_down do |area_key_event|
-      puts 'key down'
-    end
-  }
-}.show
-```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (semi-declarative `on_draw` dynamic `path` approach):
-```ruby
-require 'glimmer-dsl-libui'
-include Glimmer
-window('Area Gallery', 400, 400) {
-  area {
-    on_draw do |area_draw_params|
-      path { # dynamic path, added semi-declaratively inside on_draw block
-        square(0, 0, 100)
-        square(100, 100, 400)
-        fill r: 102, g: 102, b: 204
-      }
-      path { # dynamic path, added semi-declaratively inside on_draw block
-        rectangle(0, 100, 100, 400)
-        rectangle(100, 0, 400, 100)
-        # linear gradient (has x0, y0, x1, y1, and stops)
-        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-      }
-      polygon(100, 100, 100, 400, 400, 100, 400, 400) { # dynamic path, added semi-declaratively inside on_draw block
-        fill r: 202, g: 102, b: 104, a: 0.5
-        stroke r: 0, g: 0, b: 0
-      }
-      polybezier(0, 0,
-                 200, 100, 100, 200, 400, 100,
-                 300, 100, 100, 300, 100, 400,
-                 100, 300, 300, 100, 400, 400) { # dynamic path, added semi-declaratively inside on_draw block
-        fill r: 202, g: 102, b: 204, a: 0.5
-        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
-      }
-      polyline(100, 100, 400, 100, 100, 400, 400, 400, 0, 0) { # dynamic path, added semi-declaratively inside on_draw block
-        stroke r: 0, g: 0, b: 0, thickness: 2
-      }
-      arc(404, 216, 190, 90, 90, false) { # dynamic path, added semi-declaratively inside on_draw block
-        # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
-        fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
-        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
-      }
-      circle(200, 200, 90) { # dynamic path, added semi-declaratively inside on_draw block
-        fill r: 202, g: 102, b: 204, a: 0.5
-        stroke r: 0, g: 0, b: 0, thickness: 2
-      }
-      text(161, 40, 100) { # dynamic text added semi-declaratively inside on_draw block
-        string('Area Gallery') {
-          font family: 'Arial', size: (OS.mac? ? 14 : 11)
-          color :black
-        }
-      }
-    end
-    on_mouse_event do |area_mouse_event|
-      p area_mouse_event
-    end
-    on_mouse_moved do |area_mouse_event|
-      puts 'moved'
-    end
-    on_mouse_down do |area_mouse_event|
-      puts 'mouse down'
-    end
-    on_mouse_up do |area_mouse_event|
-      puts 'mouse up'
-    end
-    on_mouse_drag_started do |area_mouse_event|
-      puts 'drag started'
-    end
-    on_mouse_dragged do |area_mouse_event|
-      puts 'dragged'
-    end
-    on_mouse_dropped do |area_mouse_event|
-      puts 'dropped'
-    end
-    on_mouse_entered do
-      puts 'entered'
-    end
-    on_mouse_exited do
-      puts 'exited'
-    end
-    on_key_event do |area_key_event|
-      p area_key_event
-    end
-    on_key_up do |area_key_event|
-      puts 'key up'
-    end
-    on_key_down do |area_key_event|
-      puts 'key down'
-    end
-  }
-}.show
-```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 4 (setting shape properties instead of arguments with semi-declarative `on_draw` dynamic `path` approach):
-```ruby
-require 'glimmer-dsl-libui'
-include Glimmer
-window('Area Gallery', 400, 400) {
-  area {
-    on_draw do |area_draw_params|
-      path { # dynamic path, added semi-declaratively inside on_draw block
-        square {
-          x 0
-          y 0
-          length 100
-        }
-        square {
-          x 100
-          y 100
-          length 400
-        }
-        fill r: 102, g: 102, b: 204
-      }
-      path { # dynamic path, added semi-declaratively inside on_draw block
-        rectangle {
-          x 0
-          y 100
-          width 100
-          height 400
-        }
-        rectangle {
-          x 100
-          y 0
-          width 400
-          height 100
-        }
-        # linear gradient (has x0, y0, x1, y1, and stops)
-        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-      }
-      figure { # dynamic path, added semi-declaratively inside on_draw block
-        x 100
-        y 100
-        line {
-          x 100
-          y 400
-        }
-        line {
-          x 400
-          y 100
-        }
-        line {
-          x 400
-          y 400
-        }
-        closed true # polygon figure is closed (last point forms a line with first point)
-        fill r: 202, g: 102, b: 104, a: 0.5
-        stroke r: 0, g: 0, b: 0
-      }
-      figure { # dynamic path, added semi-declaratively inside on_draw block
-        x 0
-        y 0
-        bezier {
-          c1_x 200
-          c1_y 100
-          c2_x 100
-          c2_y 200
-          end_x 400
-          end_y 100
-        }
-        bezier {
-          c1_x 300
-          c1_y 100
-          c2_x 100
-          c2_y 300
-          end_x 100
-          end_y 400
-        }
-        bezier {
-          c1_x 100
-          c1_y 300
-          c2_x 300
-          c2_y 100
-          end_x 400
-          end_y 400
-        }
-        fill r: 202, g: 102, b: 204, a: 0.5
-        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
-      }
-      figure { # dynamic path, added semi-declaratively inside on_draw block
-        x 100
-        y 100
-        line {
-          x 400
-          y 100
-        }
-        line {
-          x 100
-          y 400
-        }
-        line {
-          x 400
-          y 400
-        }
-        line {
-          x 0
-          y 0
-        }
-        stroke r: 0, g: 0, b: 0, thickness: 2
-      }
-      arc { # dynamic path, added semi-declaratively inside on_draw block
-        x_center 404
-        y_center 216
-        radius 190
-        start_angle 90
-        sweep 90
-        is_negative false
-        # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
-        fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
-        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
-      }
-      circle { # dynamic path, added semi-declaratively inside on_draw block
-        x_center 200
-        y_center 200
-        radius 90
-        fill r: 202, g: 102, b: 204, a: 0.5
-        stroke r: 0, g: 0, b: 0, thickness: 2
-      }
-      text { # dynamic path, added semi-declaratively inside on_draw block
-        x 161
-        y 40
-        width 100
-        string {
-          font family: 'Arial', size: (OS.mac? ? 14 : 11)
-          color :black
-          'Area Gallery'
-        }
-      }
-    end
-    on_mouse_event do |area_mouse_event|
-      p area_mouse_event
-    end
-    on_mouse_moved do |area_mouse_event|
-      puts 'moved'
-    end
-    on_mouse_down do |area_mouse_event|
-      puts 'mouse down'
-    end
-    on_mouse_up do |area_mouse_event|
-      puts 'mouse up'
-    end
-    on_mouse_drag_started do |area_mouse_event|
-      puts 'drag started'
-    end
-    on_mouse_dragged do |area_mouse_event|
-      puts 'dragged'
-    end
-    on_mouse_dropped do |area_mouse_event|
-      puts 'dropped'
-    end
-    on_mouse_entered do
-      puts 'entered'
-    end
-    on_mouse_exited do
-      puts 'exited'
-    end
-    on_key_event do |area_key_event|
-      p area_key_event
-    end
-    on_key_up do |area_key_event|
-      puts 'key up'
-    end
-    on_key_down do |area_key_event|
-      puts 'key down'
-    end
-  }
-}.show
-```
-## Button Counter
-[examples/button_counter.rb](/examples/button_counter.rb)
-Run with this command from the root of the project if you cloned the project:
-```
-ruby -r './lib/glimmer-dsl-libui' examples/button_counter.rb
-```
-Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-```
-ruby -r glimmer-dsl-libui -e "require 'examples/button_counter'"
-```
-Mac | Windows | Linux
-----|---------|------
-![glimmer-dsl-libui-mac-button-counter.png](/images/glimmer-dsl-libui-mac-button-counter.png) | ![glimmer-dsl-libui-windows-button-counter.png](/images/glimmer-dsl-libui-windows-button-counter.png) | ![glimmer-dsl-libui-linux-button-counter.png](/images/glimmer-dsl-libui-linux-button-counter.png)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
-```ruby
-require 'glimmer-dsl-libui'
-class ButtonCounter
-  include Glimmer
-  attr_accessor :count
-  def initialize
-    @count = 0
-  end
-  def launch
-    window('Hello, Button!') {
-      button {
-        # data-bind button text to self count, converting to string on read.
-        text <= [self, :count, on_read: ->(count) {"Count: #{count}"}]
-        on_clicked do
-          self.count += 1
-        end
-      }
-    }.show
-  end
-end
-ButtonCounter.new.launch
-```
-## Color The Circles
-[examples/color_the_circles.rb](/examples/color_the_circles.rb)
-Run with this command from the root of the project if you cloned the project:
-```
-ruby -r './lib/glimmer-dsl-libui' examples/color_the_circles.rb
-```
-Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-```
-ruby -r glimmer-dsl-libui -e "require 'examples/color_the_circles'"
-```
-Mac | Windows | Linux
-----|---------|------
-![glimmer-dsl-libui-mac-color-the-circles.png](/images/glimmer-dsl-libui-mac-color-the-circles.png) ![glimmer-dsl-libui-mac-color-the-circles-lost.png](/images/glimmer-dsl-libui-mac-color-the-circles-lost.png) ![glimmer-dsl-libui-mac-color-the-circles-won.png](/images/glimmer-dsl-libui-mac-color-the-circles-won.png) | ![glimmer-dsl-libui-windows-color-the-circles.png](/images/glimmer-dsl-libui-windows-color-the-circles.png) ![glimmer-dsl-libui-windows-color-the-circles-lost.png](/images/glimmer-dsl-libui-windows-color-the-circles-lost.png) ![glimmer-dsl-libui-windows-color-the-circles-won.png](/images/glimmer-dsl-libui-windows-color-the-circles-won.png) | ![glimmer-dsl-libui-linux-color-the-circles.png](/images/glimmer-dsl-libui-linux-color-the-circles.png) ![glimmer-dsl-libui-linux-color-the-circles-lost.png](/images/glimmer-dsl-libui-linux-color-the-circles-lost.png) ![glimmer-dsl-libui-linux-color-the-circles-won.png](/images/glimmer-dsl-libui-linux-color-the-circles-won.png)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
-```ruby
-require 'glimmer-dsl-libui'
-class ColorTheCircles
-  include Glimmer
-  WINDOW_WIDTH = 800
-  WINDOW_HEIGHT = 600
-  SHAPE_MIN_SIZE = 15
-  SHAPE_MAX_SIZE = 75
-  MARGIN_WIDTH = 55
-  MARGIN_HEIGHT = 155
-  TIME_MAX_EASY = 4
-  TIME_MAX_MEDIUM = 3
-  TIME_MAX_HARD = 2
-  TIME_MAX_INSANE = 1
-  attr_accessor :score
-  def initialize
-    @circles_data = []
-    @score = 0
-    @time_max = TIME_MAX_HARD
-    @game_over = false
-    register_observers
-    setup_circle_factory
-  end
-  def register_observers
-    # observe automatically enhances self to become Glimmer::DataBinding::ObservableModel and notify observer block of score attribute changes
-    observe(self, :score) do |new_score|
-      Glimmer::LibUI.queue_main do
-        @score_label.text = new_score.to_s
-        if new_score == -20
-          @game_over = true
-          msg_box('You Lost!', 'Sorry! Your score reached -20')
-          restart_game
-        elsif new_score == 0
-          @game_over = true
-          msg_box('You Won!', 'Congratulations! Your score reached 0')
-          restart_game
-        end
-      end
-    end
-  end
-  def setup_circle_factory
-    consumer = Proc.new do
-      unless @game_over
-        if @circles_data.empty?
-          # start with 3 circles to make more challenging
-          add_circle until @circles_data.size > 3
-        else
-          add_circle
-        end
-      end
-      delay = rand * @time_max
-      Glimmer::LibUI.timer(delay, repeat: false, &consumer)
-    end
-    Glimmer::LibUI.queue_main(&consumer)
-  end
-  def add_circle
-    circle_x = rand * (WINDOW_WIDTH - MARGIN_WIDTH - SHAPE_MAX_SIZE) + SHAPE_MAX_SIZE
-    circle_y = rand * (WINDOW_HEIGHT - MARGIN_HEIGHT - SHAPE_MAX_SIZE) + SHAPE_MAX_SIZE
-    circle_size = rand * (SHAPE_MAX_SIZE - SHAPE_MIN_SIZE) + SHAPE_MIN_SIZE
-    stroke_color = Glimmer::LibUI.x11_colors.sample
-    @circles_data << {
-      args: [circle_x, circle_y, circle_size],
-      fill: nil,
-      stroke: stroke_color
-    }
-    @area.queue_redraw_all
-    self.score -= 1 # notifies score observers automatically of change
-  end
-  def restart_game
-    @score = 0 # update variable directly to avoid notifying observers
-    @circles_data.clear
-    @game_over = false
-  end
-  def color_circle(x, y)
-    clicked_circle_data = @circles_data.find do |circle_data|
-      circle_data[:fill].nil? && circle_data[:circle]&.contain?(x, y)
-    end
-    if clicked_circle_data
-      clicked_circle_data[:fill] = clicked_circle_data[:stroke]
-      push_colored_circle_behind_uncolored_circles(clicked_circle_data)
-      @area.queue_redraw_all
-      self.score += 1 # notifies score observers automatically of change
-    end
-  end
-  def push_colored_circle_behind_uncolored_circles(colored_circle_data)
-    removed_colored_circle_data = @circles_data.delete(colored_circle_data)
-    last_colored_circle_data = @circles_data.select {|cd| cd[:fill]}.last
-    last_colored_circle_data_index = @circles_data.index(last_colored_circle_data) || -1
-    @circles_data.insert(last_colored_circle_data_index + 1, removed_colored_circle_data)
-  end
-  def launch
-    menu('Actions') {
-      menu_item('Restart') {
-        on_clicked do
-          restart_game
-        end
-      }
-      quit_menu_item
-    }
-    menu('Difficulty') {
-      radio_menu_item('Easy') {
-        on_clicked do
-          @time_max = TIME_MAX_EASY
-        end
-      }
-      radio_menu_item('Medium') {
-        on_clicked do
-          @time_max = TIME_MAX_MEDIUM
-        end
-      }
-      radio_menu_item('Hard') {
-        checked true
-        on_clicked do
-          @time_max = TIME_MAX_HARD
-        end
-      }
-      radio_menu_item('Insane') {
-        on_clicked do
-          @time_max = TIME_MAX_INSANE
-        end
-      }
-    }
-    menu('Help') {
-      menu_item('Instructions') {
-        on_clicked do
-          msg_box('Instructions', "Score goes down as circles are added.\nIf it reaches -20, you lose!\n\nClick circles to color and score!\nOnce score reaches 0, you win!\n\nBeware of concealed light-colored circles!\nThey are revealed once darker circles intersect them.\n\nThere are four levels of difficulty.\nChange via difficulty menu if the game gets too tough.")
-        end
-      }
-    }
-    window('Color The Circles', WINDOW_WIDTH, WINDOW_HEIGHT) {
-      margined true
-      grid {
-        button('Restart') {
-          left 0
-          top 0
-          halign :center
-          on_clicked do
-            restart_game
-          end
-        }
-        label('Score goes down as circles are added. If it reaches -20, you lose!') {
-          left 0
-          top 1
-          halign :center
-        }
-        label('Click circles to color and score! Once score reaches 0, you win!') {
-          left 0
-          top 2
-          halign :center
-        }
-        horizontal_box {
-          left 0
-          top 3
-          halign :center
-          label('Score:') {
-            stretchy false
-          }
-          @score_label = label(@score.to_s) {
-            stretchy false
-          }
-        }
-        @area = area {
-          left 0
-          top 4
-          hexpand true
-          vexpand true
-          halign :fill
-          valign :fill
-          on_draw do |area_draw_params|
-            path {
-              rectangle(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
-              fill :white
-            }
-            @circles_data.each do |circle_data|
-              circle_data[:circle] = circle(*circle_data[:args]) {
-                fill circle_data[:fill]
-                stroke circle_data[:stroke]
-              }
-            end
-          end
-          on_mouse_down do |area_mouse_event|
-            color_circle(area_mouse_event[:x], area_mouse_event[:y])
-          end
-        }
-      }
-    }.show
-  end
-end
-ColorTheCircles.new.launch
-```
-## Control Gallery
-[examples/control_gallery.rb](/examples/control_gallery.rb)
-Run with this command from the root of the project if you cloned the project:
-```
-ruby -r './lib/glimmer-dsl-libui' examples/control_gallery.rb
-```
-Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-```
-ruby -r glimmer-dsl-libui -e "require 'examples/control_gallery'"
-```
-Mac | Windows | Linux
-----|---------|------
-![glimmer-dsl-libui-mac-control-gallery.png](/images/glimmer-dsl-libui-mac-control-gallery.png) | ![glimmer-dsl-libui-windows-control-gallery.png](/images/glimmer-dsl-libui-windows-control-gallery.png) | ![glimmer-dsl-libui-linux-control-gallery.png](/images/glimmer-dsl-libui-linux-control-gallery.png)
-[LibUI](https://github.com/kojix2/LibUI) Original Version:
-```ruby
-require 'libui'
-UI = LibUI
-UI.init
-should_quit = proc do
-  puts 'Bye Bye'
-  UI.control_destroy(MAIN_WINDOW)
-  UI.quit
-  0
-end
-# File menu
-menu = UI.new_menu('File')
-open_menu_item = UI.menu_append_item(menu, 'Open')
-UI.menu_item_on_clicked(open_menu_item) do
-  pt = UI.open_file(MAIN_WINDOW)
-  puts pt unless pt.null?
-end
-save_menu_item = UI.menu_append_item(menu, 'Save')
-UI.menu_item_on_clicked(save_menu_item) do
-  pt = UI.save_file(MAIN_WINDOW)
-  puts pt unless pt.null?
-end
-UI.menu_append_quit_item(menu)
-UI.on_should_quit(should_quit)
-# Edit menu
-edit_menu = UI.new_menu('Edit')
-UI.menu_append_check_item(edit_menu, 'Checkable Item_')
-UI.menu_append_separator(edit_menu)
-disabled_item = UI.menu_append_item(edit_menu, 'Disabled Item_')
-UI.menu_item_disable(disabled_item)
-preferences = UI.menu_append_preferences_item(menu)
-# Help menu
-help_menu = UI.new_menu('Help')
-UI.menu_append_item(help_menu, 'Help')
-UI.menu_append_about_item(help_menu)
-# Main Window
-MAIN_WINDOW = UI.new_window('Control Gallery', 600, 500, 1)
-UI.window_set_margined(MAIN_WINDOW, 1)
-UI.window_on_closing(MAIN_WINDOW, should_quit)
-vbox = UI.new_vertical_box
-UI.window_set_child(MAIN_WINDOW, vbox)
-hbox = UI.new_horizontal_box
-UI.box_set_padded(vbox, 1)
-UI.box_set_padded(hbox, 1)
-UI.box_append(vbox, hbox, 1)
-# Group - Basic Controls
-group = UI.new_group('Basic Controls')
-UI.group_set_margined(group, 1)
-UI.box_append(hbox, group, 1) # OSX bug?
-inner = UI.new_vertical_box
-UI.box_set_padded(inner, 1)
-UI.group_set_child(group, inner)
-# Button
-button = UI.new_button('Button')
-UI.button_on_clicked(button) do
-  UI.msg_box(MAIN_WINDOW, 'Information', 'You clicked the button')
-end
-UI.box_append(inner, button, 0)
-# Checkbox
-checkbox = UI.new_checkbox('Checkbox')
-UI.checkbox_on_toggled(checkbox) do |ptr|
-  checked = UI.checkbox_checked(ptr) == 1
-  UI.window_set_title(MAIN_WINDOW, "Checkbox is #{checked}")
-  UI.checkbox_set_text(ptr, "I am the checkbox (#{checked})")
-end
-UI.box_append(inner, checkbox, 0)
-# Label
-UI.box_append(inner, UI.new_label('Label'), 0)
-# Separator
-UI.box_append(inner, UI.new_horizontal_separator, 0)
-# Date Picker
-UI.box_append(inner, UI.new_date_picker, 0)
-# Time Picker
-UI.box_append(inner, UI.new_time_picker, 0)
-# Date Time Picker
-UI.box_append(inner, UI.new_date_time_picker, 0)
-# Font Button
-UI.box_append(inner, UI.new_font_button, 0)
-# Color Button
-UI.box_append(inner, UI.new_color_button, 0)
-inner2 = UI.new_vertical_box
-UI.box_set_padded(inner2, 1)
-UI.box_append(hbox, inner2, 1)
-# Group - Numbers
-group = UI.new_group('Numbers')
-UI.group_set_margined(group, 1)
-UI.box_append(inner2, group, 0)
-inner = UI.new_vertical_box
-UI.box_set_padded(inner, 1)
-UI.group_set_child(group, inner)
-# Spinbox
-spinbox = UI.new_spinbox(0, 100)
-UI.spinbox_set_value(spinbox, 42)
-UI.spinbox_on_changed(spinbox) do |ptr|
-  puts "New Spinbox value: #{UI.spinbox_value(ptr)}"
-end
-UI.box_append(inner, spinbox, 0)
-# Slider
-slider = UI.new_slider(0, 100)
-UI.box_append(inner, slider, 0)
-# Progressbar
-progressbar = UI.new_progress_bar
-UI.box_append(inner, progressbar, 0)
-UI.slider_on_changed(slider) do |ptr|
-  v = UI.slider_value(ptr)
-  puts "New Slider value: #{v}"
-  UI.progress_bar_set_value(progressbar, v)
-end
-# Group - Lists
-group = UI.new_group('Lists')
-UI.group_set_margined(group, 1)
-UI.box_append(inner2, group, 0)
-inner = UI.new_vertical_box
-UI.box_set_padded(inner, 1)
-UI.group_set_child(group, inner)
-# Combobox
-cbox = UI.new_combobox
-UI.combobox_append(cbox, 'combobox Item 1')
-UI.combobox_append(cbox, 'combobox Item 2')
-UI.combobox_append(cbox, 'combobox Item 3')
-UI.box_append(inner, cbox, 0)
-UI.combobox_on_selected(cbox) do |ptr|
-  puts "New combobox selection: #{UI.combobox_selected(ptr)}"
-end
-# Editable Combobox
-ebox = UI.new_editable_combobox
-UI.editable_combobox_append(ebox, 'Editable Item 1')
-UI.editable_combobox_append(ebox, 'Editable Item 2')
-UI.editable_combobox_append(ebox, 'Editable Item 3')
-UI.box_append(inner, ebox, 0)
-# Radio Buttons
-rb = UI.new_radio_buttons
-UI.radio_buttons_append(rb, 'Radio Button 1')
-UI.radio_buttons_append(rb, 'Radio Button 2')
-UI.radio_buttons_append(rb, 'Radio Button 3')
-UI.box_append(inner, rb, 1)
-# Tab
-tab = UI.new_tab
-hbox1 = UI.new_horizontal_box
-hbox2 = UI.new_horizontal_box
-UI.tab_append(tab, 'Page 1', hbox1)
-UI.tab_append(tab, 'Page 2', hbox2)
-UI.tab_append(tab, 'Page 3', UI.new_horizontal_box)
-UI.box_append(inner2, tab, 1)
-# Text Entry
-text_entry = UI.new_entry
-UI.entry_set_text text_entry, 'Please enter your feelings'
-UI.entry_on_changed(text_entry) do |ptr|
-  puts "Current textbox data: '#{UI.entry_text(ptr)}'"
-end
-UI.box_append(hbox1, text_entry, 1)
-UI.control_show(MAIN_WINDOW)
-UI.main
-UI.quit
-```
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
-```ruby
-require 'glimmer-dsl-libui'
-include Glimmer
-menu('File') {
-  menu_item('Open') {
-    on_clicked do
-      file = open_file
-      puts file unless file.nil?
-    end
-  }
-  menu_item('Save') {
-    on_clicked do
-      file = save_file
-      puts file unless file.nil?
-    end
-  }
-  quit_menu_item {
-    on_clicked do
-      puts 'Bye Bye'
-    end
-  }
-  preferences_menu_item # Can optionally contain an on_clicked listener
-}
-menu('Edit') {
-  check_menu_item('Checkable Item_')
-  separator_menu_item
-  menu_item('Disabled Item_') {
-    enabled false
-  }
-}
-menu('Help') {
-  menu_item('Help')
-  about_menu_item # Can optionally contain an on_clicked listener
-}
-MAIN_WINDOW = window('Control Gallery', 600, 500) {
-  margined true
-  on_closing do
-    puts 'Bye Bye'
-  end
-  vertical_box {
-    horizontal_box {
-      group('Basic Controls') {
-        vertical_box {
-          button('Button') {
-            stretchy false
-            on_clicked do
-              msg_box('Information', 'You clicked the button')
-            end
-          }
-          checkbox('Checkbox') {
-            stretchy false
-            on_toggled do |c|
-              checked = c.checked?
-              MAIN_WINDOW.title = "Checkbox is #{checked}"
-              c.text = "I am the checkbox (#{checked})"
-            end
-          }
-          label('Label') { stretchy false }
-          horizontal_separator { stretchy false }
-          date_picker { stretchy false }
-          time_picker { stretchy false }
-          date_time_picker { stretchy false }
-          font_button { stretchy false }
-          color_button { stretchy false }
-        }
-      }
-      vertical_box {
-        group('Numbers') {
-          stretchy false
-          vertical_box {
-            spinbox(0, 100) {
-              stretchy false
-              value 42
-              on_changed do |s|
-                puts "New Spinbox value: #{s.value}"
-              end
-            }
-            slider(0, 100) {
-              stretchy false
-              on_changed do |s|
-                v = s.value
-                puts "New Slider value: #{v}"
-                @progress_bar.value = v
-              end
-            }
-            @progress_bar = progress_bar { stretchy false }
-          }
-        }
-        group('Lists') {
-          stretchy false
-          vertical_box {
-            combobox {
-              stretchy false
-              items 'combobox Item 1', 'combobox Item 2', 'combobox Item 3' # also accepts a single array argument
-              on_selected do |c|
-                puts "New combobox selection: #{c.selected}"
-              end
-            }
-            editable_combobox {
-              stretchy false
-              items 'Editable Item 1', 'Editable Item 2', 'Editable Item 3' # also accepts a single array argument
-            }
-            radio_buttons {
-              items 'Radio Button 1', 'Radio Button 2', 'Radio Button 3' # also accepts a single array argument
-            }
-          }
-        }
-        tab {
-          tab_item('Page 1') {
-            horizontal_box {
-              entry {
-                text 'Please enter your feelings'
-                on_changed do |e|
-                  puts "Current textbox data: '#{e.text}'"
-                end
-              }
-            }
-          }
-          tab_item('Page 2') {
-            horizontal_box
-          }
-          tab_item('Page 3') {
-            horizontal_box
-          }
-        }
-      }
-    }
-  }
-}
-MAIN_WINDOW.show
-```
-## CPU Percentage
-This example shows CPU usage percentage second by second.
-Note that it is highly dependent on low-level OS terminal commands, so if anything changes in their output formatting, the code could break. Please report any issues you might encounter.
-[examples/cpu_percentage.rb](/examples/cpu_percentage.rb)
-Run with this command from the root of the project if you cloned the project:
-```
-ruby -r './lib/glimmer-dsl-libui' examples/cpu_percentage.rb
-```
-Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-```
-ruby -r glimmer-dsl-libui -e "require 'examples/cpu_percentage'"
-```
-Mac | Windows | Linux
-----|---------|------
-![glimmer-dsl-libui-mac-cpu-percentage.png](/images/glimmer-dsl-libui-mac-cpu-percentage.png) | ![glimmer-dsl-libui-windows-cpu-percentage.png](/images/glimmer-dsl-libui-windows-cpu-percentage.png) | ![glimmer-dsl-libui-linux-cpu-percentage.png](/images/glimmer-dsl-libui-linux-cpu-percentage.png)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
-```ruby
-require 'glimmer-dsl-libui'
-require 'bigdecimal'
-include Glimmer
-data = [
-  ['CPU', '0%', 0],
-]
-Glimmer::LibUI.timer(1) do
-  cpu_percentage_value = nil
-  if OS.windows?
-    cpu_percentage_raw_value = `wmic cpu get loadpercentage`
-    cpu_percentage_value = cpu_percentage_raw_value.split("\n").map(&:strip).find {|l| l.match(/^\d+$/)}.to_i
-  elsif OS.mac?
-    cpu_percentage_value = `ps -A -o %cpu | awk '{s+=$1} END {print s}'`.to_i
-  elsif OS.linux?
-    stats = `top -n 1`
-    idle_percentage = stats.split("\n")[2].match(/ni,.* (.*) .*id/)[1]
-    cpu_percentage_value = (BigDecimal(100) - BigDecimal(idle_percentage)).to_i
-  end
-  data[0][1] = "#{cpu_percentage_value}%"
-  data[0][2] = cpu_percentage_value
-end
-window('CPU Percentage', 400, 50) {
-  vertical_box {
-    table {
-      text_column('Name')
-      text_column('Value')
-      progress_bar_column('Percentage')
-      cell_rows data # implicit data-binding
-    }
-  }
-}.show
-```
-## Custom Draw Text
-[examples/custom_draw_text.rb](/examples/custom_draw_text.rb)
-Run with this command from the root of the project if you cloned the project:
-```
-ruby -r './lib/glimmer-dsl-libui' examples/custom_draw_text.rb
-```
-Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-```
-ruby -r glimmer-dsl-libui -e "require 'examples/custom_draw_text'"
-```
-Mac | Windows | Linux
-----|---------|------
-![glimmer-dsl-libui-mac-custom-draw-text.png](/images/glimmer-dsl-libui-mac-custom-draw-text.png) ![glimmer-dsl-libui-mac-custom-draw-text-changed.png](/images/glimmer-dsl-libui-mac-custom-draw-text-changed.png) | ![glimmer-dsl-libui-windows-custom-draw-text.png](/images/glimmer-dsl-libui-windows-custom-draw-text.png) ![glimmer-dsl-libui-windows-custom-draw-text-changed.png](/images/glimmer-dsl-libui-windows-custom-draw-text-changed.png) | ![glimmer-dsl-libui-linux-custom-draw-text.png](/images/glimmer-dsl-libui-linux-custom-draw-text.png) ![glimmer-dsl-libui-linux-custom-draw-text-changed.png](/images/glimmer-dsl-libui-linux-custom-draw-text-changed.png)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
-```ruby
-require 'glimmer-dsl-libui'
-# Michael Ende (1929-1995)
-# The Neverending Story is a fantasy novel by German writer Michael Ende,
-# The English version, translated by Ralph Manheim, was published in 1983.
-class CustomDrawText
-  include Glimmer
-  def launch
-    window('Michael Ende (1929-1995) The Neverending Story', 600, 500) {
-      margined true
-      vertical_box {
-        form {
-          stretchy false
-          font_button { |fb|
-            label 'Font'
-            on_changed do
-              @string.font = fb.font
-            end
-          }
-          color_button { |cb|
-            label 'Color'
-            on_changed do
-              @string.color = cb.color
-            end
-          }
-          unless OS.windows?
-            color_button { |cb|
-              label 'Background'
-              on_changed do
-                @string.background = cb.color
-              end
-            }
-          end
-          combobox { |c|
-            label 'Underline'
-            items Glimmer::LibUI.enum_symbols(:underline).map(&:to_s).map {|word| word.split('_').map(&:capitalize).join(' ')}
-            selected 'None'
-            on_selected do
-              @string.underline = c.selected_item.underscore
-            end
-          }
-          combobox { |c|
-            label 'Underline Built-In Color'
-            items Glimmer::LibUI.enum_symbols(:underline_color).map(&:to_s).map(&:capitalize)
-            selected 'Custom'
-            on_selected do
-              @underline_custom_color_button.enabled = c.selected_item == 'Custom'
-              if c.selected_item == 'Custom'
-                @string.underline_color = @underline_custom_color_button.color
-              else
-                @string.underline_color = c.selected_item.underscore
-                @underline_custom_color_button.color = :black
-              end
-            end
-          }
-          @underline_custom_color_button = color_button {
-            label 'Underline Custom Color'
-            on_changed do
-              @string.underline_color = @underline_custom_color_button.color
-            end
-          }
-        }
-        area {
-          text { # default arguments for x, y, and width are (0, 0, area_draw_params[:area_width] - 2*x)
-            # align :left # default alignment
-            @string = string {
-              '  At last Ygramul sensed that something was coming toward ' \
-              'her. With the speed of lightning, she turned about, confronting ' \
-              'Atreyu with an enormous steel-blue face. Her single eye had a ' \
-              'vertical pupil, which stared at Atreyu with inconceivable malignancy. ' \
-              "\n\n" \
-              '  A cry of fear escaped Bastian. ' \
-              "\n\n" \
-              '  A cry of terror passed through the ravine and echoed from ' \
-              'side to side. Ygramul turned her eye to left and right, to see if ' \
-              'someone else had arrived, for that sound could not have been ' \
-              'made by the boy who stood there as though paralyzed with ' \
-              'horror. ' \
-              "\n\n" \
-              '  Could she have heard my cry? Bastion wondered in alarm. ' \
-              "But that's not possible. " \
-              "\n\n" \
-              '  And then Atreyu heard Ygramuls voice. It was very high ' \
-              'and slightly hoarse, not at all the right kind of voice for that ' \
-              'enormous face. Her lips did not move as she spoke. It was the ' \
-              'buzzing of a great swarm of hornets that shaped itself into ' \
-              'words. ' \
-              "\n\n"
-            }
-          }
-        }
-      }
-    }.show
-  end
-end
-CustomDrawText.new.launch
-```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2:
-```ruby
-require 'glimmer-dsl-libui'
-# Michael Ende (1929-1995)
-# The Neverending Story is a fantasy novel by German writer Michael Ende,
-# The English version, translated by Ralph Manheim, was published in 1983.
-class CustomDrawText
-  include Glimmer
-  def launch
-    window('Michael Ende (1929-1995) The Neverending Story', 600, 500) {
-      margined true
-      vertical_box {
-        form {
-          stretchy false
-          font_button { |fb|
-            label 'Font'
-            on_changed do
-              @font = fb.font
-              @area.queue_redraw_all
-            end
-          }
-          color_button { |cb|
-            label 'Color'
-            on_changed do
-              @color = cb.color
-              @area.queue_redraw_all
-            end
-          }
-          unless OS.windows?
-            color_button { |cb|
-              label 'Background'
-              on_changed do
-                @background = cb.color
-                @area.queue_redraw_all
-              end
-            }
-          end
-          combobox { |c|
-            label 'Underline'
-            items Glimmer::LibUI.enum_symbols(:underline).map(&:to_s).map {|word| word.split('_').map(&:capitalize).join(' ')}
-            selected 'None'
-            on_selected do
-              @underline = c.selected_item.underscore
-              @area.queue_redraw_all
-            end
-          }
-          combobox { |c|
-            label 'Underline Built-In Color'
-            items Glimmer::LibUI.enum_symbols(:underline_color).map(&:to_s).map(&:capitalize)
-            selected 'Custom'
-            on_selected do
-              @underline_custom_color_button.enabled = c.selected_item == 'Custom'
-              if c.selected_item == 'Custom'
-                @underline_color = @underline_custom_color_button.color
-              else
-                @underline_color = c.selected_item.underscore
-                @underline_custom_color_button.color = :black
-              end
-              @area.queue_redraw_all
-            end
-          }
-          @underline_custom_color_button = color_button {
-            label 'Underline Custom Color'
-            on_changed do
-              @underline_color = @underline_custom_color_button.color
-              @area.queue_redraw_all
-            end
-          }
-        }
-        @area = area {
-          on_draw do |area_draw_params|
-            text { # default arguments for x, y, and width are (0, 0, area_draw_params[:area_width] - 2*x)
-              # align :left # default alignment
-              string {
-                font @font
-                color @color
-                background @background
-                underline @underline
-                underline_color @underline_color
-                '  At last Ygramul sensed that something was coming toward ' \
-                'her. With the speed of lightning, she turned about, confronting ' \
-                'Atreyu with an enormous steel-blue face. Her single eye had a ' \
-                'vertical pupil, which stared at Atreyu with inconceivable malignancy. ' \
-                "\n\n" \
-                '  A cry of fear escaped Bastian. ' \
-                "\n\n" \
-                '  A cry of terror passed through the ravine and echoed from ' \
-                'side to side. Ygramul turned her eye to left and right, to see if ' \
-                'someone else had arrived, for that sound could not have been ' \
-                'made by the boy who stood there as though paralyzed with ' \
-                'horror. ' \
-                "\n\n" \
-                '  Could she have heard my cry? Bastion wondered in alarm. ' \
-                "But that's not possible. " \
-                "\n\n" \
-                '  And then Atreyu heard Ygramuls voice. It was very high ' \
-                'and slightly hoarse, not at all the right kind of voice for that ' \
-                'enormous face. Her lips did not move as she spoke. It was the ' \
-                'buzzing of a great swarm of hornets that shaped itself into ' \
-                'words. ' \
-                "\n\n"
-              }
-            }
-          end
-        }
-      }
-    }.show
-  end
-end
-CustomDrawText.new.launch
-```
+Version 1:
-## Dynamic Area
+[examples/area_gallery.rb](/examples/area_gallery.rb)
-[examples/dynamic_area.rb](/examples/dynamic_area.rb)
+Version 2 (setting shape properties instead of arguments):
-Run with this command from the root of the project if you cloned the project:
+[examples/area_gallery2.rb](/examples/area_gallery2.rb)
-```
-ruby -r './lib/glimmer-dsl-libui' examples/dynamic_area.rb
-```
+Version 3 (semi-declarative `on_draw` dynamic `path` approach):
-Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
+[examples/area_gallery3.rb](/examples/area_gallery3.rb)
-```
-ruby -r glimmer-dsl-libui -e "require 'examples/dynamic_area'"
-```
+Version 4 (setting shape properties instead of arguments with semi-declarative `on_draw` dynamic `path` approach):
-Mac | Windows | Linux
-----|---------|------
-![glimmer-dsl-libui-mac-dynamic-area.png](/images/glimmer-dsl-libui-mac-dynamic-area.png) ![glimmer-dsl-libui-mac-dynamic-area-updated.png](/images/glimmer-dsl-libui-mac-dynamic-area-updated.png) | ![glimmer-dsl-libui-windows-dynamic-area.png](/images/glimmer-dsl-libui-windows-dynamic-area.png) ![glimmer-dsl-libui-windows-dynamic-area-updated.png](/images/glimmer-dsl-libui-windows-dynamic-area-updated.png) | ![glimmer-dsl-libui-linux-dynamic-area.png](/images/glimmer-dsl-libui-linux-dynamic-area.png) ![glimmer-dsl-libui-linux-dynamic-area-updated.png](/images/glimmer-dsl-libui-linux-dynamic-area-updated.png)
+[examples/area_gallery4.rb](/examples/area_gallery4.rb)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+## Button Counter
-```ruby
-require 'glimmer-dsl-libui'
+[examples/button_counter.rb](/examples/button_counter.rb)
-class DynamicArea
-  include Glimmer
-  attr_accessor :rectangle_x, :rectangle_y, :rectangle_width, :rectangle_height, :rectangle_red, :rectangle_green, :rectangle_blue, :rectangle_alpha
-  def initialize
-    @rectangle_x = 25
-    @rectangle_y = 25
-    @rectangle_width = 150
-    @rectangle_height = 150
-    @rectangle_red = 102
-    @rectangle_green = 102
-    @rectangle_blue = 204
-    @rectangle_alpha = 100
-  end
-  def launch
-    window('Dynamic Area', 240, 600) {
-      margined true
-      vertical_box {
-        label('Rectangle Properties') {
-          stretchy false
-        }
-        form {
-          stretchy false
-          spinbox(0, 1000) {
-            label 'x'
-            value <=> [self, :rectangle_x, after_write: -> {@area.queue_redraw_all}]
-          }
-          spinbox(0, 1000) {
-            label 'y'
-            value <=> [self, :rectangle_y, after_write: -> {@area.queue_redraw_all}]
-          }
-          spinbox(0, 1000) {
-            label 'width'
-            value <=> [self, :rectangle_width, after_write: -> {@area.queue_redraw_all}]
-          }
-          spinbox(0, 1000) {
-            label 'height'
-            value <=> [self, :rectangle_height, after_write: -> {@area.queue_redraw_all}]
-          }
-          spinbox(0, 255) {
-            label 'red'
-            value <=> [self, :rectangle_red, after_write: -> {@area.queue_redraw_all}]
-          }
-          spinbox(0, 255) {
-            label 'green'
-            value <=> [self, :rectangle_green, after_write: -> {@area.queue_redraw_all}]
-          }
-          spinbox(0, 255) {
-            label 'blue'
-            value <=> [self, :rectangle_blue, after_write: -> {@area.queue_redraw_all}]
-          }
-          spinbox(0, 100) {
-            label 'alpha'
-            value <=> [self, :rectangle_alpha, after_write: -> {@area.queue_redraw_all}]
-          }
-        }
-        @area = area {
-          on_draw do |area_draw_params|
-            rectangle(rectangle_x, rectangle_y, rectangle_width, rectangle_height) { # a dynamic path is added semi-declaratively inside on_draw block
-              fill r: rectangle_red, g: rectangle_green, b: rectangle_blue, a: rectangle_alpha / 100.0
-            }
-          end
-        }
-      }
-    }.show
-  end
-end
+Run with this command from the root of the project if you cloned the project:
-DynamicArea.new.launch
 ```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
-```ruby
-require 'glimmer-dsl-libui'
-include Glimmer
-window('Dynamic Area', 240, 600) {
-  margined true
-  vertical_box {
-    label('Rectangle Properties') {
-      stretchy false
-    }
-    form {
-      stretchy false
-      @x_spinbox = spinbox(0, 1000) {
-        label 'x'
-        value 25
-        on_changed do
-          @area.queue_redraw_all
-        end
-      }
-      @y_spinbox = spinbox(0, 1000) {
-        label 'y'
-        value 25
-        on_changed do
-          @area.queue_redraw_all
-        end
-      }
-      @width_spinbox = spinbox(0, 1000) {
-        label 'width'
-        value 150
-        on_changed do
-          @area.queue_redraw_all
-        end
-      }
-      @height_spinbox = spinbox(0, 1000) {
-        label 'height'
-        value 150
-        on_changed do
-          @area.queue_redraw_all
-        end
-      }
-      @red_spinbox = spinbox(0, 255) {
-        label 'red'
-        value 102
-        on_changed do
-          @area.queue_redraw_all
-        end
-      }
-      @green_spinbox = spinbox(0, 255) {
-        label 'green'
-        value 102
-        on_changed do
-          @area.queue_redraw_all
-        end
-      }
-      @blue_spinbox = spinbox(0, 255) {
-        label 'blue'
-        value 204
-        on_changed do
-          @area.queue_redraw_all
-        end
-      }
-      @alpha_spinbox = spinbox(0, 100) {
-        label 'alpha'
-        value 100
-        on_changed do
-          @area.queue_redraw_all
-        end
-      }
-    }
-    @area = area {
-      on_draw do |area_draw_params|
-        rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value) { # a dynamic path is added semi-declaratively inside on_draw block
-          fill r: @red_spinbox.value, g: @green_spinbox.value, b: @blue_spinbox.value, a: @alpha_spinbox.value / 100.0
-        }
-      end
-    }
-  }
-}.show
+ruby -r './lib/glimmer-dsl-libui' examples/button_counter.rb
 ```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (declarative stable `path` approach with [data-binding](#data-binding)):
-```ruby
-require 'glimmer-dsl-libui'
-class DynamicArea
-  include Glimmer
-  attr_accessor :rectangle_x, :rectangle_y, :rectangle_width, :rectangle_height, :rectangle_red, :rectangle_green, :rectangle_blue, :rectangle_alpha
-  def initialize
-    @rectangle_x = 25
-    @rectangle_y = 25
-    @rectangle_width = 150
-    @rectangle_height = 150
-    @rectangle_red = 102
-    @rectangle_green = 102
-    @rectangle_blue = 204
-    @rectangle_alpha = 100
-  end
-  def rectangle_fill
-    { r: rectangle_red, g: rectangle_green, b: rectangle_blue, a: rectangle_alpha / 100.0 }
-  end
-  def launch
-    window('Dynamic Area', 240, 600) {
-      margined true
-      vertical_box {
-        label('Rectangle Properties') {
-          stretchy false
-        }
-        form {
-          stretchy false
-          @x_spinbox = spinbox(0, 1000) {
-            label 'x'
-            value <=> [self, :rectangle_x]
-          }
-          @y_spinbox = spinbox(0, 1000) {
-            label 'y'
-            value <=> [self, :rectangle_y]
-          }
-          @width_spinbox = spinbox(0, 1000) {
-            label 'width'
-            value <=> [self, :rectangle_width]
-          }
-          @height_spinbox = spinbox(0, 1000) {
-            label 'height'
-            value <=> [self, :rectangle_height]
-          }
-          @red_spinbox = spinbox(0, 255) {
-            label 'red'
-            value <=> [self, :rectangle_red]
-          }
-          @green_spinbox = spinbox(0, 255) {
-            label 'green'
-            value <=> [self, :rectangle_green]
-          }
-          @blue_spinbox = spinbox(0, 255) {
-            label 'blue'
-            value <=> [self, :rectangle_blue]
-          }
-          @alpha_spinbox = spinbox(0, 100) {
-            label 'alpha'
-            value <=> [self, :rectangle_alpha]
-          }
-        }
-        area {
-          @rectangle = rectangle { # stable implicit path shape
-            x      <= [self, :rectangle_x]
-            y      <= [self, :rectangle_y]
-            width  <= [self, :rectangle_width]
-            height <= [self, :rectangle_height]
-            fill   <= [self, :rectangle_fill, computed_by: [:rectangle_red, :rectangle_green, :rectangle_blue, :rectangle_alpha]]
-          }
-        }
-      }
-    }.show
-  end
-end
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-DynamicArea.new.launch
 ```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 4 (declarative stable `path` approach without [data-binding](#data-binding)):
-```ruby
-require 'glimmer-dsl-libui'
-include Glimmer
-window('Dynamic Area', 240, 600) {
-  margined true
-  vertical_box {
-    label('Rectangle Properties') {
-      stretchy false
-    }
-    form {
-      stretchy false
-      @x_spinbox = spinbox(0, 1000) {
-        label 'x'
-        value 25
-        on_changed do
-          @rectangle.x = @x_spinbox.value # updating properties automatically triggers area.queue_redraw_all
-        end
-      }
-      @y_spinbox = spinbox(0, 1000) {
-        label 'y'
-        value 25
-        on_changed do
-          @rectangle.y = @y_spinbox.value # updating properties automatically triggers area.queue_redraw_all
-        end
-      }
-      @width_spinbox = spinbox(0, 1000) {
-        label 'width'
-        value 150
-        on_changed do
-          @rectangle.width = @width_spinbox.value # updating properties automatically triggers area.queue_redraw_all
-        end
-      }
-      @height_spinbox = spinbox(0, 1000) {
-        label 'height'
-        value 150
-        on_changed do
-          @rectangle.height = @height_spinbox.value # updating properties automatically triggers area.queue_redraw_all
-        end
-      }
-      @red_spinbox = spinbox(0, 255) {
-        label 'red'
-        value 102
-        on_changed do
-          @rectangle.fill[:r] = @red_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
-        end
-      }
-      @green_spinbox = spinbox(0, 255) {
-        label 'green'
-        value 102
-        on_changed do
-          @rectangle.fill[:g] = @green_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
-        end
-      }
-      @blue_spinbox = spinbox(0, 255) {
-        label 'blue'
-        value 204
-        on_changed do
-          @rectangle.fill[:b] = @blue_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
-        end
-      }
-      @alpha_spinbox = spinbox(0, 100) {
-        label 'alpha'
-        value 100
-        on_changed do
-          @rectangle.fill[:a] = @alpha_spinbox.value / 100.0 # updating hash properties automatically triggers area.queue_redraw_all
-        end
-      }
-    }
-    area {
-      @rectangle = rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value) { # stable implicit path shape
-        fill r: @red_spinbox.value, g: @green_spinbox.value, b: @blue_spinbox.value, a: @alpha_spinbox.value / 100.0
-      }
-    }
-  }
-}.show
+ruby -r glimmer-dsl-libui -e "require 'examples/button_counter'"
 ```
-## Editable Column Table
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-button-counter.png](/images/glimmer-dsl-libui-mac-button-counter.png) | ![glimmer-dsl-libui-windows-button-counter.png](/images/glimmer-dsl-libui-windows-button-counter.png) | ![glimmer-dsl-libui-linux-button-counter.png](/images/glimmer-dsl-libui-linux-button-counter.png)
+## Color The Circles
-[examples/editable_column_table.rb](/examples/editable_column_table.rb)
+[examples/color_the_circles.rb](/examples/color_the_circles.rb)
 Run with this command from the root of the project if you cloned the project:
 ```
-ruby -r './lib/glimmer-dsl-libui' examples/editable_column_table.rb
+ruby -r './lib/glimmer-dsl-libui' examples/color_the_circles.rb
 ```
 Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
 ```
-ruby -r glimmer-dsl-libui -e "require 'examples/editable_column_table'"
+ruby -r glimmer-dsl-libui -e "require 'examples/color_the_circles'"
 ```
 Mac | Windows | Linux
 ----|---------|------
-![glimmer-dsl-libui-mac-editable-column-table-editing.png](/images/glimmer-dsl-libui-mac-editable-column-table-editing.png) ![glimmer-dsl-libui-mac-editable-column-table-edited.png](/images/glimmer-dsl-libui-mac-editable-column-table-edited.png) | ![glimmer-dsl-libui-windows-editable-column-table-editing.png](/images/glimmer-dsl-libui-windows-editable-column-table-editing.png) ![glimmer-dsl-libui-windows-editable-column-table-edited.png](/images/glimmer-dsl-libui-windows-editable-column-table-edited.png) | ![glimmer-dsl-libui-linux-editable-column-table-editing.png](/images/glimmer-dsl-libui-linux-editable-column-table-editing.png) ![glimmer-dsl-libui-linux-editable-column-table-edited.png](/images/glimmer-dsl-libui-linux-editable-column-table-edited.png)
+![glimmer-dsl-libui-mac-color-the-circles.png](/images/glimmer-dsl-libui-mac-color-the-circles.png) ![glimmer-dsl-libui-mac-color-the-circles-lost.png](/images/glimmer-dsl-libui-mac-color-the-circles-lost.png) ![glimmer-dsl-libui-mac-color-the-circles-won.png](/images/glimmer-dsl-libui-mac-color-the-circles-won.png) | ![glimmer-dsl-libui-windows-color-the-circles.png](/images/glimmer-dsl-libui-windows-color-the-circles.png) ![glimmer-dsl-libui-windows-color-the-circles-lost.png](/images/glimmer-dsl-libui-windows-color-the-circles-lost.png) ![glimmer-dsl-libui-windows-color-the-circles-won.png](/images/glimmer-dsl-libui-windows-color-the-circles-won.png) | ![glimmer-dsl-libui-linux-color-the-circles.png](/images/glimmer-dsl-libui-linux-color-the-circles.png) ![glimmer-dsl-libui-linux-color-the-circles-lost.png](/images/glimmer-dsl-libui-linux-color-the-circles-lost.png) ![glimmer-dsl-libui-linux-color-the-circles-won.png](/images/glimmer-dsl-libui-linux-color-the-circles-won.png)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+## Control Gallery
-```ruby
-require 'glimmer-dsl-libui'
+[examples/control_gallery.rb](/examples/control_gallery.rb)
-include Glimmer
+Run with this command from the root of the project if you cloned the project:
-data = [
-  %w[cat calm meow],
-  %w[dog loyal woof],
-  %w[chicken bird cock-a-doodle-doo],
-  %w[horse fast neigh],
-  %w[cow slow moo]
-]
+```
+ruby -r './lib/glimmer-dsl-libui' examples/control_gallery.rb
+```
-window('Editable column animal sounds', 400, 200) {
-  horizontal_box {
-    table {
-      text_column('Animal')
-      text_column('Description')
-      text_column('Sound (Editable)') {
-        editable true
-      }
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-      cell_rows data
-      on_edited do |row, row_data| # only fires on direct table editing
-        puts "Row #{row} edited: #{row_data}"
-        $stdout.flush
-      end
-    }
-  }
-  on_closing do
-    puts 'Bye Bye'
-  end
-}.show
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/control_gallery'"
 ```
-## Editable Table
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-control-gallery.png](/images/glimmer-dsl-libui-mac-control-gallery.png) | ![glimmer-dsl-libui-windows-control-gallery.png](/images/glimmer-dsl-libui-windows-control-gallery.png) | ![glimmer-dsl-libui-linux-control-gallery.png](/images/glimmer-dsl-libui-linux-control-gallery.png)
-[examples/editable_table.rb](/examples/editable_table.rb)
+## CPU Percentage
+This example shows CPU usage percentage second by second.
+Note that it is highly dependent on low-level OS terminal commands, so if anything changes in their output formatting, the code could break. Please report any issues you might encounter.
+[examples/cpu_percentage.rb](/examples/cpu_percentage.rb)
 Run with this command from the root of the project if you cloned the project:
 ```
-ruby -r './lib/glimmer-dsl-libui' examples/editable_table.rb
+ruby -r './lib/glimmer-dsl-libui' examples/cpu_percentage.rb
 ```
 Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
 ```
-ruby -r glimmer-dsl-libui -e "require 'examples/editable_table'"
+ruby -r glimmer-dsl-libui -e "require 'examples/cpu_percentage'"
 ```
 Mac | Windows | Linux
 ----|---------|------
-![glimmer-dsl-libui-mac-editable-table.png](/images/glimmer-dsl-libui-mac-editable-table.png) ![glimmer-dsl-libui-mac-editable-table-editing.png](/images/glimmer-dsl-libui-mac-editable-table-editing.png) ![glimmer-dsl-libui-mac-editable-table-edited.png](/images/glimmer-dsl-libui-mac-editable-table-edited.png) | ![glimmer-dsl-libui-windows-editable-table.png](/images/glimmer-dsl-libui-windows-editable-table.png) ![glimmer-dsl-libui-windows-editable-table-editing.png](/images/glimmer-dsl-libui-windows-editable-table-editing.png) ![glimmer-dsl-libui-windows-editable-table-edited.png](/images/glimmer-dsl-libui-windows-editable-table-edited.png) | ![glimmer-dsl-libui-linux-editable-table.png](/images/glimmer-dsl-libui-linux-editable-table.png) ![glimmer-dsl-libui-linux-editable-table-editing.png](/images/glimmer-dsl-libui-linux-editable-table-editing.png) ![glimmer-dsl-libui-linux-editable-table-edited.png](/images/glimmer-dsl-libui-linux-editable-table-edited.png)
+![glimmer-dsl-libui-mac-cpu-percentage.png](/images/glimmer-dsl-libui-mac-cpu-percentage.png) | ![glimmer-dsl-libui-windows-cpu-percentage.png](/images/glimmer-dsl-libui-windows-cpu-percentage.png) | ![glimmer-dsl-libui-linux-cpu-percentage.png](/images/glimmer-dsl-libui-linux-cpu-percentage.png)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+## Custom Draw Text
-```ruby
-require 'glimmer-dsl-libui'
+[examples/custom_draw_text.rb](/examples/custom_draw_text.rb)
-include Glimmer
+Run with this command from the root of the project if you cloned the project:
-data = [
-  %w[cat meow],
-  %w[dog woof],
-  %w[chicken cock-a-doodle-doo],
-  %w[horse neigh],
-  %w[cow moo]
-]
+```
+ruby -r './lib/glimmer-dsl-libui' examples/custom_draw_text.rb
+```
-window('Editable animal sounds', 300, 200) {
-  horizontal_box {
-    table {
-      text_column('Animal')
-      text_column('Description')
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-      editable true
-      cell_rows data
-      on_changed do |row, type, row_data| # fires on all changes (even ones happening through data array)
-        puts "Row #{row} #{type}: #{row_data}"
-      end
-      on_edited do |row, row_data| # only fires on direct table editing
-        puts "Row #{row} edited: #{row_data}"
-      end
-    }
-  }
-  on_closing do
-    puts 'Bye Bye'
-  end
-}.show
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/custom_draw_text'"
 ```
-## Form Table
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-custom-draw-text.png](/images/glimmer-dsl-libui-mac-custom-draw-text.png) ![glimmer-dsl-libui-mac-custom-draw-text-changed.png](/images/glimmer-dsl-libui-mac-custom-draw-text-changed.png) | ![glimmer-dsl-libui-windows-custom-draw-text.png](/images/glimmer-dsl-libui-windows-custom-draw-text.png) ![glimmer-dsl-libui-windows-custom-draw-text-changed.png](/images/glimmer-dsl-libui-windows-custom-draw-text-changed.png) | ![glimmer-dsl-libui-linux-custom-draw-text.png](/images/glimmer-dsl-libui-linux-custom-draw-text.png) ![glimmer-dsl-libui-linux-custom-draw-text-changed.png](/images/glimmer-dsl-libui-linux-custom-draw-text-changed.png)
-[examples/form_table.rb](/examples/form_table.rb)
+Version 1:
+[examples/custom_draw_text.rb](/examples/custom_draw_text.rb)
+Version 2 (perform area redraws manually):
+[examples/custom_draw_text2.rb](/examples/custom_draw_text2.rb)
+## Dynamic Area
+[examples/dynamic_area.rb](/examples/dynamic_area.rb)
 Run with this command from the root of the project if you cloned the project:
 ```
-ruby -r './lib/glimmer-dsl-libui' examples/form_table.rb
+ruby -r './lib/glimmer-dsl-libui' examples/dynamic_area.rb
 ```
 Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
 ```
-ruby -r glimmer-dsl-libui -e "require 'examples/form_table'"
+ruby -r glimmer-dsl-libui -e "require 'examples/dynamic_area'"
 ```
 Mac | Windows | Linux
 ----|---------|------
-![glimmer-dsl-libui-mac-form-table.png](/images/glimmer-dsl-libui-mac-form-table.png) ![glimmer-dsl-libui-mac-form-table-contact-entered.png](/images/glimmer-dsl-libui-mac-form-table-contact-entered.png) ![glimmer-dsl-libui-mac-form-table-filtered.png](/images/glimmer-dsl-libui-mac-form-table-filtered.png) | ![glimmer-dsl-libui-windows-form-table.png](/images/glimmer-dsl-libui-windows-form-table.png) ![glimmer-dsl-libui-windows-form-table-contact-entered.png](/images/glimmer-dsl-libui-windows-form-table-contact-entered.png) ![glimmer-dsl-libui-windows-form-table-filtered.png](/images/glimmer-dsl-libui-windows-form-table-filtered.png) | ![glimmer-dsl-libui-linux-form-table.png](/images/glimmer-dsl-libui-linux-form-table.png) ![glimmer-dsl-libui-linux-form-table-contact-entered.png](/images/glimmer-dsl-libui-linux-form-table-contact-entered.png) ![glimmer-dsl-libui-linux-form-table-filtered.png](/images/glimmer-dsl-libui-linux-form-table-filtered.png)
+![glimmer-dsl-libui-mac-dynamic-area.png](/images/glimmer-dsl-libui-mac-dynamic-area.png) ![glimmer-dsl-libui-mac-dynamic-area-updated.png](/images/glimmer-dsl-libui-mac-dynamic-area-updated.png) | ![glimmer-dsl-libui-windows-dynamic-area.png](/images/glimmer-dsl-libui-windows-dynamic-area.png) ![glimmer-dsl-libui-windows-dynamic-area-updated.png](/images/glimmer-dsl-libui-windows-dynamic-area-updated.png) | ![glimmer-dsl-libui-linux-dynamic-area.png](/images/glimmer-dsl-libui-linux-dynamic-area.png) ![glimmer-dsl-libui-linux-dynamic-area-updated.png](/images/glimmer-dsl-libui-linux-dynamic-area-updated.png)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with explicit [data-binding](#data-binding)):
+Version (with [data-binding](#data-binding)):
-```ruby
-require 'glimmer-dsl-libui'
+[examples/dynamic_area.rb](/examples/dynamic_area.rb)
-class FormTable
-  Contact = Struct.new(:name, :email, :phone, :city, :state)
-  include Glimmer
-  attr_accessor :contacts, :name, :email, :phone, :city, :state, :filter_value
-  def initialize
-    @contacts = [
-      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
-      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
-      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
-      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
-      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
-    ]
-  end
-  def launch
-    window('Contacts', 600, 600) {
-      margined true
-      vertical_box {
-        form {
-          stretchy false
-          entry {
-            label 'Name'
-            text <=> [self, :name] # bidirectional data-binding between entry text and self.name
-          }
-          entry {
-            label 'Email'
-            text <=> [self, :email]
-          }
-          entry {
-            label 'Phone'
-            text <=> [self, :phone]
-          }
-          entry {
-            label 'City'
-            text <=> [self, :city]
-          }
-          entry {
-            label 'State'
-            text <=> [self, :state]
-          }
-        }
-        button('Save Contact') {
-          stretchy false
-          on_clicked do
-            new_row = [name, email, phone, city, state]
-            if new_row.map(&:to_s).include?('')
-              msg_box_error('Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
-            else
-              @contacts << Contact.new(*new_row) # automatically inserts a row into the table due to explicit data-binding
-              @unfiltered_contacts = @contacts.dup
-              self.name = '' # automatically clears name entry through explicit data-binding
-              self.email = ''
-              self.phone = ''
-              self.city = ''
-              self.state = ''
-            end
-          end
-        }
-        search_entry {
-          stretchy false
-          # bidirectional data-binding of text to self.filter_value with after_write option
-          text <=> [self, :filter_value,
-            after_write: ->(filter_value) { # execute after write to self.filter_value
-              @unfiltered_contacts ||= @contacts.dup
-              # Unfilter first to remove any previous filters
-              self.contacts = @unfiltered_contacts.dup # affects table indirectly through explicit data-binding
-              # Now, apply filter if entered
-              unless filter_value.empty?
-                self.contacts = @contacts.filter do |contact| # affects table indirectly through explicit data-binding
-                  contact.members.any? do |attribute|
-                    contact[attribute].to_s.downcase.include?(filter_value.downcase)
-                  end
-                end
-              end
-            }
-          ]
-        }
-        table {
-          text_column('Name')
-          text_column('Email')
-          text_column('Phone')
-          text_column('City')
-          text_column('State')
-          editable true
-          cell_rows <=> [self, :contacts] # explicit data-binding to self.contacts Model Array, auto-inferring model attribute names from underscored table column names by convention
-          on_changed do |row, type, row_data|
-            puts "Row #{row} #{type}: #{row_data}"
-            $stdout.flush # for Windows
-          end
-          on_edited do |row, row_data| # only fires on direct table editing
-            puts "Row #{row} edited: #{row_data}"
-            $stdout.flush # for Windows
-          end
-        }
-      }
-    }.show
-  end
-end
+Version 2 (without [data-binding](#data-binding)):
-FormTable.new.launch
-```
+[examples/dynamic_area2.rb](/examples/dynamic_area2.rb)
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (with explicit [data-binding](#data-binding)):
+Version 3 (declarative stable `path` approach with [data-binding](#data-binding)):
-```ruby
-require 'glimmer-dsl-libui'
+[examples/dynamic_area3.rb](/examples/dynamic_area3.rb)
-class FormTable
-  Contact = Struct.new(:name, :email, :phone, :city, :state_province)
-  include Glimmer
-  attr_accessor :contacts, :name, :email, :phone, :city, :state, :filter_value
-  def initialize
-    @contacts = [
-      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
-      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
-      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
-      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
-      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
-    ]
-  end
-  def launch
-    window('Contacts', 600, 600) {
-      margined true
-      vertical_box {
-        form {
-          stretchy false
-          entry {
-            label 'Name'
-            text <=> [self, :name] # bidirectional data-binding between entry text and self.name
-          }
-          entry {
-            label 'Email'
-            text <=> [self, :email]
-          }
-          entry {
-            label 'Phone'
-            text <=> [self, :phone]
-          }
-          entry {
-            label 'City'
-            text <=> [self, :city]
-          }
-          entry {
-            label 'State'
-            text <=> [self, :state]
-          }
-        }
-        button('Save Contact') {
-          stretchy false
-          on_clicked do
-            new_row = [name, email, phone, city, state]
-            if new_row.map(&:to_s).include?('')
-              msg_box_error('Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
-            else
-              @contacts << Contact.new(*new_row) # automatically inserts a row into the table due to implicit data-binding
-              @unfiltered_contacts = @contacts.dup
-              self.name = '' # automatically clears name entry through explicit data-binding
-              self.email = ''
-              self.phone = ''
-              self.city = ''
-              self.state = ''
-            end
-          end
-        }
-        search_entry {
-          stretchy false
-          # bidirectional data-binding of text to self.filter_value with after_write option
-          text <=> [self, :filter_value,
-            after_write: ->(filter_value) { # execute after write to self.filter_value
-              @unfiltered_contacts ||= @contacts.dup
-              # Unfilter first to remove any previous filters
-              self.contacts = @unfiltered_contacts.dup # affects table indirectly through explicit data-binding
-              # Now, apply filter if entered
-              unless filter_value.empty?
-                self.contacts = @contacts.filter do |contact| # affects table indirectly through explicit data-binding
-                  contact.members.any? do |attribute|
-                    contact[attribute].to_s.downcase.include?(filter_value.downcase)
-                  end
-                end
-              end
-            }
-          ]
-        }
-        table {
-          text_column('Name')
-          text_column('Email')
-          text_column('Phone')
-          text_column('City')
-          text_column('State')
-          editable true
-          cell_rows <=> [self, :contacts, column_attributes: {'State' => :state_province}] # explicit data-binding to Model Array with column_attributes mapping for a specific column
-          on_changed do |row, type, row_data|
-            puts "Row #{row} #{type}: #{row_data}"
-            $stdout.flush # for Windows
-          end
-          on_edited do |row, row_data| # only fires on direct table editing
-            puts "Row #{row} edited: #{row_data}"
-            $stdout.flush # for Windows
-          end
-        }
-      }
-    }.show
-  end
-end
+Version 4 (declarative stable `path` approach without [data-binding](#data-binding)):
+[examples/dynamic_area4.rb](/examples/dynamic_area4.rb)
+## Editable Column Table
+[examples/editable_column_table.rb](/examples/editable_column_table.rb)
+Run with this command from the root of the project if you cloned the project:
-FormTable.new.launch
+```
+ruby -r './lib/glimmer-dsl-libui' examples/editable_column_table.rb
 ```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (with explicit [data-binding](#data-binding)):
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-```ruby
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/editable_column_table'"
+```
-require 'glimmer-dsl-libui'
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-editable-column-table-editing.png](/images/glimmer-dsl-libui-mac-editable-column-table-editing.png) ![glimmer-dsl-libui-mac-editable-column-table-edited.png](/images/glimmer-dsl-libui-mac-editable-column-table-edited.png) | ![glimmer-dsl-libui-windows-editable-column-table-editing.png](/images/glimmer-dsl-libui-windows-editable-column-table-editing.png) ![glimmer-dsl-libui-windows-editable-column-table-edited.png](/images/glimmer-dsl-libui-windows-editable-column-table-edited.png) | ![glimmer-dsl-libui-linux-editable-column-table-editing.png](/images/glimmer-dsl-libui-linux-editable-column-table-editing.png) ![glimmer-dsl-libui-linux-editable-column-table-edited.png](/images/glimmer-dsl-libui-linux-editable-column-table-edited.png)
-class FormTable
-  Contact = Struct.new(:full_name, :email_address, :phone_number, :city_or_town, :state_or_province)
-  include Glimmer
-  attr_accessor :contacts, :name, :email, :phone, :city, :state, :filter_value
-  def initialize
-    @contacts = [
-      Contact.new('Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'),
-      Contact.new('Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'),
-      Contact.new('Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'),
-      Contact.new('Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'),
-      Contact.new('Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'),
-    ]
-  end
-  def launch
-    window('Contacts', 600, 600) {
-      margined true
-      vertical_box {
-        form {
-          stretchy false
-          entry {
-            label 'Name'
-            text <=> [self, :name] # bidirectional data-binding between entry text and self.name
-          }
-          entry {
-            label 'Email'
-            text <=> [self, :email]
-          }
-          entry {
-            label 'Phone'
-            text <=> [self, :phone]
-          }
-          entry {
-            label 'City'
-            text <=> [self, :city]
-          }
-          entry {
-            label 'State'
-            text <=> [self, :state]
-          }
-        }
-        button('Save Contact') {
-          stretchy false
-          on_clicked do
-            new_row = [name, email, phone, city, state]
-            if new_row.map(&:to_s).include?('')
-              msg_box_error('Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
-            else
-              @contacts << Contact.new(*new_row) # automatically inserts a row into the table due to implicit data-binding
-              @unfiltered_contacts = @contacts.dup
-              self.name = '' # automatically clears name entry through explicit data-binding
-              self.email = ''
-              self.phone = ''
-              self.city = ''
-              self.state = ''
-            end
-          end
-        }
-        search_entry {
-          stretchy false
-          # bidirectional data-binding of text to self.filter_value with after_write option
-          text <=> [self, :filter_value,
-            after_write: ->(filter_value) { # execute after write to self.filter_value
-              @unfiltered_contacts ||= @contacts.dup
-              # Unfilter first to remove any previous filters
-              self.contacts = @unfiltered_contacts.dup # affects table indirectly through explicit data-binding
-              # Now, apply filter if entered
-              unless filter_value.empty?
-                self.contacts = @contacts.filter do |contact| # affects table indirectly through explicit data-binding
-                  contact.members.any? do |attribute|
-                    contact[attribute].to_s.downcase.include?(filter_value.downcase)
-                  end
-                end
-              end
-            }
-          ]
-        }
-        table {
-          text_column('Name')
-          text_column('Email')
-          text_column('Phone')
-          text_column('City')
-          text_column('State')
-          editable true
-          cell_rows <=> [self, :contacts, column_attributes: [:full_name, :email_address, :phone_number, :city_or_town, :state_or_province]] # explicit data-binding to Model Array with column_attributes mapping for all columns
-          on_changed do |row, type, row_data|
-            puts "Row #{row} #{type}: #{row_data}"
-            $stdout.flush # for Windows
-          end
-          on_edited do |row, row_data| # only fires on direct table editing
-            puts "Row #{row} edited: #{row_data}"
-            $stdout.flush # for Windows
-          end
-        }
-      }
-    }.show
-  end
-end
+## Editable Table
+[examples/editable_table.rb](/examples/editable_table.rb)
+Run with this command from the root of the project if you cloned the project:
-FormTable.new.launch
+```
+ruby -r './lib/glimmer-dsl-libui' examples/editable_table.rb
 ```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 4 (with explicit [data-binding](#data-binding) to raw data):
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-```ruby
-require 'glimmer-dsl-libui'
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/editable_table'"
+```
-class FormTable
-  include Glimmer
-  attr_accessor :data, :name, :email, :phone, :city, :state, :filter_value
-  def initialize
-    @data = [
-      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'],
-      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'],
-      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'],
-      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'],
-      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'],
-    ]
-  end
-  def launch
-    window('Contacts', 600, 600) {
-      margined true
-      vertical_box {
-        form {
-          stretchy false
-          entry {
-            label 'Name'
-            text <=> [self, :name] # bidirectional data-binding between entry text and self.name
-          }
-          entry {
-            label 'Email'
-            text <=> [self, :email]
-          }
-          entry {
-            label 'Phone'
-            text <=> [self, :phone]
-          }
-          entry {
-            label 'City'
-            text <=> [self, :city]
-          }
-          entry {
-            label 'State'
-            text <=> [self, :state]
-          }
-        }
-        button('Save Contact') {
-          stretchy false
-          on_clicked do
-            new_row = [name, email, phone, city, state]
-            if new_row.map(&:to_s).include?('')
-              msg_box_error('Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
-            else
-              data << new_row # automatically inserts a row into the table due to implicit data-binding
-              @unfiltered_data = data.dup
-              self.name = '' # automatically clears name entry through explicit data-binding
-              self.email = ''
-              self.phone = ''
-              self.city = ''
-              self.state = ''
-            end
-          end
-        }
-        search_entry {
-          stretchy false
-          # bidirectional data-binding of text to self.filter_value with after_write option
-          text <=> [self, :filter_value,
-            after_write: ->(filter_value) { # execute after write to self.filter_value
-              @unfiltered_data ||= data.dup
-              # Unfilter first to remove any previous filters
-              data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
-              # Now, apply filter if entered
-              unless filter_value.empty?
-                data.filter! do |row_data| # affects table indirectly through implicit data-binding
-                  row_data.any? do |cell|
-                    cell.to_s.downcase.include?(filter_value.downcase)
-                  end
-                end
-              end
-            }
-          ]
-        }
-        table {
-          text_column('Name')
-          text_column('Email')
-          text_column('Phone')
-          text_column('City')
-          text_column('State')
-          editable true
-          cell_rows <=> [self, :data] # explicit data-binding to raw data Array of Arrays
-          on_changed do |row, type, row_data|
-            puts "Row #{row} #{type}: #{row_data}"
-            $stdout.flush # for Windows
-          end
-          on_edited do |row, row_data| # only fires on direct table editing
-            puts "Row #{row} edited: #{row_data}"
-            $stdout.flush # for Windows
-          end
-        }
-      }
-    }.show
-  end
-end
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-editable-table.png](/images/glimmer-dsl-libui-mac-editable-table.png) ![glimmer-dsl-libui-mac-editable-table-editing.png](/images/glimmer-dsl-libui-mac-editable-table-editing.png) ![glimmer-dsl-libui-mac-editable-table-edited.png](/images/glimmer-dsl-libui-mac-editable-table-edited.png) | ![glimmer-dsl-libui-windows-editable-table.png](/images/glimmer-dsl-libui-windows-editable-table.png) ![glimmer-dsl-libui-windows-editable-table-editing.png](/images/glimmer-dsl-libui-windows-editable-table-editing.png) ![glimmer-dsl-libui-windows-editable-table-edited.png](/images/glimmer-dsl-libui-windows-editable-table-edited.png) | ![glimmer-dsl-libui-linux-editable-table.png](/images/glimmer-dsl-libui-linux-editable-table.png) ![glimmer-dsl-libui-linux-editable-table-editing.png](/images/glimmer-dsl-libui-linux-editable-table-editing.png) ![glimmer-dsl-libui-linux-editable-table-edited.png](/images/glimmer-dsl-libui-linux-editable-table-edited.png)
-FormTable.new.launch
+## Form Table
+[examples/form_table.rb](/examples/form_table.rb)
+Run with this command from the root of the project if you cloned the project:
+```
+ruby -r './lib/glimmer-dsl-libui' examples/form_table.rb
 ```
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 5 (with implicit [data-binding](#data-binding)):
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-```ruby
-require 'glimmer-dsl-libui'
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/form_table'"
+```
-include Glimmer
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-form-table.png](/images/glimmer-dsl-libui-mac-form-table.png) ![glimmer-dsl-libui-mac-form-table-contact-entered.png](/images/glimmer-dsl-libui-mac-form-table-contact-entered.png) ![glimmer-dsl-libui-mac-form-table-filtered.png](/images/glimmer-dsl-libui-mac-form-table-filtered.png) | ![glimmer-dsl-libui-windows-form-table.png](/images/glimmer-dsl-libui-windows-form-table.png) ![glimmer-dsl-libui-windows-form-table-contact-entered.png](/images/glimmer-dsl-libui-windows-form-table-contact-entered.png) ![glimmer-dsl-libui-windows-form-table-filtered.png](/images/glimmer-dsl-libui-windows-form-table-filtered.png) | ![glimmer-dsl-libui-linux-form-table.png](/images/glimmer-dsl-libui-linux-form-table.png) ![glimmer-dsl-libui-linux-form-table-contact-entered.png](/images/glimmer-dsl-libui-linux-form-table-contact-entered.png) ![glimmer-dsl-libui-linux-form-table-filtered.png](/images/glimmer-dsl-libui-linux-form-table-filtered.png)
-data = [
-  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'],
-  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'],
-  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'],
-  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'],
-  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'],
-]
+Version 1 (with explicit [data-binding](#data-binding) and inferred table column attributes):
+[examples/form_table.rb](/examples/form_table.rb)
+Version 2 (with explicit [data-binding](#data-binding) specifying table `column_attributes` mapping hash):
+[examples/form_table2.rb](/examples/form_table2.rb)
+Version 3 (with explicit [data-binding](#data-binding) specifying table `column_attributes` array):
+[examples/form_table3.rb](/examples/form_table3.rb)
+Version 4 (with explicit [data-binding](#data-binding) to raw data):
+[examples/form_table4.rb](/examples/form_table4.rb)
+Version 5 (with implicit [data-binding](#data-binding)):
+[examples/form_table5.rb](/examples/form_table5.rb)
+## GPT2 Notepad
+[examples/gpt2_notepad.rb](/examples/gpt2_notepad.rb)
+This sample requires installing the following additional Ruby gems first:
+- [onnxruntime](https://rubygems.org/gems/onnxruntime)
+- [blingfire](https://rubygems.org/gems/blingfire)
+- [numo-narray](https://rubygems.org/gems/numo-narray)
+It will download GPT2 AI (Artificial Intelligence) models on first run.
+Run with this command from the root of the project if you cloned the project:
+```
+ruby -r './lib/glimmer-dsl-libui' examples/gpt2_notepad.rb
+```
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
-window('Contacts', 600, 600) {
-  margined true
-  vertical_box {
-    form {
-      stretchy false
-      @name_entry = entry {
-        label 'Name'
-      }
-      @email_entry = entry {
-        label 'Email'
-      }
-      @phone_entry = entry {
-        label 'Phone'
-      }
-      @city_entry = entry {
-        label 'City'
-      }
-      @state_entry = entry {
-        label 'State'
-      }
-    }
-    button('Save Contact') {
-      stretchy false
-      on_clicked do
-        new_row = [@name_entry.text, @email_entry.text, @phone_entry.text, @city_entry.text, @state_entry.text]
-        if new_row.map(&:to_s).include?('')
-          msg_box_error('Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
-        else
-          data << new_row # automatically inserts a row into the table due to implicit data-binding
-          @unfiltered_data = data.dup
-          @name_entry.text = ''
-          @email_entry.text = ''
-          @phone_entry.text = ''
-          @city_entry.text = ''
-          @state_entry.text = ''
-        end
-      end
-    }
-    search_entry { |se|
-      stretchy false
-      on_changed do
-        filter_value = se.text
-        @unfiltered_data ||= data.dup
-        # Unfilter first to remove any previous filters
-        data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
-        # Now, apply filter if entered
-        unless filter_value.empty?
-          data.filter! do |row_data| # affects table indirectly through implicit data-binding
-            row_data.any? do |cell|
-              cell.to_s.downcase.include?(filter_value.downcase)
-            end
-          end
-        end
-      end
-    }
-    table {
-      text_column('Name')
-      text_column('Email')
-      text_column('Phone')
-      text_column('City')
-      text_column('State')
-      editable true
-      cell_rows data # implicit data-binding to raw data Array of Arrays
-      on_changed do |row, type, row_data|
-        puts "Row #{row} #{type}: #{row_data}"
-        $stdout.flush # for Windows
-      end
-      on_edited do |row, row_data| # only fires on direct table editing
-        puts "Row #{row} edited: #{row_data}"
-        $stdout.flush # for Windows
-      end
-    }
-  }
-}.show
 ```
+ruby -r glimmer-dsl-libui -e "require 'examples/gpt2_notepad'"
+```
+![glimmer-dsl-libui-mac-gpt2-notepad](/images/glimmer-dsl-libui-mac-gpt2-notepad.png) ![glimmer-dsl-libui-mac-gpt2-notepad-predicted](/images/glimmer-dsl-libui-mac-gpt2-notepad-predicted.png)
 ## Paginated Refined Table