Nobody Knows Shoes

Winnipeg.rb Talk - January 27th 2011

Shoes

Secret

Shoes is a cross-platform toolkit for writing graphical apps easily and artfully using Ruby.

Shoes includes:

  • Web-style layouts, styling and URLs
  • GUI elements: buttons, textfields, dropdowns, radios, etc
  • 2D drawing primitives (and animation!)
  • Mouse and keyboard polling / events

The Progenitor of Shoes

_why

Shoes was originally conceived and coded by _why the lucky stiff as part of Hackety Hack (which we’ll look at later).

Other _why creations you may know:

  • Hpricot - HTML/XML Parser
  • Markaby - Markup as Ruby
  • Syck - YAML Parser
  • Camping - Web Micro-framework

Shoes is now maintained by Team Shoes, a group of friendly Rubyist who can be found on the Shoes librelist or #shoes on freenode.

Baby Steps on Ruby Shoesday

An empty Shoes application:

 Shoes.app do
   # You can do anything. I really believe in you!
 end

This here app contains a button with a click block:

 Shoes.app :title => 'Clickity Boom', :width => 300, :height => 300 do
   button 'I Dare You' do
     alert 'Booyakasha'
   end
 end

Stacks and Flows

Layout is handled using boxes called stacks and flows:

Let us silently judge these two apps:

 Shoes.app do                     Shoes.app do
   flow do                          stack do 
     button 'One'                     button 'One'
     button 'Two'                     button 'Two'
     button 'Buckle Shoe'             button 'Buckle Shoe'
   end                              end
 end                              end

Nested Stacks and Flows

Stacks_flows

Note: Arrows are not to scale.

Para Stands for Paragraph

Text is output with para:

 Shoes.app :title => 'Stacks' do
   stack do 
     para 'We are a way for the cosmos to know itself.'
     para 'Mutiple ', 'arguments ', 'are stitched ', 'together.'
   end
 end

Inline styles can be applied:

 Shoes.app :title => 'Q and A' do
   stack do
     para strong('Q. '), 'Do you believe in free will?'
     para em(strong('A. '), 'Nah, dream is destiny.')
   end
 end

Styling Text

Paragraphs can be styled.

Styles can be set using an options hash:

   para 'Lorizzle ipsum dolizzle sizzle amizzle.', :stroke => red

They can also be applied on a saved para object:

   @text = para 'Learn to Question. Question to Learn.'
   @text.stroke = blue
   @text.style(:font =>'Times 12px', :underline => 'single')

Your Users Have Fingers

Elements like edit_box and edit_line allow for user input:

 Shoes.app :height => 250, :width => 200 do
   stack :margin => 10 do
     @edit = edit_line :width => '90%' do 
       # Block triggered when content changes.
       @para.text = @edit.text
     end
     @para = para ''
     button 'what?' do
       alert 'I SAID: ' + @edit.text
     end
   end
 end

Images and You

Images are displayed using image.

Images can accept an optional click block and their source path can be changed at any time.

 Shoes.app :title => 'Soda Pups', :height => 375, :width => 610 do
   flow do
     @img = image 'pup.png'
     image 'pup.png' do
       @img.path = 'surprised_dog.jpg'
     end
   end
 end

Shoes.url and link

 class ImageViewer < Shoes
   url '/', :index
   url '/stone', :stone
 
   def index
     stack :margin => 20 do
       image 'sign.jpg', :click => '/stone'
       para link('Nothing is set in stone...', :click => '/stone')
     end
   end
   
   def stone
     stack :margin => 20 do
       image 'nothing.jpg', :click => '/'
       para link('If you hit this sign...', :click => '/')
     end
   end
 end
 
 Shoes.app :title => 'Navigating a Sea of URL', :height => 425, :width => 550

2D Primitives

Drawing with Shoes is a snap.

 Shoes.app do
   fill rgb(0, 0.6, 0.9, 0.05)
   stroke rgb(0, 0.6, 0.9, 0.5)
 
   30.times do
     star(rand(self.width), rand(self.width), (5..7).rand)
   end
 
   fill rgb(0.6, 0, 0.8, 0.1)
   stroke rgb(0.6, 0, 0.8, 0.9)
 
   35.times do
     arrow(rand(self.width), rand(self.width), (20..100).rand)
   end
 end

Animation

Animation blocks re-draw at a target FPS.

 Shoes.app do
   trails = [[0,0]] * 60
   
   stroke rgb(0x10, 0x50, 0x50, 0.7)
   fill rgb(0x30, 0xFF, 0xFF, 0.6)
   
   animate(24) do 
     clear do
       trails.shift
       trails << self.mouse[1,2]
       trails.each_with_index do |(x, y), i|
           oval :left => x, :top => y, :radius => i, :center => true
       end
     end
   end
 end

Also see: Hungry Boids

Hackety Hack

Hackety

Hackety Hack will teach you the absolute basics of programming from the ground up.

It was built using Shoes. It supports turtle graphics!

Resources

Rainbow of Shoes

The Shoes code-base is a tricky beast.

For Windowing, Shoes includes support for GTK (Windows/Linux) and Cocoa (OSX). Shoes isn’t pure Ruby either; there’s C under the hood, along with some Objective C for good measure.

The Shoes Team is experimenting with new implementions:

There is More to Learn

There are many things we didn’t cover:

Resources for Sneakers*

*Hackers who code in Shoes are Sneakers.

He Who Presented

3350514518_8ca9143bbd_b

Kyle Geske

  • Hardware/firmware engineer turned web dev.
    (A ten year drift through higher level abstractions.)
  • Instructor at Red River College
    (Ruby/Rails, PHP, HTML/CSS, Philosophy of Time Travel)
  • Artist w/ Printmaking Studio @ Artspace

V-World Avatars