glimmer-dsl-libui 0.4.11 → 0.4.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e70a639d4f55c50b7e18b15c8122969c08dd4e50c8517048d9167bb8e7f1a4e
-  data.tar.gz: 7c774b5f04f58306113c89355201026585c6b5701dcad7c911fa541044423196
+  metadata.gz: d49e65f2fefc1a5ef7d91c52bee0257bc03bd2ddd989d560b8887bfa9b24a3c5
+  data.tar.gz: c89fd384832f204d9f2edfb3faa99e526c0541817515286333dcdc89f9cb0ef6
 SHA512:
-  metadata.gz: de3cca63789bd2d0818ad65350dc1e8ae79206c11d1f6f38b2bd4f7702f846b2ee160ca34456889d9a19dc958e5c768b3d6c8f0deb52f9b2c6205e1d719c3ef2
-  data.tar.gz: 9fae92e29083d58ae527d548084f7da5187170aa3f0c66796649edffaf53ee7d7d0a948d586ea9a3310c34c5213125bbe5c6883f7f1c1fdc2e8dad1ec83ec96c
+  metadata.gz: 3c55ae21fadef21af8a3fbf36a20e08b5454a9ab9bd9bad4c2f3ac1097b2684e675c593187e8b4c8a87596e2ca8a354c71846a80452a8e9c75c01aca811af9ca
+  data.tar.gz: 91616b1ffa09f0d92d807c2f1e25edf4b0e5145ec68e73dbc2b1fbf3f3f82f25a44613d9e7e67129c12751f6085fac68ae7ae6fc7a633c58404b73a30f0caade

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 0.4.12
+
+- Support `table` data-binding to model rows when utilizing dual-columns or triple-columns (e.g. columns having color and/or a checkbox in addition to text)
+- Support passing `table` `image`/`image_text` `cell_rows` `image` data as file path/image args directly (without using `image` keyword)
+- Add examples/basic_table_color.rb version that data-binds to model rows instead of raw data
+- Simplify examples/basic_table_color.rb to pass image data as file-path/width/height arguments directly
+- Simplify examples/basic_table_image.rb to pass image data as file url directly
+- Simplify examples/basic_table_image_text.rb to pass image data as file url directly
+- Fix issue with hex color support for colors starting with `'#'`
+
 ## 0.4.11
 
 - Support `table` `cell_rows` explicit bidirectional data-binding (with `<=>` sign)

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.11
+# [<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.12
 ## 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)
@@ -356,6 +356,11 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Custom Keywords](#custom-keywords)
     - [Observer Pattern](#observer-pattern)
     - [Data-Binding](#data-binding)
+      - [Bidirectional (Two-Way) Data-Binding](#bidirectional-two-way-data-binding)
+        - [Table Data-Binding](#table-data-binding)
+      - [Unidirectional (One-Way) Data-Binding](#unidirectional-one-way-data-binding)
+      - [Data-Binding API](#data-binding-api)
+      - [Data-Binding Gotchas](#data-binding-gotchas)
     - [API Gotchas](#api-gotchas)
     - [Original API](#original-api)
   - [Packaging](#packaging)
@@ -495,7 +500,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.4.11'
+gem 'glimmer-dsl-libui', '~> 0.4.12'
 ```
 
 Test that installation worked by running the [Meta-Example](#examples):
@@ -848,7 +853,9 @@ window('Contacts', 600, 600) { |w|
 }.show
 ```
 
-![glimmer-dsl-libui-linux-form-table.png](images/glimmer-dsl-libui-linux-form-table.png)
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-form-table.png](images/glimmer-dsl-libui-mac-form-table.png) | ![glimmer-dsl-libui-windows-form-table.png](images/glimmer-dsl-libui-windows-form-table.png) | ![glimmer-dsl-libui-linux-form-table.png](images/glimmer-dsl-libui-linux-form-table.png)
 
 Learn more by checking out [examples](#examples).
 
@@ -1502,6 +1509,8 @@ Data-binding supports utilizing the [MVP (Model View Presenter)](https://en.wiki
 
 ![MVP](https://www.researchgate.net/profile/Gilles-Perrouin/publication/320249584/figure/fig8/AS:668260987068418@1536337243385/Model-view-presenter-architecture.png)
 
+#### Bidirectional (Two-Way) Data-Binding
+
 [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) supports bidirectional (two-way) data-binding of the following controls/properties via the `<=>` operator (indicating data is moving in both directions between View and Model):
 - `checkbox`: `checked`
 - `check_menu_item`: `checked`
@@ -1542,6 +1551,162 @@ entry {
 
 That is data-binding `entered_text` attribute on `self` to `entry` `text` property and printing text after write to the model.
 
+##### Table Data-Binding
+
+One note about `table` `cell_rows` data-binding is that it works with either:
+- Raw data `Array` (rows) of `Array`s (column cells)
+- Model `Array` (rows) of objects having attributes (column cells) matching the underscored names of `table` columns by convention. Model attribute names can be overridden when needed by passing an `Array` enumerating all mapped model attributes in the order of `table` columns or alternatively a `Hash` mapping only the column names that have model attribute names different from their table column underscored version.
+
+Example of `table` implicit data-binding of `cell_rows` to raw data `Array` of `Array`s (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+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'],
+]
+
+window('Contacts', 600, 600) {
+  table {
+    text_column('Name')
+    text_column('Email')
+    text_column('Phone')
+    text_column('City')
+    text_column('State')
+  
+    cell_rows data
+  }
+}.show
+```
+
+Example of `table` explicit data-binding of `cell_rows` to Model `Array` (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class SomeTable
+  Contact = Struct.new(:name, :email, :phone, :city, :state)
+  
+  include Glimmer
+  
+  attr_accessor :contacts
+  
+  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, 200) {
+      table {
+        text_column('Name')
+        text_column('Email')
+        text_column('Phone')
+        text_column('City')
+        text_column('State')
+  
+        cell_rows <=> [self, :contacts] # explicit data-binding to Model Array auto-inferring model attribute names from underscored table column names by convention
+      }
+    }.show
+  end
+end
+
+SomeTable.new.launch
+```
+
+Example of `table` explicit data-binding of `cell_rows` to Model `Array` with `column_attributes` `Hash` mapping for custom column names (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class SomeTable
+  Contact = Struct.new(:name, :email, :phone, :city, :state)
+  
+  include Glimmer
+  
+  attr_accessor :contacts
+  
+  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, 200) {
+      table {
+        text_column('Name')
+        text_column('Email')
+        text_column('Phone')
+        text_column('City/Town')
+        text_column('State/Province')
+  
+        cell_rows <=> [self, :contacts, column_attributes: {'City/Town' => :city, 'State/Province' => :state}]
+      }
+    }.show
+  end
+end
+
+SomeTable.new.launch
+```
+
+Example of `table` explicit data-binding of `cell_rows` to Model `Array` with complete `column_attributes` `Array` mapping (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class SomeTable
+  Contact = Struct.new(:name, :email, :phone, :city, :state)
+  
+  include Glimmer
+  
+  attr_accessor :contacts
+  
+  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, 200) {
+      table {
+        text_column('Full Name')
+        text_column('Email Address')
+        text_column('Phone Number')
+        text_column('City or Town')
+        text_column('State or Province')
+  
+        cell_rows <=> [self, :contacts, column_attributes: [:name, :email, :phone, :city, :state]]
+      }
+    }.show
+  end
+end
+
+SomeTable.new.launch
+```
+
+#### Unidirectional (One-Way) Data-Binding
+
 [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) supports unidirectional (one-way) data-binding of any control/shape/attributed-string property via the `<=` operator (indicating data is moving from the right side, which is the Model, to the left side, which is the GUI View object).
 
 Example of unidirectional data-binding:
@@ -1564,6 +1729,8 @@ window {
 
 That is data-binding the `window` `title` property to the `score` attribute of a `@game`, but converting on read from the Model to a `String`.
 
+#### Data-Binding API
+
 To summarize the data-binding API:
 - `view_property <=> [model, attribute, *read_or_write_options]`: Bidirectional (two-way) data-binding to Model attribute accessor
 - `view_property <= [model, attribute, *read_only_options]`: Unidirectional (one-way) data-binding to Model attribute reader
@@ -1594,12 +1761,13 @@ entry {
 }
 ```
 
-Data-binding gotchas:
+Learn more from data-binding usage in [Login](#login) (4 data-binding versions), [Basic Entry](#basic-entry), [Form](#form), [Form Table](#form-table) (5 data-binding versions), [Method-Based Custom Keyword](#method-based-custom-keyword), [Snake](#snake) and [Tic Tac Toe](#tic_tac_toe) examples.
+
+#### 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.
 
-Learn more from data-binding usage in [Login](#login) (4 data-binding versions), [Basic Entry](#basic-entry), [Form](#form), [Form Table](#form-table), [Method-Based Custom Keyword](#method-based-custom-keyword), [Snake](#snake) and [Tic Tac Toe](#tic_tac_toe) examples.
-
 ### API Gotchas
 
 - There is no proper way to destroy `grid` children due to [libui](https://github.com/andlabs/libui) not offering any API for deleting them from `grid` (no `grid_delete` similar to `box_delete` for `horizontal_box` and `vertical_box`).
@@ -2925,7 +3093,44 @@ UI.main
 UI.quit
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (passing file url as image):
+
+```ruby
+# frozen_string_literal: true
+
+# NOTE:
+# This example displays images that can be freely downloaded from the Studio Ghibli website.
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+IMAGE_ROWS = []
+
+50.times do |i|
+  url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
+  puts "Processing Image: #{url}"; $stdout.flush # for Windows
+  IMAGE_ROWS << [url] # array of one column cell
+rescue StandardError => e
+  warn url, e.message
+end
+
+window('The Red Turtle', 310, 350, false) {
+  horizontal_box {
+    table {
+      image_column('www.ghibli.jp/works/red-turtle')
+      
+      cell_rows IMAGE_ROWS
+    }
+  }
+  
+  on_closing do
+    puts 'Bye Bye'
+  end
+}.show
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (automatic construction of `image`):
 
 ```ruby
 # NOTE:
@@ -2960,7 +3165,7 @@ window('The Red Turtle', 310, 350, false) {
 }.show
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (manual construction of `image` from `image_part`):
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (manual construction of `image` from `image_part`):
 
 ```ruby
 # NOTE:
@@ -3028,7 +3233,44 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-basic-table-image-text.png](images/glimmer-dsl-libui-mac-basic-table-image-text.png) | ![glimmer-dsl-libui-windows-basic-table-image-text.png](images/glimmer-dsl-libui-windows-basic-table-image-text.png) | ![glimmer-dsl-libui-linux-basic-table-image-text.png](images/glimmer-dsl-libui-linux-basic-table-image-text.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (passing file url as image):
+
+```ruby
+# frozen_string_literal: true
+
+# NOTE:
+# This example displays images that can be freely downloaded from the Studio Ghibli website.
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+IMAGE_ROWS = []
+
+5.times do |i|
+  url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
+  puts "Processing Image: #{url}"; $stdout.flush # for Windows
+  text = url.sub('https://www.ghibli.jp/gallery/thumb-redturtle', '').sub('.png', '')
+  IMAGE_ROWS << [[url, text], [url, text]] # cell values are dual-element arrays
+rescue StandardError => e
+  warn url, e.message
+end
+
+window('The Red Turtle', 670, 350) {
+  horizontal_box {
+    table {
+      image_text_column('image/number')
+      image_text_column('image/number (editable)') {
+        editable true
+      }
+      
+      cell_rows IMAGE_ROWS
+    }
+  }
+}.show
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (automatic construction of `image`):
 
 ```ruby
 # NOTE:
@@ -3402,16 +3644,126 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-basic-table-color.png](images/glimmer-dsl-libui-mac-basic-table-color.png) | ![glimmer-dsl-libui-windows-basic-table-color.png](images/glimmer-dsl-libui-windows-basic-table-color.png) | ![glimmer-dsl-libui-linux-basic-table-color.png](images/glimmer-dsl-libui-linux-basic-table-color.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with explicit [data-binding](#data-binding) to model rows using a presenter):
 
 ```ruby
-# frozen_string_literal: true
+require 'glimmer-dsl-libui'
+
+class BasicTableColor
+  Animal = Struct.new(:name, :sound, :mammal)
+  
+  class AnimalPresenter < Animal
+    def name_color
+      color = case name
+      when 'cat'
+        :red
+      when 'dog'
+        :yellow
+      when 'chicken'
+        :beige
+      when 'horse'
+        :purple
+      when 'cow'
+        :gray
+      end
+      [name, color]
+    end
+    
+    def sound_color
+      color = case name
+      when 'cat', 'chicken', 'cow'
+        :blue
+      when 'dog', 'horse'
+        {r: 240, g: 32, b: 32}
+      end
+      [sound, color]
+    end
+    
+    def mammal_description_color
+      color = case name
+      when 'cat', 'dog', 'horse', 'cow'
+        :green
+      when 'chicken'
+        :red
+      end
+      [mammal, 'mammal', color]
+    end
+    
+    def image_description_color
+      color = case name
+      when 'cat', 'dog', 'horse'
+        :dark_blue
+      when 'chicken'
+        :beige
+      when 'cow'
+        :brown
+      end
+      [img, 'Glimmer', color]
+    end
+    
+    def img
+      # scale image to 24x24 (can be passed as file path String only instead of Array to avoid scaling)
+      [File.expand_path('../icons/glimmer.png', __dir__), 24, 24]
+    end
+    
+    def background_color
+      case name
+      when 'cat'
+        {r: 255, g: 120, b: 0, a: 0.5}
+      when 'dog'
+        :skyblue
+      when 'chicken'
+        {r: 5, g: 120, b: 110}
+      when 'horse'
+        '#13a1fb'
+      when 'cow'
+        0x12ff02
+      end
+    end
+  end
+  
+  include Glimmer
+  
+  attr_accessor :animals
+  
+  def initialize
+    @animals = [
+      AnimalPresenter.new('cat', 'meow', true),
+      AnimalPresenter.new('dog', 'woof', true),
+      AnimalPresenter.new('chicken', 'cock-a-doodle-doo', false),
+      AnimalPresenter.new('horse', 'neigh', true),
+      AnimalPresenter.new('cow', 'moo', true),
+    ]
+  end
+  
+  def launch
+    window('Animals', 500, 200) {
+      horizontal_box {
+        table {
+          text_color_column('Animal')
+          text_color_column('Sound')
+          checkbox_text_color_column('Description')
+          image_text_color_column('GUI')
+          background_color_column # must always be the last column and always expects data-binding model attribute `background_color` when binding to Array of models
+    
+          cell_rows <= [self, :animals, column_attributes: {'Animal' => :name_color, 'Sound' => :sound_color, 'Description' => :mammal_description_color, 'GUI' => :image_description_color}]
+        }
+      }
+    }.show
+  end
+end
+
+BasicTableColor.new.launch
+```
 
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (with implicit [data-binding](#data-binding) to raw data rows):
+
+```ruby
 require 'glimmer-dsl-libui'
 
 include Glimmer
 
-img = image(File.expand_path('../icons/glimmer.png', __dir__), 24, 24)
+img = [File.expand_path('../icons/glimmer.png', __dir__), 24, 24] # scales image to 24x24 (can be passed as file path String only instead of Array to avoid scaling)
 
 data = [
   [['cat', :red]      , ['meow', :blue]                  , [true, 'mammal', :green], [img, 'Glimmer', :dark_blue], {r: 255, g: 120, b: 0, a: 0.5}],
@@ -3436,7 +3788,7 @@ window('Animals', 500, 200) {
 }.show
 ```
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (manual construction of [libui](https://github.com/andlabs/libui) `image` from `image_part`):
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (with implicit [data-binding](#data-binding) to raw data rows and manual construction of [libui](https://github.com/andlabs/libui) `image` from `image_part`):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -6536,7 +6888,7 @@ class FormTable
           text_column('State')
     
           editable true
-          cell_rows <=> [self, :contacts] # explicit data-binding to Model Array
+          cell_rows <=> [self, :contacts] # explicit data-binding to 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}"

data/VERSION

@@ -1 +1 @@
-0.4.11
+0.4.12

data/examples/basic_table_color.rb

@@ -1,29 +1,107 @@
-# frozen_string_literal: true
-
 require 'glimmer-dsl-libui'
 
-include Glimmer
-
-img = image(File.expand_path('../icons/glimmer.png', __dir__), 24, 24)
-
-data = [
-  [['cat', :red]      , ['meow', :blue]                  , [true, 'mammal', :green], [img, 'Glimmer', :dark_blue], {r: 255, g: 120, b: 0, a: 0.5}],
-  [['dog', :yellow]   , ['woof', {r: 240, g: 32, b: 32}] , [true, 'mammal', :green], [img, 'Glimmer', :dark_blue], :skyblue],
-  [['chicken', :beige], ['cock-a-doodle-doo', :blue]     , [false, 'mammal', :red] , [img, 'Glimmer', :beige], {r: 5, g: 120, b: 110}],
-  [['horse', :purple] , ['neigh', {r: 240, g: 32, b: 32}], [true, 'mammal', :green], [img, 'Glimmer', :dark_blue], '13a1fb'],
-  [['cow', :gray]     , ['moo', :blue]                   , [true, 'mammal', :green], [img, 'Glimmer', :brown], 0x12ff02]
-]
-
-window('Animals', 500, 200) {
-  horizontal_box {
-    table {
-      text_color_column('Animal')
-      text_color_column('Sound')
-      checkbox_text_color_column('Description')
-      image_text_color_column('GUI')
-      background_color_column # must be the last column
+class BasicTableColor
+  Animal = Struct.new(:name, :sound, :mammal)
+  
+  class AnimalPresenter < Animal
+    def name_color
+      color = case name
+      when 'cat'
+        :red
+      when 'dog'
+        :yellow
+      when 'chicken'
+        :beige
+      when 'horse'
+        :purple
+      when 'cow'
+        :gray
+      end
+      [name, color]
+    end
+    
+    def sound_color
+      color = case name
+      when 'cat', 'chicken', 'cow'
+        :blue
+      when 'dog', 'horse'
+        {r: 240, g: 32, b: 32}
+      end
+      [sound, color]
+    end
+    
+    def mammal_description_color
+      color = case name
+      when 'cat', 'dog', 'horse', 'cow'
+        :green
+      when 'chicken'
+        :red
+      end
+      [mammal, 'mammal', color]
+    end
+    
+    def image_description_color
+      color = case name
+      when 'cat', 'dog', 'horse'
+        :dark_blue
+      when 'chicken'
+        :beige
+      when 'cow'
+        :brown
+      end
+      [img, 'Glimmer', color]
+    end
+    
+    def img
+      # scale image to 24x24 (can be passed as file path String only instead of Array to avoid scaling)
+      [File.expand_path('../icons/glimmer.png', __dir__), 24, 24]
+    end
+    
+    def background_color
+      case name
+      when 'cat'
+        {r: 255, g: 120, b: 0, a: 0.5}
+      when 'dog'
+        :skyblue
+      when 'chicken'
+        {r: 5, g: 120, b: 110}
+      when 'horse'
+        '#13a1fb'
+      when 'cow'
+        0x12ff02
+      end
+    end
+  end
+  
+  include Glimmer
+  
+  attr_accessor :animals
+  
+  def initialize
+    @animals = [
+      AnimalPresenter.new('cat', 'meow', true),
+      AnimalPresenter.new('dog', 'woof', true),
+      AnimalPresenter.new('chicken', 'cock-a-doodle-doo', false),
+      AnimalPresenter.new('horse', 'neigh', true),
+      AnimalPresenter.new('cow', 'moo', true),
+    ]
+  end
+  
+  def launch
+    window('Animals', 500, 200) {
+      horizontal_box {
+        table {
+          text_color_column('Animal')
+          text_color_column('Sound')
+          checkbox_text_color_column('Description')
+          image_text_color_column('GUI')
+          background_color_column # must always be the last column and always expects data-binding model attribute `background_color` when binding to Array of models
+    
+          cell_rows <= [self, :animals, column_attributes: {'Animal' => :name_color, 'Sound' => :sound_color, 'Description' => :mammal_description_color, 'GUI' => :image_description_color}]
+        }
+      }
+    }.show
+  end
+end
 
-      cell_rows data
-    }
-  }
-}.show
+BasicTableColor.new.launch

data/examples/basic_table_color2.rb

@@ -1,20 +1,8 @@
-# frozen_string_literal: true
-
 require 'glimmer-dsl-libui'
-require 'chunky_png'
 
 include Glimmer
 
-f = File.open(File.expand_path('../icons/glimmer.png', __dir__))
-canvas = ChunkyPNG::Canvas.from_io(f)
-f.close
-canvas.resample_nearest_neighbor!(24, 24)
-data = canvas.to_rgba_stream
-width = canvas.width
-height = canvas.height
-img = image {
-  image_part(data, width, height, width * 4)
-}
+img = [File.expand_path('../icons/glimmer.png', __dir__), 24, 24] # scales image to 24x24 (can be passed as file path String only instead of Array to avoid scaling)
 
 data = [
   [['cat', :red]      , ['meow', :blue]                  , [true, 'mammal', :green], [img, 'Glimmer', :dark_blue], {r: 255, g: 120, b: 0, a: 0.5}],
@@ -31,7 +19,7 @@ window('Animals', 500, 200) {
       text_color_column('Sound')
       checkbox_text_color_column('Description')
       image_text_color_column('GUI')
-      background_color_column('Mammal')
+      background_color_column # must be the last column
 
       cell_rows data
     }

data/examples/basic_table_color3.rb

@@ -0,0 +1,37 @@
+require 'glimmer-dsl-libui'
+require 'chunky_png'
+
+include Glimmer
+
+f = File.open(File.expand_path('../icons/glimmer.png', __dir__))
+canvas = ChunkyPNG::Canvas.from_io(f)
+f.close
+canvas.resample_nearest_neighbor!(24, 24)
+data = canvas.to_rgba_stream
+width = canvas.width
+height = canvas.height
+img = image {
+  image_part(data, width, height, width * 4)
+}
+
+data = [
+  [['cat', :red]      , ['meow', :blue]                  , [true, 'mammal', :green], [img, 'Glimmer', :dark_blue], {r: 255, g: 120, b: 0, a: 0.5}],
+  [['dog', :yellow]   , ['woof', {r: 240, g: 32, b: 32}] , [true, 'mammal', :green], [img, 'Glimmer', :dark_blue], :skyblue],
+  [['chicken', :beige], ['cock-a-doodle-doo', :blue]     , [false, 'mammal', :red] , [img, 'Glimmer', :beige], {r: 5, g: 120, b: 110}],
+  [['horse', :purple] , ['neigh', {r: 240, g: 32, b: 32}], [true, 'mammal', :green], [img, 'Glimmer', :dark_blue], '13a1fb'],
+  [['cow', :gray]     , ['moo', :blue]                   , [true, 'mammal', :green], [img, 'Glimmer', :brown], 0x12ff02]
+]
+
+window('Animals', 500, 200) {
+  horizontal_box {
+    table {
+      text_color_column('Animal')
+      text_color_column('Sound')
+      checkbox_text_color_column('Description')
+      image_text_color_column('GUI')
+      background_color_column('Mammal')
+
+      cell_rows data
+    }
+  }
+}.show

data/examples/basic_table_image.rb

@@ -12,7 +12,7 @@ IMAGE_ROWS = []
 50.times do |i|
   url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
   puts "Processing Image: #{url}"; $stdout.flush # for Windows
-  IMAGE_ROWS << [image(url)] # array of one column cell
+  IMAGE_ROWS << [url] # array of one column cell
 rescue StandardError => e
   warn url, e.message
 end

data/examples/basic_table_image2.rb

@@ -4,8 +4,6 @@
 # This example displays images that can be freely downloaded from the Studio Ghibli website.
 
 require 'glimmer-dsl-libui'
-require 'chunky_png'
-require 'open-uri'
 
 include Glimmer
 
@@ -13,18 +11,8 @@ IMAGE_ROWS = []
 
 50.times do |i|
   url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
-  puts "Processing Image: #{url}"
-  $stdout.flush # for Windows
-  f = URI.open(url)
-  canvas = ChunkyPNG::Canvas.from_io(f)
-  f.close
-  data = canvas.to_rgba_stream
-  width = canvas.width
-  height = canvas.height
-  img = image {
-    image_part(data, width, height, width * 4)
-  }
-  IMAGE_ROWS << [img] # array of one column cell
+  puts "Processing Image: #{url}"; $stdout.flush # for Windows
+  IMAGE_ROWS << [image(url)] # array of one column cell
 rescue StandardError => e
   warn url, e.message
 end

data/examples/basic_table_image3.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+# NOTE:
+# This example displays images that can be freely downloaded from the Studio Ghibli website.
+
+require 'glimmer-dsl-libui'
+require 'chunky_png'
+require 'open-uri'
+
+include Glimmer
+
+IMAGE_ROWS = []
+
+50.times do |i|
+  url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
+  puts "Processing Image: #{url}"
+  $stdout.flush # for Windows
+  f = URI.open(url)
+  canvas = ChunkyPNG::Canvas.from_io(f)
+  f.close
+  data = canvas.to_rgba_stream
+  width = canvas.width
+  height = canvas.height
+  img = image {
+    image_part(data, width, height, width * 4)
+  }
+  IMAGE_ROWS << [img] # array of one column cell
+rescue StandardError => e
+  warn url, e.message
+end
+
+window('The Red Turtle', 310, 350, false) {
+  horizontal_box {
+    table {
+      image_column('www.ghibli.jp/works/red-turtle')
+      
+      cell_rows IMAGE_ROWS
+    }
+  }
+  
+  on_closing do
+    puts 'Bye Bye'
+  end
+}.show

data/examples/basic_table_image_text.rb

@@ -13,8 +13,7 @@ IMAGE_ROWS = []
   url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
   puts "Processing Image: #{url}"; $stdout.flush # for Windows
   text = url.sub('https://www.ghibli.jp/gallery/thumb-redturtle', '').sub('.png', '')
-  img = image(url)
-  IMAGE_ROWS << [[img, text], [img, text]] # cell values are dual-element arrays
+  IMAGE_ROWS << [[url, text], [url, text]] # cell values are dual-element arrays
 rescue StandardError => e
   warn url, e.message
 end

data/examples/basic_table_image_text2.rb

@@ -4,8 +4,6 @@
 # This example displays images that can be freely downloaded from the Studio Ghibli website.
 
 require 'glimmer-dsl-libui'
-require 'chunky_png'
-require 'open-uri'
 
 include Glimmer
 
@@ -13,18 +11,9 @@ IMAGE_ROWS = []
 
 5.times do |i|
   url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
-  puts "Processing Image: #{url}"
-  $stdout.flush # for Windows
-  f = URI.open(url)
-  canvas = ChunkyPNG::Canvas.from_io(f)
-  f.close
-  data = canvas.to_rgba_stream
-  width = canvas.width
-  height = canvas.height
-  img = image {
-    image_part(data, width, height, width * 4)
-  }
+  puts "Processing Image: #{url}"; $stdout.flush # for Windows
   text = url.sub('https://www.ghibli.jp/gallery/thumb-redturtle', '').sub('.png', '')
+  img = image(url)
   IMAGE_ROWS << [[img, text], [img, text]] # cell values are dual-element arrays
 rescue StandardError => e
   warn url, e.message

data/examples/basic_table_image_text3.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+# NOTE:
+# This example displays images that can be freely downloaded from the Studio Ghibli website.
+
+require 'glimmer-dsl-libui'
+require 'chunky_png'
+require 'open-uri'
+
+include Glimmer
+
+IMAGE_ROWS = []
+
+5.times do |i|
+  url = format('https://www.ghibli.jp/gallery/thumb-redturtle%03d.png', (i + 1))
+  puts "Processing Image: #{url}"
+  $stdout.flush # for Windows
+  f = URI.open(url)
+  canvas = ChunkyPNG::Canvas.from_io(f)
+  f.close
+  data = canvas.to_rgba_stream
+  width = canvas.width
+  height = canvas.height
+  img = image {
+    image_part(data, width, height, width * 4)
+  }
+  text = url.sub('https://www.ghibli.jp/gallery/thumb-redturtle', '').sub('.png', '')
+  IMAGE_ROWS << [[img, text], [img, text]] # cell values are dual-element arrays
+rescue StandardError => e
+  warn url, e.message
+end
+
+window('The Red Turtle', 670, 350) {
+  horizontal_box {
+    table {
+      image_text_column('image/number')
+      image_text_column('image/number (editable)') {
+        editable true
+      }
+      
+      cell_rows IMAGE_ROWS
+    }
+  }
+}.show

data/lib/glimmer/libui/control_proxy/column/background_color_column_proxy.rb

@@ -31,6 +31,10 @@ module Glimmer
         # Follows the Proxy Design Pattern
         class BackgroundColorColumnProxy < ControlProxy
           include Column
+          
+          def name
+            'Background Color'
+          end
         end
       end
     end

data/lib/glimmer/libui/control_proxy/table_proxy.rb

@@ -145,7 +145,7 @@ module Glimmer
             @column_attributes = model_binding.binding_options[:column_attributes]
           else
             column_attribute_mapping = model_binding.binding_options[:column_attributes].is_a?(Hash) ? model_binding.binding_options[:column_attributes] : {}
-            @column_attributes = columns.map(&:name).map {|column_name| column_attribute_mapping[column_name] || column_name.underscore}
+            @column_attributes = columns.select {|column| column.is_a?(Column)}.map(&:name).map {|column_name| column_attribute_mapping[column_name] || column_name.underscore}
           end
           model_attribute_observer = model_attribute_observer_registration = nil
           model_attribute_observer = Glimmer::DataBinding::Observer.proc do
@@ -208,11 +208,13 @@ module Glimmer
             when Column::TextColumnProxy, Column::ButtonColumnProxy, Column::TextColorColumnProxy, :text
               ::LibUI.new_table_value_string((expanded_cell_rows[row] && expanded_cell_rows[row][column]).to_s)
             when Column::ImageColumnProxy, Column::ImageTextColumnProxy, Column::ImageTextColorColumnProxy
-              if OS.windows? && row == cell_rows.count
-                ::LibUI.new_table_value_image((expanded_cell_rows[row - 1] && (expanded_cell_rows[row - 1][column].respond_to?(:libui) ? expanded_cell_rows[row - 1][column].libui : expanded_cell_rows[row - 1][column])))
-              else
-                ::LibUI.new_table_value_image((expanded_cell_rows[row] && (expanded_cell_rows[row][column].respond_to?(:libui) ? expanded_cell_rows[row][column].libui : expanded_cell_rows[row][column])))
-              end
+              # TODO refactor to eliminate redundancy and share similar code
+              row = row - 1 if OS.windows? && row == cell_rows.count
+              img = expanded_cell_rows[row][column]
+              img = ControlProxy::ImageProxy.new('image', nil, img) if img.is_a?(Array)
+              img = ControlProxy::ImageProxy.new('image', nil, [img]) if img.is_a?(String)
+              img = img.respond_to?(:libui) ? img.libui : img
+              ::LibUI.new_table_value_image(img)
             when Column::CheckboxColumnProxy, Column::CheckboxTextColumnProxy, Column::CheckboxTextColorColumnProxy
               ::LibUI.new_table_value_int(((expanded_cell_rows[row] && (expanded_cell_rows[row][column] == 1 || expanded_cell_rows[row][column].to_s.strip.downcase == 'true' ? 1 : 0))) || 0)
             when Column::ProgressBarColumnProxy

data/lib/glimmer/libui.rb

@@ -63,7 +63,7 @@ module Glimmer
           value[:b] = value.delete(:blue) if value[:blue]
           value[:a] = value.delete(:alpha) if value[:alpha]
           value
-        elsif value.is_a?(String) && !value.start_with?('0x') && !value.downcase.match(/^((([1-9a-f]){6})|(([1-9a-f]){3}))$/)
+        elsif value.is_a?(String) && !value.start_with?('0x') && !value.start_with?('#') && !value.downcase.match(/^((([1-9a-f]){6})|(([1-9a-f]){3}))$/)
           color = Color::RGB.extract_colors(value).first
           color.nil? ? {} : {
             r: color.red,
@@ -79,11 +79,11 @@ module Glimmer
     
       def hex_to_rgb(value)
         if value.is_a?(String)
+          value = "0x#{value[1..-1]}" if value.start_with?('#')
           if !value.start_with?('0x')
             value = value.chars.map {|char| [char, char]}.flatten.join if value.length == 3
             value = "0x#{value}"
           end
-          value = "0x#{value[1..-1]}" if value.start_with?('#')
           value = value.to_i(16)
         end
         if value.is_a?(Integer)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-libui
 version: !ruby/object:Gem::Version
-  version: 0.4.11
+  version: 0.4.12
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-12-01 00:00:00.000000000 Z
+date: 2021-12-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -237,10 +237,13 @@ files:
 - examples/basic_table_checkbox_text.rb
 - examples/basic_table_color.rb
 - examples/basic_table_color2.rb
+- examples/basic_table_color3.rb
 - examples/basic_table_image.rb
 - examples/basic_table_image2.rb
+- examples/basic_table_image3.rb
 - examples/basic_table_image_text.rb
 - examples/basic_table_image_text2.rb
+- examples/basic_table_image_text3.rb
 - examples/basic_table_progress_bar.rb
 - examples/basic_transform.rb
 - examples/basic_transform2.rb