Customizing Easy Mode in the Asus Eee PC

This chapter is from the book

Using the Asus Eee PC

Learn More Buy

This chapter is from the book

This chapter is from the book 

Using the Asus Eee PC

Learn More Buy

Adding Application Icons to the Easy Mode Tabs

If you've added applications to your Eee PC (which is covered in Chapter 8), you may wish to add them to the appropriate Easy Mode tabs. For example, if you add the GIMP image editor, which in fact is a very good idea for creating new icons, its icons should be on either the Work or Play tabs. You need to do a few things to add icons to these tabs:

1. Create a local customizations directory for Easy Mode.
2. Set up a work folder for icons and load the Easy Mode icons into it.
3. Create custom icons for your applications. Each application needs five icons: one for normal display and four for the four Easy Mode themes.
4. Add the custom icons to the the appropriate tabs.

The first two tasks are pretty simple, but building icons that look good is quite a challenge. Moreover, the challenge is three-fold: you must drop out the background (make it transparent) for the icon art, scale the icon to match the other icons, and copy the icon onto a separate layer on all four background icons (one is required for each of the Easy Mode themes).

What make creating custom icons a little tougher is that the paint program installed with Xandros, MTPaint, really isn't up to the task. You need a more capable paint program, such as GIMP. Chapter 8 explains how to download applications such as GIMP. You could also use any other advanced paint package as well, although the instruction here are specific to GIMP.

This section covers this process in detail, from setting up the working directories to actually building the icons. At present, unfortunately, the best way to customize the tabbed Easy Mode interface is still to build the icons in a competent graphics program.

Setting Up the Work Area for Icons

First off, let's go over what you're going to do and why you're doing it that way:

1. Set up a local customizations directory for AsusLauncher, which is the proper name of the Easy Mode interface. This directory will contain the customizations to the Easy Mode user interface. Having a local customizations directory means you're free to modify files in that directory without changing the master files for the system.
2. Set up a working directory for icons. This can be anywhere under your home directory tree; however, if you have an SD card installed, you might as well put it there and save wear and tear on the solid-state drive.

This may sound a little odd, but you won't be doing these tasks in Easy Mode. You can, but you'll need to restart X Window System to test things anyway, so why not start out in Full Desktop where it's a little more convenient to work? Actually, I have my Eee PC set to boot into Full Desktop for this.

Also, although you can do all of this from the command line (and you'll mostly be using the command line throughout this chapter), you'll use the File Manager to preview the icons. This is simply for convenience, as you simply double-click a graphics file to preview it. It's a good idea to preview the icons to make sure they look right before you copy them into place and restart X Window System.

First, build the local customizations directory for AsusLauncher. Launch an xterm or console window (choose Launch, Run Command, and then enter Konsole) and check the current directory by looking at the shell prompt. The current directory location should be /user/home.

Issue the following command to build the working directory:

> mkdir .AsusLauncher

You don't need sudo because it's your home directory. Now copy the simpleui.rc file to .AsusLauncher:

> cp /opt/xandros/share/AsusLauncher/simpleui.rc .AsusLauncher

Next, make a pristine backup of the configuration file, just in case things go awry. Sure, you can always get another one from the /opt tree, but it's really good to get into the habit of backing up configuration files before you twiddle with them.

> cp /opt/xandros/share/AsusLauncher/simpleui.rc AsusLauncherOriginal.rc

Next, create a working directory for the various icon files. I'm assuming that you have an MMC-SD card installed, so the command will look something like this:

> mkdir /media/MMC-SD/partition1/icons

If you don't have an MMC-SD card, simply create the directory within /user/home. Now copy the icon files you need to build your new icons:

> cp /opt/xandros/share/AsusLauncher/*icon_background.png /media/MMC-SD/partition1/icons/

Adding Icons to the Easy Mode Configuration File

A bit of background first. The simpleui.rc file is the configuration for the Easy Mode interface. Like many newer configuration files, simpleui.rc is an XML file. XML is actually much easier to work with than the older formats and enables you to easily see where something begins and ends. Each element, or tag, has a clear beginning, in the format <element>, and ending, in the format </element>. As long as you maintain this balance of beginning and ending tags and carefully type in what's shown, you can't go wrong.

The tag structure in the simpleui.rc file mimics the structure of the Easy Mode desktop, with its tabs that contain either application icons or folders. Folders in the desktop can also contain application icons, so that structure exists in the simpleui.rc file as well. In general, the structure is something like this:

• <simplecat></simplecat> defines a tab.
• <folder></folder> defines a folder.
• <parcel></parcel> defines an application icon and the logic to launch the application itself.

A <parcel> element contains a simplecat attribute, which defines the icon's location in the tab structure. In XML, an attribute is a way of specifying something within a tag. In this case, if the icon is on the Internet tab, the attribute value will be simplecat="Internet". Pay close attention to the equals sign and make sure the value that's specified, Internet, is in quotes. If the icon happens to be in a folder, then you use a convention similar to a directory structure, with the tab and folder names separated by a slash. For example, to place an application icon in the Webmail folder on the Internet tab, the attribute value would be simplecat="Internet/Webmail".

By the way, as I've learned from hard experience, if you make a mistake with the simplecat="xxxx" attribute, you'll drive yourself nuts wondering what happened to the icon or folder you've created. It simply won't appear. Therefore, double-check that your syntax and capitalization are correct.

First, change the directory to .AsusLauncher:

> cd .AsusLauncher

You don't need to "be" in this directory to work, but I find it more convenient.

Next, you need to edit the simpleui.rc file. The file was copied from the /opt tree, which means its permissions are such that you need root access to edit the file. You can change the file permissions if you like with chmod (change mode); however, it's just as easy to open the file with sudo prepended to the command. (For more information about the chmod command, see Chapter 11, "Introduction to the Linux Command Line.") If you're doing this from the File Manager, you need the Administrative File Manager (available in Full Desktop Mode) to open the file in your editor of choice and be able to save your changes. That's another good reason to do all of this from within Full Desktop: accessing the Administrative File Manager is a lot easier.

I'm an old xemacs kind of guy (I installed XEmacs via Synaptic), so I open the file with the following command. Substitute your text editor of choice for xemacs.

> sudo xemacs simpleui.rc &

For this example, I'm going to add an Opera browser icon to the Internet tab. (I've already installed Opera via the .deb package I downloaded, and I've made sure that it works; for instructions on installing Opera and other applications, see Chapter 8.) All I have to do is insert an entry for the Opera icon in the simpleui.rc file. First, I need to search for some other icons on the Internet tab. Icons are placed on the tab in the order in which they appear in the file. I want to put the Opera icon right beside the Web icon for Firefox, because they are related applications. So, I'll look for Firefox. This is a bit tricky, because Firefox is actually used for many icons, so I need to find the correct one. To do that, I search for Firefox and look for an entry within a <parcel> element that has the simplecat="Internet" attribute. After I find that, I'll add a few extra blank lines for some working space after the <parcel> element. The entry for Opera looks like this:

<parcel extraargs="/usr/bin/opera" simplecat="Internet" selected_
icon="opera_hi.png" icon="opera_norm.png" >
<name lang="en">Opera</name>
</parcel>

A bit of translation is required:

• The extraargs attribute defines the command necessary to run the application. In this case, I just need to run the opera executable file. I need to provide the full path to this from the root of the file system.
• The simplecat attribute defines this icon as residing in the Internet tab.
• The selected_icon attribute points to the PNG (Portable Network Graphics) format graphics file that will be used when the icon is selected (this is the hi, or highlighted icon). The selected attribute means that either the mouse is hovering over the icon or the icon has been clicked. The icon attribute points to the normal (norm) icon PNG file. The normal icon file is the one used to simply display the icon on the tab.
• The <name> element defines the word used under the icon for the language (en for English) that I use. Check the other entries to get the right language code if your native language is something other than English.
• The end tag </parcel> closes the XML element. As I previously mentioned, this is very important. XML parsers do not like tags that don't end.

Note that the graphics files do not require a complete path as did the extraargs attribute. The Easy Mode launcher knows to look in the /opt/xandros/share/AsusLauncher directory for icons.

Check over your entry and then save the file.

Building the Icons

To follow the instructions in this section, you need to use the graphics program GIMP. If you haven't installed it, refer to Chapter 8 for instructions. Using GIMP to create icons is a bit tricky, because you must work with transparencies and layers. This section gives detailed instructions, so you should be fine even if you are new to GIMP.

Your first big problem is getting a suitable graphics file to use as the basis of the icon. For Opera, I simply used Google's Image Search and looked for "Opera" and "icon." While GIMP is perfectly capable of sizing a graphic down to the resolution you need, you may get some nasty-looking edges if you take a really big, high-resolution graphic and reduce it down to the 120x120-pixel size that's required. I found one that was 128x128 pixels, which I was able to scale down to 120x120 pixels.

A suitable icon consists of a file that's 120x120 pixels in PNG format and that has a transparent background. Because GIMP is a highly capable graphics editor, it's possible to take graphics files of pretty much any format and create a suitable icon.

Assuming that you have found an image (via a search engine perhaps) for the icon that you wish to build, save the graphic to the icons directory you just created. Now you can either load the graphics file into GIMP by right-clicking it in the File Manager and choosing Open With, GIMP Image Editor or you can edit it from the command line by using the GIMP command followed by the image file on the command line.

After you load the image, you need to resize it to 120x120 pixels. To do this within the GIMP menus, choose Image, Scale Image to open the Scale Image dialog box, shown in Figure 4.2. Enter 120 in both the Width and Height fields. If the resolution for X and Y isn't 72 dpi, set it to 72. Check that all the settings are as described and then click the Scale button to set the image at the right size and resolution. Make sure that the clarity of the scaled image is acceptable. If the image is blocky or fuzzy, find another on the web.

Figure 4.2 Sizing a graphic in GIMP.

Now you have the image at the right size. However, you need to reduce just the picture portion of the image to 80x80 pixels. The entire graphic, or graphic frame, however, must remain at 120x120 pixels. This requires cutting the icon portion of the frame, creating a new frame, and pasting it there. Next, you'll scale the frame to 80x80 pixels. This trick gets the image to the necessary 80x80 size that leaves room for the title of the icon. Then you'll extend the layer boundaries back to 120x120 pixels, centering the scaled picture in the frame. Finally, you'll select the picture portion and move it up a bit, leaving a little extra room at the bottom for text.

To put the picture on a new layer:

1. Using the square selection tool from the main GIMP tool window, drag a selection box around the icon portion of the frame.
2. Press Ctrl+X to cut the picture from the frame.
3. In the window that contains your graphic file, choose Layer, New Layer.
4. Press Ctrl+V to paste the picture into the new layer.

To resize the layer and picture:

1. Choose Layer, Scale Layer to open the Scale Layer dialog box.
2. Set the Width and Height to 80 pixels.
3. Click Scale.
4. Choose Layer, Layer Boundary Size to open the Set Layer Boundary Size dialog box, shown in Figure 4.3.
   

   Figure 4.3 Setting the Width and Height to 120.

5. Set the Width and Height to 120 pixels.
6. Click Center.
7. Click Resize.

Now you have an 80x80-pixel picture in a 120x120-pixel frame.

To move the picture up in the frame:

1. Using the square selection tool from the main GIMP tool window, drag a selection box around the picture portion of the graphic.
2. Drag the picture up, leaving the bottom fifth or quarter of the frame free for text.

The background image is ready, but you need to do a few more things before you're done. Just to make sure that image is an RGB color model (especially if you're converting from GIF, which has a fixed palette), choose Image, Mode, RGB. If RGB is grayed out, it is already using the RGB color model.

You'll want to save a copy of the file in the GIMP native XCF format first, because the format for Easy Mode icon files, PNG, doesn't support layers. This means that the image will be "flattened," and you may want to keep your layers. This might not be absolutely necessary for the plain icon, but for the "hi" (highlighted icon) versions it's essential, because the base layer of the image has the highlight fill, and you need to keep the picture portion as a separate layer so as to not disrupt the bottom layer fountain fill while sizing and moving the picture portion.

The file-naming convention is extremely important, by the way. If you don't get the file naming right, your icons won't work. For the standard icon, the filename must be name_norm.png. Each file of the five files must start with the name that you choose, and the base file must end in _norm. I list the highlighted icon names in a bit, so you can get them absolutely right.

Save the file first as an XCF file (to preserve the layers) by choosing File, Save As. In the Name field, enter name_norm.xcf and click Save.

Next, save the file as a PNG file by choosing File, Save As. This time, use .png as the extension, clear the Save Background Color option, and then click Save. You'll be told by GIMP that you need to export the file first (this flattens the layers) and then save. Just go ahead and do this.

One file down, four to go. Remember when you copied *icon_background.png from the AsusLauncher directory to the new icons directory? This copied four files: accessibility_icon_background.png, business_icon_background.png, home_icon_background.png, and student_icon_background.png? Each of these is a building block for the highlighted icons for four desktop themes. Regardless of whether or not you ever intend to switch the Asus Eee PC built-in themes, you have to build all of these. Now that you have your base icon file, this is going to be fairly simple. You load each background icon file into GIMP (GIMP can have multiple open files) and save it with the appropriate filename within this list of names:

• accessibility_name_hi.xcf
• business_name_hi.xcf
• home_name_hi.xcf
• student_name_hi.xcf

Again, you initially save the files as XCF files to preserve the layers. After you've created each of these files, create a new layer by choosing Layer, New Layer, just as you did with the base icon. Now each has a blank layer (above the background fill pattern) into which you can copy the picture portion of your icon.

If the name_norm.png file isn't open, load that into GIMP as well. You'll use the PNG file because you're only interested in copying the icon portion of the frame. Use the square selection tool again, and select the entire picture area.

Press Ctrl+C to copy the picture. Click one of the background graphics and press Ctrl+V to paste the picture onto the upper layer. It should paste in exactly the correct position (if not, choose Select, None and then reselect it and drag it). Repeat this for each of the background files, saving each as you go.

Now for the last part. Save each file with precisely the same name but with a .png extension. You'll be prompted to "export" for each, which you must do, and then you're done.

Click each of the files in the File Manager and make sure that the pictures are all in the correct position in the graphics frame. For the highlighted icon (hi) files, the background should have a tint, but should also show the "checkerboard" pattern that denotes that the background is transparent.

From the command line, use the cd command to change the directory to your icon working directory. Issue the following commands to copy the files into place:

>sudo cp *name_hi.png /opt/xandros/share/AsusLauncher/
>sudo cp *name.png /opt/xandros/share/AsusLauncher/

You're now ready to give the icon a try. Select Easy Mode from the Launch menu to switch modes. Once in Easy Mode, check that your new icon is in position on the tab you designated (see Figure 4.4). Hover the mouse pointer over it to ensure that it "highlights" like the other icons. If so, click the icon and check that it opens the application. If all works well, congratulations!

Figure 4.4 The completed Opera icon.

Common things that can go wrong include the following:

• A syntax error in the XML in the simpleui.rc file. If you don't see your icon at all, check this. The simplecat attribute must contain the tab name precisely as it appears in similar entries in the file. The end tag, </parcel>, must be present to properly close the <parcel> tag. Quotes must be on both sides of the attribute values.
• No transparency in the base icon file. This means that the base icon, and all of the "hi" versions, will look a little odd. Make sure that you save the file to .png format with the Save Background Colors option deselected.