glimmer-dsl-libui 0.5.22 → 0.5.24

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

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