glimmer-dsl-gtk 0.0.5 → 0.0.9

data/README.md

@@ -1,11 +1,11 @@
-# [<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 GTK 0.0.5
+# [<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 GTK 0.0.9
 ## Ruby-GNOME Desktop Development GUI Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-gtk.svg)](http://badge.fury.io/rb/glimmer-dsl-gtk)
 [![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)
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [GTK](https://www.gtk.org/) enables building desktop applications with [Ruby-GNOME](https://github.com/ruby-gnome/ruby-gnome).
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [GTK](https://www.gtk.org/) enables building desktop applications with [Ruby-GNOME](https://github.com/ruby-gnome/ruby-gnome) (including [Cairo graphics](#declarative-cairo-graphics)) using [MRI Ruby](https://www.ruby-lang.org).
 
-[GTK](https://www.gtk.org/) (aka GIMP-Toolkit or [incorrectly] GNOME-Toolkit) is the premiere desktop GUI toolkit on [Linux](https://www.gtk.org/docs/installations/linux/), which also runs on [Mac](https://www.gtk.org/docs/installations/macos/) ([Quartz GTK+](https://wiki.gnome.org/Projects/GTK/OSX)) and [Windows](https://www.gtk.org/docs/installations/windows).
+[GTK](https://www.gtk.org/) (aka GIMP-Toolkit or [incorrectly] GNOME-Toolkit) is the premiere desktop GUI toolkit on [Linux](https://www.gtk.org/docs/installations/linux/) (included in [GNOME flavors of Linux](https://www.gnome.org/getting-gnome/), where [Glimmer DSL for GTK](https://rubygems.org/gems/glimmer-dsl-gtk)'s forte is), which also runs on [Mac](https://www.gtk.org/docs/installations/macos/) ([Quartz GTK+](https://wiki.gnome.org/Projects/GTK/OSX)) and [Windows](https://www.gtk.org/docs/installations/windows).
 
 [Glimmer DSL for GTK](https://rubygems.org/gems/glimmer-dsl-gtk) aims to supercharge productivity and maintainability in developing [Ruby-GNOME](https://github.com/ruby-gnome/ruby-gnome) applications by providing a DSL similar to [Glimmer DSL for SWT](https://github.com/AndyObtiva/glimmer-dsl-swt) having:
 - Declarative DSL syntax that visually maps to the GUI widget hierarchy
@@ -32,19 +32,25 @@ Linux | Mac | Windows
 
 NOTE: Glimmer DSL for GTK is currently in early alpha mode (incomplete proof-of-concept). If you want it developed faster, then [open an issue report](https://github.com/AndyObtiva/glimmer-dsl-gtk/issues/new). I have completed some GitHub project features much faster before due to [issue reports](https://github.com/AndyObtiva/glimmer-dsl-gtk/issues) and [pull requests](https://github.com/AndyObtiva/glimmer-dsl-gtk/pulls). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
 
-Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interested in:
-- [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Framework)
-- [glimmer-dsl-opal](https://github.com/AndyObtiva/glimmer-dsl-opal): Glimmer DSL for Opal (Pure Ruby Web GUI and Auto-Webifier of Desktop Apps)
-- [glimmer-dsl-tk](https://github.com/AndyObtiva/glimmer-dsl-tk): Glimmer DSL for Tk (MRI Ruby Desktop Development GUI Library)
-- [glimmer-dsl-libui](https://github.com/AndyObtiva/glimmer-dsl-libui): Glimmer DSL for Tk (Prerequisite-Free Ruby Desktop Development GUI Library)
-- [glimmer-dsl-xml](https://github.com/AndyObtiva/glimmer-dsl-xml): Glimmer DSL for XML (& HTML)
-- [glimmer-dsl-css](https://github.com/AndyObtiva/glimmer-dsl-css): Glimmer DSL for CSS
+**[Glimmer](https://rubygems.org/gems/glimmer) DSL Comparison Table:**
+DSL | Platforms | Native? | Vector Graphics? | Pros | Cons | Prereqs
+----|-----------|---------|------------------|------|------|--------
+[Glimmer DSL for SWT (JRuby Desktop Development GUI Framework)](https://github.com/AndyObtiva/glimmer-dsl-swt) | Mac / Windows / Linux | Yes | Yes (Canvas Shape DSL) | Very Mature / Scaffolding / Native Executable Packaging / Custom Widgets | Slow JRuby Startup Time / Heavy Memory Footprint | Java / JRuby
+[Glimmer DSL for Opal (Pure Ruby Web GUI and Auto-Webifier of Desktop Apps)](https://github.com/AndyObtiva/glimmer-dsl-opal) | All Web Browsers | No | Yes (Canvas Shape DSL) | Simpler than All JavaScript Technologies / Auto-Webify Desktop Apps | Setup Process / Only Rails 5 Support for Now | Rails
+[Glimmer DSL for LibUI (Prerequisite-Free Ruby Desktop Development GUI Library)](https://github.com/AndyObtiva/glimmer-dsl-libui) | Mac / Windows / Linux | Yes | Yes (Area API) | Fast Startup Time / Light Memory Footprint | LibUI is an Incomplete Mid-Alpha Only | None Other Than MRI Ruby
+[Glimmer DSL for Tk (MRI Ruby Desktop Development GUI Library)](https://github.com/AndyObtiva/glimmer-dsl-tk) | Mac / Windows / Linux | Some Native-Themed Widgets (Not Truly Native) | Yes (Canvas) | Fast Startup Time / Light Memory Footprint | Widgets Do Not Look Truly Native, Espcially on Linux | ActiveTcl / MRI Ruby
+[Glimmer DSL for GTK (Ruby-GNOME Desktop Development GUI Library)](https://github.com/AndyObtiva/glimmer-dsl-gtk) | Mac / Windows / Linux | Only on Linux | Yes (Cairo) | Complete Access to GNOME Features on Linux (Forte) | Not Native on Mac and Windows | None Other Than MRI Ruby on Linux / Brew Packages on Mac / MSYS & MING Toolchains on Windows / MRI Ruby
+[Glimmer DSL for FX (FOX Toolkit Ruby Desktop Development GUI Library)](https://github.com/AndyObtiva/glimmer-dsl-fx) | Mac (requires XQuartz) / Windows / Linux | No | Yes (Canvas) | No Prerequisites on Windows (Forte Since Binaries Are Included Out of The Box) | Widgets Do Not Look Native / Mac Usage Obtrusively Starts XQuartz | None Other Than MRI Ruby on Windows / XQuarts on Mac / MRI Ruby
+[Glimmer DSL for JFX (JRuby JavaFX Desktop Development GUI Library)](https://github.com/AndyObtiva/glimmer-dsl-jfx) | Mac / Windows / Linux | No | Yes (javafx.scene.shape and javafx.scene.canvas) | Rich in Custom Widgets | Slow JRuby Startup Time / Heavy Memory Footprint / Widgets Do Not Look Native | Java / JRuby / JavaFX SDK
+[Glimmer DSL for Swing (JRuby Swing Desktop Development GUI Library)](https://github.com/AndyObtiva/glimmer-dsl-swing) | Mac / Windows / Linux | No | Yes (Java2D) | Very Mature | Slow JRuby Startup Time / Heavy Memory Footprint / Widgets Do Not Look Native | Java / JRuby
+[Glimmer DSL for XML (& HTML)](https://github.com/AndyObtiva/glimmer-dsl-xml) | All Web Browsers | No | Yes (SVG) | Programmable / Lighter-weight Than Actual XML | XML Elements Are Sometimes Not Well-Named (Many Types of Input) | None
+[Glimmer DSL for CSS](https://github.com/AndyObtiva/glimmer-dsl-css) | All Web Browsers | No | Yes | Programmable | CSS Is Over-Engineered / Too Many Features To Learn | None
 
 ## Prerequisites
 
 ### Linux
 
-GNOME-based Linux installations do not need any pre-requisites since they have GTK built-in, so you can skip to [Setup](#setup) right away.
+GNOME-based Linux installations do not need any prerequisites since they have GTK built-in, so you can skip to [Setup](#setup) right away.
 
 Still, if you run into issues installing the GTK gem in [Setup](#setup), you may try these commands first:
 ```
@@ -80,7 +86,7 @@ gem install glimmer-dsl-gtk
 
 Add the following to `Gemfile`:
 ```
-gem 'glimmer-dsl-gtk', '~> 0.0.5'
+gem 'glimmer-dsl-gtk', '~> 0.0.9'
 ```
 
 And, then run:
@@ -152,13 +158,13 @@ Note that it is usually recommended to observe external model objects (not `self
 
 [Cairo](https://www.cairographics.org/) is the engine behind drawing arbitrary 2D geometric shapes in [GTK](https://www.gtk.org/).
 
-In [Glimmer DSL for GTK](https://rubygems.org/gems/glimmer-dsl-gtk), you can draw Cairo shapes declaratively in a way similar to how SVG works, but using one language; Ruby, thus being able to utilize Ruby logic (e.g. if statement or each loop) with it effortlessly when needed.
+In [Glimmer DSL for GTK](https://rubygems.org/gems/glimmer-dsl-gtk), you can draw Cairo shapes declaratively in a way similar to how SVG works, but using one language; Ruby, thus being able to utilize Ruby logic (e.g. if statement or each loop) with it effortlessly when needed. Declarative syntax also yields less code that is simpler, not dependent on ordering of nested properties, and more understandable/maintainable.
 
 Below is a quick tutorial consisting of samples inspired and ported from [Mohit Sindhwani's blog post "Cairo with Ruby - Samples using RCairo"](https://notepad.onghu.com/2021/cairo-samples-in-ruby/).
 
-### Arc
+#### Arc
 
-Example (you may copy/paste in [`girb`](#girb-glimmer-irb))
+[samples/cairo/arc.rb](/samples/cairo/arc.rb)
 
 ```ruby
 require 'glimmer-dsl-gtk'
@@ -166,7 +172,7 @@ require 'glimmer-dsl-gtk'
 include Glimmer
 
 window {
-  title 'Hello, Drawing Area!'
+  title 'Arc'
   default_size 256, 256
   
   drawing_area {
@@ -209,9 +215,9 @@ window {
 
 ![Arc](/screenshots/glimmer-dsl-gtk-mac-cairo-arc.png)
 
-### Arc Negative
+#### Arc Negative
 
-Example (you may copy/paste in [`girb`](#girb-glimmer-irb))
+[samples/cairo/arc_negative.rb](/samples/cairo/arc_negative.rb)
 
 ```ruby
 require 'glimmer-dsl-gtk'
@@ -262,9 +268,9 @@ window {
 
 ![Arc Negative](/screenshots/glimmer-dsl-gtk-mac-cairo-arc-negative.png)
 
-### Clip
+#### Clip
 
-Example (you may copy/paste in [`girb`](#girb-glimmer-irb))
+[samples/cairo/clip.rb](/samples/cairo/clip.rb)
 
 ```ruby
 require 'glimmer-dsl-gtk'
@@ -305,6 +311,591 @@ window {
 
 ![Clip](/screenshots/glimmer-dsl-gtk-mac-cairo-clip.png)
 
+#### Clip Image
+
+[samples/cairo/clip_image.rb](/samples/cairo/clip_image.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+require 'net/http'
+
+image_content = Net::HTTP.get(URI('https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-gtk/master/images/breaking-blue-wave.png'))
+image_file = File.join(Dir.home, 'breaking-blue-wave.png')
+File.write(image_file, image_content)
+
+include Glimmer
+
+window {
+  title 'Clip Image'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+
+    arc(128.0, 128.0, 76.8, 0, 2 * Math::PI) {
+      clip true # designate arc as the clipping area
+    }
+
+    rectangle(0, 0, 256, 256) {
+      # Source image is from:
+      # - https://www.publicdomainpictures.net/en/view-image.php?image=7683&picture=breaking-blue-wave
+      # Converted to PNG before using it
+      image = Cairo::ImageSurface.from_png(image_file)
+      w = image.width
+      h = image.height
+  
+      scale 256.0/w, 256.0/h, exclude: :shape # applies scale to fill source image only
+      fill image, 0, 0
+    }
+  }
+}.show
+```
+
+![Clip Image](/screenshots/glimmer-dsl-gtk-mac-cairo-clip-image.png)
+
+#### Curve to
+
+[samples/cairo/curve_to.rb](/samples/cairo/curve_to.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Curve to'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+    
+    x=25.6
+    y=128.0
+    x1=102.4
+    y1=230.4
+    x2=153.6
+    y2=25.6
+    x3=230.4
+    y3=128.0
+    
+    path {
+      move_to x, y
+      curve_to x1, y1, x2, y2, x3, y3
+      
+      line_width 10
+      stroke 0, 0, 0
+    }
+    
+    path {
+      move_to x,y
+      line_to x1,y1
+      move_to x2,y2
+      line_to x3,y3
+      
+      line_width 6
+      stroke 255, 51, 51, 0.6
+    }
+  }
+}.show
+```
+
+![Curve to](/screenshots/glimmer-dsl-gtk-mac-cairo-curve-to.png)
+
+#### Dashes
+
+[samples/cairo/dashes.rb](/samples/cairo/dashes.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Dashes'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+
+    dashes = [ 50.0, # ink
+                       10.0,  # skip
+                       10.0,  # ink
+                       10.0   # skip
+            ]
+    offset = -50.0
+    
+    path {
+      move_to 128.0, 25.6
+      line_to 230.4, 230.4
+      rel_line_to -102.4, 0.0
+      curve_to 51.2, 230.4, 51.2, 128.0, 128.0, 128.0
+      
+      line_width 10
+      dash dashes, offset
+      stroke 0, 0, 0
+    }
+  }
+}.show
+```
+
+![Dashes](/screenshots/glimmer-dsl-gtk-mac-cairo-dashes.png)
+
+#### Fill and Stroke 2
+
+(note: there is no Fill and Stroke 1; this was adopted from [Mohit's blog post](https://notepad.onghu.com/2021/cairo-samples-in-ruby/), which only mentioned Fill and Stroke 2)
+
+[samples/cairo/fill_and_stroke2.rb](/samples/cairo/fill_and_stroke2.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Fill and Stroke 2'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+    
+    path {
+      move_to 128.0, 25.6
+      line_to 230.4, 230.4
+      rel_line_to -102.4, 0.0
+      curve_to 51.2, 230.4, 51.2, 128.0, 128.0, 128.0
+      close_path
+
+      fill 0, 0, 255
+      stroke 0, 0, 0
+      line_width 10
+    }
+    
+    path {
+      move_to 64.0, 25.6
+      rel_line_to 51.2, 51.2
+      rel_line_to -51.2, 51.2
+      rel_line_to -51.2, -51.2
+      close_path
+
+      fill 0, 0, 255
+      stroke 0, 0, 0
+      line_width 10
+    }
+  }
+}.show
+```
+
+![Fill and Stroke 2](/screenshots/glimmer-dsl-gtk-mac-cairo-fill-and-stroke2.png)
+
+#### Fill Style
+
+[samples/cairo/fill_style.rb](/samples/cairo/fill_style.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Fill Style'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+    
+    path {
+      rectangle 12, 12, 232, 70
+      path { # sub-path
+        arc 64, 64, 40, 0, 2*Math::PI
+      }
+      path { # sub-path
+        arc_negative 192, 64, 40, 0, -2*Math::PI
+      }
+      
+      fill_rule Cairo::FILL_RULE_EVEN_ODD
+      line_width 6
+      fill 0, 178.5, 0
+      stroke 0, 0, 0
+    }
+    
+    path {
+      rectangle 12, 12, 232, 70
+      path { # sub-path
+        arc 64, 64, 40, 0, 2*Math::PI
+      }
+      path { # sub-path
+        arc_negative 192, 64, 40, 0, -2*Math::PI
+      }
+      
+      translate 0, 128
+      fill_rule Cairo::FILL_RULE_WINDING
+      line_width 6
+      fill 0, 0, 229.5
+      stroke 0, 0, 0
+    }
+  }
+}.show
+```
+
+![Fill Style](/screenshots/glimmer-dsl-gtk-mac-cairo-fill-style.png)
+
+#### Gradient
+
+[samples/cairo/gradient.rb](/samples/cairo/gradient.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Gradient'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+        
+    # Create the Linear Pattern
+    rectangle(0, 0, 256, 256) {
+      pat = Cairo::LinearPattern.new(0.0, 0.0,  0.0, 256.0)
+      pat.add_color_stop_rgba(1, 0, 0, 0, 1)
+      pat.add_color_stop_rgba(0, 1, 1, 1, 1)
+      
+      fill pat
+    }
+    
+    # Create the radial pattern
+    arc(128.0, 128.0, 76.8, 0, 2 * Math::PI) {
+      pat = Cairo::RadialPattern.new(115.2, 102.4, 25.6,
+                                         102.4,  102.4, 128.0)
+      pat.add_color_stop_rgba(0, 1, 1, 1, 1)
+      pat.add_color_stop_rgba(1, 0, 0, 0, 1)
+      
+      fill pat
+    }
+  }
+}.show
+```
+
+![Gradient](/screenshots/glimmer-dsl-gtk-mac-cairo-gradient.png)
+
+#### Image
+
+[samples/cairo/image.rb](/samples/cairo/image.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+require 'net/http'
+
+image_content = Net::HTTP.get(URI('https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-gtk/master/images/breaking-blue-wave.png'))
+image_file = File.join(Dir.home, 'breaking-blue-wave.png')
+File.write(image_file, image_content)
+
+include Glimmer
+
+window {
+  title 'Image'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+        
+    image = Cairo::ImageSurface.from_png(image_file)
+    w = image.width
+    h = image.height
+    
+    translate 128.0, 128.0
+    rotate 45*Math::PI/180
+    scale 256.0/w, 256.0/h
+    translate -0.5*w, -0.5*h
+    
+    paint image, 0, 0
+  }
+}.show
+```
+
+![Image](/screenshots/glimmer-dsl-gtk-mac-cairo-image.png)
+
+#### Image Gradient
+
+[samples/cairo/image_gradient.rb](/samples/cairo/image_gradient.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+require 'net/http'
+
+image_content = Net::HTTP.get(URI('https://raw.githubusercontent.com/AndyObtiva/glimmer-dsl-gtk/master/images/breaking-blue-wave.png'))
+image_file = File.join(Dir.home, 'breaking-blue-wave.png')
+File.write(image_file, image_content)
+
+include Glimmer
+
+window {
+  title 'Image Gradient'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+    
+    image = Cairo::ImageSurface.from_png(image_file)
+    w = image.width
+    h = image.height
+    
+    # Load the image as a surface pattern
+    pattern = Cairo::SurfacePattern.new(image)
+    pattern.extend = Cairo::EXTEND_REPEAT
+    
+    # Set up the scale matrix
+    pattern.matrix = Cairo::Matrix.scale(w/256.0 * 5.0, h/256.0 * 5.0)
+    
+    rectangle(0, 0, 256, 256) {
+      translate 128.0, 128.0
+      rotate Math::PI / 4
+      scale 1/Math.sqrt(2), 1/Math.sqrt(2)
+      translate -128.0, -128.0
+        
+      fill pattern
+    }
+  }
+}.show
+```
+
+![Image Gradient](/screenshots/glimmer-dsl-gtk-mac-cairo-image-gradient.png)
+
+#### Multi Segment Caps
+
+[samples/cairo/multi_segment_caps.rb](/samples/cairo/multi_segment_caps.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Multi Segment Caps'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+    
+    path {
+      move_to 50.0, 75.0
+      line_to 200.0, 75.0
+      
+      move_to 50.0, 125.0
+      line_to 200.0, 125.0
+      
+      move_to 50.0, 175.0
+      line_to 200.0, 175.0
+      
+      line_width 30
+      line_cap Cairo::LINE_CAP_ROUND
+      stroke 0, 0, 0
+    }
+  }
+}.show
+```
+
+![Multi Segment Caps](/screenshots/glimmer-dsl-gtk-mac-cairo-multi-segment-caps.png)
+
+#### Rounded Rectangle
+
+[samples/cairo/rounded_rectangle.rb](/samples/cairo/rounded_rectangle.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Rounded Rectangle'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+    
+    path {
+      rounded_rectangle(25.6, 25.6, 204.8, 204.8, 20)
+    
+      fill 127.5, 127.5, 255
+      line_width 10.0
+      stroke 127.5, 0, 0, 0.5
+    }
+  }
+}.show
+```
+
+![Rounded Rectangle](/screenshots/glimmer-dsl-gtk-mac-cairo-rounded-rectangle.png)
+
+#### Set line cap
+
+[samples/cairo/set_line_cap.rb](/samples/cairo/set_line_cap.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Set line cap'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+    
+    # The main code
+    path {
+      move_to 64.0, 50.0
+      line_to 64.0, 200.0
+      
+      line_cap Cairo::LINE_CAP_BUTT #  default
+      line_width 30
+      stroke 0, 0, 0
+    }
+    
+    path {
+      move_to 128.0, 50.0
+      line_to 128.0, 200.0
+      
+      line_cap Cairo::LINE_CAP_ROUND
+      line_width 30
+      stroke 0, 0, 0
+    }
+    
+    path {
+      move_to 192.0, 50.0
+      line_to 192.0, 200.0
+      
+      line_cap Cairo::LINE_CAP_SQUARE
+      line_width 30
+      stroke 0, 0, 0
+    }
+    
+    #  draw helping lines */
+    path {
+      move_to 64.0, 50.0
+      line_to 64.0, 200.0
+      move_to 128.0, 50.0
+      line_to 128.0, 200.0
+      move_to 192.0, 50.0
+      line_to 192.0, 200.0
+      
+      line_width 2.56
+      stroke 255, 51, 51
+    }
+  }
+}.show
+```
+
+![Set line cap](/screenshots/glimmer-dsl-gtk-mac-cairo-set-line-cap.png)
+
+#### Set line join
+
+[samples/cairo/set_line_join.rb](/samples/cairo/set_line_join.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Set line join'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+    
+    # The main code
+    path {
+      move_to 76.8, 84.48
+      rel_line_to 51.2, -51.2
+      rel_line_to 51.2, 51.2
+      
+      line_join Cairo::LINE_JOIN_MITER # default
+      line_width 40.96
+      stroke 0, 0, 0
+    }
+    
+    path {
+      move_to 76.8, 161.28
+      rel_line_to 51.2, -51.2
+      rel_line_to 51.2, 51.2
+      
+      line_join Cairo::LINE_JOIN_BEVEL
+      line_width 40.96
+      stroke 0, 0, 0
+    }
+    
+    path {
+      move_to 76.8, 238.08
+      rel_line_to 51.2, -51.2
+      rel_line_to 51.2, 51.2
+      
+      line_join Cairo::LINE_JOIN_ROUND
+      line_width 40.96
+      stroke 0, 0, 0
+    }
+  }
+}.show
+```
+
+![Set line join](/screenshots/glimmer-dsl-gtk-mac-cairo-set-line-join.png)
+
+#### Text
+
+[samples/cairo/text.rb](/samples/cairo/text.rb)
+
+```ruby
+require 'glimmer-dsl-gtk'
+
+include Glimmer
+
+window {
+  title 'Text'
+  default_size 256, 256
+  
+  drawing_area {
+    paint 242.25, 242.25, 242.25
+    
+    font_family = OS.linux? ? 'Sans' : (OS.mac? ? 'Helvetica' : 'Arial')
+    
+    # The main code
+    path {
+      move_to 10.0, 135.0
+      show_text 'Hello'
+      
+      font_face font_family, Cairo::FONT_SLANT_NORMAL, Cairo::FONT_WEIGHT_BOLD
+      font_size 90.0
+      line_width 2.56
+      fill 0, 0, 0
+      stroke 0, 0, 0
+    }
+    
+    path {
+      move_to 70.0, 165.0
+      text_path 'void'
+      
+      font_face font_family, Cairo::FONT_SLANT_NORMAL, Cairo::FONT_WEIGHT_BOLD
+      font_size 90.0
+      line_width 2.56
+      fill 127.5, 127.5, 255
+      stroke 0, 0, 0
+    }
+    
+    # draw helping lines
+    path {
+      arc 10.0, 135.0, 5.12, 0, 2*Math::PI
+      close_path
+      arc 70.0, 165.0, 5.12, 0, 2*Math::PI
+      
+      fill 255, 51, 51, 0.6
+    }
+  }
+}.show
+```
+
+![Text](/screenshots/glimmer-dsl-gtk-mac-cairo-text.png)
+
 ## Girb (Glimmer IRB)
 
 You can run the `girb` command (`bin/girb` if you cloned the project locally):
@@ -431,9 +1022,9 @@ include Glimmer
 window { |w|
   title 'Hello, Button!'
   
-  button('Button') {
+  button(label: 'Button') {
     on(:clicked) do
-      message_dialog(w) { |md|
+      message_dialog(parent: w) { |md|
         title 'Information'
         text 'You clicked the button'
         
@@ -485,9 +1076,9 @@ window { |w|
       end
     }
     
-    button('Button') {
+    button(label: 'Button') {
       on(:clicked) do
-        message_dialog(w) { |md|
+        message_dialog(parent: w) { |md|
           title 'You entered'
           text e.text
           
@@ -809,7 +1400,7 @@ include Glimmer
 
 application('org.glimmer.hello-application') {
   on(:activate) do |app|
-    application_window(app) {
+    application_window(app) { |aw|
       title 'Widget Gallery'
       
       notebook { |n|
@@ -851,13 +1442,24 @@ application('org.glimmer.hello-application') {
               spacing 10
               
               label('Button')
-              button('Push Me')
+              button(label: 'Push Me') {
+                on(:clicked) do
+                  message_dialog(parent: aw) { |md|
+                    title 'Information'
+                    text 'You clicked the button'
+                    
+                    on(:response) do
+                      md.destroy
+                    end
+                  }.show
+                end
+              }
               
               label('Radio Button')
               box(:horizontal) {
-                rb = radio_button('One')
-                radio_button(rb, 'Two')
-                radio_button(rb, 'Three')
+                rb = radio_button(label: 'One')
+                radio_button(label: 'Two', member: rb)
+                radio_button(label: 'Three', member: rb)
               }
               
               label('Check Button')
@@ -879,12 +1481,12 @@ application('org.glimmer.hello-application') {
               spacing 10
               
               label('Horizontal Scale')
-              h_scale(1, 100, 1) {
+              scale(:horizontal, 1, 100, 1) {
                 visible true
               }
               
               label('Vertical Scale')
-              v_scale(1, 100, 1) {
+              scale(:vertical, 1, 100, 1) {
                 visible true
                 height_request 200
               }
@@ -1065,17 +1667,32 @@ class Tetris
     
     Model::Game::PREVIEW_PLAYFIELD_HEIGHT.times do |row|
       Model::Game::PREVIEW_PLAYFIELD_WIDTH.times do |column|
-        observe(@game.preview_playfield[row][column], :color) do |new_color|
-          color = new_color
+        preview_updater = proc do
           block = @preview_playfield_blocks[row][column]
-          block[:background_square].fill = color
-          block[:top_bevel_edge].fill = [color[0] + 4*BEVEL_CONSTANT, color[1] + 4*BEVEL_CONSTANT, color[2] + 4*BEVEL_CONSTANT]
-          block[:right_bevel_edge].fill = [color[0] - BEVEL_CONSTANT, color[1] - BEVEL_CONSTANT, color[2] - BEVEL_CONSTANT]
-          block[:bottom_bevel_edge].fill = [color[0] - BEVEL_CONSTANT, color[1] - BEVEL_CONSTANT, color[2] - BEVEL_CONSTANT]
-          block[:left_bevel_edge].fill = [color[0] - BEVEL_CONSTANT, color[1] - BEVEL_CONSTANT, color[2] - BEVEL_CONSTANT]
-          block[:border_square].stroke = new_color == Model::Block::COLOR_CLEAR ? COLOR_GRAY : color
+          if @game.show_preview_tetromino?
+            new_color = @game.preview_playfield[row][column].color
+            block[:background_square].fill = new_color
+            block[:top_bevel_edge].fill = [new_color[0] + 4*BEVEL_CONSTANT, new_color[1] + 4*BEVEL_CONSTANT, new_color[2] + 4*BEVEL_CONSTANT]
+            block[:right_bevel_edge].fill = [new_color[0] - BEVEL_CONSTANT, new_color[1] - BEVEL_CONSTANT, new_color[2] - BEVEL_CONSTANT]
+            block[:bottom_bevel_edge].fill = [new_color[0] - BEVEL_CONSTANT, new_color[1] - BEVEL_CONSTANT, new_color[2] - BEVEL_CONSTANT]
+            block[:left_bevel_edge].fill = [new_color[0] - BEVEL_CONSTANT, new_color[1] - BEVEL_CONSTANT, new_color[2] - BEVEL_CONSTANT]
+            block[:border_square].stroke = new_color == Model::Block::COLOR_CLEAR ? COLOR_GRAY : new_color
+            @next_label.text = 'Next'
+          else
+            transparent_color = [0, 0, 0, 0]
+            block[:background_square].fill = transparent_color
+            block[:top_bevel_edge].fill = transparent_color
+            block[:right_bevel_edge].fill = transparent_color
+            block[:bottom_bevel_edge].fill = transparent_color
+            block[:left_bevel_edge].fill = transparent_color
+            block[:border_square].stroke = transparent_color
+            @next_label.text = ''
+          end
           block[:drawing_area].queue_draw
         end
+      
+        observe(@game.preview_playfield[row][column], :color, &preview_updater)
+        observe(@game, :show_preview_tetromino, &preview_updater)
       end
     end
     
@@ -1121,6 +1738,16 @@ class Tetris
       
       menu_item(label: 'View') { |mi|
         m = menu {
+          check_menu_item(label: 'Show Next Block Preview') {
+            active @game.show_preview_tetromino?
+          
+            on(:activate) do
+              @game.show_preview_tetromino = !@game.show_preview_tetromino?
+            end
+          }
+          
+          separator_menu_item
+          
           menu_item(label: 'Show High Scores') {
             on(:activate) do
               show_high_score_dialog
@@ -1136,6 +1763,27 @@ class Tetris
         mi.submenu = m.gtk
       }
       
+      menu_item(label: 'Speed') { |mi|
+        m = menu {
+          rmi = radio_menu_item(nil, Model::Game::SPEEDS.first.to_s.capitalize) {
+            active true
+            
+            on(:activate) do
+              @game.send("speed_#{Model::Game::SPEEDS.first}=", true)
+            end
+          }
+          
+          Model::Game::SPEEDS.drop(1).each do |speed|
+            radio_menu_item(rmi.group, speed.to_s.capitalize) {
+              on(:activate) do
+                @game.send("speed_#{speed}=", true)
+              end
+            }
+          end
+        }
+        mi.submenu = m.gtk
+      }
+      
       menu_item(label: 'Options') { |mi|
         m = menu {
           rmi = radio_menu_item(nil, 'Instant Down on Up') {
@@ -1160,7 +1808,7 @@ class Tetris
         mi.submenu = m.gtk
       }
       
-      menu_item(label: 'Options') { |mi|
+      menu_item(label: 'Help') { |mi|
         m = menu {
           menu_item(label: 'About') {
             on(:activate) do
@@ -1176,6 +1824,7 @@ class Tetris
   def score_board
     box(:vertical) {
       label
+      @next_label = label('Next')
       @preview_playfield_blocks = playfield(playfield_width: Model::Game::PREVIEW_PLAYFIELD_WIDTH, playfield_height: Model::Game::PREVIEW_PLAYFIELD_HEIGHT, block_size: BLOCK_SIZE)
       
       label
@@ -1249,29 +1898,29 @@ class Tetris
   def start_moving_tetrominos_down
     unless @tetrominos_start_moving_down
       @tetrominos_start_moving_down = true
-      GLib::Timeout.add(@game.delay*1000) do
+      tetromino_move = proc do
         @game.down! if !@game.game_over? && !@game.paused?
-        true
+        GLib::Timeout.add(@game.delay*1000, &tetromino_move)
+        false # do not repeat
       end
+      GLib::Timeout.add(@game.delay*1000, &tetromino_move)
     end
   end
   
   def show_game_over_dialog
-    message_dialog(@main_window) { |md|
+    @game.paused = true
+    message_dialog(parent: @main_window) { |md|
       title 'Game Over!'
       text "Score: #{@game.high_scores.first.score}\nLines: #{@game.high_scores.first.lines}\nLevel: #{@game.high_scores.first.level}"
       
       on(:response) do
+        @game.restart!
         md.destroy
       end
     }.show
-    
-    @game.restart!
-    false
   end
   
   def show_high_score_dialog
-    game_paused = !!@game.paused
     @game.paused = true
     
     if @game.high_scores.empty?
@@ -1282,20 +1931,19 @@ class Tetris
       end.join("\n")
     end
     
-    message_dialog(@main_window) { |md|
+    message_dialog(parent: @main_window) { |md|
       title 'High Scores'
       text high_scores_string
       
       on(:response) do
+        @game.paused = false
         md.destroy
       end
     }.show
-    
-    @game.paused = game_paused
   end
   
   def show_about_dialog
-    message_dialog(@main_window) { |md|
+    message_dialog(parent: @main_window) { |md|
       title 'About'
       text "Glimmer Tetris\n\nGlimmer DSL for GTK\n\nElaborate Sample\n\nCopyright (c) 2021-2022 Andy Maleh"