New Simple View Design

The old Simple view (as in 6.10 & 6.12) has a number of basic problems. It uses mostly non-standard controls, and most of the controls are actually bitmap images. For example, the buttons ("Add Project", "Messages", etc.) are actually small pictures of a rectangular button. The text labels are part of the image, rather than being encoded as actual text. This design causes several serious issues:

Localization

The use of bitmap controls makes it very difficult to localize the interface for different languages. In other parts of the BOINC Manager, the text in controls, menus etc. is represented as a series of characters (i.e., encoded as actual text.)

Our development system scans the source code for all such text, and generates a special file containing all the text strings. Our many volunteer translators take a copy of this file and add the translations into each language. They then return the localized file (which contains each English string followed by its localized equivalent) to us. We include these translation files with BOINC, and they are installed on each user's computer as part of BOINC.

The BOINC software includes logic which then applies the appropriate translation file, depending on the language the user selects. The software also adjusts the size of each interface element to fit the localized text, since the translation may be longer or shorter than the English original. Finally, the size of the entire window is adjusted to accommodate the resized buttons and other elements.

But when the buttons and other interface elements are images of text, rather than actual strings, none of this can work. The only way to create a localized version is to produce new images with the translated text, and generate a localized "skin" for each language. Not only is this very tedious and inefficient, it is not something most of our volunteer translators can do readily.

The Simple View is not so simple for users who don't speak English and so can't understand the button labels. And yet this is the interface all new users see.

Accessibility

Computer users who are blind or have limited vision often use special accessibility software known as screen readers, which convert the text on their screen to audible speech. Screen readers don't work with bitmap controls. So some of the users who could benefit most from a simplified user interface can't take advantage of it.

The use of non-native / non-standard controls also prevents implementing other accessibility features available for most computer systems, such as keyboard-only control access without using the mouse.

Difficulty Creating New Skins

Creating a new customized skin requires creating many bitmaps, as a separate image file is needed for every state of every control.

Non-Intuitive Operation

The use of non-native / non-standard controls violates the user interface guidelines on Mac and Windows. These guidelines are designed to provide commonality across different applications, making it easier for users to learn new applications in an intuitive manner. Because the old Simple View violates these standards, it is harder for new users to understand.

Lack Of Flexibility

The fixed size and position of items makes it hard to enhance the interface by adding new items or rearranging existing ones. Here are some examples:

1. It is not obvious that you can click on the "Graphics Available" text at the bottom of the slide show to display the application's graphics.
2. The project icons with the contextual menus give no visual indication that clicking them displays a drop-down menu.
3. The task tabs near the top of the window, and the left and right arrows to scroll through them, are non-standard and less intuitive than they might be. And the meaning of the yellow (or other single color) dots next to some of the tasks is not self-evident.

All of the above issues can be solved by using standard native controls and user interface elements instead of the bitmap images, which provides automatic support for localization, automatic sizing and accessibility. The new Simple View attempts to keep the functionality of the old version, and adds a few more capabilities.

Native Controls

One challenge was finding a common set of controls that are standard native controls on Windows, Macintosh and Linux. This eliminated some choices that would have been obvious for one or another platform but would not work on others, and required some compromises. In particular, the use of push buttons to expose a pull-down / pop-up menu is a departure from typical user interface design, but it allowed us to use standard native controls for all the associated functions.

The use of green, yellow and red dots in the Task Selection pull-down menu / combo box uses the standard traffic light paradigm to indicate whether each task is running, waiting to run, or suspended.

Bigger Images

Another challenge arises because the new Simple View is a bit larger than the old one, and some translations will make it larger yet. So the old background images for the different skins are all too small. We will be creating new, larger background artwork for the standard BOINC skin, and will encourage those who provide other skins to do the same. To help with the transition, the new Simple View anchors the upper-left corner of the background, and fills in the areas beyond the background image on the bottom and right side with the background color specified for that image in the skin. In many cases, this reduces the impact of the undersized background artwork.

It is hard to predict the largest size of background image needed for every language translation and every operating system, but we estimate that 600 pixels wide by 750 pixels high should be more than sufficient for the main Simple View window. If you wish, you may also provide an optional custom background image for the Simple Preferences dialog. If the background image is smaller than the dialog, it will be scaled up to fill the space. If the background image is larger than the dialog, the center portion will be used. The new Simple View requires far less artwork, so creating new skins will be considerably easier in the future. We hope you agree with us that these changes will improve the BOINC experience, especially for new users.

New Simple View Skins & Localization

The new Simple View eliminates the need for many of the images in the skins, along with their corresponding entries in the skin.xml file. It also requires a larger background image and in some cases changes to the background artwork.

The new Simple View is slightly larger than the old version, but the actual size varies depending on the platform (Windows, Macintosh or Linux.)
Since the new version can be localized, the size of the window also varies depending on the selected language. If you have a custom skin, you should create a larger version of the main background image (specified by the <background_image> tag in the skin.xml file), allowing plenty of extra area to accommodate very long translation strings.

Anchored In A Corner

Because most skins have a logo in the top left corner of the main background image, the new Simple View anchors that corner. In other words, the top left corner of the background will always be at the top left corner of the window, and more or less of the bottom and right-hand areas of the background image will be included depending on the size of the window. For backward compatibility, if the background bitmap is too small, the right side and bottom are filled in with the background color specified in the skin.xml file by the <background_color> tag.

Note also that the task information and project information areas will vary in size and position. Some skins include 2 contrasting rectangles as part of the main background image, which frame these two areas. If your skin has these, you should eliminate them as they will no longer align with the controls. The new Simple View simulates a semi-transparent background for the task information and project information areas, allowing your main background to partially show through. This will automatically set these areas apart in a manner consistent with your custom skin.

The same is true for the background of the Simple Preferences dialog specified by the <dialog_background_image> tag in the skin.xml file. It needs to be larger, and will be anchored at its top left corner. The new main and preferences background images are all you need to be compatible with the new Simple View. But many other images, and their corresponding skin.xml tags, which were needed by the old Simple View are no longer required and can be eliminated.

Deprecated XML Tags

The following XML tags are no longer used and can be eliminated, along with their corresponding images:

Simple

Name

<spacer_image>

<state_indicator_background_image>

<connecting_indicator_image>

<error_indicator_image>

<workunit_active_tab>

<workunit_suspended_tab>

<workunit_tab_area_background_image>

<workunit_area_background_image>

<workunit_animation_background_image>

<workunit_gauge_background_image>

<workunit_gauge_progress_indicator_image>

<project_area_background_image>

<attach_project_button>

<help_button>

<right_arrow_button>

<left_arrow_button>

<save_button>

<synchronize_button>

<cancel_button>

<close_button>

<copy_all_button>

<copy_button>

<messages_link_image>

<messages_alert_link_image>

<suspend_link_image>

<resume_link_image>

<preferences_link_image>

<advanced_link_image>

Deprecated Wizards

<attach_to_project>
   <logo>graphic/logo.png</logo>
</attach_to_project>

<attach_to_account_manager>
   <title>Attach to Account Manager</title>
   <logo>graphic/logo.png</logo>
</attach_to_account_manager>

Unchanged XML Tags

The following tags in the skin.xml file (and their corresponding images) are still needed and can be used without any changes:

Name	Type	Image Width	Image Height	Notes
<static_line_color>	String			The color is represented as an RGB value with the token being ':'
<state_indicator_background_image>	Image	264px	35px
<project_image>	Image	40px	40px	Default image to display for a project that does not currently have an image defined.

Advanced

Name	Type	Image Width	Image Height	Notes
<is_branded>
<application_name>	String			Displayed in title bar.
<application_short_name>	String			Shorter version of the application name
<application_icon>	Icon	16px	16px	Taskbar icon.
<application_icon32>	Icon	32px	32px	Windows desktop icon
<application_disconnected_icon>	Icon	16px	16px	Taskbar icon when disconnected.
<application_snooze_icon>	Icon	16px	16px	Taskbar icon when snoozing.
<application_logo>	String	50px	50px	Application logo that appears in the about box.
<organization_name>	String			Organization associated with the release of the client software package.
<organization_website>	String			Organization website.
<organization_help_url>	String			Organization's help url.Parameters: target = which view launched the help request. version = the version of boinc that launched the help request. controlid = which control within the view was the user trying to get help with. See Manager Help System? for further details.
<open_tab>	Number			Which tab to open by default in the Advanced GUI. A value of '0' means open the last tab used.
<exit_message>	String			What message should be sent to the user when they close BOINC manager.

New XML Tags

The following tags in the skin.xml file are needed for the new Simple View skins:

Name	Type	Image Width	Image Height	Notes
<panel_opacity>	Number			This will set the opacity (which is the inverse of the transparency) to a value between 0 and 255. These numbers are equivalent to the value of an alpha channel, so 0 means completely transparent and 255 means completely opaque (white.) The default value if this tag is not present is 153, or about 60% opaque (40% transparent.)
<workunit_running_image>	image	16px	16px	A mostly green 16X16 icon indicating that a task is currently running.
<workunit_waiting_image>	image	16px	16px	A mostly yellow 16X16 icon indicating that a task is currently waiting to run.
<workunit_suspended_image>	image	16px	16px	A mostly red 16X16 icon indicating that a task is currently suspended.

For the running, waiting and suspended icons, the image is of the format <image>file_name</image>. The file must be a PNG file with a transparent background. Although these icons always appear on a white background on Windows computers, their background changes to the highlight color when selected on a Macintosh. Because of this, all anti-aliasing should be done by varying the transparency (i.e., the alpha channel) so that the icon will draw correctly on any colored background.

Final notes

Some skins have erroneous xml tags <company_name> and <company_website>. These are incorrect; the correct tags should be <organization_name> and <organization_website>.
When you are creating a skin that works with older versions of the BOINC Manager in addition to the new Simple View, you should still supply the older tags, in addition to providing larger background images and, if you wish, the optional <panel_opacity> tag.