Home > Articles > Hardware

This chapter is from the book

This chapter is from the book

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

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

    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

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.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020