glimmer-dsl-libui 0.4.16 → 0.4.20

data/README.md

@@ -1,4 +1,4 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.4.16
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.4.20
 ## Prerequisite-Free Ruby Desktop Development GUI Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-libui.svg)](http://badge.fury.io/rb/glimmer-dsl-libui)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
@@ -324,7 +324,7 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-tetris.png](images/glimmer-dsl-libui-mac-tetris.png) | ![glimmer-dsl-libui-windows-tetris.png](images/glimmer-dsl-libui-windows-tetris.png) | ![glimmer-dsl-libui-linux-tetris.png](images/glimmer-dsl-libui-linux-tetris.png)
 
-NOTE: [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) is feature-complete and in beta mode (though the C [libui](https://github.com/andlabs/libui) is still mid-alpha). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. The more feedback and issues you report the better.
+NOTE: [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) is 100% feature-complete and in beta mode (though the C [libui](https://github.com/andlabs/libui) is still mid-alpha). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. The more feedback and issues you report the better.
 
 Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interested in:
 - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Framework)
@@ -409,6 +409,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
       - [Histogram](#histogram)
       - [Login](#login)
       - [Method-Based Custom Keyword](#method-based-custom-keyword)
+      - [Area-Based Custom Controls](#area-based-custom-controls)
       - [Midi Player](#midi-player)
       - [Snake](#snake)
       - [Tetris](#tetris)
@@ -506,7 +507,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.4.16'
+gem 'glimmer-dsl-libui', '~> 0.4.20'
 ```
 
 Test that installation worked by running the [Meta-Example](#examples):
@@ -595,7 +596,7 @@ Keyword(Args) | Properties | Listeners
 `area` | `auto_draw_enabled` | `on_draw(area_draw_params)`, `on_mouse_event(area_mouse_event)`, `on_mouse_down(area_mouse_event)`, `on_mouse_up(area_mouse_event)`, `on_mouse_drag_started(area_mouse_event)`, `on_mouse_dragged(area_mouse_event)`, `on_mouse_dropped(area_mouse_event)`, `on_mouse_entered`, `on_mouse_exited`, `on_key_event(area_key_event)`, `on_key_down(area_key_event)`, `on_key_up(area_key_event)`
 `arc(x_center as Numeric, y_center as Numeric, radius as Numeric, start_angle as Numeric, sweep as Numeric, is_negative as Boolean)` | `x_center` (`Numeric`), `y_center` (`Numeric`), `radius` (`Numeric`), `start_angle` (`Numeric`), `sweep` (`Numeric`), `is_negative` (Boolean) | None
 `background_color_column` | None | None
-`bezier(c1_x as Numeric, c1_y as Numeric, c2_x as Numeric, c2_y as Numeric, end_x as Numeric, end_y as Numeric)` | `c1_x` (`Numeric`), `c1_y` (`Numeric`), `c2_x` (`Numeric`), `c2_y` (`Numeric`), `end_x` (`Numeric`), `end_y` (`Numeric`) | None
+`bezier(x = nil as Numeric, y = nil as Numeric, c1_x as Numeric, c1_y as Numeric, c2_x as Numeric, c2_y as Numeric, end_x as Numeric, end_y as Numeric)` | `x` (`Numeric`), `y` (`Numeric`), `c1_x` (`Numeric`), `c1_y` (`Numeric`), `c2_x` (`Numeric`), `c2_y` (`Numeric`), `end_x` (`Numeric`), `end_y` (`Numeric`) | None
 `button(text as String)` | `text` (`String`) | `on_clicked`
 `button_column(name as String)` | `enabled` (Boolean) | None
 `checkbox(text as String)` | `checked` (Boolean), `text` (`String`) | `on_toggled`
@@ -622,7 +623,7 @@ Keyword(Args) | Properties | Listeners
 `image_text_column(name as String)` | None | None
 `image_text_color_column(name as String)` | None | None
 `label(text as String)` | `text` (`String`) | None
-`line(x as Numeric, y as Numeric)` | `x` (`Numeric`), `y` (`Numeric`) | None
+`line(x as Numeric, y as Numeric, end_x = nil as Numeric, end_y = nil as Numeric)` | `x` (`Numeric`), `y` (`Numeric`), `end_x` (`Numeric`), `end_y` (`Numeric`) | None
 `matrix(m11 = nil as Numeric, m12 = nil as Numeric, m21 = nil as Numeric, m22 = nil as Numeric, m31 = nil as Numeric, m32 = nil as Numeric)` | `m11` (`Numeric`), `m12` (`Numeric`), `m21` (`Numeric`), `m22` (`Numeric`), `m31` (`Numeric`), `m32` (`Numeric`) | None
 `menu(text as String)` | None | None
 `menu_item(text as String)` | None | `on_clicked`
@@ -958,8 +959,8 @@ Available `path` shapes (that can be nested explicitly under `path` or implicitl
 - `square(x as Numeric, y as Numeric, length as Numeric)`
 - `arc(x_center as Numeric, y_center as Numeric, radius as Numeric, start_angle as Numeric, sweep as Numeric, is_negative as Boolean)`
 - `circle(x_center as Numeric, y_center as Numeric, radius as Numeric)`
-- `line(x as Numeric, y as Numeric)`: must be placed in a figure (check `polyline`/`polygon` alternatives that do not require a `figure`)
-- `bezier(c1_x as Numeric, c1_y as Numeric, c2_x as Numeric, c2_y as Numeric, end_x as Numeric, end_y as Numeric)`: must be placed in a figure (check `polybezier` alternative that does not require a `figure`)
+- `line(x as Numeric, y as Numeric, end_x = nil as Numeric, end_y = nil as Numeric)`: must be placed in a `figure` if only `x`/`y` are specified or have `end_x`/`end_y` otherwise if outside of `figure` (check `polyline`/`polygon` alternatives that do not require a `figure`)
+- `bezier(x = nil as Numeric, y = nil as Numeric, c1_x as Numeric, c1_y as Numeric, c2_x as Numeric, c2_y as Numeric, end_x as Numeric, end_y as Numeric)`: must be placed in a `figure` if `x`/`y` are not specified or have `x`/`y` as start point otherwise if outside of `figure` (check `polybezier` alternative that does not require a `figure`)
 - `polygon(point_array as Array of Arrays of Numeric or Array of Numeric)`: shortcut for a closed figure of lines; can receive points as [[x1, y1], [x2, y2], ...] or [x1, y1, x2, y2, ...]
 - `polyline(point_array as Array of Arrays of Numeric or Array of Numeric)`: shortcut for an open figure of lines; can receive points as [[x1, y1], [x2, y2], ...] or [x1, y1, x2, y2, ...]
 - `polybezier(point_array as Array of Arrays of Numeric or Array of Numeric)`: shortcut for an open figure of beziers; can receive points as [[start_x1, start_y1], [c1_x2, c1_y2, c2_x2, c2_y2, end_x2, end_y2], [c1_x3, c1_y3, c2_x3, c2_y3, end_x3, end_y3], ...] or [start_x1, start_y1, c1_x2, c1_y2, c2_x2, c2_y2, end_x2, end_y2, c1_x3, c1_y3, c2_x3, c2_y3, end_x3, end_y3, ...]
@@ -1365,8 +1366,8 @@ Note that `area`, `path`, and nested shapes are all truly declarative, meaning t
 - All boolean property readers return `true` or `false` in Ruby instead of the [libui](https://github.com/andlabs/libui) original `0` or `1` in C.
 - All boolean property writers accept `true`/`false` in addition to `1`/`0` in Ruby
 - All string property readers return a `String` object in Ruby instead of the [libui](https://github.com/andlabs/libui) Fiddle pointer object.
-- Automatically allocate font descriptors upon instantiating `font_button` controls and free them when destorying `font_button` controls
-- Automatically allocate color value pointers upon instantiating `color_button` controls and free them when destorying `color_button` controls
+- Automatically allocate font descriptors upon instantiating `font_button` controls and free them when destroying `font_button` controls
+- Automatically allocate color value pointers upon instantiating `color_button` controls and free them when destroying `color_button` controls
 - On the Mac, if no `menu` items were added, an automatic `quit_menu_item` is added to enable quitting with CTRL+Q
 - When destroying a control nested under a `horizontal_box` or `vertical_box`, it is automatically deleted from the box's children
 - When destroying a control nested under a `form`, it is automatically deleted from the form's children
@@ -1384,6 +1385,7 @@ Note that `area`, `path`, and nested shapes are all truly declarative, meaning t
 - `scrolling_area` `#scroll_to` 3rd and 4th arguments (`width` and `height`) default to main window width and height if not specified.
 - `area` paths are specified declaratively with shapes/figures underneath (e.g. `rectangle`), and `area` draw listener is automatically generated
 - `area` path shapes can be added directly under `area` without declaring `path` explicitly as a convenient shorthand
+- `line` and `bezier` automatically start a new figure if placed outside of `figure`
 - Observe figure properties (e.g. `rectangle` `width`) for changes and automatically redraw containing area accordingly
 - Observe `path` `fill` and `stroke` hashes for changes and automatically redraw containing area accordingly
 - Observe `text` and `string` properties for changes and automatically redraw containing area accordingly
@@ -1395,7 +1397,15 @@ Note that `area`, `path`, and nested shapes are all truly declarative, meaning t
 
 ### Custom Keywords
 
-To define custom keywords, simply define a method representing the custom control you want. To make reusable, you can define in modules and simply include the modules in the view classes that need them.
+Custom keywords can be defined to represent custom controls (components) that provide new features or act as composites of [existing controls](#supported-keywords) that need to be reused multiple times in an application or across multiple applications. Custom keywords save a lot of development time, improving productivity and maintainability immensely.
+
+For example, you can define a custom `address` control as an aggregate of multiple `label` controls to reuse multiple times as a standard address View, displaying street, city, state, and zip code.
+
+To define custom keywords, simply define a method representing the custom control you want (e.g. `address`) with any arguments needed (e.g. `address(address_model)`).
+
+To make custom keywords externally reusable, you can define in modules and simply include the modules in the view classes that need them.
+
+It is OK to use terms "custom keyword" and "custom control" synonymously though "custom keyword" is a broader term that covers things other than controls too like custom shapes (e.g. `cylinder`), custom attributed strings (e.g. `alternating_color_string`), and custom transforms (`isometric_transform`).
 
 Example that defines `form_field`, `address_form`, `label_pair`, and `address` keywords (you may copy/paste in [`girb`](#girb-glimmer-irb)):
 
@@ -1407,44 +1417,37 @@ include Glimmer
 
 Address = Struct.new(:street, :p_o_box, :city, :state, :zip_code)
 
-def form_field(model, property)
-  property = property.to_s
+def form_field(model, attribute)
+  attribute = attribute.to_s
   entry { |e|
-    label property.underscore.split('_').map(&:capitalize).join(' ')
-    text model.send(property).to_s
-
-    on_changed do
-      model.send("#{property}=", e.text)
-    end
+    label attribute.underscore.split('_').map(&:capitalize).join(' ')
+    text <=> [model, attribute]
   }
 end
 
-def address_form(address)
+def address_form(address_model)
   form {
-    form_field(address, :street)
-    form_field(address, :p_o_box)
-    form_field(address, :city)
-    form_field(address, :state)
-    form_field(address, :zip_code)
+    form_field(address_model, :street)
+    form_field(address_model, :p_o_box)
+    form_field(address_model, :city)
+    form_field(address_model, :state)
+    form_field(address_model, :zip_code)
   }
 end
 
 def label_pair(model, attribute, value)
-  name_label = nil
-  value_label = nil
   horizontal_box {
-    name_label = label(attribute.to_s.underscore.split('_').map(&:capitalize).join(' '))
-    value_label = label(value.to_s)
+    label(attribute.to_s.underscore.split('_').map(&:capitalize).join(' '))
+    label(value.to_s) {
+      text <= [model, attribute]
+    }
   }
-  Glimmer::DataBinding::Observer.proc do
-    value_label.text = model.send(attribute)
-  end.observe(model, attribute)
 end
 
-def address(address)
+def address(address_model)
   vertical_box {
-    address.each_pair do |attribute, value|
-      label_pair(address, attribute, value)
+    address_model.each_pair do |attribute, value|
+      label_pair(address_model, attribute, value)
     end
   }
 end
@@ -1501,6 +1504,12 @@ window('Method-Based Custom Keyword') {
 
 ![glimmer-dsl-libui-mac-method-based-custom-keyword.png](images/glimmer-dsl-libui-mac-method-based-custom-keyword.png)
 
+The [`area`](#area-api) control can be utilized to build non-native custom controls from scratch by leveraging vector graphics, formattable text, keyboard events, and mouse events. This is demonstrated in the [Area-Based Custom Controls](#area-based-custom-controls) example.
+
+Defining custom keywords enables unlimited extension of the [Glimmer GUI DSL](#glimmer-gui-dsl). The sky is the limit on what can be done with custom keywords as a result. You can compose new visual vocabulary to build applications in any domain from higher concepts rather than [mere standard controls](#supported-keywords). For example, in a traffic signaling app, you could define `street`, `light_signal`, `traffic_sign`, and `car` as custom keywords and build your application from these concepts directly, saving enormous time and achieving much higher productivity.
+
+Learn more from custom keyword usage in [Method-Based Custom Keyword](#method-based-custom-keyword), [Area-Based Custom Controls](#area-based-custom-controls), [Basic Scrolling Area](#basic-scrolling-area), [Histogram](#histogram), and [Tetris](#tetris) examples.
+
 ### Observer Pattern
 
 The [Observer Design Pattern](https://en.wikipedia.org/wiki/Observer_pattern) (a.k.a. Observer Pattern) is fundamental to building GUIs (Graphical User Interfaces) following the [MVC (Model View Controller) Architectural Pattern](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) or any of its variations like [MVP (Model View Presenter)](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter). In the original Smalltalk-MVC, the View observes the Model for changes and updates itself accordingly.
@@ -1772,9 +1781,9 @@ Data-bound model attribute can be:
 - **Indexed:** `String` containing array attribute index (e.g. `[customer, 'addresses[0].street']`). That results in "indexed data-binding"
 
 Data-binding options include:
-- `before_read {|value| ...}`: performs an operation before reading data from Model to update the View.
+- `before_read {|value| ...}`: performs an operation before reading data from Model to update View.
 - `on_read {|value| ...}`: converts value read from Model to update the View.
-- `after_read {|converted_value| ...}`: performs an operation after read from Model and updating the View.
+- `after_read {|converted_value| ...}`: performs an operation after read from Model to update View.
 - `before_write {|value| ...}`: performs an operation before writing data to Model from View.
 - `on_write {|value| ...}`: converts value read from View to update the Model.
 - `after_write {|converted_value| ...}`: performs an operation after writing to Model from View.
@@ -1795,8 +1804,8 @@ Learn more from data-binding usage in [Login](#login) (4 data-binding versions),
 #### Data-Binding Gotchas
 
 - Never data-bind a control property to an attribute on the same view object with the same exact name (e.g. binding `entry` `text` property to `self` `text` attribute) as it would conflict with it. Instead, data-bind view property to an attribute with a different name on the view object or with the same name, but on a presenter or model object (e.g. data-bind `entry` `text` to `self` `legal_text` attribute or to `contract` model `text` attribute)
-- Data-binding a property utilizes the control's listener associated with the property (e.g. `on_changed` for `entry` `text`), so you cannot hook into the listener directly anymore as that would negate data-binding. Instead, you can add an `after_write: ->(val) {}` option to perform something on trigger of the control listener instead.
-- Data-binding a View control to another View control directly is not a good idea. Instead, data-bind both View controls to the same Presenter/Model attribute, and that keeps them in sync while keeping the code decoupled.
+- Data-binding a property utilizes the control's listener associated with the property (e.g. `on_changed` for `entry` `text`), so although you can add another listener if you want ([Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) will happily add your listener to the list of listeners that will get notified by a certain event), sometimes it is recommended that you add an `after_read: ->(val) {}` or `after_write: ->(val) {}` block instead to perform something after data-binding reads from or writes to the Model attribute.
+- Data-binding a View control to another View control directly is not a good practice as it causes tight-coupling. Instead, data-bind both View controls to the same Presenter/Model attribute, and that keeps them in sync while keeping the code decoupled.
 
 ### API Gotchas
 
@@ -1805,8 +1814,8 @@ Learn more from data-binding usage in [Login](#login) (4 data-binding versions),
 - `table` `checkbox_text_column` checkbox editing only works on Linux (not Mac or Windows) due to a current limitation in [libui](https://github.com/andlabs/ui/issues/357).
 - `text` `align` property seems not to work on the Mac ([libui](https://github.com/andlabs/libui) has an [issue](https://github.com/andlabs/libui/pull/407) about it)
 - `text` `string` `background` does not work on Windows due to an [issue in libui](https://github.com/andlabs/libui/issues/347).
-- `table` controls on Windows intentionally get an extra empty row at the end because if any row were to be deleted for the first time, double-deletion happens due to an issue in [libui](https://github.com/andlabs/libui) on Windows.
 - `table` `progress_bar` column on Windows cannot be updated with a positive value if it started initially with `-1` (it ignores update to avoid crashing due to an issue in [libui](https://github.com/andlabs/libui) on Windows.
+- `radio_buttons` on Linux has an issue where it always selects the first item even if you did not set its `selected` value or set it to `-1` (meaning unselected). It works correctly on Mac and Windows.
 - It seems that [libui](https://github.com/andlabs/libui) does not support nesting multiple `area` controls under a `grid` as only the first one shows up in that scenario. To workaround that limitation, use a `vertical_box` with nested `horizontal_box`s instead to include multiple `area`s in a GUI.
 - As per the code of [examples/basic_transform.rb](#basic-transform), Windows requires different ordering of transforms than Mac and Linux.
 - `scrolling_area#scroll_to` does not seem to work on Windows and Linux, but works fine on Mac
@@ -6039,7 +6048,7 @@ 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")[2].to_i
+    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?
@@ -6110,6 +6119,7 @@ class CustomDrawText
               @string.font = fb.font
             end
           }
+
           color_button { |cb|
             label 'Color'
             
@@ -6117,13 +6127,17 @@ class CustomDrawText
               @string.color = cb.color
             end
           }
-          color_button { |cb|
-            label 'Background'
-            
-            on_changed do
-              @string.background = 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(' ')}
@@ -6133,12 +6147,36 @@ class CustomDrawText
               @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])
+          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 ' \
@@ -6183,62 +6221,94 @@ require 'glimmer-dsl-libui'
 # 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
           }
-          color_button { |cb|
-            label 'Background'
-            
-            on_changed do
-              @background = 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])
+            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 ' \
@@ -8309,6 +8379,12 @@ window('Login') {
 
 #### Method-Based Custom Keyword
 
+[Custom keywords](#custom-keywords) can be defined to represent custom controls (components) that provide new features or act as composites of existing controls that need to be reused multiple times in an application or across multiple applications. Custom keywords save a lot of development time, improving productivity and maintainability immensely.
+  
+This example defines `form_field`, `address_form`, `label_pair`, and `address` as custom control keywords.
+
+The custom keywords are defined via methods (thus are "method-based").
+
 [examples/method_based_custom_keyword.rb](examples/method_based_custom_keyword.rb)
 
 Run with this command from the root of the project if you cloned the project:
@@ -8524,6 +8600,313 @@ window('Method-Based Custom Keyword') {
 }.show
 ```
 
+#### Area-Based Custom Controls
+
+[Custom keywords](#custom-keywords) can be defined for graphical custom controls (components) built completely from scratch as vector-graphics on top of the [`area`](#area-api) control while leveraging keyboard and mouse listeners.
+
+This example defines `text_label` and `push_button` as [`area`](#area-api)-based graphical custom controls that can have width, height, font, fill, stroke, border, and custom text location.
+      
+[examples/area_based_custom_controls.rb](examples/area_based_custom_controls.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/area_based_custom_controls.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/area_based_custom_controls'"
+```
+
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-area-based-custom-controls.png](images/glimmer-dsl-libui-mac-area-based-custom-controls-text-label.png) ![glimmer-dsl-libui-mac-area-based-custom-controls.png](images/glimmer-dsl-libui-mac-area-based-custom-controls-push-button.png) ![glimmer-dsl-libui-mac-area-based-custom-controls.png](images/glimmer-dsl-libui-mac-area-based-custom-controls-push-button-clicked.png) | ![glimmer-dsl-libui-windows-area-based-custom-controls.png](images/glimmer-dsl-libui-windows-area-based-custom-controls-text-label.png) ![glimmer-dsl-libui-windows-area-based-custom-controls.png](images/glimmer-dsl-libui-windows-area-based-custom-controls-push-button.png) ![glimmer-dsl-libui-windows-area-based-custom-controls.png](images/glimmer-dsl-libui-windows-area-based-custom-controls-push-button-clicked.png) | ![glimmer-dsl-libui-linux-area-based-custom-controls.png](images/glimmer-dsl-libui-linux-area-based-custom-controls-text-label.png) ![glimmer-dsl-libui-linux-area-based-custom-controls.png](images/glimmer-dsl-libui-linux-area-based-custom-controls-push-button.png) ![glimmer-dsl-libui-linux-area-based-custom-controls.png](images/glimmer-dsl-libui-linux-area-based-custom-controls-push-button-clicked.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class AreaBasedCustomControls
+  include Glimmer
+  
+  attr_accessor :label_width, :label_height, :label_font_descriptor,
+                :label_text_color, :label_background_fill, :label_border_stroke,
+                :label_text_x, :label_text_y,
+                :button_width, :button_height, :button_font_descriptor,
+                :button_text_color, :button_background_fill, :button_border_stroke,
+                :button_text_x, :button_text_y
+  
+  def initialize
+    self.label_width = 335
+    self.label_height = 50
+    self.label_font_descriptor = {family: OS.linux? ? 'Bitstream Vera Sans Mono' : 'Courier New', size: 16, weight: :bold, italic: :italic}
+    self.label_text_color = :red
+    self.label_background_fill = :yellow
+    self.label_border_stroke = :limegreen
+    
+    self.button_width = 130
+    self.button_height = 50
+    self.button_font_descriptor = {family: OS.linux? ? 'Bitstream Vera Sans Mono' : 'Courier New', size: 36, weight: :bold, italic: :italic}
+    self.button_text_color = :green
+    self.button_background_fill = :yellow
+    self.button_border_stroke = :limegreen
+  end
+  
+  def rebuild_text_label
+    @text_label.destroy
+    @text_label_vertical_box.content { # re-open vertical box content and shove in a new button
+      @text_label = text_label('This is a text label.',
+                               width: label_width, height: label_height, font_descriptor: label_font_descriptor,
+                               background_fill: label_background_fill, text_color: label_text_color, border_stroke: label_border_stroke,
+                               text_x: label_text_x, text_y: label_text_y)
+    }
+  end
+  
+  def rebuild_push_button
+    @push_button.destroy
+    @push_button_vertical_box.content { # re-open vertical box content and shove in a new button
+      @push_button = push_button('Push',
+                                 width: button_width, height: button_height, font_descriptor: button_font_descriptor,
+                                 background_fill: button_background_fill, text_color: button_text_color, border_stroke: button_border_stroke,
+                                 text_x: button_text_x, text_y: button_text_y) {
+        on_mouse_up do
+          message_box('Button Pushed', 'Thank you for pushing the button!')
+        end
+      }
+    }
+  end
+  
+  def launch
+    window('Area-Based Custom Controls', 385, 385) { |w|
+      margined true
+      
+      tab {
+        tab_item('Text Label') {
+          @text_label_vertical_box = vertical_box {
+            vertical_box {
+              text_label('Text Label Construction Form:', width: 250, height: 30, font_descriptor: {size: 16, weight: :bold}, text_x: 0, text_y: 0)
+              
+              horizontal_box {
+                label('Width')
+                spinbox(1, 1000) {
+                  value <=> [self, :label_width, after_write: method(:rebuild_text_label)]
+                }
+              }
+              
+              horizontal_box {
+                label('Height')
+                spinbox(1, 1000) {
+                  value <=> [self, :label_height, after_write: method(:rebuild_text_label)]
+                }
+              }
+              
+              horizontal_box {
+                label('Font')
+                font_button {
+                  font <=> [self, :label_font_descriptor, after_write: method(:rebuild_text_label)]
+                }
+              }
+              
+              horizontal_box {
+                label('Text Color')
+                color_button {
+                  color <=> [self, :label_text_color, after_write: method(:rebuild_text_label)]
+                }
+              }
+              
+              horizontal_box {
+                label('Background Color')
+                color_button {
+                  color <=> [self, :label_background_fill, after_write: method(:rebuild_text_label)]
+                }
+              }
+              
+              horizontal_box {
+                label('Border Color')
+                color_button {
+                  color <=> [self, :label_border_stroke, after_write: method(:rebuild_text_label)]
+                }
+              }
+              
+              horizontal_box {
+                label('Text X (0=centered)')
+                spinbox(0, 1000) {
+                  value <=> [self, :label_text_x, on_read: ->(x) {x.nil? ? 0 : x}, on_write: ->(x) {x == 0 ? nil : x}, after_write: method(:rebuild_text_label)]
+                }
+              }
+              
+              horizontal_box {
+                label('Text Y (0=centered)')
+                spinbox(0, 1000) {
+                  value <=> [self, :label_text_y, on_read: ->(y) {y.nil? ? 0 : y}, on_write: ->(y) {y == 0 ? nil : y}, after_write: method(:rebuild_text_label)]
+                }
+              }
+            }
+            
+            @text_label = text_label('This is a text label.',
+                                     width: label_width, height: label_height, font_descriptor: label_font_descriptor,
+                                     background_fill: label_background_fill, text_color: label_text_color, border_stroke: label_border_stroke,
+                                     text_x: label_text_x, text_y: label_text_y)
+          }
+        }
+        
+        tab_item('Push Button') {
+          @push_button_vertical_box = vertical_box {
+            vertical_box {
+              text_label('Push Button Construction Form:', width: 250, height: 30, font_descriptor: {size: 16, weight: :bold}, text_x: 0, text_y: 0)
+              
+              horizontal_box {
+                label('Width')
+                spinbox(1, 1000) {
+                  value <=> [self, :button_width, after_write: method(:rebuild_push_button)]
+                }
+              }
+              
+              horizontal_box {
+                label('Height')
+                spinbox(1, 1000) {
+                  value <=> [self, :button_height, after_write: method(:rebuild_push_button)]
+                }
+              }
+              
+              horizontal_box {
+                label('Font')
+                font_button {
+                  font <=> [self, :button_font_descriptor, after_write: method(:rebuild_push_button)]
+                }
+              }
+              
+              horizontal_box {
+                label('Text Color')
+                color_button {
+                  color <=> [self, :button_text_color, after_write: method(:rebuild_push_button)]
+                }
+              }
+              
+              horizontal_box {
+                label('Background Color')
+                color_button {
+                  color <=> [self, :button_background_fill, after_write: method(:rebuild_push_button)]
+                }
+              }
+              
+              horizontal_box {
+                label('Border Color')
+                color_button {
+                  color <=> [self, :button_border_stroke, after_write: method(:rebuild_push_button)]
+                }
+              }
+              
+              horizontal_box {
+                label('Text X (0=centered)')
+                spinbox(0, 1000) {
+                  value <=> [self, :button_text_x, on_read: ->(x) {x.nil? ? 0 : x}, on_write: ->(x) {x == 0 ? nil : x}, after_write: method(:rebuild_push_button)]
+                }
+              }
+              
+              horizontal_box {
+                label('Text Y (0=centered)')
+                spinbox(0, 1000) {
+                  value <=> [self, :button_text_y, on_read: ->(y) {y.nil? ? 0 : y}, on_write: ->(y) {y == 0 ? nil : y}, after_write: method(:rebuild_push_button)]
+                }
+              }
+            }
+            
+            @push_button = push_button('Push',
+                                       width: button_width, height: button_height, font_descriptor: button_font_descriptor,
+                                       background_fill: button_background_fill, text_color: button_text_color, border_stroke: button_border_stroke,
+                                       text_x: button_text_x, text_y: button_text_y) {
+              on_mouse_up do
+                message_box('Button Pushed', 'Thank you for pushing the button!')
+              end
+            }
+          }
+        }
+      }
+    }.show
+  end
+    
+  # text label (area-based custom control) built with vector graphics on top of area.
+  #
+  # background_fill is transparent by default.
+  # background_fill can accept a single color or gradient stops just as per `fill` property in README.
+  # border_stroke is transparent by default.
+  # border_stroke can accept thickness and dashes in addition to color just as per `stroke` property in README.
+  def text_label(label_text,
+                  width: 80, height: 30, font_descriptor: {},
+                  background_fill: {a: 0}, text_color: :black, border_stroke: {a: 0},
+                  text_x: nil, text_y: nil,
+                  &content)
+    area { |the_area|
+      rectangle(1, 1, width, height) {
+        fill background_fill
+      }
+      rectangle(1, 1, width, height) {
+        stroke border_stroke
+      }
+      
+      text_height = (font_descriptor[:size] || 12) * 0.75
+      text_width = (text_height * label_text.size) * 0.75
+      text_x ||= (width - text_width) / 2.0
+      text_y ||= (height - 4 - text_height) / 2.0
+      text(text_x, text_y, width) {
+        string(label_text) {
+          color text_color
+          font font_descriptor
+        }
+      }
+      
+      content&.call(the_area)
+    }
+  end
+  
+  # push button (area-based custom control) built with vector graphics on top of area.
+  #
+  # background_fill is white by default.
+  # background_fill can accept a single color or gradient stops just as per `fill` property in README.
+  # border_stroke is black by default.
+  # border_stroke can accept thickness and dashes in addition to color just as per `stroke` property in README.
+  # text_x and text_y are the offset of the button text in releation to its top-left corner
+  # When text_x, text_y are left nil, the text is automatically centered in the button area.
+  # Sometimes, the centering calculation is not perfect due to using a custom font, so
+  # in that case, pass in text_x, and text_y manually
+  #
+  # reuses the text_label custom control
+  def push_button(button_text,
+                  width: 80, height: 30, font_descriptor: {},
+                  background_fill: :white, text_color: :black, border_stroke: {r: 201, g: 201, b: 201},
+                  text_x: nil, text_y: nil,
+                  &content)
+    text_label(button_text,
+                  width: width, height: height, font_descriptor: font_descriptor,
+                  background_fill: background_fill, text_color: text_color, border_stroke: border_stroke,
+                  text_x: text_x, text_y: text_y) { |the_area|
+      
+      # dig into the_area content and grab elements to modify in mouse listeners below
+      background_rectangle = the_area.children[0]
+      button_string = the_area.children[2].children[0]
+      
+      on_mouse_down do
+        background_rectangle.fill = {x0: 0, y0: 0, x1: 0, y1: height, stops: [{pos: 0, r: 72, g: 146, b: 247}, {pos: 1, r: 12, g: 85, b: 214}]}
+        button_string.color = :white
+      end
+      
+      on_mouse_up do
+        background_rectangle.fill = background_fill
+        button_string.color = text_color
+      end
+      
+      content&.call(the_area)
+    }
+  end
+end
+
+AreaBasedCustomControls.new.launch
+```
+
 #### Midi Player
 
 To run this example, install [TiMidity](http://timidity.sourceforge.net) and ensure `timidity` command is in `PATH` (can be installed via [Homebrew](https://brew.sh) on Mac or [apt-get](https://help.ubuntu.com/community/AptGet/Howto) on Linux).
@@ -10046,7 +10429,7 @@ https://github.com/iraamaro/i3off-gtk-ruby
 
 ### Issues
 
-If you encounter [issues](https://github.com/AndyObtiva/glimmer-dsl-libui/issues) that are not reported, discover missing features that are not mentioned in [TODO.md](TODO.md), or think up better ways to use [libui](https://github.com/andlabs/libui) than what is possible with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui), you may submit an [issue](https://github.com/AndyObtiva/glimmer-dsl-libui/issues/new) or [pull request](https://github.com/AndyObtiva/glimmer-dsl-libui/compare) on [GitHub](https://github.com). In the meantime, you may try older gem versions of [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) till you find one that works until issues are resolved.
+If you encounter [issues](https://github.com/AndyObtiva/glimmer-dsl-libui/issues) that are not reported, discover missing features that are not mentioned in [TODO.md](TODO.md), or think up better ways to use [libui](https://github.com/andlabs/libui) than what is possible with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui), you may submit an [issue](https://github.com/AndyObtiva/glimmer-dsl-libui/issues/new) or [pull request](https://github.com/AndyObtiva/glimmer-dsl-libui/compare) on [GitHub](https://github.com). In the meantime, you may try older gem versions of [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) till you find one that works.
 
 ### Chat