Displaying Images
Displaying Images
When you're using Shoes, displaying images in Shoes is as simple as using the image method. Images can be displayed in any stack or flow which, if you remember, are the components of the Shoes layout manager. The image will take up space in the stack or flow in accordance to the dimensions of the image. For example, images will take up horizontal space in a flow (just like a button or para will) and, if necessary, the flow will wrap further images down to the next line.
Resizing Images
Images, like all other Shoes elements, can take :width and :height parameters. These width and height parameters follow the same rules as used with other elements. If, for example, you wanted to make an image span the entire available horizontal space, you could do so simply by using the parameter :width => '100%'. If you wanted that image to be 300 pixels, all you'd need to do is use :width => 300 as a parameter.
It's important to note that when resizing images, the proportions of the images are not preserved. This isn't really any different than what happens when you resize an image for any other purpose. How many times have you seen a screensaver of someone's Great Dane that looked suspiciously like a Bulldog? That image is the result of problems with the proportion. You can stretch an image out horizontally, but it won't automatically be stretched vertically, making the image look "squashed."
The filename of an image can be used as the background for any stack or flow. The image will be tiled to take up all the space in the stack or flow. Note that when using the background method, always use it first thing in the stack or flow. If the background method is called after other elements, the background will paint over those other elements.
You can pass the filename of an image to the image or background method, but you can also pass a URL. Shoes will automatically fetch that image from the Web, save it to a temporary file and display it. The first time you run a program with images from a URL, you'll notice a small delay when the program starts. However, starting the program again will be much faster, because any further references to the same URL will get the cached version of the image.
When you're using Shoes, displaying images in Shoes is as simple as using the image method. Images can be displayed in any stack or flow which, if you remember, are the components of the Shoes layout manager. The image will take up space in the stack or flow in accordance to the dimensions of the image. For example, images will take up horizontal space in a flow (just like a button or para will) and, if necessary, the flow will wrap further images down to the next line.
Shoes.app :width => 500, :height => 260 do
image 'shoes-logo.png'
image 'shoes-logo.png'
image 'shoes-logo.png'
image 'shoes-logo.png'
end
Resizing Images
Images, like all other Shoes elements, can take :width and :height parameters. These width and height parameters follow the same rules as used with other elements. If, for example, you wanted to make an image span the entire available horizontal space, you could do so simply by using the parameter :width => '100%'. If you wanted that image to be 300 pixels, all you'd need to do is use :width => 300 as a parameter.
It's important to note that when resizing images, the proportions of the images are not preserved. This isn't really any different than what happens when you resize an image for any other purpose. How many times have you seen a screensaver of someone's Great Dane that looked suspiciously like a Bulldog? That image is the result of problems with the proportion. You can stretch an image out horizontally, but it won't automatically be stretched vertically, making the image look "squashed."
Shoes.app :width => 300, :height => 460 do
stack do
para "Normal sized image"
image "shoes-logo.png"
para "\n\nStretched image"
image 'shoes-logo.png', :width => '100%'
end
end
The filename of an image can be used as the background for any stack or flow. The image will be tiled to take up all the space in the stack or flow. Note that when using the background method, always use it first thing in the stack or flow. If the background method is called after other elements, the background will paint over those other elements.
Shoes.app :width => 350, :height => 310 do
background 'background.jpg'
para "This is a paragraph that will ",
"be displayed over the background image.",
"A different color was selected to make ",
"the text stand out better against the ",
"background", :stroke => yellow
end
You can pass the filename of an image to the image or background method, but you can also pass a URL. Shoes will automatically fetch that image from the Web, save it to a temporary file and display it. The first time you run a program with images from a URL, you'll notice a small delay when the program starts. However, starting the program again will be much faster, because any further references to the same URL will get the cached version of the image.
Shoes.app :width => 400, :height => 200 do
image 'http://www.google.com/intl/en_ALL/images/logo.gif'
end
Source...