glimmer-dsl-libui 0.1.3 → 0.1.7

data/VERSION

@@ -1 +1 @@
-0.1.3
+0.1.7

data/examples/area_gallery.rb

@@ -3,50 +3,48 @@ require 'glimmer-dsl-libui'
 include Glimmer
 
 window('Area Gallery', 400, 400) {
-  vertical_box {
-    area {
-      path { # declarative stable path
-        square(0, 0, 100)
-        square(100, 100, 400)
-        
-        fill r: 102, g: 102, b: 204
-      }
-      path { # declarative stable path
-        rectangle(0, 100, 100, 400)
-        rectangle(100, 0, 400, 100)
-        
-        fill r: 204, g: 102, b: 204
-      }
-      path { # declarative stable path
-        figure(100, 100) {
-          line(100, 400)
-          line(400, 100)
-          line(400, 400)
-
-          closed true
-        }
+  area {
+    path { # declarative stable path
+      square(0, 0, 100)
+      square(100, 100, 400)
+      
+      fill r: 102, g: 102, b: 204
+    }
+    path { # declarative stable path
+      rectangle(0, 100, 100, 400)
+      rectangle(100, 0, 400, 100)
+      
+      fill r: 204, g: 102, b: 204
+    }
+    path { # declarative stable path
+      figure(100, 100) {
+        line(100, 400)
+        line(400, 100)
+        line(400, 400)
 
-        fill r: 202, g: 102, b: 104, a: 0.5
-        stroke thickness: 1, r: 0, g: 0, b: 0
+        closed true
       }
-      path { # declarative stable path
-        figure(0, 0) {
-          bezier(200, 100, 100, 200, 400, 100)
-          bezier(300, 100, 100, 300, 100, 400)
-          bezier(100, 300, 300, 100, 400, 400)
 
-          closed true
-        }
+      fill r: 202, g: 102, b: 104, a: 0.5
+      stroke r: 0, g: 0, b: 0
+    }
+    path { # declarative stable path
+      figure(0, 0) {
+        bezier(200, 100, 100, 200, 400, 100)
+        bezier(300, 100, 100, 300, 100, 400)
+        bezier(100, 300, 300, 100, 400, 400)
 
-        fill r: 202, g: 102, b: 204, a: 0.5
-        stroke thickness: 2, r: 0, g: 0, b: 0
+        closed true
       }
-      path { # declarative stable path
-        arc(200, 200, 90, 0, 360, false)
 
-        fill r: 202, g: 102, b: 204, a: 0.5
-        stroke thickness: 2, r: 0, g: 0, b: 0
-      }
+      fill r: 202, g: 102, b: 204, a: 0.5
+      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+    }
+    path { # declarative stable path
+      arc(200, 200, 90, 0, 360, false)
+
+      fill r: 202, g: 102, b: 204, a: 0.5
+      stroke r: 0, g: 0, b: 0, thickness: 2
     }
   }
 }.show

data/examples/area_gallery2.rb

@@ -0,0 +1,111 @@
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Area Gallery', 400, 400) {
+  area {
+    path { # declarative stable path
+      square {
+        x 0
+        y 0
+        length 100
+      }
+      square {
+        x 100
+        y 100
+        length 400
+      }
+      
+      fill r: 102, g: 102, b: 204
+    }
+    path { # declarative stable path
+      rectangle {
+        x 0
+        y 100
+        width 100
+        height 400
+      }
+      rectangle {
+        x 100
+        y 0
+        width 400
+        height 100
+      }
+      
+      fill r: 204, g: 102, b: 204
+    }
+    path { # declarative stable path
+      figure {
+        x 100
+        y 100
+        
+        line {
+          x 100
+          y 400
+        }
+        line {
+          x 400
+          y 100
+        }
+        line {
+          x 400
+          y 400
+        }
+
+        closed true
+      }
+
+      fill r: 202, g: 102, b: 104, a: 0.5
+      stroke r: 0, g: 0, b: 0
+    }
+    path { # declarative stable path
+      figure {
+        x 0
+        y 0
+        
+        bezier {
+          c1_x 200
+          c1_y 100
+          c2_x 100
+          c2_y 200
+          end_x 400
+          end_y 100
+        }
+        bezier {
+          c1_x 300
+          c1_y 100
+          c2_x 100
+          c2_y 300
+          end_x 100
+          end_y 400
+        }
+        bezier {
+          c1_x 100
+          c1_y 300
+          c2_x 300
+          c2_y 100
+          end_x 400
+          end_y 400
+        }
+
+        closed true
+      }
+
+      fill r: 202, g: 102, b: 204, a: 0.5
+      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+    }
+    path { # declarative stable path
+      arc {
+        x_center 200
+        y_center 200
+        radius 90
+        start_angle 0
+        sweep 360
+        is_negative false
+      }
+
+      fill r: 202, g: 102, b: 204, a: 0.5
+      stroke r: 0, g: 0, b: 0, thickness: 2
+    }
+  }
+}.show

data/examples/area_gallery3.rb

@@ -0,0 +1,52 @@
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Area Gallery', 400, 400) {
+  area {
+    on_draw do |area_draw_params|
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        square(0, 0, 100)
+        square(100, 100, 400)
+        
+        fill r: 102, g: 102, b: 204
+      }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        rectangle(0, 100, 100, 400)
+        rectangle(100, 0, 400, 100)
+
+        fill r: 204, g: 102, b: 204
+      }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        figure(100, 100) {
+          line(100, 400)
+          line(400, 100)
+          line(400, 400)
+
+          closed true
+        }
+
+        fill r: 202, g: 102, b: 104, a: 0.5
+        stroke r: 0, g: 0, b: 0
+      }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        figure(0, 0) {
+          bezier(200, 100, 100, 200, 400, 100)
+          bezier(300, 100, 100, 300, 100, 400)
+          bezier(100, 300, 300, 100, 400, 400)
+
+          closed true
+        }
+
+        fill r: 202, g: 102, b: 204, a: 0.5
+        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+      }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        arc(200, 200, 90, 0, 360, false)
+
+        fill r: 202, g: 102, b: 204, a: 0.5
+        stroke r: 0, g: 0, b: 0, thickness: 2
+      }
+    end
+  }
+}.show

data/examples/area_gallery4.rb

@@ -0,0 +1,113 @@
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Area Gallery', 400, 400) {
+  area {
+    on_draw do |area_draw_params|
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        square {
+          x 0
+          y 0
+          length 100
+        }
+        square {
+          x 100
+          y 100
+          length 400
+        }
+        
+        fill r: 102, g: 102, b: 204
+      }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        rectangle {
+          x 0
+          y 100
+          width 100
+          height 400
+        }
+        rectangle {
+          x 100
+          y 0
+          width 400
+          height 100
+        }
+        
+        fill r: 204, g: 102, b: 204
+      }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        figure {
+          x 100
+          y 100
+          
+          line {
+            x 100
+            y 400
+          }
+          line {
+            x 400
+            y 100
+          }
+          line {
+            x 400
+            y 400
+          }
+
+          closed true
+        }
+
+        fill r: 202, g: 102, b: 104, a: 0.5
+        stroke r: 0, g: 0, b: 0
+      }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        figure {
+          x 0
+          y 0
+          
+          bezier {
+            c1_x 200
+            c1_y 100
+            c2_x 100
+            c2_y 200
+            end_x 400
+            end_y 100
+          }
+          bezier {
+            c1_x 300
+            c1_y 100
+            c2_x 100
+            c2_y 300
+            end_x 100
+            end_y 400
+          }
+          bezier {
+            c1_x 100
+            c1_y 300
+            c2_x 300
+            c2_y 100
+            end_x 400
+            end_y 400
+          }
+
+          closed true
+        }
+
+        fill r: 202, g: 102, b: 204, a: 0.5
+        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+      }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        arc {
+          x_center 200
+          y_center 200
+          radius 90
+          start_angle 0
+          sweep 360
+          is_negative false
+        }
+
+        fill r: 202, g: 102, b: 204, a: 0.5
+        stroke r: 0, g: 0, b: 0, thickness: 2
+      }
+    end
+  }
+}.show

data/examples/basic_area2.rb

@@ -8,7 +8,7 @@ window('Basic Area', 400, 400) {
   vertical_box {
     area {
       on_draw do |area_draw_params|
-        path(area_draw_params) { # a dynamic path is added semi-declaratively inside on_draw block
+        path { # a dynamic path is added semi-declaratively inside on_draw block
           rectangle(0, 0, 400, 400)
           
           fill r: 102, g: 102, b: 204, a: 1.0

data/examples/basic_button.rb

@@ -4,10 +4,10 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('hello world', 300, 200) { |w|
+window('hello world', 300, 200) {
   button('Button') {
     on_clicked do
-      msg_box(w, 'Information', 'You clicked the button')
+      msg_box('Information', 'You clicked the button')
     end
   }
   

data/examples/basic_entry.rb

@@ -4,7 +4,7 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('Basic Entry', 300, 50) { |w|
+window('Basic Entry', 300, 50) {
   horizontal_box {
     e = entry {
       # stretchy true # Smart default option for appending to horizontal_box
@@ -20,7 +20,7 @@ window('Basic Entry', 300, 50) { |w|
       
       on_clicked do
         text = e.text
-        msg_box(w, 'You entered', text)
+        msg_box('You entered', text)
       end
     }
   }

data/examples/basic_table_progress_bar.rb

@@ -12,13 +12,23 @@ data = [
   ['task 5', -1],
 ]
 
-window('Task progress', 300, 200) {
-  horizontal_box {
+window('Task Progress', 300, 200) {
+  vertical_box {
     table {
       text_column('Task')
       progress_bar_column('Progress')
 
-      cell_rows data
+      cell_rows data # implicit data-binding
+    }
+    
+    button('Mark All As Done') {
+      stretchy false
+      
+      on_clicked do
+        data.each_with_index do |row_data, row|
+          data[row] = [row_data[0], 100] # automatically updates table due to implicit data-binding
+        end
+      end
     }
   }
 }.show

data/examples/basic_transform.rb

@@ -0,0 +1,27 @@
+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 {
+          skew 0.15, 0.15
+          translate 50, 50
+          rotate 100, 100, -9 * n
+          scale 1.1, 1.1
+        }
+      }
+    end
+  }
+}.show

data/examples/control_gallery.rb

@@ -7,14 +7,14 @@ include Glimmer
 menu('File') {
   menu_item('Open') {
     on_clicked do
-      file = open_file(MAIN_WINDOW)
+      file = open_file
       puts file unless file.nil?
     end
   }
 
   menu_item('Save') {
     on_clicked do
-      file = save_file(MAIN_WINDOW)
+      file = save_file
       puts file unless file.nil?
     end
   }
@@ -57,7 +57,7 @@ MAIN_WINDOW = window('Control Gallery', 600, 500) {
             stretchy false
 
             on_clicked do
-              msg_box(MAIN_WINDOW, 'Information', 'You clicked the button')
+              msg_box('Information', 'You clicked the button')
             end
           }
 

data/examples/dynamic_area.rb

@@ -88,7 +88,7 @@ window('Dynamic Area', 240, 600) {
     
     @area = area {
       on_draw do |area_draw_params|
-        path(area_draw_params) { # a dynamic path is added semi-declaratively inside on_draw block
+        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)
           
           fill r: @red_spinbox.value, g: @green_spinbox.value, b: @blue_spinbox.value, a: @alpha_spinbox.value / 100.0

data/examples/form.rb

@@ -4,7 +4,7 @@ require 'glimmer-dsl-libui'
 
 include Glimmer
 
-window('Form') { |w|
+window('Form') {
   margined true
   
   vertical_box {
@@ -20,7 +20,7 @@ window('Form') { |w|
     
     button('Display Name') {
       on_clicked do
-        msg_box(w, 'Name', "#{@first_name_entry.text} #{@last_name_entry.text}")
+        msg_box('Name', "#{@first_name_entry.text} #{@last_name_entry.text}")
       end
     }
   }

data/examples/histogram.rb

@@ -0,0 +1,118 @@
+# 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   = 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]
+  end
+end
+
+# method-based custom control representing a graph path
+def graph_path(width, height, should_extend, &block)
+  locations = point_locations(width, height)
+  path {
+    first_location = locations[0] # x and y
+    figure(first_location[0], first_location[1]) {
+      locations.each do |loc|
+        line(loc[0], loc[1])
+      end
+      if should_extend
+        line(width, height)
+        line(0, height)
+        
+        closed true
+      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 = color_button {
+        stretchy false
+        color COLOR_BLUE
+        
+        on_changed do
+          @area.queue_redraw_all
+        end
+      }
+    }
+    
+    @area = area {
+      on_draw do |area_draw_params|
+        path {
+          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)
+          }
+          
+          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)
+        }
+        
+        # now draw the histogram line
+        graph_path(graph_width, graph_height, false) {
+          stroke @color_button.color.merge(thickness: 2, miter_limit: 10)
+        }
+      end
+    }
+  }
+}.show