glimmer-dsl-libui 0.3.3 → 0.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2210fdb10cbd7cc9cf2c32801f90497e4b2017a0bc2e1b7e07e101b858475cb6
-  data.tar.gz: 32455357fd8a67d860149daab6434b7a33e955eeb5f7551dd23071a4f8ce139d
+  metadata.gz: ca4d302e851d275aad52599a64d0fc9ee6d6414efa753b023d38aaa1bfca283d
+  data.tar.gz: 3185bb17a987adadc03dfaac631c89850b726e36775bacd4885a40d2bfaa3e7c
 SHA512:
-  metadata.gz: 43d0fb73ca06474723dfe371c8da6c22016f2db46a111467e27bca21494bd1af55ecb9160a2fc2414324517f83b4bb78c00bbdd3a4e13e836707e67be7c81002
-  data.tar.gz: 959439c28a1bbaccdeb5d5489ad8259bb6efc4f374b4b05f4148f611fb2fdde115e5fc4a2ad1e08294a7db21d99d470a9fdd2701ae48e94bbe4a29e1b51f4158
+  metadata.gz: 157a6fa09dded3a1b52689dcc06effaf094f29b2d8975051b1838565720b15987e4faebdfcea9a90d67b841468f93ca8f2c9c8089b7d5d8cf81a851f408ff68f
+  data.tar.gz: c9b606a58e391302e760d54a227b0e6d8e9e972ce9fce8ac742fcc0b82c377a4a13d4b78f3cc19f432dff01a3cda1432954aeba4065a65ef18098e3bdff5e134

data/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 0.3.4
+
+- New examples/basic_scrolling_area.rb
+- Smart defaults for `scrolling_area` control + convenience `width` and `height` attributes
+- Simplify examples/basic_area.rb (all versions) by nesting shapes directly under `area`
+- Support `#content {}` method in `figure` to be able to reopen a `figure`'s content to add more shapes in.
+
 ## 0.3.3
 
 - Support nesting shapes directly under `area` to represent paths having one shape, and nesting `fill`/`stroke` within the shapes (not `path`)

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.3.3
+# [<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.4
 ## 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)
@@ -86,21 +86,6 @@ include Glimmer
 
 window('Area Gallery', 400, 400) {
   area {
-    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
-      square(0, 0, 100)
-      square(100, 100, 400)
-      
-      fill r: 102, g: 102, b: 204
-    }
-    
-    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
-      rectangle(0, 100, 100, 400)
-      rectangle(100, 0, 400, 100)
-      
-      # linear gradient (has x0, y0, x1, y1, and stops)
-      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-    }
-    
     polygon(100, 100, 100, 400, 400, 100, 400, 400) { # declarative stable path (implicit path syntax for a single shape nested directly under area)
       fill r: 202, g: 102, b: 104, a: 0.5
       stroke r: 0, g: 0, b: 0
@@ -129,6 +114,21 @@ window('Area Gallery', 400, 400) {
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
     
+    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
+      square(0, 0, 100)
+      square(100, 100, 400)
+      
+      fill r: 102, g: 102, b: 204
+    }
+    
+    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
+      rectangle(0, 100, 100, 400)
+      rectangle(100, 0, 400, 100)
+      
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
+    }
+    
     text(161, 40, 100) { # declarative stable text
       string('Area Gallery') {
         font family: 'Arial', size: (OS.mac? ? 14 : 11)
@@ -222,6 +222,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)
+      - [Scrolling Area](#scrolling_area)
       - [Area Path Shapes](#area-path-shapes)
       - [Area Text](#area-text)
       - [Area Image](#area-image)
@@ -261,6 +262,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Form Table](#form-table)
     - [Basic Area](#basic-area)
     - [Dynamic Area](#dynamic-area)
+    - [Basic Scrolling Area](#basic-scrolling-area)
     - [Area Gallery](#area-gallery)
     - [Basic Image](#basic-image)
     - [Histogram](#histogram)
@@ -366,7 +368,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.3.3'
+gem 'glimmer-dsl-libui', '~> 0.3.4'
 ```
 
 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.
@@ -493,6 +495,7 @@ Keyword(Args) | Properties | Listeners
 `quit_menu_item` | None | `on_clicked`
 `radio_buttons` | `selected` (`Integer`) | `on_selected`
 `rectangle(x as Numeric, y as Numeric, width as Numeric, height as Numeric)` |  `x` (`Numeric`), `y` (`Numeric`), `width` (`Numeric`), `height` (`Numeric`) | None
+`scrolling_area(width = main_window.width, height = main_window.height)` | `auto_draw_enabled` (Boolean), `size` (`Array` of `width` (`Numeric`) and `height` (`Numeric`)), `width` (`Numeric`), `height` (`Numeric`) | `on_draw(area_draw_params)`, `on_mouse_event(area_mouse_event)`, `on_mouse_down(area_mouse_event)`, `on_mouse_up(area_mouse_event)`, `on_mouse_drag_started(area_mouse_event)`, `on_mouse_dragged(area_mouse_event)`, `on_mouse_dropped(area_mouse_event)`, `on_mouse_entered`, `on_mouse_exited`, `on_key_event(area_key_event)`, `on_key_down(area_key_event)`, `on_key_up(area_key_event)`
 `search_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
 `separator_menu_item` | None | None
 `slider(min as Numeric, max as Numeric)` | `value` (`Numeric`) | `on_changed`
@@ -508,7 +511,7 @@ Keyword(Args) | Properties | Listeners
 `time_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`) | `on_changed`
 `vertical_box` | `padded` (Boolean) | None
 `vertical_separator` | None | None
-`window(title as String, width as Integer, height as Integer, has_menubar as Boolean)` | `borderless` (Boolean), `content_size` (width `Numeric`, height `Numeric`), `fullscreen` (Boolean), `margined` (Boolean), `title` (`String`), `resizable` (Boolean) | `on_closing`, `on_content_size_changed`, `on_destroy`
+`window(title as String, width as Integer, height as Integer, has_menubar as Boolean)` | `borderless` (Boolean), `content_size` (width `Numeric`, height `Numeric`), `width` (`Numeric`), `height` (`Numeric`), `fullscreen` (Boolean), `margined` (Boolean), `title` (`String`), `resizable` (Boolean) | `on_closing`, `on_content_size_changed`, `on_destroy`
 
 ### Common Control Properties
 - `enabled` (Boolean)
@@ -764,6 +767,18 @@ window('Basic Area', 400, 400) {
 
 Check [examples/dynamic_area.rb](#dynamic-area) for a more detailed semi-declarative example.
 
+#### Scrolling Area
+
+`scrolling_area(width as Numeric = main_window.width, height as Numeric = main_window.height)` is similar to `area`, but has the following additional methods:
+- `scroll_to(x as Numeric, y as Numeric, width as Numeric = main_window.width, height as Numeric = main_window.height)`: scrolls to `x`/`y` location with `width` and `height` viewport size.
+- `set_size(width as Numeric, height as Numeric)`: set size of scrolling area, which must must exceed that of visible viewport in order for scrolling to be enabled.
+
+Mac |
+----|
+![glimmer-dsl-libui-mac-dynamic-area.png](images/glimmer-dsl-libui-mac-basic-scrolling-area.png) ![glimmer-dsl-libui-mac-dynamic-area-updated.png](images/glimmer-dsl-libui-mac-basic-scrolling-area-scrolled.png)
+
+Check [examples/basic_scrolling_area.rb](#basic-scrolling-area) for a more detailed example.
+
 #### Area Path Shapes
 
 `path` can receive a `draw_fill_mode` argument that can accept values `:winding` or `:alternate` and defaults to `:winding`.
@@ -1026,7 +1041,7 @@ Check [Histogram](#histogram) example for use of hex colors.
 
 #### Area Draw Params
 
-The `area_draw_params` argument for `on_draw` block is a hash consisting of the following keys:
+The `area_draw_params` `Hash` argument for `on_draw` block is a hash consisting of the following keys:
 - `:context`: the drawing context object
 - `:area_width`: area width
 - `:area_height`: area height
@@ -1182,6 +1197,8 @@ Note that `area`, `path`, and nested shapes are all truly declarative, meaning t
 - `image` instances are automatically freed from memory after `window` is destroyed.
 - `image` `width` and `height` can be left off if it has one `image_part` only as they default to the same `width` and `height` of the `image_part`
 - Automatically provide shifted `:key` characters in `area_key_event` provided in `area` key listeners `on_key_event`, `on_key_down`, and `on_key_up`
+- `scrolling_area` `width` and `height` default to main window width and height if not specified.
+- `scrolling_area` `#scroll_to` 3rd and 4th arguments (`width` and `height`) default to main window width and height if not specified.
 - `area` paths are specified declaratively with figures underneath (e.g. `rectangle`) and `area` draw listener is automatically generated
 - Observe figure properties (e.g. `rectangle` `width`) for changes and automatically redraw containing area accordingly
 - Observe `path` `fill` and `stroke` hashes for changes and automatically redraw containing area accordingly
@@ -1352,15 +1369,13 @@ Example:
   }
 ```
 
-**3 - Control property declarations always have arguments that are never wrapped inside parentheses and never take a block.**
+**3 - Control property declarations always have arguments that are not wrapped inside parentheses and typically do not take a block.**
 
 Example:
 
 ```ruby
-  spinbox(0, 100) {
-    stretchy false
-    value 42
-  }
+  stretchy false
+  value 42
 ```
 
 **4 - Control listeners are always declared starting with on_ prefix and affixing listener event method name afterwards in underscored lowercase form. Their multi-line blocks have a `do; end` style.**
@@ -1964,12 +1979,8 @@ class TinyMidiPlayer
 
   def stop_midi
     if @pid
-      if @th.alive?
-        Process.kill(:SIGKILL, @pid)
-        @pid = nil
-      else
-        @pid = nil
-      end
+      Process.kill(:SIGKILL, @pid) if @th.alive?
+      @pid = nil
     end
   end
 
@@ -1995,6 +2006,20 @@ class TinyMidiPlayer
   end
 
   def create_gui
+    # loop_menu = UI.new_menu('Repeat')
+    # items = %w[Off One].map do |item_name|
+    #   item = UI.menu_append_check_item(loop_menu, item_name)
+    # end
+    # items.each_with_index do |item, idx|
+    #   UI.menu_item_on_clicked(item) do
+    #     @repeat = idx
+    #     (items - [item]).each do |i|
+    #       UI.menu_item_set_checked(i, 0)
+    #     end
+    #     0
+    #   end
+    # end
+
     help_menu = UI.new_menu('Help')
     version_item = UI.menu_append_item(help_menu, 'Version')
 
@@ -2009,11 +2034,11 @@ class TinyMidiPlayer
 
       UI.new_horizontal_box.tap do |hbox|
         UI.new_vertical_box.tap do |vbox|
-          UI.new_button('â–¶').tap do |button1|
+          UI.new_button('▶').tap do |button1|
             UI.button_on_clicked(button1) { play_midi }
             UI.box_append(vbox, button1, 1)
           end
-          UI.new_button('â– ').tap do |button2|
+          UI.new_button('■').tap do |button2|
             UI.button_on_clicked(button2) { stop_midi }
             UI.box_append(vbox, button2, 1)
           end
@@ -2107,12 +2132,12 @@ class TinyMidiPlayer
         vertical_box {
           stretchy false
           
-          button('â–¶') {
+          button('▶') {
             on_clicked do
               play_midi
             end
           }
-          button('â– ') {
+          button('■') {
             on_clicked do
               stop_midi
             end
@@ -4195,6 +4220,109 @@ window('Dynamic Area', 240, 600) {
 }.show
 ```
 
+### Basic Scrolling Area
+
+[examples/basic_scrolling_area.rb](examples/basic_scrolling_area.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/basic_scrolling_area.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_scrolling_area'"
+```
+
+Mac |
+----|
+![glimmer-dsl-libui-mac-dynamic-area.png](images/glimmer-dsl-libui-mac-basic-scrolling-area.png) ![glimmer-dsl-libui-mac-dynamic-area-updated.png](images/glimmer-dsl-libui-mac-basic-scrolling-area-scrolled.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class BasicScrollingArea
+  include Glimmer
+  
+  SCROLLING_AREA_WIDTH = 800
+  SCROLLING_AREA_HEIGHT = 400
+  SCROLLING_AREA_PADDING_X = 20
+  SCROLLING_AREA_PADDING_Y = 20
+  
+  def initialize
+    @x = SCROLLING_AREA_PADDING_X
+    @y = SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y
+    create_gui
+    Glimmer::LibUI.timer(0.01) do
+      @x += SCROLLING_AREA_PADDING_X
+      @y = [[@y + rand(SCROLLING_AREA_PADDING_Y*4)*(rand(2) == 0 ? -1 : 1), SCROLLING_AREA_PADDING_Y].max, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y].min
+      @graph.content { # re-open @graph's content and add a line
+        line(@x, @y)
+      }
+      # if there is a need to enlarge scrolling area, call `@scrolling_area.set_size(new_width, new_height)`
+      @scrolling_area.scroll_to(@x - (SCROLLING_AREA_WIDTH/2), @y) # 3rd and 4th arguments for width and height are assumed as those of main window by default if not supplied
+      # return false to stop timer once @x exceeds scrolling area width - padding
+      false if @x >= (SCROLLING_AREA_WIDTH - SCROLLING_AREA_PADDING_X*2)
+    end
+  end
+  
+  def launch
+    @main_window.show
+  end
+  
+  def x_axis
+    polyline(SCROLLING_AREA_PADDING_X, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y, SCROLLING_AREA_WIDTH - SCROLLING_AREA_PADDING_X*2, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y) {
+      stroke :black, thickness: 3
+    }
+    
+    ((SCROLLING_AREA_WIDTH - SCROLLING_AREA_PADDING_X*4) / SCROLLING_AREA_PADDING_X).times do |x_multiplier|
+      x = x_multiplier*SCROLLING_AREA_PADDING_X + SCROLLING_AREA_PADDING_X*2
+      y = SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y
+      
+      polyline(x, y, x, y + SCROLLING_AREA_PADDING_Y/2) {
+        stroke :black, thickness: 2
+      }
+    end
+  end
+  
+  def y_axis
+    polyline(SCROLLING_AREA_PADDING_X, SCROLLING_AREA_PADDING_Y, SCROLLING_AREA_PADDING_X, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y) {
+      stroke :black, thickness: 3
+    }
+    
+    ((SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y*3) / SCROLLING_AREA_PADDING_Y).times do |y_multiplier|
+      x = SCROLLING_AREA_PADDING_X
+      y = y_multiplier*SCROLLING_AREA_PADDING_Y + SCROLLING_AREA_PADDING_Y*2
+      
+      polyline(x, y, x - SCROLLING_AREA_PADDING_X/2, y) {
+        stroke :black, thickness: 2
+      }
+    end
+  end
+  
+  def create_gui
+    @main_window = window('Basic Scrolling Area', SCROLLING_AREA_WIDTH / 2, SCROLLING_AREA_HEIGHT) {
+      resizable false
+      
+      @scrolling_area = scrolling_area(SCROLLING_AREA_WIDTH, SCROLLING_AREA_HEIGHT) {
+        x_axis
+        y_axis
+        
+        @graph = figure(SCROLLING_AREA_PADDING_X, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y) {
+          stroke :blue, thickness: 2
+        }
+      }
+    }
+  end
+end
+
+BasicScrollingArea.new.launch
+```
+
 ### Area Gallery
 
 [examples/area_gallery.rb](examples/area_gallery.rb)
@@ -4224,21 +4352,6 @@ include Glimmer
 
 window('Area Gallery', 400, 400) {
   area {
-    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
-      square(0, 0, 100)
-      square(100, 100, 400)
-      
-      fill r: 102, g: 102, b: 204
-    }
-    
-    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
-      rectangle(0, 100, 100, 400)
-      rectangle(100, 0, 400, 100)
-      
-      # linear gradient (has x0, y0, x1, y1, and stops)
-      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-    }
-    
     polygon(100, 100, 100, 400, 400, 100, 400, 400) { # declarative stable path (implicit path syntax for a single shape nested directly under area)
       fill r: 202, g: 102, b: 104, a: 0.5
       stroke r: 0, g: 0, b: 0
@@ -4267,6 +4380,21 @@ window('Area Gallery', 400, 400) {
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
     
+    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
+      square(0, 0, 100)
+      square(100, 100, 400)
+      
+      fill r: 102, g: 102, b: 204
+    }
+    
+    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
+      rectangle(0, 100, 100, 400)
+      rectangle(100, 0, 400, 100)
+      
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
+    }
+    
     text(161, 40, 100) { # declarative stable text
       string('Area Gallery') {
         font family: 'Arial', size: (OS.mac? ? 14 : 11)
@@ -4334,41 +4462,7 @@ include Glimmer
 
 window('Area Gallery', 400, 400) {
   area {
-    path { # declarative stable path with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
-      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 with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
-      rectangle {
-        x 0
-        y 100
-        width 100
-        height 400
-      }
-      
-      rectangle {
-        x 100
-        y 0
-        width 400
-        height 100
-      }
-      
-      # linear gradient (has x0, y0, x1, y1, and stops)
-      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-    }
-    
+
     figure { # declarative stable path with explicit attributes (implicit path syntax for a single shape nested directly under area)
       x 100
       y 100
@@ -4475,6 +4569,41 @@ window('Area Gallery', 400, 400) {
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
     
+    path { # declarative stable path with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
+      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 with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
+      rectangle {
+        x 0
+        y 100
+        width 100
+        height 400
+      }
+      
+      rectangle {
+        x 100
+        y 0
+        width 400
+        height 100
+      }
+      
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
+    }
+    
     text { # declarative stable text with explicit attributes
       x 161
       y 40
@@ -4549,21 +4678,6 @@ include Glimmer
 window('Area Gallery', 400, 400) {
   area {
     on_draw do |area_draw_params|
-      path { # dynamic path, added semi-declaratively inside on_draw block
-        square(0, 0, 100)
-        square(100, 100, 400)
-        
-        fill r: 102, g: 102, b: 204
-      }
-      
-      path { # dynamic path, added semi-declaratively inside on_draw block
-        rectangle(0, 100, 100, 400)
-        rectangle(100, 0, 400, 100)
-        
-        # linear gradient (has x0, y0, x1, y1, and stops)
-        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-      }
-      
       polygon(100, 100, 100, 400, 400, 100, 400, 400) { # dynamic path, added semi-declaratively inside on_draw block
         fill r: 202, g: 102, b: 104, a: 0.5
         stroke r: 0, g: 0, b: 0
@@ -4592,6 +4706,21 @@ window('Area Gallery', 400, 400) {
         stroke r: 0, g: 0, b: 0, thickness: 2
       }
       
+      path { # dynamic path, added semi-declaratively inside on_draw block
+        square(0, 0, 100)
+        square(100, 100, 400)
+        
+        fill r: 102, g: 102, b: 204
+      }
+      
+      path { # dynamic path, added semi-declaratively inside on_draw block
+        rectangle(0, 100, 100, 400)
+        rectangle(100, 0, 400, 100)
+        
+        # linear gradient (has x0, y0, x1, y1, and stops)
+        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
+      }
+      
       text(161, 40, 100) { # dynamic text added semi-declaratively inside on_draw block
         string('Area Gallery') {
           font family: 'Arial', size: (OS.mac? ? 14 : 11)
@@ -4661,41 +4790,6 @@ include Glimmer
 window('Area Gallery', 400, 400) {
   area {
     on_draw do |area_draw_params|
-      path { # dynamic path, 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 { # dynamic path, 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
-        }
-        
-        # linear gradient (has x0, y0, x1, y1, and stops)
-        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-      }
-      
       figure { # dynamic path, added semi-declaratively inside on_draw block
         x 100
         y 100
@@ -4802,6 +4896,41 @@ window('Area Gallery', 400, 400) {
         stroke r: 0, g: 0, b: 0, thickness: 2
       }
       
+      path { # dynamic path, 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 { # dynamic path, 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
+        }
+        
+        # linear gradient (has x0, y0, x1, y1, and stops)
+        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
+      }
+      
       text { # dynamic path, added semi-declaratively inside on_draw block
         x 161
         y 40
@@ -7128,7 +7257,7 @@ class Snake
     Glimmer::DataBinding::Observer.proc do |game_over|
       Glimmer::LibUI.queue_main do
         if game_over
-          msg_box('Game Over!', "Score: #{@game.score}")
+          msg_box('Game Over!', "Score: #{@game.score} | High Score: #{@game.high_score}")
           @game.start
         end
       end
@@ -7137,7 +7266,7 @@ class Snake
     Glimmer::LibUI.timer(SNAKE_MOVE_DELAY) do
       unless @game.over?
         @game.snake.move
-        @main_window.title = "Glimmer Snake (Score: #{@game.score})"
+        @main_window.title = "Glimmer Snake (Score: #{@game.score} | High Score: #{@game.high_score})"
       end
     end
   end
@@ -7157,9 +7286,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/VERSION

@@ -1 +1 @@
-0.3.3
+0.3.4

data/examples/area_gallery.rb

@@ -4,21 +4,6 @@ include Glimmer
 
 window('Area Gallery', 400, 400) {
   area {
-    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
-      square(0, 0, 100)
-      square(100, 100, 400)
-      
-      fill r: 102, g: 102, b: 204
-    }
-    
-    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
-      rectangle(0, 100, 100, 400)
-      rectangle(100, 0, 400, 100)
-      
-      # linear gradient (has x0, y0, x1, y1, and stops)
-      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-    }
-    
     polygon(100, 100, 100, 400, 400, 100, 400, 400) { # declarative stable path (implicit path syntax for a single shape nested directly under area)
       fill r: 202, g: 102, b: 104, a: 0.5
       stroke r: 0, g: 0, b: 0
@@ -47,6 +32,21 @@ window('Area Gallery', 400, 400) {
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
     
+    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
+      square(0, 0, 100)
+      square(100, 100, 400)
+      
+      fill r: 102, g: 102, b: 204
+    }
+    
+    path { # declarative stable path (explicit path syntax for multiple shapes sharing attributes)
+      rectangle(0, 100, 100, 400)
+      rectangle(100, 0, 400, 100)
+      
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
+    }
+    
     text(161, 40, 100) { # declarative stable text
       string('Area Gallery') {
         font family: 'Arial', size: (OS.mac? ? 14 : 11)

data/examples/area_gallery2.rb

@@ -4,41 +4,7 @@ include Glimmer
 
 window('Area Gallery', 400, 400) {
   area {
-    path { # declarative stable path with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
-      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 with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
-      rectangle {
-        x 0
-        y 100
-        width 100
-        height 400
-      }
-      
-      rectangle {
-        x 100
-        y 0
-        width 400
-        height 100
-      }
-      
-      # linear gradient (has x0, y0, x1, y1, and stops)
-      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-    }
-    
+
     figure { # declarative stable path with explicit attributes (implicit path syntax for a single shape nested directly under area)
       x 100
       y 100
@@ -145,6 +111,41 @@ window('Area Gallery', 400, 400) {
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
     
+    path { # declarative stable path with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
+      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 with explicit attributes (explicit path syntax for multiple shapes sharing attributes)
+      rectangle {
+        x 0
+        y 100
+        width 100
+        height 400
+      }
+      
+      rectangle {
+        x 100
+        y 0
+        width 400
+        height 100
+      }
+      
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
+    }
+    
     text { # declarative stable text with explicit attributes
       x 161
       y 40

data/examples/area_gallery3.rb

@@ -5,21 +5,6 @@ include Glimmer
 window('Area Gallery', 400, 400) {
   area {
     on_draw do |area_draw_params|
-      path { # dynamic path, added semi-declaratively inside on_draw block
-        square(0, 0, 100)
-        square(100, 100, 400)
-        
-        fill r: 102, g: 102, b: 204
-      }
-      
-      path { # dynamic path, added semi-declaratively inside on_draw block
-        rectangle(0, 100, 100, 400)
-        rectangle(100, 0, 400, 100)
-        
-        # linear gradient (has x0, y0, x1, y1, and stops)
-        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-      }
-      
       polygon(100, 100, 100, 400, 400, 100, 400, 400) { # dynamic path, added semi-declaratively inside on_draw block
         fill r: 202, g: 102, b: 104, a: 0.5
         stroke r: 0, g: 0, b: 0
@@ -48,6 +33,21 @@ window('Area Gallery', 400, 400) {
         stroke r: 0, g: 0, b: 0, thickness: 2
       }
       
+      path { # dynamic path, added semi-declaratively inside on_draw block
+        square(0, 0, 100)
+        square(100, 100, 400)
+        
+        fill r: 102, g: 102, b: 204
+      }
+      
+      path { # dynamic path, added semi-declaratively inside on_draw block
+        rectangle(0, 100, 100, 400)
+        rectangle(100, 0, 400, 100)
+        
+        # linear gradient (has x0, y0, x1, y1, and stops)
+        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
+      }
+      
       text(161, 40, 100) { # dynamic text added semi-declaratively inside on_draw block
         string('Area Gallery') {
           font family: 'Arial', size: (OS.mac? ? 14 : 11)

data/examples/area_gallery4.rb

@@ -5,41 +5,6 @@ include Glimmer
 window('Area Gallery', 400, 400) {
   area {
     on_draw do |area_draw_params|
-      path { # dynamic path, 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 { # dynamic path, 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
-        }
-        
-        # linear gradient (has x0, y0, x1, y1, and stops)
-        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
-      }
-      
       figure { # dynamic path, added semi-declaratively inside on_draw block
         x 100
         y 100
@@ -146,6 +111,41 @@ window('Area Gallery', 400, 400) {
         stroke r: 0, g: 0, b: 0, thickness: 2
       }
       
+      path { # dynamic path, 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 { # dynamic path, 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
+        }
+        
+        # linear gradient (has x0, y0, x1, y1, and stops)
+        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
+      }
+      
       text { # dynamic path, added semi-declaratively inside on_draw block
         x 161
         y 40

data/examples/basic_area.rb

@@ -7,9 +7,7 @@ window('Basic Area', 400, 400) {
   
   vertical_box {
     area {
-      path { # a stable path is added declaratively
-        rectangle(0, 0, 400, 400)
-        
+      rectangle(0, 0, 400, 400) { # stable implicit path shape, added declaratively
         fill r: 102, g: 102, b: 204, a: 1.0
       }
     }

data/examples/basic_area2.rb

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

data/examples/basic_area3.rb

@@ -0,0 +1,17 @@
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Area', 400, 400) {
+  margined true
+  
+  vertical_box {
+    area {
+      path { # stable path, added declaratively
+        rectangle(0, 0, 400, 400)
+        
+        fill r: 102, g: 102, b: 204, a: 1.0
+      }
+    }
+  }
+}.show

data/examples/basic_area4.rb

@@ -0,0 +1,19 @@
+require 'glimmer-dsl-libui'
+
+include Glimmer
+
+window('Basic Area', 400, 400) {
+  margined true
+  
+  vertical_box {
+    area {
+      on_draw do |area_draw_params|
+        path { # dynamic path, added semi-declaratively inside on_draw block
+          rectangle(0, 0, 400, 400)
+          
+          fill r: 102, g: 102, b: 204, a: 1.0
+        }
+      end
+    }
+  }
+}.show

data/examples/basic_scrolling_area.rb

@@ -0,0 +1,79 @@
+require 'glimmer-dsl-libui'
+
+class BasicScrollingArea
+  include Glimmer
+  
+  SCROLLING_AREA_WIDTH = 800
+  SCROLLING_AREA_HEIGHT = 400
+  SCROLLING_AREA_PADDING_X = 20
+  SCROLLING_AREA_PADDING_Y = 20
+  
+  def initialize
+    @x = SCROLLING_AREA_PADDING_X
+    @y = SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y
+    create_gui
+    Glimmer::LibUI.timer(0.01) do
+      @x += SCROLLING_AREA_PADDING_X
+      @y = [[@y + rand(SCROLLING_AREA_PADDING_Y*4)*(rand(2) == 0 ? -1 : 1), SCROLLING_AREA_PADDING_Y].max, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y].min
+      @graph.content { # re-open @graph's content and add a line
+        line(@x, @y)
+      }
+      # if there is a need to enlarge scrolling area, call `@scrolling_area.set_size(new_width, new_height)`
+      # Note that `#scroll_to` does not seem to work on Linux, but normal scrolling does.
+      @scrolling_area.scroll_to(@x - (SCROLLING_AREA_WIDTH/2), @y) # 3rd and 4th arguments for width and height are assumed as those of main window by default if not supplied
+      # return false to stop timer once @x exceeds scrolling area width - padding
+      false if @x >= (SCROLLING_AREA_WIDTH - SCROLLING_AREA_PADDING_X*2)
+    end
+  end
+  
+  def launch
+    @main_window.show
+  end
+  
+  def x_axis
+    polyline(SCROLLING_AREA_PADDING_X, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y, SCROLLING_AREA_WIDTH - SCROLLING_AREA_PADDING_X*2, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y) {
+      stroke :black, thickness: 3
+    }
+    
+    ((SCROLLING_AREA_WIDTH - SCROLLING_AREA_PADDING_X*4) / SCROLLING_AREA_PADDING_X).times do |x_multiplier|
+      x = x_multiplier*SCROLLING_AREA_PADDING_X + SCROLLING_AREA_PADDING_X*2
+      y = SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y
+      
+      polyline(x, y, x, y + SCROLLING_AREA_PADDING_Y/2) {
+        stroke :black, thickness: 2
+      }
+    end
+  end
+  
+  def y_axis
+    polyline(SCROLLING_AREA_PADDING_X, SCROLLING_AREA_PADDING_Y, SCROLLING_AREA_PADDING_X, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y) {
+      stroke :black, thickness: 3
+    }
+    
+    ((SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y*3) / SCROLLING_AREA_PADDING_Y).times do |y_multiplier|
+      x = SCROLLING_AREA_PADDING_X
+      y = y_multiplier*SCROLLING_AREA_PADDING_Y + SCROLLING_AREA_PADDING_Y*2
+      
+      polyline(x, y, x - SCROLLING_AREA_PADDING_X/2, y) {
+        stroke :black, thickness: 2
+      }
+    end
+  end
+  
+  def create_gui
+    @main_window = window('Basic Scrolling Area', SCROLLING_AREA_WIDTH / 2, SCROLLING_AREA_HEIGHT) {
+      resizable false
+      
+      @scrolling_area = scrolling_area(SCROLLING_AREA_WIDTH, SCROLLING_AREA_HEIGHT) { # double width of window enables horizontal scrolling
+        x_axis
+        y_axis
+        
+        @graph = figure(SCROLLING_AREA_PADDING_X, SCROLLING_AREA_HEIGHT - SCROLLING_AREA_PADDING_Y) {
+          stroke :blue, thickness: 2
+        }
+      }
+    }
+  end
+end
+
+BasicScrollingArea.new.launch

data/lib/glimmer/libui/control_proxy/area_proxy/scrolling_area_proxy.rb

@@ -31,8 +31,43 @@ module Glimmer
         class ScrollingAreaProxy < AreaProxy
           def build_control
             @area_handler = ::LibUI::FFI::AreaHandler.malloc
+            @args[0] ||= Glimmer::LibUI::ControlProxy.main_window_proxy.width
+            @args[1] ||= Glimmer::LibUI::ControlProxy.main_window_proxy.height
             @libui    = ::LibUI.new_scrolling_area(@area_handler, *@args)
           end
+          
+          def width(value = nil)
+            if value.nil?
+              @args[0]
+            else
+              @args[0] = value
+              set_size(width, height)
+            end
+          end
+          alias width= width
+          alias set_width width
+          
+          def height(value = nil)
+            if value.nil?
+              @args[1]
+            else
+              @args[1] = value
+              set_size(width, height)
+            end
+          end
+          alias height= height
+          alias set_height height
+          
+          def set_size(width, height)
+            @args[0] = width
+            @args[1] = height
+            super(width, height)
+          end
+          
+          def scroll_to(scroll_x, scroll_y, scroll_width = nil, scroll_height = nil)
+            scroll_width, scroll_height = Glimmer::LibUI::ControlProxy.main_window_proxy.content_size
+            super(scroll_x, scroll_y, scroll_width, scroll_height)
+          end
         end
       end
     end

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

@@ -113,6 +113,26 @@ module Glimmer
         alias content_size= content_size
         alias set_content_size content_size
         
+        def width(value = nil)
+          if value.nil?
+            content_size.first
+          else
+            set_content_size(value, height)
+          end
+        end
+        alias width= width
+        alias set_width width
+        
+        def height(value = nil)
+          if value.nil?
+            content_size.last
+          else
+            set_content_size(width, value)
+          end
+        end
+        alias height= height
+        alias set_height height
+        
         def resizable(value = nil)
           if value.nil?
             @resizable = true if @resizable.nil?

data/lib/glimmer/libui/shape.rb

@@ -91,6 +91,11 @@ module Glimmer
         end
       end
       
+      def content(&block)
+        Glimmer::DSL::Engine.add_content(self, Glimmer::DSL::Libui::ShapeExpression.new, @keyword, &block)
+        request_auto_redraw
+      end
+      
       # Subclasses must override to perform draw work and call super afterwards to ensure calling destroy when semi-declarative in an on_draw method
       def draw(area_draw_params)
         destroy if area_proxy.nil?

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-libui
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.3.4
 platform: ruby
 authors:
 - Andy Maleh
@@ -217,6 +217,8 @@ files:
 - examples/area_gallery4.rb
 - examples/basic_area.rb
 - examples/basic_area2.rb
+- examples/basic_area3.rb
+- examples/basic_area4.rb
 - examples/basic_button.rb
 - examples/basic_draw_text.rb
 - examples/basic_draw_text2.rb
@@ -226,6 +228,7 @@ files:
 - examples/basic_image3.rb
 - examples/basic_image4.rb
 - examples/basic_image5.rb
+- examples/basic_scrolling_area.rb
 - examples/basic_table.rb
 - examples/basic_table_button.rb
 - examples/basic_table_checkbox.rb