shoes – A cross-platform Windowing Applikit

Shoes is a very informal graphics and windowing toolkit. It’s for making regular old apps that run on Windows, Mac OS X and Linux. It’s a blend of my favorite things from the Web, some Ruby style, and a sprinkling of cross-platform widgets. Shoes uses Ruby as its interface language.

ADVERTISEMENTS



It borrows a few things I like from the web:

=> Hyperlinks and URLs within Shoes and to the web.

=> Simple text layout — though Shoes eschews floats.

=> Images and colors in the layout and in the background.

=> Margin and padding.

=> Resizable layouts.

How do I install shoes ?

First, get source code, enter:

$ cd /tmp

$ wget http://shoooes.net/dist/shoes-0.r925.tar.gz



Untar it:

$ tar -zxvf shoes-0.r925.tar.gz

$ cd shoes-0.r925

Now install required stuff under Debian / Ubuntu Linux:

$ sudo apt-get install libcairo2-dev libpixman-1-dev libpango1.0-dev libungif4-dev libjpeg62-dev libgtk2.0-dev vlc libvlc0-dev libsqlite3-dev libcurl4-openssl-dev ruby1.8-dev rake

If you are using RHEL / CentOS / Fedora Linux, enter:

# yum install giflib-devel cairo-devel libpixman-devel pango-devel libjpeg-devel gtk2-devel sqlite-devel vlc-devel libcurl-devel ruby-devel

Install it:

$ make

$ sudo make install

Sample output:

build options: shoes raisins (0.r925) [i486-linux] CC = cc RUBY = /usr OPTIONS = installing executable file to /usr/local/bin installing libraries to /usr/local/lib/shoes

See READM for for more information.

Hello World application

Sample hello.rb

Shoes. app { para strong ( "Hello, " ) , " world!" } Shoes.app { para strong("Hello, "), " world!" }

OR

Shoes. app ( :width => 200 , :height => 50 , :title => "Hi, Guest!" ) { para strong ( "Hello, " ) , " world!" @buttonQuit = button "Exit" @buttonQuit . click { exit ( ) } } Shoes.app (:width => 200, :height => 50, :title => "Hi, Guest!") { para strong("Hello, "), " world!" @buttonQuit = button "Exit" @buttonQuit.click { exit() } }

Run it as follows:

$ /usr/local/bin/shoes hello.rb

Another example:

Shoes. app { name = ask ( "Please, enter your name:" ) para "Hello, " , name } Shoes.app { name = ask("Please, enter your name:") para "Hello, ", name }

You can include images from web or create a simple links / urls:

Shoes. app ( :title => "My App" ) { image "http://theos.in/wp-content/uploads/2008/06/honda-fcx-clarity-car-photo.jpg" para ( link ( "Info" ) . click { alert ( "The FCX Clarity, which runs on hydrogen and electricity, emits only water and none of the noxious fumes believed to induce global warming." ) } ) para ( link ( "Exit" ) . click { exit ( ) } ) } Shoes.app (:title => "My App" ) { image "http://theos.in/wp-content/uploads/2008/06/honda-fcx-clarity-car-photo.jpg" para( link("Info").click{ alert ("The FCX Clarity, which runs on hydrogen and electricity, emits only water and none of the noxious fumes believed to induce global warming.") }) para( link("Exit").click{ exit() } ) }

Sample output:



Sample applications

You can find sample application in /tmp/shoes-0.r925/samples/ directory. Here is animated clock program:

# # Shoes Clock by Thomas Bell # posted to the Shoes mailing list on 04 Dec 2007 # Shoes. app :height => 260 , :width => 250 do @radius , @centerx , @centery = 90 , 126 , 140 animate ( 8 ) do @time = Time . now clear do draw_background stack do background black para @time . strftime ( "%a" ) , span ( @time. strftime ( " %b %d, %Y " ) , :stroke => "#ccc" ) , strong ( @time. strftime ( "%I:%M" ) , :stroke => white ) , @time . strftime ( ".%S" ) , :align => "center" , :stroke => "#666" , :margin => 4 end clock_hand @time . sec + ( @time. usec * 0.000001 ) , 2 , 30 ,red clock_hand @time . min + ( @time. sec / 60.0 ) , 5 clock_hand @time . hour + ( @time. min / 60.0 ) , 8 , 6 end end def draw_background background rgb ( 230 , 240 , 200 ) fill white stroke black strokewidth 4 oval @centerx - 102 , @centery - 102 , 204 , 204 fill black nostroke oval @centerx - 5 , @centery - 5 , 10 , 10 stroke black strokewidth 1 line ( @centerx, @centery - 102 , @centerx , @centery - 95 ) line ( @centerx - 102 , @centery , @centerx - 95 , @centery ) line ( @centerx + 95 , @centery , @centerx + 102 , @centery ) line ( @centerx, @centery + 95 , @centerx , @centery + 102 ) end def clock_hand ( time, sw, unit= 30 , color=black ) radius_local = unit == 30 ? @radius : @radius - 15 _x = radius_local * Math . sin ( time * Math ::PI / unit ) _y = radius_local * Math . cos ( time * Math ::PI / unit ) stroke color strokewidth sw line ( @centerx, @centery , @centerx + _x, @centery - _y ) end end # # Shoes Clock by Thomas Bell # posted to the Shoes mailing list on 04 Dec 2007 # Shoes.app :height => 260, :width => 250 do @radius, @centerx, @centery = 90, 126, 140 animate(8) do @time = Time.now clear do draw_background stack do background black para @time.strftime("%a"), span(@time.strftime(" %b %d, %Y "), :stroke => "#ccc"), strong(@time.strftime("%I:%M"), :stroke => white), @time.strftime(".%S"), :align => "center", :stroke => "#666", :margin => 4 end clock_hand @time.sec + (@time.usec * 0.000001),2,30,red clock_hand @time.min + (@time.sec / 60.0),5 clock_hand @time.hour + (@time.min / 60.0),8,6 end end def draw_background background rgb(230, 240, 200) fill white stroke black strokewidth 4 oval @centerx - 102, @centery - 102, 204, 204 fill black nostroke oval @centerx - 5, @centery - 5, 10, 10 stroke black strokewidth 1 line(@centerx, @centery - 102, @centerx, @centery - 95) line(@centerx - 102, @centery, @centerx - 95, @centery) line(@centerx + 95, @centery, @centerx + 102, @centery) line(@centerx, @centery + 95, @centerx, @centery + 102) end def clock_hand(time, sw, unit=30, color=black) radius_local = unit == 30 ? @radius : @radius - 15 _x = radius_local * Math.sin( time * Math::PI / unit ) _y = radius_local * Math.cos( time * Math::PI / unit ) stroke color strokewidth sw line(@centerx, @centery, @centerx + _x, @centery - _y) end end

Shoes manual

The manual can be launched by typing the following command

$ shoes -m

Further readings: