Juixe Techknow

This tutorial describes some of the basic graphic capabilities of the Shoes Ruby-based mini-GUI toolkit.

Working with complicated graphics, it is often a good idea to work around a given point of origin and then move, rotate, or scale the image as required. Like many GUI toolkits, Shoes origin is located at the top left corner of the canvas.

Rotate
You can pass a integer degree to the rotate method to rotate the canvas that many degrees. The canvas will rotate counter clockwise around the the top left corner. Also note that the degrees it rotates increments with each call from its original position, meaning that if you call rotate one degree twice the canvas would be rotate 2 degrees. Basically, the rotate method rotates the canvas n degrees counter clockwise and calling rotate again will move the canvas a few degrees more.

Translate
The translate method moves the whole canvas to a xy coordinate. You can basically move the whole canvas up, down, right, or left. Again, the final location of the canvas is based on the sum of the translations. Each translation is based on the current position of the canvas.

Scale
If you want to increase the image by a factor of 2 you can use the scale method. The scale takes in a decimal value, for example 0.5 will shrink the image in half and 2.0 will double the size of the image. Again, much like rotate and translate, each time you scale an image it will do so from the current size, not the original size.

Skew
The skew method stretches the canvas in the x and y direction.

Example – Rotating Star
Putting what we have learned in an example, we can create a triangle, translate it to the center of the canvas, and have it rotate around that point.

[source:ruby]
Shoes.app :width => 600, :height => 500 do
# Move canvas to center of screen
translate width/2, height/2
animate(24) do
clear do
# Rotate one degree at each frame
rotate 1
# Scale the image up or down
scale((0.8..1.2).rand)
# draw triangle…
star 10, 10, 3
end
end
end
[/source]

There are more Shoes GUI tutorials and code samples here.

Technorati Tags: shoes, gui, tookit, ruby, ui, graphics, gradient, color

This tutorial describes some of the basic graphic capabilities of the Shoes Ruby-based mini-GUI toolkit.

With Shoes you can set the fill and stroke color for the different shapes you draw. To start off with some examples using color, here is how to turn the fill and stroke color off. You can disable the fill color for shapes by invoking the nofill method. To remove the stroke, or edge, of a shape invoke the nostroke method.

You can set the fill and stroke color for a shape or the background color in general by invoking fill, stroke, background methods, respectively. You can set an RGB color with the alpha level for each of the aforementioned methods. In addition to the rgb method, you can use the gray, green, red, blue method if are only using a shade of that color.

[source:ruby]
Shoes.app :width => 600, :height => 600 do
background green(0.9)
fill rgb(1.0, 0.0, 0.0, 1.0)
stroke rgb(0.0, 0.0, 1.0, 1.0)
rect 10, 10, 50, 50
nofill
oval 200, 150, 30, 30
end
[/source]

In addition to the adding color to the stroke, you can also specify the width with the strokewidth method.

You can also do some kewl effects with gradients. The fill, stroke, and background methods also accept gradients. Here is an example an example using gradients on the stroke and fill of a rectangle.

[source:ruby]
Shoes.app :width => 600, :height => 600 do
strokewidth 50
stroke “#FFF”..”#03C”, :radius => 40, :angle => 45
fill “#03C”..”#FFF”, :radius => 40, :angle => 90
rect width/2 – 200, height/2 – 200, 400, 400
end
[/source]

To do gradients you need to specify a color range. The “#FFF”..”#03C” is a color range from white to some blueish color. You also need to specify the radiums and angle of the gradient.

There are more Shoes GUI tutorials and code samples here.

Technorati Tags: shoes, gui, tookit, ruby, ui, graphics, gradient, color

This tutorial describes some of the basic graphic capabilities of the Shoes mini-GUI toolkit.

Arrow
The Shoes mini-GUI toolkit has a arrow method that draws a simple arrow pointing to the right. You can pass in the location of the tip of the arrow in the form of xy coordinates. The arrow method takes a third parameter to indicate the size.

[source:ruby]
# arrow x, y, size
arrow 100, 100, 50
arrow 100, 100, 100
[/source]

Star
In addition to arrows, you can draw stars with the aptly named star method. Like most of the methods that draw method accepts xy coordinates for the position of the star. The location given as xy coordinates are to the left side of the star. In addition to the location, the star method also accepts two additional and optional integers, one for the number of sides and the other to indicate the size of the star.

[source:ruby]
# star x, y, sides, size
star 0, 0, 31, 100
[/source]

As of this writing, the star method does not draw nice looking star with even number of shapes. You can only draw a star with odd number of sides. A star with 3 sides draws a triangle.

Oval
The oval function can be used to draw circle or oval shapes. The oval method accepts an a pair of integers to indicate the shape’s x, y location. The location given is to the top left side of the oval. The oval method also accepts a third option to indicate the diameter of the circle.

[source:ruby]
oval x, y, dimeter
oval 10, 20, 30, 40
[/source]

To draw oval shapes the oval function accepts a fourth argument. When the fourth argument is given, the third argument indicates the width of the oval and the fourth argument indicates the height.

Rect
As you can imagine, you can use the rect method to draw rectangles. The rect method accepts two arguments to indicate the x, y location of the top left side corner of the rectangle. The rect method also required two additional arguments to specify the width and height.

[source:ruby]
# rect x, y, width, height
rect 0, 0, 20, 20
[/source]

There are more Shoes GUI tutorials and code samples here.

Technorati Tags: shoes, gui, tookit, ruby, ui, graphics

I’ve already mentioned the Shoes, the mini Ruby-based GUI Toolkit, and gone into detail about its 2D graphics capabilities. In this post I will just provide some additional example of animated graphics developed with Shoes.

Shoes Bubbles
This sample application follows the mouse when it hovers around the application window and draws growing bubbles. The bubbles have scan lines thanks to the mask method.

Here is the source…

[source:ruby]
# Array of x,y coordinates for bubbles
bubbles = [[0, 0]] * 30

# Bubbles Shoes application
Shoes.app :width => 537, :height => 500 do
# 24 frames/second
animate(24) do
bubbles.shift
bubbles << self.mouse[1, 2]
clear do
# Create pinkish linescan
(500/5).times do |i|
strokewidth 2
stroke rgb(1.0, 0.5, 1.0, 1.0)
line 0, i * 5, 537, i * 5
end
# Mask is expensive
mask do
# Create an oval bubble
bubbles.each_with_index do |(x, y), i|
oval x, y, 120 – (i * 5), 120 – (i * 5)
end
end
end
end
end
[/source]

Shoes Flower
This is an animation of two concentric sets of circles moving in different directions. As the circles move they change size and color.

Here is the code…

[source:ruby]
degree = 0
color = 0
size = 0

Shoes.app :width => 537, :height => 500 do
mx, my = (500/2).to_i, (537/2).to_i
animate(24) do
clear do
# Manage color
nostroke
background rgb(1.0, 0.5, 1.0, 1.0)

# Update some variables
degree += 1
size += 1
degree = 0 if(degree >= 360)
size = 0 if(size >= 100)
color = 0.0 if(color >= 1.0)
color += 0.05 if(degree % 10 == 0)

# Draw inner circle
fill red(color)
10.times do |i|
current_size = 100 + size
d = to_radians(i * 60 + degree)
rx = Math::cos(d) * 100
ry = Math::sin(d) * 100
center_x = -current_size/2 + rx + mx
center_y = -current_size/2 + ry + my
oval center_x, center_y, current_size, current_size
end

# Draw outer circle
fill blue(color)
20.times do |i|
current_size = 50 + size
d = to_radians(i * 30 – degree)
rx = Math::cos(d) * 150
ry = Math::sin(d) * 150
center_x = -current_size/2 + rx + mx
center_y = -current_size/2 + ry + my
oval center_x, center_y, current_size, current_size
end
end
end
end

# Convert degrees to radians
def to_radians(deg)
deg * Math::PI / 180
end
[/source]

Technorati Tags: ruby, shoes, gui, toolkit, 2d, graphics

Unlike some developers I know and work with, I have a very vanilla installation of Firefox. I know some Firefox enthusiasts that have a ton of add on extensions like Greasemonkey, delicious, enhanced tabs, and what not. Up until recently I have used only one extension, FireBug, but I have recently discovered ScreenGrab! ScreenGrab lets you create PNG screen shots of the current web page on your browser.

The screen shot can be of the entire web page, the current visible portion, or of a selected portion. Once you install ScreenGrab and restart FireFox you will find a new icon on the lower right of the browser window. Click it if you like to capture a current web page. ScreenGrab does not capture any of the decoration of the browser, just the page content itself. You can also capture a screenshot by right clicking on a page and select the ScreenGrab menu item.

Technorati Tags: firefox, ff, browser, screengrab, screenshot, screencast, plugin, extension, development, tools

I think that some of the best Java Posse rants happens when they do a live show. The following is my transcription from their live show at JavaZone 2007.

Top reasons indicating you might be in a broken project…

• It adds three months to add a checkbox on a web UI
• Everything starts to look like it would be quicker to rewrite
• Everyone on the project has architect on their business card
• Conversations always start with ‘oh that, that is really simple…’ followed by a thirty minute discussion of what is required
• You time your life around The Build
• The GUI is written in AWT or HTML 3.2
• The GUI is written in something you wrote yourself
• The Project X is a homegrown web framework
• Someone just added five more hours of meetings to your day because the release is late
• The guy that is supposed to train you, throws a file full of notes, and runs away
• The lines of XML outnumber the lines of Java 10 to 1
• You ask about JUnit tests and you get blank stares from everyone

Technorati Tags: java, project, management, process, javaposse, funny, comedy