Tutorials‎ > ‎

[Shoes] Create 'shape maker' program

posted Jun 19, 2012, 4:47 AM by William Surya Permana   [ updated Aug 15, 2016, 11:25 PM by Surya Wang ]

Shoes

Shoes is a cross-platform toolkit for writing graphical apps easily and artfully using Ruby. Same as Ruby, Shoes is focus on simplicity and productivity. Shoes is designed to be easy and straightforward without losing power. Shoes can runs on multi-platforms like Microsoft Windows, Apple Mac OS X, Linux (GTK+), and BSD, using the underlying technologies of Cairo and Pango. With Shoes, you can also create Web-like Desktop apps.

Components and Shapes

By using shoes, we can GUI components and shape to our desktop application. List of components which supported in Shoes by default are:
Component name Sample code Output
button button 'Click me' A button with 'Click me' as its caption
check check; inscription 'Tick me' A check box labelled 'Tick me'
edit_box edit_box 'What do you think?' A textarea with 'What do you think?' as its text
edit_line edit_line 'Search' A textbox with 'Search' as its text
image image 'shoes.png' An image from file named 'shoes.png' in source code directory
list_box list_box:items=>['Grapes','Apples'] A combo box with 'Grapes' and 'Apples' as its choices
progress progress A progress bar
radio radio; inscription 'Option 1' A check box labelled 'Option 1'

For shapes, we can use these following codes:
Shape Sample code Output
line line 0,0,100,100 A line starting from (0,0) to (100,100)
rect rect 0,0,100,100 A rectangle with (0,0) as its upper left corner and (100,100) as its bottom right corner
oval oval 0,0,100 An circle with (0,0) as its upper left corner with 100 pixels in radius
arc arc 50,50,100,100,0,3.14 An half circle (3.14 or one pi) with (0,0) as its upper corner and (100,100) as its bottom right corner

Output

Using Shoes, we can make a shape maker program like this:

There are 3 main buttons. The first one is to hide or show the draw tools. The second one is to clear the canvas. And the last is to close the program. Using the draw tool, we can create line, oval, or rectangle using the parameter provided. We can also change the line weight, stroke and fill color.

Codes

To create program like that, we can use this code:
Shoes.app :width=>640, :height=>480, :title=>'Let\'s make shape!' do def draws flow do button 'Show / hide draw command', :width=>250 do @menu.toggle end button 'Clear canvas', :width=>250 do clear draws end button 'Close program', :width=>-500 do exit end end @menu = flow :width=>250 do background whitesmoke flow do flow :width=>100 do inscription 'Shape', :width=>100 end flow :width=>-100 do inscription ': ' @shape = list_box :items => ['Line','Rectangle','Oval'],:width=>75, :choose => 'Line' do if @shape.text == 'Oval' @divradius.show @divend.hide else @divradius.hide @divend.show end end end end flow do flow :width=>100 do inscription 'Line weight', :width=>100 end flow :width=>-100 do inscription ': ' @weight = edit_line '1', :width=>40 end end @divradius = flow :hidden=>true do flow :width=>100 do inscription 'Radius:', :width=>100 end flow :width=>-100 do inscription ': ' @rad = edit_line '100', :width=>40 end end flow do flow :width=>100 do inscription 'Start position:', :width=>100 end flow :width=>-100 do inscription ': ' inscription 'X: ' @x1 = edit_line '250', :width=>40 inscription 'Y: ' @y1 = edit_line '250', :width=>40 end end @divend = flow do flow :width=>100 do inscription 'End position:', :width=>100 end flow :width=>-100 do inscription ': ' inscription 'X: ' @x2 = edit_line '350', :width=>40 inscription 'Y: ' @y2 = edit_line '350', :width=>40 end end flow do flow :width=>100 do inscription 'Stroke Color', :width=>100 end flow :width=>-100 do inscription ':' @stroke = para ' ', :fill=>black inscription ' ' button '...' do @stroke.style :fill=>ask_color('Color') @stroke.style :fill=>black if @stroke.style[:fill] == nil end end end flow do flow :width=>100 do inscription 'Fill Color', :width=>100 end flow :width=>-100 do inscription ':' @fill = para ' ', :fill=>gray inscription ' ' button '...' do @fill.style :fill=>ask_color('Color') @fill.style :fill=>black if @fill.style[:fill] == nil end end end flow do button 'Add this drawing to canvas', :width=>250 do strokewidth @weight.text.to_i stroke @stroke.style[:fill] fill @fill.style[:fill] if @shape.text == 'Line' line @x1.text.to_i, @y1.text.to_i, @x2.text.to_i, @y2.text.to_i elsif @shape.text == 'Rectangle' rect @x1.text.to_i, @y1.text.to_i, @x2.text.to_i, @y2.text.to_i elsif @shape.text == 'Oval' oval @x1.text.to_i, @y1.text.to_i, @rad.text.to_i end end end end end draws end

Explaination

In this code, we create a 640x480 window which in-resizable with “Let’s Make Shape!” as its title. Next, we create a function named "draws", which will fill the windows. The program will call this function when started or when user click "Clear canvas" button.


In line 4-15, we create a flow which contains three buttons. First button will toggle the visibility of a flow (floating div) named "menu". The second will clear the screen and recall the "draws" function. The last button will close the program (exit).

Line 16-120 we create an other flow named "menu" with whitesmoke color as its background. Inside the flow we create a combo box named "shape" containing option "Line", "Oval", and "Rectangle". If the text of the "shape" now is "Oval" then show flow named "divradius" and hide flow named "divend". If not, then hide flow named "divradius" and show flow named "divend". We also create a textbox named "weight".  

Next we create two flows (named "Divradius" and "Divend"). "Divradius" which is hidden by default contains textbox named "rad" for entering the radius value. We also create a unnamed flow which always visible contains two textbox named "x1" and "y1" for entering the starting point. "Divend" contains two textbox named "x2" and "y2" for entering the ending point. 

We also create another unnamed flow which always visible for entering fill and stroke color, in line 79-104. In this code, we use a para (label) named "stroke" and "fill" respectively to show the color. When user click button "…", the program will ask for color and set it as para fill (background) color.

Code in line 107-118 is the main drawing function. It sets the strokewidth with text value from "weight" textbox, converted to integer; sets the stroke color with the fill color of "stroke" label; sets the fill color with the fill color of "fill" label, and lastly checks the text value of combo box "shape", and draws the shape accordingly.

This is the end of the tutorial. Hope you can understand how to create a simple paint/shape program in Ruby language using Shoes GUI toolkit.
ċ
paint.rb
(3k)
William Surya Permana,
Jun 19, 2012, 4:47 AM