glimmer-dsl-libui 0.4.1 → 0.4.5

data/examples/form_table.rb

@@ -1,95 +1,108 @@
-# frozen_string_literal: true
-
 require 'glimmer-dsl-libui'
 
-include Glimmer
-
-data = [
-  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
-  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
-  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
-  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
-  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
-]
-
-window('Contacts', 600, 600) { |w|
-  margined true
+class FormTable
+  include Glimmer
   
-  vertical_box {
-    form {
-      stretchy false
-      
-      @name_entry = entry {
-        label 'Name'
-      }
-      
-      @email_entry = entry {
-        label 'Email'
-      }
-      
-      @phone_entry = entry {
-        label 'Phone'
-      }
-      
-      @city_entry = entry {
-        label 'City'
-      }
-      
-      @state_entry = entry {
-        label 'State'
-      }
-    }
-    
-    button('Save Contact') {
-      stretchy false
-      
-      on_clicked do
-        new_row = [@name_entry.text, @email_entry.text, @phone_entry.text, @city_entry.text, @state_entry.text]
-        if new_row.include?('')
-          msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
-        else
-          data << new_row # automatically inserts a row into the table due to implicit data-binding
-          @unfiltered_data = data.dup
-          @name_entry.text = ''
-          @email_entry.text = ''
-          @phone_entry.text = ''
-          @city_entry.text = ''
-          @state_entry.text = ''
-        end
-      end
-    }
-    
-    search_entry { |se|
-      stretchy false
+  attr_accessor :name, :email, :phone, :city, :state, :filter_value
+  
+  def initialize
+    @data = [
+      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
+      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
+      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
+      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
+      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
+    ]
+  end
+  
+  def launch
+    window('Contacts', 600, 600) { |w|
+      margined true
       
-      on_changed do
-        filter_value = se.text
-        @unfiltered_data ||= data.dup
-        # Unfilter first to remove any previous filters
-        data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
-        # Now, apply filter if entered
-        unless filter_value.empty?
-          data.filter! do |row_data| # affects table indirectly through implicit data-binding
-            row_data.any? do |cell|
-              cell.to_s.downcase.include?(filter_value.downcase)
+      vertical_box {
+        form {
+          stretchy false
+          
+          entry {
+            label 'Name'
+            text <=> [self, :name]
+          }
+          
+          entry {
+            label 'Email'
+            text <=> [self, :email]
+          }
+          
+          entry {
+            label 'Phone'
+            text <=> [self, :phone]
+          }
+          
+          entry {
+            label 'City'
+            text <=> [self, :city]
+          }
+          
+          entry {
+            label 'State'
+            text <=> [self, :state]
+          }
+        }
+        
+        button('Save Contact') {
+          stretchy false
+          
+          on_clicked do
+            new_row = [name, email, phone, city, state]
+            if new_row.include?('')
+              msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
+            else
+              @data << new_row # automatically inserts a row into the table due to implicit data-binding
+              @unfiltered_data = @data.dup
+              self.name = '' # automatically clears name entry through explicit data-binding
+              self.email = ''
+              self.phone = ''
+              self.city = ''
+              self.state = ''
             end
           end
-        end
-      end
-    }
+        }
+        
+        search_entry {
+          stretchy false
+          text <=> [self, :filter_value, # bidirectional data-binding of text to self.filter_value with after_write option
+            after_write: ->(filter_value) { # execute after write to self.filter_value
+              @unfiltered_data ||= @data.dup
+              # Unfilter first to remove any previous filters
+              @data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
+              # Now, apply filter if entered
+              unless filter_value.empty?
+                @data.filter! do |row_data| # affects table indirectly through implicit data-binding
+                  row_data.any? do |cell|
+                    cell.to_s.downcase.include?(filter_value.downcase)
+                  end
+                end
+              end
+            }
+          ]
+        }
+        
+        table {
+          text_column('Name')
+          text_column('Email')
+          text_column('Phone')
+          text_column('City')
+          text_column('State')
     
-    table {
-      text_column('Name')
-      text_column('Email')
-      text_column('Phone')
-      text_column('City')
-      text_column('State')
+          cell_rows @data # implicit data-binding
+          
+          on_changed do |row, type, row_data|
+            puts "Row #{row} #{type}: #{row_data}"
+          end
+        }
+      }
+    }.show
+  end
+end
 
-      cell_rows data # implicit data-binding
-      
-      on_changed do |row, type, row_data|
-        puts "Row #{row} #{type}: #{row_data}"
-      end
-    }
-  }
-}.show
+FormTable.new.launch

data/examples/form_table2.rb

@@ -0,0 +1,93 @@
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+data = [
+  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
+  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
+  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
+  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
+  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
+]
+
+window('Contacts', 600, 600) { |w|
+  margined true
+  
+  vertical_box {
+    form {
+      stretchy false
+      
+      @name_entry = entry {
+        label 'Name'
+      }
+      
+      @email_entry = entry {
+        label 'Email'
+      }
+      
+      @phone_entry = entry {
+        label 'Phone'
+      }
+      
+      @city_entry = entry {
+        label 'City'
+      }
+      
+      @state_entry = entry {
+        label 'State'
+      }
+    }
+    
+    button('Save Contact') {
+      stretchy false
+      
+      on_clicked do
+        new_row = [@name_entry.text, @email_entry.text, @phone_entry.text, @city_entry.text, @state_entry.text]
+        if new_row.include?('')
+          msg_box_error(w, 'Validation Error!', 'All fields are required! Please make sure to enter a value for all fields.')
+        else
+          data << new_row # automatically inserts a row into the table due to implicit data-binding
+          @unfiltered_data = data.dup
+          @name_entry.text = ''
+          @email_entry.text = ''
+          @phone_entry.text = ''
+          @city_entry.text = ''
+          @state_entry.text = ''
+        end
+      end
+    }
+    
+    search_entry { |se|
+      stretchy false
+      
+      on_changed do
+        filter_value = se.text
+        @unfiltered_data ||= data.dup
+        # Unfilter first to remove any previous filters
+        data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
+        # Now, apply filter if entered
+        unless filter_value.empty?
+          data.filter! do |row_data| # affects table indirectly through implicit data-binding
+            row_data.any? do |cell|
+              cell.to_s.downcase.include?(filter_value.downcase)
+            end
+          end
+        end
+      end
+    }
+    
+    table {
+      text_column('Name')
+      text_column('Email')
+      text_column('Phone')
+      text_column('City')
+      text_column('State')
+
+      cell_rows data # implicit data-binding
+      
+      on_changed do |row, type, row_data|
+        puts "Row #{row} #{type}: #{row_data}"
+      end
+    }
+  }
+}.show

data/examples/histogram.rb

@@ -2,106 +2,113 @@
 
 require 'glimmer-dsl-libui'
 
-include Glimmer
-
-X_OFF_LEFT   = 20
-Y_OFF_TOP    = 20
-X_OFF_RIGHT  = 20
-Y_OFF_BOTTOM = 20
-POINT_RADIUS = 5
-COLOR_BLUE   = 0x1E90FF
-
-@datapoints   = 10.times.map {Random.new.rand(90)}
-
-def graph_size(area_width, area_height)
-  graph_width = area_width - X_OFF_LEFT - X_OFF_RIGHT
-  graph_height = area_height - Y_OFF_TOP - Y_OFF_BOTTOM
-  [graph_width, graph_height]
-end
-
-def point_locations(width, height)
-  xincr = width / 9.0 # 10 - 1 to make the last point be at the end
-  yincr = height / 100.0
-
-  @datapoints.each_with_index.map do |value, i|
-    val = 100 - value
-    [xincr * i, yincr * val]
+class Histogram
+  include Glimmer
+  
+  X_OFF_LEFT   = 20
+  Y_OFF_TOP    = 20
+  X_OFF_RIGHT  = 20
+  Y_OFF_BOTTOM = 20
+  POINT_RADIUS = 5
+  COLOR_BLUE   = Glimmer::LibUI.interpret_color(0x1E90FF)
+  
+  attr_accessor :datapoints, :histogram_color
+  
+  def initialize
+    @datapoints   = 10.times.map {Random.new.rand(90)}
+    @histogram_color        = COLOR_BLUE
   end
-end
-
-# method-based custom control representing a graph path
-def graph_path(width, height, should_extend, &block)
-  locations = point_locations(width, height).flatten
-  path {
-    if should_extend
-      polygon(locations + [width, height, 0, height])
-    else
-      polyline(locations)
+  
+  def graph_size(area_width, area_height)
+    graph_width = area_width - X_OFF_LEFT - X_OFF_RIGHT
+    graph_height = area_height - Y_OFF_TOP - Y_OFF_BOTTOM
+    [graph_width, graph_height]
+  end
+  
+  def point_locations(width, height)
+    xincr = width / 9.0 # 10 - 1 to make the last point be at the end
+    yincr = height / 100.0
+  
+    @datapoints.each_with_index.map do |value, i|
+      val = 100 - value
+      [xincr * i, yincr * val]
     end
-    
-    # apply a transform to the coordinate space for this path so (0, 0) is the top-left corner of the graph
-    transform {
-      translate X_OFF_LEFT, Y_OFF_TOP
-    }
-    
-    block.call
-  }
-end
-
-window('histogram example', 640, 480) {
-  margined true
+  end
   
-  horizontal_box {
-    vertical_box {
-      stretchy false
-      
-      10.times do |i|
-        spinbox(0, 100) { |sb|
-          stretchy false
-          value @datapoints[i]
-          
-          on_changed do
-            @datapoints[i] = sb.value
-            @area.queue_redraw_all
-          end
-        }
+  # method-based custom control representing a graph path
+  def graph_path(width, height, should_extend, &block)
+    locations = point_locations(width, height).flatten
+    path {
+      if should_extend
+        polygon(locations + [width, height, 0, height])
+      else
+        polyline(locations)
       end
       
-      @color_button = color_button {
-        stretchy false
-        color COLOR_BLUE
-        
-        on_changed do
-          @area.queue_redraw_all
-        end
+      # apply a transform to the coordinate space for this path so (0, 0) is the top-left corner of the graph
+      transform {
+        translate X_OFF_LEFT, Y_OFF_TOP
       }
+      
+      block.call
     }
-    
-    @area = area {
-      on_draw do |area_draw_params|
-        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])
+  end
+  
+  def launch
+    window('histogram example', 640, 480) {
+      margined true
       
-        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)
+      horizontal_box {
+        vertical_box {
+          stretchy false
           
-          stroke 0x000000, thickness: 2, miter_limit: 10
-        }
-      
-        # now create the fill for the graph below the graph line
-        graph_path(graph_width, graph_height, true) {
-          fill @color_button.color.merge(a: 0.5)
+          10.times do |i|
+            spinbox(0, 100) { |sb|
+              stretchy false
+              value <=> [self, "datapoints[#{i}]", after_write: -> { @area.queue_redraw_all }]
+            }
+          end
+          
+          color_button { |cb|
+            stretchy false
+            color COLOR_BLUE
+            
+            on_changed do
+              @histogram_color = cb.color
+              @area.queue_redraw_all
+            end
+          }
         }
         
-        # now draw the histogram line
-        graph_path(graph_width, graph_height, false) {
-          stroke @color_button.color.merge(thickness: 2, miter_limit: 10)
+        @area = area {
+          on_draw do |area_draw_params|
+            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])
+          
+            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
+            }
+          
+            # now create the fill for the graph below the graph line
+            graph_path(graph_width, graph_height, true) {
+              fill @histogram_color.merge(a: 0.5)
+            }
+            
+            # now draw the histogram line
+            graph_path(graph_width, graph_height, false) {
+              stroke @histogram_color.merge(thickness: 2, miter_limit: 10)
+            }
+          end
         }
-      end
-    }
-  }
-}.show
+      }
+    }.show
+  end
+end
+
+Histogram.new.launch

data/examples/histogram2.rb

@@ -0,0 +1,109 @@
+# https://github.com/jamescook/libui-ruby/blob/master/example/histogram.rb
+
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+X_OFF_LEFT   = 20
+Y_OFF_TOP    = 20
+X_OFF_RIGHT  = 20
+Y_OFF_BOTTOM = 20
+POINT_RADIUS = 5
+COLOR_BLUE   = Glimmer::LibUI.interpret_color(0x1E90FF)
+
+@datapoints   = 10.times.map {Random.new.rand(90)}
+@color        = COLOR_BLUE
+
+def graph_size(area_width, area_height)
+  graph_width = area_width - X_OFF_LEFT - X_OFF_RIGHT
+  graph_height = area_height - Y_OFF_TOP - Y_OFF_BOTTOM
+  [graph_width, graph_height]
+end
+
+def point_locations(width, height)
+  xincr = width / 9.0 # 10 - 1 to make the last point be at the end
+  yincr = height / 100.0
+
+  @datapoints.each_with_index.map do |value, i|
+    val = 100 - value
+    [xincr * i, yincr * val]
+  end
+end
+
+# method-based custom control representing a graph path
+def graph_path(width, height, should_extend, &block)
+  locations = point_locations(width, height).flatten
+  path {
+    if should_extend
+      polygon(locations + [width, height, 0, height])
+    else
+      polyline(locations)
+    end
+    
+    # apply a transform to the coordinate space for this path so (0, 0) is the top-left corner of the graph
+    transform {
+      translate X_OFF_LEFT, Y_OFF_TOP
+    }
+    
+    block.call
+  }
+end
+
+window('histogram example', 640, 480) {
+  margined true
+  
+  horizontal_box {
+    vertical_box {
+      stretchy false
+      
+      10.times do |i|
+        spinbox(0, 100) { |sb|
+          stretchy false
+          value @datapoints[i]
+          
+          on_changed do
+            @datapoints[i] = sb.value
+            @area.queue_redraw_all
+          end
+        }
+      end
+      
+      color_button { |cb|
+        stretchy false
+        color COLOR_BLUE
+        
+        on_changed do
+          @color = cb.color
+          @area.queue_redraw_all
+        end
+      }
+    }
+    
+    @area = area {
+      on_draw do |area_draw_params|
+        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])
+      
+        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
+        }
+      
+        # now create the fill for the graph below the graph line
+        graph_path(graph_width, graph_height, true) {
+          fill @color.merge(a: 0.5)
+        }
+        
+        # now draw the histogram line
+        graph_path(graph_width, graph_height, false) {
+          stroke @color.merge(thickness: 2, miter_limit: 10)
+        }
+      end
+    }
+  }
+}.show

data/examples/login.rb

@@ -1,45 +1,51 @@
-# frozen_string_literal: true
-
 require 'glimmer-dsl-libui'
 
-include Glimmer
-
-window('Login') {
-  margined true
+class Login
+  include Glimmer
   
-  vertical_box {
-    form {
-      @username_entry = entry {
-        label 'Username:'
-      }
-      
-      @password_entry = password_entry {
-        label 'Password:'
-      }
-    }
-    
-    horizontal_box {
-      @login_button = button('Login') {
-        on_clicked do
-          @username_entry.enabled = false
-          @password_entry.enabled = false
-          @login_button.enabled = false
-          @logout_button.enabled = true
-        end
-      }
+  attr_accessor :username, :password, :logged_in
+  
+  def launch
+    window('Login') {
+      margined true
       
-      @logout_button = button('Logout') {
-        enabled false
+      vertical_box {
+        form {
+          entry {
+            label 'Username:'
+            text <=> [self, :username]
+            enabled <= [self, :logged_in, on_read: :!] # `on_read: :!` negates read value
+          }
+          
+          password_entry {
+            label 'Password:'
+            text <=> [self, :password]
+            enabled <= [self, :logged_in, on_read: :!]
+          }
+        }
         
-        on_clicked do
-          @username_entry.text = ''
-          @password_entry.text = ''
-          @username_entry.enabled = true
-          @password_entry.enabled = true
-          @login_button.enabled = true
-          @logout_button.enabled = false
-        end
+        horizontal_box {
+          button('Login') {
+            enabled <= [self, :logged_in, on_read: :!]
+            
+            on_clicked do
+              self.logged_in = true
+            end
+          }
+          
+          button('Logout') {
+            enabled <= [self, :logged_in]
+            
+            on_clicked do
+              self.logged_in = false
+              self.username = ''
+              self.password = ''
+            end
+          }
+        }
       }
-    }
-  }
-}.show
+    }.show
+  end
+end
+
+Login.new.launch