2.5 Adding text and graphics

In this step you will discover how to add images, text, and graphical objects (such as shapes and lines) to an interface.

All of these objects can be accessed from the Insert menu.

For an image to be displayed in the Interface Builder, it must have either the .gif or .jpg extension, and be placed within the images directory in the eSim Builder installation directory. Your images can be placed anywhere within this directory, and it is recommended that you keep images for each interface together in clearly named sub-folders so that you can easily find them again.

First you can see how to put one of the images provided with the interface Builder on to your interface.

If you open the Insert menu and select Simple Image, when you move your mouse over the interface, you will see the crosshair cursor and can place the image object on the interface (it will have the words 'Uninitialised image' written on it). You can get the image object to display an image by setting the imagePath property (click in the box to the right of the word 'imagePath') and select an image (if you select an image that is not below the images folder, you will be asked to save it there).

Set your image to display the circuit diagram that can be found in images/ohmslaw/ohmslawcircuit.gif and move it to an appropriate place on your interface. The right-click menu has two features - Bring to Front and Send to Back - that you will find useful for arranging objects on the interface.

Notice that the image path is displayed on top of the image on the interface - don't worry, this disappears as soon as you run your simulation.

Adding your own images is also easy. Download the following three images into the same directory (images/ohmslaw/ohmslawcircuit.gif).

meter.jpg

high.jpg

low.jpg

Add another simple image to your interface and set it to display meter.jpg. You will see that the analogue meter will fit nicely within this image. You can also add images to buttons - by setting the imagePath property in the same way. Add the images for high and low resistance to the two action buttons.

Add text to your interface by opening the Insert menu and selecting Fixed Text Area. To set the text, just display the property sheet (this can also be done by double clicking on an object) and click on the box to the right of the text property to display the text editor where you can type any text you desire.

Shapes and lines can be added to the interface by opening the Insert menu, selecting the shape you want to add, and clicking on the interface (some shapes will be added directly, for others, you will have to click again to determine the end point of the shape).

Add some text to your interface to define the voltage, and a rectangle as a border around the whole interface. Explore the properties of these objects to see how you can alter the way they look. You can also add any additional shapes, images or text that you like until you're happy with your simulation.

Now would be a good time to save your interface if you haven't do so already. It will look something like this:

You're ready to make your simulation into an applet! This will be covered in the final step.