glimmer-dsl-libui 0.2.24 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a9b4b92bdc276153bae236387b4813b62bc1b8b9f5b6779c59ffae9b1b47484f
-  data.tar.gz: 69efbe44dac5e3fec15ec31c261b469187a45d8acabf2d9754459f1bbfbc66d7
+  metadata.gz: 82c9b768b4dd09cbbad087d470016eaa80a667151f844a57aecf4c339d8bbfe5
+  data.tar.gz: 4c4b1a1fec0c78d61cb7d47ce79d93766f2ec3c94e2332e185e44b35ecd9dfd8
 SHA512:
-  metadata.gz: 39ef3e3f8db68098d52222ef7ffa3ed5f9d85e25199ed960d9945e2f92a13bd90cdfc860fcd5fd901a6b76d3899786ef9363fad131d7bc25880506b4355ef2dd
-  data.tar.gz: 0f92e07ed0e37bfc7e172b275d57853b26407b9f708554d586a4b6b97460485926217f364cad5cfdf3b016a37366acd51dbf440004709909f5d9cf924a8d7734
+  metadata.gz: abd5077dd154505ac5b97986baace9c72d61a734515f39cb9213161fbd16dff85e46af725b702edfc87fae6043288f4897b53b8c1d0671dc509e0c3ce3b222b2
+  data.tar.gz: cb2273302f43a0b4e2543ac75c08a51414013d50600d5ccf51406799fba6122ca5144cf8a26c018a594d8e8238e899976c9f8a4a0b00505be954164095726b16

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 0.3.0
+
+- Upgrade to glimmer 2.4.1
+- Add `chunky_png` gem to support `.png` images natively
+- New `image` Glimmer custom control that can be nested under `area` to render an image (it is not part of LibUI, so it has some performance caveats, but is better than nothing and is fast with smaller image width/height)
+
 ## 0.2.24
 
 - Support hex colors as `String` with `'#'` prefix (e.g. '#ffaa92')

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.2.24
+# [<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.3.0
 ## 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)
@@ -238,6 +238,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Extra Operations](#extra-operations)
     - [Table API](#table-api)
     - [Area API](#area-api)
+      - [Image Glimmer Custom Control](#image-glimmer-custom-control)
     - [Smart Defaults and Conventions](#smart-defaults-and-conventions)
     - [Custom Keywords](#custom-keywords)
     - [API Gotchas](#api-gotchas)
@@ -270,6 +271,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Basic Area](#basic-area)
     - [Dynamic Area](#dynamic-area)
     - [Area Gallery](#area-gallery)
+    - [Basic Image](#basic-image)
     - [Histogram](#histogram)
     - [Basic Transform](#basic-transform)
     - [Login](#login)
@@ -373,7 +375,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.2.24'
+gem 'glimmer-dsl-libui', '~> 0.3.0'
 ```
 
 Add `require 'glimmer-dsl-libui'` at the top, and then `include Glimmer` into the top-level main object for testing or into an actual class for serious usage.
@@ -473,7 +475,7 @@ Keyword(Args) | Properties | Listeners
 `group(text as String)` | `margined` (Boolean), `title` (`String`) | None
 `horizontal_box` | `padded` (Boolean) | None
 `horizontal_separator` | None | None
-`image(width as Numeric, height as Numeric)` | None | None
+`image(file as String = nil, width as Numeric = nil, height as Numeric = nil)` | None | None
 `image_part(pixels as String [encoded image rgba byte array], width as Numeric, height as Numeric, byte_stride as Numeric [usually width*4])` | None | None
 `image_column(name as String)` | None | None
 `image_text_column(name as String)` | None | None
@@ -962,6 +964,172 @@ window('area text drawing') {
 }.show
 ```
 
+#### Image Glimmer Custom Control
+
+**(ALPHA FEATURE)**
+
+[libui](https://github.com/andlabs/libui) does not support `image` rendering outside of `table` yet.
+However, [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) adds a special `image` custom control that renders an image unto an `area` pixel by pixel (and when possible to optimize, line by line).
+
+Given that it is not a [libui](https://github.com/andlabs/libui)-native control, please keep these notes in mind:
+- [libui](https://github.com/andlabs/libui) pixel-by-pixel rendering performance is slow
+- Including an `image` inside an `area` `on_draw` listener improves performance due to not retaining pixel/line data in memory.
+- Supplying `width` and `height` (2nd and 3rd arguments) greatly improves performance when shrinking image
+
+Currently, it is recommended to use `image` with very small `width` and `height` values only.
+
+Setting a `transform` `matrix` is supported under `image` just like it is under `path` and `text` inside `area`.
+
+Example of using `image` declaratively (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+![Basic Image](/images/glimmer-dsl-libui-mac-basic-image.png)
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    image(File.expand_path('icons/glimmer.png', __dir__), 96, 96)
+  }
+}.show
+```
+
+Example of better performance via `on_draw` (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    on_draw do |area_draw_params|
+      image(File.expand_path('icons/glimmer.png', __dir__), 96, 96)
+    end
+  }
+}.show
+```
+
+Example of using `image` declaratively with explicit properties (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    image {
+      file File.expand_path('icons/glimmer.png', __dir__)
+      width 96
+      height 96
+    }
+  }
+}.show
+```
+
+Example of better performance via `on_draw` with explicit properties (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    on_draw do |area_draw_params|
+      image {
+        file File.expand_path('icons/glimmer.png', __dir__)
+        width 96
+        height 96
+      }
+    end
+  }
+}.show
+```
+
+If you need to render an image pixel by pixel (e.g. to support a format other than `.png`) for very exceptional scenarios, you may use this example as a guide, including a line-merge optimization for neighboring horizontal pixels with the same color:
+
+```ruby
+# This is the manual way of rendering an image unto an area control.
+# It could come in handy in special situations.
+# Otherwise, it is recommended to simply utilize the `image` control that
+# can be nested under area or area on_draw listener to automate all this work.
+
+require 'glimmer-dsl-libui'
+require 'chunky_png'
+
+include Glimmer
+
+puts 'Parsing image...'; $stdout.flush
+
+f = File.open(File.expand_path('icons/glimmer.png', __dir__))
+canvas = ChunkyPNG::Canvas.from_io(f)
+f.close
+canvas.resample_nearest_neighbor!(96, 96)
+data = canvas.to_rgba_stream
+width = canvas.width
+height = canvas.height
+puts "Image width: #{width}"
+puts "Image height: #{height}"
+
+puts 'Parsing colors...'; $stdout.flush
+
+color_maps = height.times.map do |y|
+  width.times.map do |x|
+    r = data[(y*width + x)*4].ord
+    g = data[(y*width + x)*4 + 1].ord
+    b = data[(y*width + x)*4 + 2].ord
+    a = data[(y*width + x)*4 + 3].ord
+    {x: x, y: y, color: {r: r, g: g, b: b, a: a}}
+  end
+end.flatten
+puts "#{color_maps.size} pixels to render..."; $stdout.flush
+
+puts 'Parsing shapes...'; $stdout.flush
+
+shape_maps = []
+original_color_maps = color_maps.dup
+indexed_original_color_maps = Hash[original_color_maps.each_with_index.to_a]
+color_maps.each do |color_map|
+  index = indexed_original_color_maps[color_map]
+  @rectangle_start_x ||= color_map[:x]
+  @rectangle_width ||= 1
+  if color_map[:x] < width - 1 && color_map[:color] == original_color_maps[index + 1][:color]
+    @rectangle_width += 1
+  else
+    if color_map[:x] > 0 && color_map[:color] == original_color_maps[index - 1][:color]
+      shape_maps << {x: @rectangle_start_x, y: color_map[:y], width: @rectangle_width, height: 1, color: color_map[:color]}
+    else
+      shape_maps << {x: color_map[:x], y: color_map[:y], width: 1, height: 1, color: color_map[:color]}
+    end
+    @rectangle_width = 1
+    @rectangle_start_x = color_map[:x] == width - 1 ? 0 : color_map[:x] + 1
+  end
+end
+puts "#{shape_maps.size} shapes to render..."; $stdout.flush
+
+puts 'Rendering image...'; $stdout.flush
+
+window('Basic Image', 96, 96) {
+  area {
+    on_draw do |area_draw_params|
+      shape_maps.each do |shape_map|
+        path {
+          rectangle(shape_map[:x], shape_map[:y], shape_map[:width], shape_map[:height])
+
+          fill shape_map[:color]
+        }
+      end
+    end
+  }
+}.show
+```
+
+Check out [examples/basic_image.rb](#basic-image) (all versions) for examples of using `image` Glimmer custom control.
+
 ### Smart Defaults and Conventions
 
 - `horizontal_box`, `vertical_box`, `grid`, and `form` controls have `padded` as `true` upon instantiation to ensure more user-friendly GUI by default
@@ -984,7 +1152,7 @@ window('area text drawing') {
 - When destroying a control nested under a `form`, it is automatically deleted from the form's children
 - When destroying a control nested under a `window` or `group`, it is automatically unset as their child to allow successful destruction
 - For `date_time_picker`, `date_picker`, and `time_picker`, make sure `time` hash values for `mon`, `wday`, and `yday` are 1-based instead of [libui](https://github.com/andlabs/libui) original 0-based values, and return `dst` as Boolean instead of `isdst` as `1`/`0`
-- Smart defaults for `grid` child attributes are `left` (`0`), `top` (`0`), `xspan` (`1`), `yspan` (`1`), `hexpand` (`false`), `halign` (`:fill`), `vexpand` (`false`), and `valign` (`:fill`)
+- Smart defaults for `grid` child properties are `left` (`0`), `top` (`0`), `xspan` (`1`), `yspan` (`1`), `hexpand` (`false`), `halign` (`:fill`), `vexpand` (`false`), and `valign` (`:fill`)
 - The `table` control automatically constructs required `TableModelHandler`, `TableModel`, and `TableParams`, calculating all their arguments from `cell_rows` and `editable` properties (e.g. `NumRows`) as well as nested columns (e.g. `text_column`)
 - Table model instances are automatically freed from memory after `window` is destroyed.
 - Table `cell_rows` data has implicit data-binding to table cell values for deletion, insertion, and change (done by diffing `cell_rows` value before and after change and auto-informing `table` of deletions [`LibUI.table_model_row_deleted`], insertions [`LibUI.table_model_row_deleted`], and changes [`LibUI.table_model_row_changed`]). When deleting data rows from `cell_rows` array, then actual rows from the `table` are automatically deleted. When inserting data rows into `cell_rows` array, then actual `table` rows are automatically inserted. When updating data rows in `cell_rows` array, then actual `table` rows are automatically updated.
@@ -2996,13 +3164,7 @@ window('Editable column animal sounds', 400, 200) {
 
 ### Basic Table Image
 
-This example requires pre-installing `chunky_png` Ruby gem:
-
-```
-gem install chunky_png -v1.4.0
-```
-
-Also, note that behavior varies per platform (i.e. how `table` chooses to size images by default).
+Note that behavior varies per platform (i.e. how `table` chooses to size images by default).
 
 [examples/basic_table_image.rb](examples/basic_table_image.rb)
 
@@ -3158,13 +3320,7 @@ window('The Red Turtle', 310, 350, false) {
 
 ### Basic Table Image Text
 
-This example has a prerequisite of installing `chunky_png` Ruby gem:
-
-```
-gem install chunky_png -v1.4.0
-```
-
-Also, note that behavior varies per platform (i.e. how `table` chooses to size images by default).
+Note that behavior varies per platform (i.e. how `table` chooses to size images by default).
 
 [examples/basic_table_image_text.rb](examples/basic_table_image_text.rb)
 
@@ -3484,12 +3640,6 @@ window('Task Progress', 300, 200) {
 
 ### Basic Table Color
 
-This example requires pre-installing `chunky_png` Ruby gem:
-
-```
-gem install chunky_png -v1.4.0
-```
-
 [examples/basic_table_color.rb](examples/basic_table_color.rb)
 
 Run with this command from the root of the project if you cloned the project:
@@ -4725,6 +4875,196 @@ window('Area Gallery', 400, 400) {
 }.show
 ```
 
+### Basic Image
+
+[examples/basic_image.rb](examples/basic_image.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/basic_image.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/basic_image'"
+```
+
+Mac
+
+![glimmer-dsl-libui-mac-basic-image.png](images/glimmer-dsl-libui-mac-basic-image.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    # image is not a real LibUI control. It is built in Glimmer as a custom control that renders
+    # tiny pixels/lines as rectangle paths. As such, it does not have good performance, but can
+    # be used in exceptional circumstances where an image control is really needed.
+    #
+    # Furthermore, adding image directly under area is even slower due to taking up more memory for every
+    # image pixel rendered. Check basic_image2.rb for a faster alternative using on_draw manually.
+    #
+    # It is recommended to pass width/height args to shrink image and achieve faster performance.
+    image(File.expand_path('../icons/glimmer.png', __dir__), 96, 96)
+  }
+}.show
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (better performance via `on_draw`):
+
+```ruby
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    on_draw do |area_draw_params|
+      image(File.expand_path('../icons/glimmer.png', __dir__), 96, 96)
+    end
+  }
+}.show
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (explicit properties):
+
+```ruby
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    # image is not a real LibUI control. It is built in Glimmer as a custom control that renders
+    # tiny pixels/lines as rectangle paths. As such, it does not have good performance, but can
+    # be used in exceptional circumstances where an image control is really needed.
+    #
+    # Furthermore, adding image directly under area is even slower due to taking up more memory for every
+    # image pixel rendered. Check basic_image4.rb for a faster alternative using on_draw manually.
+    #
+    # It is recommended to pass width/height args to shrink image and achieve faster performance.
+    image {
+      file File.expand_path('../icons/glimmer.png', __dir__)
+      width 96
+      height 96
+    }
+  }
+}.show
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 4 (better performance with `on_draw` when setting explicit properties):
+
+```ruby
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    on_draw do |area_draw_params|
+      image {
+        file File.expand_path('../icons/glimmer.png', __dir__)
+        width 96
+        height 96
+      }
+    end
+  }
+}.show
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 5 (fully manual pixel-by-pixel rendering):
+
+```ruby
+# frozen_string_literal: true
+
+# This is the manual way of rendering an image unto an area control.
+# It could come in handy in special situations.
+# Otherwise, it is recommended to simply utilize the `image` control that
+# can be nested under area or area on_draw listener to automate all this work.
+
+require 'glimmer-dsl-libui'
+require 'chunky_png'
+
+include Glimmer
+
+puts 'Parsing image...'; $stdout.flush
+
+f = File.open(File.expand_path('../icons/glimmer.png', __dir__))
+canvas = ChunkyPNG::Canvas.from_io(f)
+f.close
+canvas.resample_nearest_neighbor!(96, 96)
+data = canvas.to_rgba_stream
+width = canvas.width
+height = canvas.height
+puts "Image width: #{width}"
+puts "Image height: #{height}"
+
+puts 'Parsing colors...'; $stdout.flush
+
+color_maps = height.times.map do |y|
+  width.times.map do |x|
+    r = data[(y*width + x)*4].ord
+    g = data[(y*width + x)*4 + 1].ord
+    b = data[(y*width + x)*4 + 2].ord
+    a = data[(y*width + x)*4 + 3].ord
+    {x: x, y: y, color: {r: r, g: g, b: b, a: a}}
+  end
+end.flatten
+puts "#{color_maps.size} pixels to render..."; $stdout.flush
+
+puts 'Parsing shapes...'; $stdout.flush
+
+shape_maps = []
+original_color_maps = color_maps.dup
+indexed_original_color_maps = Hash[original_color_maps.each_with_index.to_a]
+color_maps.each do |color_map|
+  index = indexed_original_color_maps[color_map]
+  @rectangle_start_x ||= color_map[:x]
+  @rectangle_width ||= 1
+  if color_map[:x] < width - 1 && color_map[:color] == original_color_maps[index + 1][:color]
+    @rectangle_width += 1
+  else
+    if color_map[:x] > 0 && color_map[:color] == original_color_maps[index - 1][:color]
+      shape_maps << {x: @rectangle_start_x, y: color_map[:y], width: @rectangle_width, height: 1, color: color_map[:color]}
+    else
+      shape_maps << {x: color_map[:x], y: color_map[:y], width: 1, height: 1, color: color_map[:color]}
+    end
+    @rectangle_width = 1
+    @rectangle_start_x = color_map[:x] == width - 1 ? 0 : color_map[:x] + 1
+  end
+end
+puts "#{shape_maps.size} shapes to render..."; $stdout.flush
+
+puts 'Rendering image...'; $stdout.flush
+
+window('Basic Image', 96, 96) {
+  area {
+    on_draw do |area_draw_params|
+      shape_maps.each do |shape_map|
+        path {
+          rectangle(shape_map[:x], shape_map[:y], shape_map[:width], shape_map[:height])
+
+          fill shape_map[:color]
+        }
+      end
+    end
+  }
+}.show
+```
+
 ### Histogram
 
 [examples/histogram.rb](examples/histogram.rb)

data/VERSION

@@ -1 +1 @@
-0.2.24
+0.3.0

data/examples/basic_image.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    # image is not a real LibUI control. It is built in Glimmer as a custom control that renders
+    # tiny pixels/lines as rectangle paths. As such, it does not have good performance, but can
+    # be used in exceptional circumstances where an image control is really needed.
+    #
+    # Furthermore, adding image directly under area is even slower due to taking up more memory for every
+    # image pixel rendered. Check basic_image2.rb for a faster alternative using on_draw manually.
+    #
+    # It is recommended to pass width/height args to shrink image and achieve faster performance.
+    image(File.expand_path('../icons/glimmer.png', __dir__), 96, 96)
+  }
+}.show

data/examples/basic_image2.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    on_draw do |area_draw_params|
+      image(File.expand_path('../icons/glimmer.png', __dir__), 96, 96)
+    end
+  }
+}.show

data/examples/basic_image3.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    # image is not a real LibUI control. It is built in Glimmer as a custom control that renders
+    # tiny pixels/lines as rectangle paths. As such, it does not have good performance, but can
+    # be used in exceptional circumstances where an image control is really needed.
+    #
+    # Furthermore, adding image directly under area is even slower due to taking up more memory for every
+    # image pixel rendered. Check basic_image4.rb for a faster alternative using on_draw manually.
+    #
+    # It is recommended to pass width/height args to shrink image and achieve faster performance.
+    image {
+      file File.expand_path('../icons/glimmer.png', __dir__)
+      width 96
+      height 96
+    }
+  }
+}.show

data/examples/basic_image4.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Image', 96, 96) {
+  area {
+    on_draw do |area_draw_params|
+      image {
+        file File.expand_path('../icons/glimmer.png', __dir__)
+        width 96
+        height 96
+      }
+    end
+  }
+}.show

data/examples/basic_image5.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+# This is the manual way of rendering an image unto an area control.
+# It could come in handy in special situations.
+# Otherwise, it is recommended to simply utilize the `image` control that
+# can be nested under area or area on_draw listener to automate all this work.
+
+require 'glimmer-dsl-libui'
+require 'chunky_png'
+
+include Glimmer
+
+puts 'Parsing image...'; $stdout.flush
+
+f = File.open(File.expand_path('../icons/glimmer.png', __dir__))
+canvas = ChunkyPNG::Canvas.from_io(f)
+f.close
+canvas.resample_nearest_neighbor!(96, 96)
+data = canvas.to_rgba_stream
+width = canvas.width
+height = canvas.height
+puts "Image width: #{width}"
+puts "Image height: #{height}"
+
+puts 'Parsing colors...'; $stdout.flush
+
+color_maps = height.times.map do |y|
+  width.times.map do |x|
+    r = data[(y*width + x)*4].ord
+    g = data[(y*width + x)*4 + 1].ord
+    b = data[(y*width + x)*4 + 2].ord
+    a = data[(y*width + x)*4 + 3].ord
+    {x: x, y: y, color: {r: r, g: g, b: b, a: a}}
+  end
+end.flatten
+puts "#{color_maps.size} pixels to render..."; $stdout.flush
+
+puts 'Parsing shapes...'; $stdout.flush
+
+shape_maps = []
+original_color_maps = color_maps.dup
+indexed_original_color_maps = Hash[original_color_maps.each_with_index.to_a]
+color_maps.each do |color_map|
+  index = indexed_original_color_maps[color_map]
+  @rectangle_start_x ||= color_map[:x]
+  @rectangle_width ||= 1
+  if color_map[:x] < width - 1 && color_map[:color] == original_color_maps[index + 1][:color]
+    @rectangle_width += 1
+  else
+    if color_map[:x] > 0 && color_map[:color] == original_color_maps[index - 1][:color]
+      shape_maps << {x: @rectangle_start_x, y: color_map[:y], width: @rectangle_width, height: 1, color: color_map[:color]}
+    else
+      shape_maps << {x: color_map[:x], y: color_map[:y], width: 1, height: 1, color: color_map[:color]}
+    end
+    @rectangle_width = 1
+    @rectangle_start_x = color_map[:x] == width - 1 ? 0 : color_map[:x] + 1
+  end
+end
+puts "#{shape_maps.size} shapes to render..."; $stdout.flush
+
+puts 'Rendering image...'; $stdout.flush
+
+window('Basic Image', 96, 96) {
+  area {
+    on_draw do |area_draw_params|
+      shape_maps.each do |shape_map|
+        path {
+          rectangle(shape_map[:x], shape_map[:y], shape_map[:width], shape_map[:height])
+
+          fill shape_map[:color]
+        }
+      end
+    end
+  }
+}.show

data/lib/glimmer/dsl/libui/control_expression.rb

@@ -40,7 +40,7 @@ module Glimmer
         
         def add_content(parent, keyword, *args, &block)
           super
-          parent.post_add_content
+          parent&.post_add_content
         end
       end
     end

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

@@ -34,7 +34,6 @@ module Glimmer
           @args = args
           @block = block
           @enabled = true
-          @children = []
           post_add_content if @block.nil?
         end
         

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

@@ -20,44 +20,184 @@
 # WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 require 'glimmer/libui/control_proxy'
+require 'glimmer/libui/image_path_renderer'
 require 'glimmer/data_binding/observer'
+require 'glimmer/libui/control_proxy/transformable'
 
 using ArrayIncludeMethods
 
 module Glimmer
   module LibUI
     class ControlProxy
-      # Proxy for LibUI image objects
+      # Proxy for LibUI image object and Glimmer custom control
       #
       # Follows the Proxy Design Pattern
       class ImageProxy < ControlProxy
+        include Parent
+        prepend Transformable
+        
+        attr_reader :data, :pixels, :shapes
+        
         def initialize(keyword, parent, args, &block)
           @keyword = keyword
           @parent_proxy = parent
           @args = args
           @block = block
           @enabled = true
-          @children = []
           post_add_content if @block.nil?
         end
-        
+                
         def post_add_content
-          build_control
-          super
+          if area_image?
+            @shapes = nil
+            super
+            if @parent_proxy.nil? && AreaProxy.current_area_draw_params
+              draw(AreaProxy.current_area_draw_params)
+              destroy
+            end
+            @content_added = true
+          else # image object not control
+            build_control
+            super
+          end
+        end
+        
+        def file(value = nil)
+          if area_image?
+            if value.nil?
+              @args[0]
+            else
+              @args[0] = value
+              if @content_added
+                post_add_content
+                request_auto_redraw
+              end
+            end
+          end
         end
-   
-        def post_initialize_child(child)
-          @children << child
+        alias file= file
+        alias set_file file
+      
+        def width(value = nil)
+          if value.nil?
+            area_image? ? @args[1] : @args[0]
+          else
+            if area_image?
+              @args[1] = value
+              if @content_added
+                post_add_content
+                request_auto_redraw
+              end
+            else
+              @args[0] = value
+            end
+          end
+        end
+        alias width= width
+        alias set_width width
+      
+        def height(value = nil)
+          if value.nil?
+            area_image? ? @args[2] : @args[1]
+          else
+            if area_image?
+              @args[2] = value
+              if @content_added
+                post_add_content
+                request_auto_redraw
+              end
+            else
+              @args[1] = value
+            end
+          end
+        end
+        alias height= height
+        alias set_height height
+        
+        def redraw
+          @parent_proxy&.redraw
+        end
+        
+        def request_auto_redraw
+          @parent_proxy&.request_auto_redraw if area_image?
+        end
+      
+        def draw(area_draw_params)
+          if @shapes.nil?
+            load_image
+            parse_pixels
+            calculate_shapes
+          end
+          ImagePathRenderer.new(@parent_proxy, @shapes).render
+        end
+        
+        def area_image?
+          @parent_proxy&.is_a?(AreaProxy) or
+            AreaProxy.current_area_draw_params or
+            @args[0].is_a?(String) # first arg is file
+        end
+        
+        def destroy
+          @parent_proxy&.children&.delete(self)
+          ControlProxy.control_proxies.delete(self)
         end
         
         private
         
         def build_control
-          @args = [@children.first.args[1], @children.first.args[2]] if @children.size == 1 && (@args[0].nil? || @args[1].nil?)
-          super
-          @libui.tap do
-            @children.each {|child| child&.send(:build_control) }
+          unless area_image? # image object
+            @args = [@children.first.args[1], @children.first.args[2]] if @children.size == 1 && (@args[0].nil? || @args[1].nil?)
+            super
+            @libui.tap do
+              @children.each {|child| child&.send(:build_control) }
+            end
+          end
+        end
+        
+        def load_image
+          require 'chunky_png'
+          f = File.open(file)
+          canvas = ChunkyPNG::Canvas.from_io(f)
+          f.close
+          canvas.resample_nearest_neighbor!(width, height) if width && height
+          @data = canvas.to_rgba_stream
+          self.width = canvas.width
+          self.height = canvas.height
+        end
+        
+        def parse_pixels
+          @pixels = height.times.map do |y|
+            width.times.map do |x|
+              r = @data[(y*width + x)*4].ord
+              g = @data[(y*width + x)*4 + 1].ord
+              b = @data[(y*width + x)*4 + 2].ord
+              a = @data[(y*width + x)*4 + 3].ord
+              {x: x, y: y, color: {r: r, g: g, b: b, a: a}}
+            end
+          end.flatten
+        end
+        
+        def calculate_shapes
+          @shapes = []
+          original_pixels = @pixels.dup
+          indexed_original_pixels = Hash[original_pixels.each_with_index.to_a]
+          @pixels.each do |pixel|
+            index = indexed_original_pixels[pixel]
+            @rectangle_start_x ||= pixel[:x]
+            @rectangle_width ||= 1
+            if pixel[:x] < width - 1 && pixel[:color] == original_pixels[index + 1][:color]
+              @rectangle_width += 1
+            else
+              if pixel[:x] > 0 && pixel[:color] == original_pixels[index - 1][:color]
+                @shapes << {x: @rectangle_start_x, y: pixel[:y], width: @rectangle_width, height: 1, color: pixel[:color]}
+              else
+                @shapes << {x: pixel[:x], y: pixel[:y], width: 1, height: 1, color: pixel[:color]}
+              end
+              @rectangle_width = 1
+              @rectangle_start_x = pixel[:x] == width - 1 ? 0 : pixel[:x] + 1
+            end
           end
+          @shapes
         end
       end
     end

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

@@ -45,7 +45,7 @@ module Glimmer
         
         def destroy
           super
-          ControlProxy.image_proxies.each { |image_proxy| ::LibUI.free_image(image_proxy.libui) }
+          ControlProxy.image_proxies.each { |image_proxy| ::LibUI.free_image(image_proxy.libui) unless image_proxy.area_image? }
           @on_destroy_procs&.each { |on_destroy_proc| on_destroy_proc.call(self)}
         end
         

data/lib/glimmer/libui/control_proxy.rb

@@ -27,8 +27,8 @@ module Glimmer
     class ControlProxy
       class << self
         def exists?(keyword)
-          ::LibUI.respond_to?("new_#{keyword}") ||
-            ::LibUI.respond_to?(keyword) ||
+          ::LibUI.respond_to?("new_#{keyword}") or
+            ::LibUI.respond_to?(keyword) or
             descendant_keyword_constant_map.keys.include?(keyword)
         end
         
@@ -207,11 +207,11 @@ module Glimmer
       end
       
       def respond_to_libui?(method_name, *args, &block)
-        ::LibUI.respond_to?("control_#{method_name}") ||
-          (::LibUI.respond_to?("control_#{method_name.to_s.sub(/\?$/, '')}") && BOOLEAN_PROPERTIES.include?(method_name.to_s.sub(/\?$/, '')) ) ||
-          ::LibUI.respond_to?("control_set_#{method_name.to_s.sub(/=$/, '')}") ||
-          ::LibUI.respond_to?("#{libui_api_keyword}_#{method_name}") ||
-          (::LibUI.respond_to?("#{libui_api_keyword}_#{method_name.to_s.sub(/\?$/, '')}") && BOOLEAN_PROPERTIES.include?(method_name.to_s.sub(/\?$/, '')) ) ||
+        ::LibUI.respond_to?("control_#{method_name}") or
+          (::LibUI.respond_to?("control_#{method_name.to_s.sub(/\?$/, '')}") && BOOLEAN_PROPERTIES.include?(method_name.to_s.sub(/\?$/, '')) ) or
+          ::LibUI.respond_to?("control_set_#{method_name.to_s.sub(/=$/, '')}") or
+          ::LibUI.respond_to?("#{libui_api_keyword}_#{method_name}") or
+          (::LibUI.respond_to?("#{libui_api_keyword}_#{method_name.to_s.sub(/\?$/, '')}") && BOOLEAN_PROPERTIES.include?(method_name.to_s.sub(/\?$/, '')) ) or
           ::LibUI.respond_to?("#{libui_api_keyword}_set_#{method_name.to_s.sub(/=$/, '')}")
       end
       

data/lib/glimmer/libui/image_path_renderer.rb

@@ -0,0 +1,30 @@
+module Glimmer
+  module LibUI
+    class ImagePathRenderer
+      include Glimmer
+      
+      def initialize(area_proxy, shapes)
+        @area_proxy = area_proxy
+        @shapes = shapes
+      end
+      
+      def render
+        work = Proc.new do
+          @shapes.each do |shape|
+            path {
+              rectangle(shape[:x], shape[:y], shape[:width], shape[:height])
+    
+              fill shape[:color]
+            }
+          end
+        end
+        if @area_proxy.nil?
+          # Ensure it renders without a parent
+          Glimmer::DSL::Engine.add_content(nil, Glimmer::DSL::Libui::ControlExpression.new, 'image', &work)
+        else
+          work.call
+        end
+      end
+    end
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-libui
 version: !ruby/object:Gem::Version
-  version: 0.2.24
+  version: 0.3.0
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-11-14 00:00:00.000000000 Z
+date: 2021-11-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.4.0
+        version: 2.4.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.4.0
+        version: 2.4.1
 - !ruby/object:Gem::Dependency
   name: os
   requirement: !ruby/object:Gem::Requirement
@@ -72,6 +72,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.0.12
+- !ruby/object:Gem::Dependency
+  name: chunky_png
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.4.0
 - !ruby/object:Gem::Dependency
   name: juwelier
   requirement: !ruby/object:Gem::Requirement
@@ -221,6 +235,11 @@ files:
 - examples/basic_draw_text.rb
 - examples/basic_draw_text2.rb
 - examples/basic_entry.rb
+- examples/basic_image.rb
+- examples/basic_image2.rb
+- examples/basic_image3.rb
+- examples/basic_image4.rb
+- examples/basic_image5.rb
 - examples/basic_table.rb
 - examples/basic_table_button.rb
 - examples/basic_table_checkbox.rb
@@ -347,6 +366,7 @@ files:
 - lib/glimmer/libui/control_proxy/transformable.rb
 - lib/glimmer/libui/control_proxy/triple_column.rb
 - lib/glimmer/libui/control_proxy/window_proxy.rb
+- lib/glimmer/libui/image_path_renderer.rb
 - lib/glimmer/libui/parent.rb
 - lib/glimmer/libui/shape.rb
 - lib/glimmer/libui/shape/arc.rb