glimmer-dsl-libui 0.2.24 → 0.3.3

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/examples/basic_table_color.rb

@@ -1,20 +1,10 @@
 # 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 = 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}],

data/examples/basic_table_color2.rb

@@ -0,0 +1,39 @@
+# 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)
+}
+
+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

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

@@ -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_text2.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/examples/basic_transform.rb

@@ -4,17 +4,14 @@ include Glimmer
 
 window('Basic Transform', 350, 350) {
   area {
-    path {
-      square(0, 0, 350)
-      
+    square(0, 0, 350) {
       fill r: 255, g: 255, b: 0
     }
     40.times do |n|
-      path {
-        square(0, 0, 100)
-        
+      square(0, 0, 100) {
         fill r: [255 - n*5, 0].max, g: [n*5, 255].min, b: 0, a: 0.5
         stroke :black, thickness: 2
+        
         transform {
           unless OS.windows?
             skew 0.15, 0.15

data/examples/basic_transform2.rb

@@ -0,0 +1,34 @@
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Transform', 350, 350) {
+  area {
+    path {
+      square(0, 0, 350)
+      
+      fill r: 255, g: 255, b: 0
+    }
+    40.times do |n|
+      path {
+        square(0, 0, 100)
+        
+        fill r: [255 - n*5, 0].max, g: [n*5, 255].min, b: 0, a: 0.5
+        stroke :black, thickness: 2
+        
+        transform {
+          unless OS.windows?
+            skew 0.15, 0.15
+            translate 50, 50
+          end
+          rotate 100, 100, -9 * n
+          scale 1.1, 1.1
+          if OS.windows?
+            skew 0.15, 0.15
+            translate 50, 50
+          end
+        }
+      }
+    end
+  }
+}.show

data/examples/color_the_circles.rb

@@ -201,9 +201,7 @@ class ColorTheCircles
             }
 
             @circles_data.each do |circle_data|
-              path {
-                circle_data[:circle] = circle(*circle_data[:args])
-
+              circle_data[:circle] = circle(*circle_data[:args]) {
                 fill circle_data[:fill]
                 stroke circle_data[:stroke]
               }

data/examples/dynamic_area.rb

@@ -88,9 +88,7 @@ window('Dynamic Area', 240, 600) {
     
     @area = area {
       on_draw do |area_draw_params|
-        path { # a dynamic path is added semi-declaratively inside on_draw block
-          rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value)
-          
+        rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value) { # a dynamic path is added semi-declaratively inside on_draw block
           fill r: @red_spinbox.value, g: @green_spinbox.value, b: @blue_spinbox.value, a: @alpha_spinbox.value / 100.0
         }
       end

data/examples/dynamic_area2.rb

@@ -54,7 +54,7 @@ window('Dynamic Area', 240, 600) {
         value 102
         
         on_changed do
-          @path.fill[:r] = @red_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
+          @rectangle.fill[:r] = @red_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
         end
       }
       
@@ -63,7 +63,7 @@ window('Dynamic Area', 240, 600) {
         value 102
         
         on_changed do
-          @path.fill[:g] = @green_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
+          @rectangle.fill[:g] = @green_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
         end
       }
       
@@ -72,7 +72,7 @@ window('Dynamic Area', 240, 600) {
         value 204
         
         on_changed do
-          @path.fill[:b] = @blue_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
+          @rectangle.fill[:b] = @blue_spinbox.value # updating hash properties automatically triggers area.queue_redraw_all
         end
       }
       
@@ -81,15 +81,13 @@ window('Dynamic Area', 240, 600) {
         value 100
         
         on_changed do
-          @path.fill[:a] = @alpha_spinbox.value / 100.0 # updating hash properties automatically triggers area.queue_redraw_all
+          @rectangle.fill[:a] = @alpha_spinbox.value / 100.0 # updating hash properties automatically triggers area.queue_redraw_all
         end
       }
     }
     
     area {
-      @path = path { # stable path
-        @rectangle = rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value)
-        
+      @rectangle = rectangle(@x_spinbox.value, @y_spinbox.value, @width_spinbox.value, @height_spinbox.value) { # stable path
         fill r: @red_spinbox.value, g: @green_spinbox.value, b: @blue_spinbox.value, a: @alpha_spinbox.value / 100.0
       }
     }

data/examples/form_table.rb

@@ -22,15 +22,19 @@ window('Contacts', 600, 600) { |w|
       @name_entry = entry {
         label 'Name'
       }
+      
       @email_entry = entry {
         label 'Email'
       }
+      
       @phone_entry = entry {
         label 'Phone'
       }
+      
       @city_entry = entry {
         label 'City'
       }
+      
       @state_entry = entry {
         label 'State'
       }

data/examples/grid.rb

@@ -8,16 +8,16 @@ window('Grid') {
   tab {
     tab_item('Span') {
       grid {
-        4.times { |top_value|
-          4.times { |left_value|
+        4.times do |top_value|
+          4.times do |left_value|
             label("(#{left_value}, #{top_value}) xspan1\nyspan1") {
               left left_value
               top top_value
               hexpand true
               vexpand true
             }
-          }
-        }
+          end
+        end
         label("(0, 4) xspan2\nyspan1 more text fits horizontally") {
           left 0
           top 4

data/examples/histogram.rb

@@ -79,19 +79,15 @@ window('histogram example', 640, 480) {
     
     @area = area {
       on_draw do |area_draw_params|
-        path {
-          rectangle(0, 0, area_draw_params[:area_width], area_draw_params[:area_height])
-          
+        rectangle(0, 0, area_draw_params[:area_width], area_draw_params[:area_height]) {
           fill 0xFFFFFF
         }
         
         graph_width, graph_height = *graph_size(area_draw_params[:area_width], area_draw_params[:area_height])
       
-        path {
-          figure(X_OFF_LEFT, Y_OFF_TOP) {
-            line(X_OFF_LEFT, Y_OFF_TOP + graph_height)
-            line(X_OFF_LEFT + graph_width, Y_OFF_TOP + graph_height)
-          }
+        figure(X_OFF_LEFT, Y_OFF_TOP) {
+          line(X_OFF_LEFT, Y_OFF_TOP + graph_height)
+          line(X_OFF_LEFT + graph_width, Y_OFF_TOP + graph_height)
           
           stroke 0x000000, thickness: 2, miter_limit: 10
         }

data/examples/meta_example.rb

@@ -5,8 +5,10 @@ require 'fileutils'
 class MetaExample
   include Glimmer
   
+  ADDITIONAL_BASIC_EXAMPLES = ['Color Button', 'Font Button', 'Form', 'Date Time Picker', 'Simple Notepad']
+  
   def initialize
-    @selected_example_index = 0
+    @selected_example_index = examples_with_versions.index(basic_examples_with_versions.first)
   end
   
   def examples
@@ -25,6 +27,14 @@ class MetaExample
     end
   end
   
+  def basic_examples_with_versions
+    examples_with_versions.select {|example| example.start_with?('Basic') || ADDITIONAL_BASIC_EXAMPLES.include?(example) }
+  end
+  
+  def advanced_examples_with_versions
+    examples_with_versions - basic_examples_with_versions
+  end
+  
   def file_path_for(example)
     File.join(File.expand_path('.', __dir__), "#{example.underscore}.rb")
   end
@@ -66,17 +76,47 @@ class MetaExample
         vertical_box {
           stretchy false
           
-          @example_radio_buttons = radio_buttons {
+          tab {
             stretchy false
-            items examples_with_versions
-            selected @selected_example_index
             
-            on_selected do
-              @selected_example_index = @example_radio_buttons.selected
-              example = selected_example
-              @code_entry.text = File.read(file_path_for(example))
-              @version_spinbox.value = 1
-            end
+            tab_item('Basic') {
+              vertical_box {
+                @basic_example_radio_buttons = radio_buttons {
+                  stretchy false
+                  items basic_examples_with_versions
+                  selected basic_examples_with_versions.index(examples_with_versions[@selected_example_index])
+                  
+                  on_selected do
+                    @selected_example_index = examples_with_versions.index(basic_examples_with_versions[@basic_example_radio_buttons.selected])
+                    example = selected_example
+                    @code_entry.text = File.read(file_path_for(example))
+                    @version_spinbox.value = 1
+                  end
+                }
+                
+                label # filler
+                label # filler
+              }
+            }
+            
+            tab_item('Advanced') {
+              vertical_box {
+                @advanced_example_radio_buttons = radio_buttons {
+                  stretchy false
+                  items advanced_examples_with_versions
+                  
+                  on_selected do
+                    @selected_example_index = examples_with_versions.index(advanced_examples_with_versions[@advanced_example_radio_buttons.selected])
+                    example = selected_example
+                    @code_entry.text = File.read(file_path_for(example))
+                    @version_spinbox.value = 1
+                  end
+                }
+                
+                label # filler
+                label # filler
+              }
+            }
           }
           
           horizontal_box {

data/examples/snake.rb

@@ -61,9 +61,7 @@ class Snake
             
             @game.width.times do |column|
               area {
-                @cell_grid.last << path {
-                  square(0, 0, CELL_SIZE)
-                  
+                @cell_grid.last << square(0, 0, CELL_SIZE) {
                   fill Presenter::Cell::COLOR_CLEAR
                 }
                 

data/examples/tetris.rb

@@ -203,34 +203,31 @@ class Tetris
     bevel_pixel_size = 0.16 * block_size.to_f
     color = Glimmer::LibUI.interpret_color(Model::Block::COLOR_CLEAR)
     area {
-      block[:background_square] = path {
-        square(0, 0, block_size)
-        
+      block[:background_square] = square(0, 0, block_size) {
         fill color
       }
-      block[:top_bevel_edge] = path {
-        polygon(0, 0, block_size, 0, block_size - bevel_pixel_size, bevel_pixel_size, bevel_pixel_size, bevel_pixel_size)
-  
+      
+      block[:top_bevel_edge] = polygon {
+        point_array 0, 0, block_size, 0, block_size - bevel_pixel_size, bevel_pixel_size, bevel_pixel_size, bevel_pixel_size
         fill r: color[:r] + 4*BEVEL_CONSTANT, g: color[:g] + 4*BEVEL_CONSTANT, b: color[:b] + 4*BEVEL_CONSTANT
       }
-      block[:right_bevel_edge] = path {
-        polygon(block_size, 0, block_size - bevel_pixel_size, bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size, block_size, block_size)
-  
+      
+      block[:right_bevel_edge] = polygon {
+        point_array block_size, 0, block_size - bevel_pixel_size, bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size, block_size, block_size
         fill r: color[:r] - BEVEL_CONSTANT, g: color[:g] - BEVEL_CONSTANT, b: color[:b] - BEVEL_CONSTANT
       }
-      block[:bottom_bevel_edge] = path {
-        polygon(block_size, block_size, 0, block_size, bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size)
-  
+      
+      block[:bottom_bevel_edge] = polygon {
+        point_array block_size, block_size, 0, block_size, bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size, block_size - bevel_pixel_size
         fill r: color[:r] - BEVEL_CONSTANT, g: color[:g] - BEVEL_CONSTANT, b: color[:b] - BEVEL_CONSTANT
       }
-      block[:left_bevel_edge] = path {
-        polygon(0, 0, 0, block_size, bevel_pixel_size, block_size - bevel_pixel_size, bevel_pixel_size, bevel_pixel_size)
-  
+      
+      block[:left_bevel_edge] = polygon {
+        point_array 0, 0, 0, block_size, bevel_pixel_size, block_size - bevel_pixel_size, bevel_pixel_size, bevel_pixel_size
         fill r: color[:r] - BEVEL_CONSTANT, g: color[:g] - BEVEL_CONSTANT, b: color[:b] - BEVEL_CONSTANT
       }
-      block[:border_square] = path {
-        square(0, 0, block_size)
-  
+      
+      block[:border_square] = square(0, 0, block_size) {
         stroke COLOR_GRAY
       }
       

data/examples/tic_tac_toe/board.rb

@@ -38,8 +38,10 @@ class TicTacToe
   
     #row and column numbers are 1-based
     def mark(row, column)
-      self[row, column].mark(current_sign)
-      game_over? #updates winning sign
+      if self[row, column].empty
+        self[row, column].mark(current_sign)
+        game_over? #updates winning sign
+      end
     end
   
     def current_sign

data/examples/tic_tac_toe.rb

@@ -45,9 +45,7 @@ class TicTacToe
             
             3.times.map do |column|
               area {
-                path {
-                  square(0, 0, 60)
-                  
+                square(0, 0, 60) {
                   stroke :black, thickness: 2
                 }
                 text(23, 19) {

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