About nixCraft

Topics

shoes - A cross-platform Windowing Applikit

Posted by Vivek Gite [Last updated: August 16, 2008]

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.

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!"
}

OR

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
}

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() } )
}

Sample output:

Loading images from the web

Fig.01: Loading images from the web

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
Fig. 02: Animated clock

Fig. 02: Animated clock

Shoes manual

The manual can be launched by typing the following command
$ shoes -m

Further readings:

E-mail this to a Friend    Printable Version

You may also be interested in other helpful articles:

Leave a Reply

We encourage your comments, and suggestions. But please stay on topic, be polite, and avoid spam. Thank you very much for stopping by our site!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tags: , , , , , , , , , ,

Copyright © 2004-2008 nixCraft. All rights reserved - TOS/Disclaimer - Privacy policy - Powered by Open source software.