View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide
Hotspots: Admin Pages | Turn-in Site |
Current Links: Cases Final Project Summer 2007

GUI Images

This tutorial will cover how to create a small static image.



First, lets go into our application model and create a
resouces
protocol under the class tab. This will serve the purpose of holding our menus and images. Next, copy and paste the following code into a blank method:

image
	"UIMaskEditor new openOnClass: self andSelector: #colorsImage"

	
	^CachedImage on: (Image extent: 10@10 depth: 3 bitsPerPixel: 4 palette: (Graphics.MappedPalette withColors: 
((Core.Array new: 5) at: 1 put: Graphics.ColorValue blue; at: 2 put: Graphics.ColorValue magenta; at: 3 put:
Graphics.ColorValue white; at: 4 put: (Graphics.ColorValue scaledRed: 3693 scaledGreen: 3693 scaledBlue: 3693); at: 5 put:
(Graphics.ColorValue scaledRed: 0 scaledGreen: 4240 scaledBlue: 0); yourself)) usingBits: #[51 51 51 51 51 0 0 0 50 35
68 50 35 0 0 0 50 35 68 50 35 0 0 0 51 51 51 51 51 0 0 0 49 19 34 50 35 0 0 0 49 19 34 50 35 0 0 0 51 51 51 51 51 0 0
0 50 35 0 50 35 0 0 0 50 35 0 50 35 0 0 0 51 51 51 51 51 0 0 0])


This should create a standard image icon. Save the method and now you should have another tab called
Visual
under that resource. Click this tab which should show you what looks like a small example image. From here, you can click edit to physically edit the image (the tool is a lot like ms paint) or you can sort through the code and edit the image by hand. To resize using the Image Editor, Click the Image menu option and click resize. Then, using the resize image tool, drag a rectangle of the image size you wish to have. All new pixels will appear to be black.



Now lets do something with this image. How about apply it to a button?! This makes sense to help develop a user-friendly interface. So how about we adjust the image to look something more like:



printImage
	"Tools.UIMaskEditor new openOnClass: self andSelector: #printImage"

	
	^CachedImage on: (Image extent: 14@14 depth: 3 bitsPerPixel: 4 palette: (Graphics.MappedPalette withColors: 
(#(#(#{Graphics.ColorValue} #scaledRed:scaledGreen:scaledBlue: #(0 0 0)) #(#{Graphics.ColorValue}
#scaledRed:scaledGreen:scaledBlue: #(8191 8191 8191)) #(#{Graphics.ColorValue} #scaledRed:scaledGreen:scaledBlue: #(4227 4227
4227)) #(#{Graphics.ColorValue} #scaledRed:scaledGreen:scaledBlue: #(5548 5548 5548)) #(#{Graphics.ColorValue}
#scaledRed:scaledGreen:scaledBlue: #(0 4227 0)) ) collect: [:each | (each at: 1) value perform: (each at: 2) withArguments:
(each at: 3)])) usingBits: #[17 17 17 17 17 17 17 0 17 17 17 17 17 17 17 0 17 17 17 0 0 0 1 0 17 17 16 17 17 17 1 0 17 17 16
17 17 16 17 0 17 16 1 17 17 0 0 0 17 3 1 17 17 0 48 0 16 0 0 0 0 0 0 0 16 51 51 51 51 48 32 0 16 51 51 51 52 64 32 0
16 51 51 51 52 64 32 0 17 3 51 51 51 48 1 0 17 0 0 0 0 0 17 0 17 17 17 17 17 17 17 0])


If you take a look at this image, it looks a lot like a printer. It is actually the image we created for our "Print" button. So how can we take this and install it on a button? First open up our GUI Editor and make a button. Then, in the GUI Painter Tool window, select the button and type
#printImage
in the Message: text box. To set the action of the button type in a method of the application model's class. Then select the checkbox "Label Is Image". This should link the image directly onto that button.

Hopefully this helped you out a little bit with displaying button images, drawing images on a canvas is slightly more difficult and you can explore our previous semester's project if you download the DesignCenterPackage from the store. To run type "DCenter.DesignCenter open" into the workspace and press ctrl+d or "do-it" (you need both the squeak package and the double-buffering package). All card, class, package, note, and association images are drawn directly on the canvas in their respective classes using the displayOn method (cardImage, classImage, association, noteImage, package). Good luck!!!












This page was created by Brian O'Connor

Links to this Page