United BOINC

 
  • Increase font size
  • Default font size
  • Decrease font size
Home BOINC information Creating a skin for the BOINC Manager

Creating a skin for the BOINC Manager

E-mail Print PDF
AddThis Social Bookmark Button

This page describes how to customize the appearance of the BOINC Manager. Skins allow you to customize how the BOINC Manager looks in the simple view, the advanced view, and wizard dialogues. Skins are all collected in the "skins" subdirectory of the working directory. A skin.xml file needs to be created for any customized skin. This page describes the layout of the skin.xml file.

 

A skin.xml file should be contained within its own directory under the 'skins' directory.

An example would look like this:

+ /BOINC | +---+ /skins

   |    +---+ /Skin_Name        
| +---+ skin.xml
| +---+ <skin resources>

 

Localization

BOINC Manager attempts to find and use localized skin references. It falls back to a suitable language and if none can be found it will fall back to English. Overriding the language being searched for can be done in the Advanced GUI's option dialog.

If the current locale is 'pt_BR' and it cannot be found in the selected skin then the next language searched for is 'pt'. If 'pt' cannot be found then the manager resorts to 'en'.

Skin choice Example
Locale pt_BR
Language pt
English en
BOINC built-in skin BOINC built-in skin

Layout

The skin.xml file is described as follows:

<skin>     
<pt_BR>
<simple />
[ <advanced /> ]
[ <wizards /> ]
</pt_BR>
<pt>
<simple />
[ <advanced /> ]
[ <wizards /> ]
</pt>
<en>
<simple />
[ <advanced /> ]
[ <wizards /> ]
</en>
</skin>

Both the advanced and wizards collections are optional.

Samples

Skin Collections

Simple

The Simple collection contains all the elements need to construct the Simple GUI.

The Simple collection contains the following elements:

Name Type Image Width Image Height Notes
background_image Image 410px 540px Used as the Simple GUI background image. A background color should be specified for this element.
spacer_image Image 2px 11px Used to separate the links on the bottom of the Simple GUI
static_line_color String   The color is represented as an RGB value with the token being ':'
state_indicator_background_image Image 264px 35px  
connecting_indicator_image Image 14px 15px  
error_indicator_image Image 69px 20px  
workunit_active_tab Simple Tab 16px 16px  
workunit_suspended_tab Simple Tab 16px 16px  
workunit_tab_area_background_image Image 343px 24px  
workunit_area_background_image Image 343px 314px  
workunit_animation_background_image Image 294px 146px  
workunit_animation_image Image 290px 126px  
workunit_gauge_background_image Image 258px 18px  
workunit_gauge_progress_indicator_image Image 8px 7px  
project_area_background_image Image 343px 113px  
project_image Image 40px 40px Default image to display for a project that does not currently have an image defined.
attach_project_button Simple Button 81px 18px  
right_arrow_button Simple Button 20px 20px  
left_arrow_button Simple Button 20px 20px  
save_button Simple Button 57px 16px  
synchronize_button Simple Button 81px 18px  
cancel_button Simple Button 57px 16px  
close_button Simple Button 57px 16px  
help_button Simple Button 18px 18px  
copy_all_button Simple Button 85px 18px  
copy_button Simple Button 85px 18px  
messages_link_image Simple Link 70px 20px  
messages_alert_link_image Simple Link 70px 20px  
suspend_link_image Simple Link 59px 20px  
resume_link_image Simple Link 59px 20px  
preferences_link_image Simple Link 81px 20px  
advanced_link_image Simple Link 101px 20px  
dialog_background_image Image 800px 600px The dialogs height and width change according to the configuration of the computer so the center of the image is what is drawn on to the dialog.

 

The Simple collection is described as follows:

<simple>     
<background_image />
<spacer_image />
...
</simple>

Advanced

The Advanced collection contains all the elements need to construct the Advanced GUI.

The Advanced collection contains the following elements:

Name Type Image Width Image Height Notes
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_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.

 

The Advanced collection is described as follows:

<advanced>     
<application_name />
<application_icon />
...
</advanced>

Wizards

The Wizards collection consists of two elements which are broken out into the attach to project wizard and the attach to account manager wizard.

The attach to project element is described like this:

<attach_to_project>     
<title>Attach to Project</title>
<logo>graphic/logo.png</logo>
</attach_to_project>

The title is displayed in the wizard's title bar.

The logo is placed on each wizard page and should have a height of 280px and a width of 115px. Logos can be any of the following types: PNG, JPG, GIF, and BMP. The logo location should be specified as a path relative to the skin.xml description file. The path separator should be a '/' for all platforms.

The attach to account manager element is described like this:

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

The title is displayed in the wizard's title bar.

The logo is placed on each wizard page and should have a height of 280px and a width of 115px. Logos can be any of the following types: PNG, JPG, GIF, and BMP. The logo location should be specified as a path relative to the skin.xml description file. The path separator should be a '/' for all platforms.

The account_info_message is text that is displayed when the user is asked for username/email address and password information for the account manager.

The Wizards collection is described as follows:

<wizards>     
<attach_to_project />
<attach_to_account_manager />
...
</wizards>

Skin Basic Elements

Image

Images are used for backgrounds and miscellaneous visual elements.

Images are described as follows:

<image>     
<imagesrc>graphics/image.jpg</imagesrc>
[ <background_color>255:0:255</background_color> ]
</image>

imagesrc describes the name and location of the image in question. Images can be any of the following types: PNG, JPG, GIF, and BMP. The image location should be specified as a path relative to the skin.xml description file. The path separator should be a '/' for all platforms.

NOTE: we have had reports of JPG files not working with background_image, project_area_background_image, dialog_background_image, and workunit_area_background_image. If you experience this issue switch the image file format to PNG. We'll try to address this issue in 5.10.x.

background_color is optional and describes the background color that should be painted on to the dialog before the image is drawn over the top of it. The color is represented as an RGB value with the token being ':'.

Icon

These elements are used to describe the taskbar icons in various states.

Icons are described as follows:

<image>     
<imagesrc>graphics/image.jpg</imagesrc>
<transparency_mask>255:0:255</transparency_mask>
</image>

imagesrc describes the name and location of the image in question. Images can be any of the following types: PNG, JPG, GIF, and BMP. The image location should be specified as a path relative to the skin.xml description file. The path separator should be a '/' for all platforms.

transparency_mask describes the background color that should be used as the transparency mask. The color is represented as an RGB value with the token being ':'.

Simple Tab

The different types of simple tabs represent the different states an active task can be displayed as.

Tabs are described as follows:

<tab>     
<imagesrc>graphic/icon.png</imagesrc>
<border_color>51:102:102</border_color>
<gradient_from_color>51:102:102</gradient_from_color>
<gradient_to_color>134:179:176</gradient_to_color>
</tab>

imagesrc describes the name and location of the image in question. Images can be any of the following types: PNG, JPG, GIF, and BMP. The image location should be specified as a path relative to the skin.xml description file. The path separator should be a '/' for all platforms.

border_color describes the color that surrounds the tab. The color is represented as an RGB value with the token being ':'.

gradient_from_color describes the color that should start the gradient effect. The color is represented as an RGB value with the token being ':'.

gradient_to_color describes the color that should finish the gradient effect. The color is represented as an RGB value with the token being ':'.

Simple Link

Links are images that cause an action to happen. Links do not change state when clicked.

Links are described as follows:

<image>     
<imagesrc>graphic/image.png</imagesrc>
</image>

imagesrc describes the name and location of the image in question. Images can be any of the following types: PNG, JPG, GIF, and BMP. The image location should be specified as a path relative to the skin.xml description file. The path separator should be a '/' for all platforms.

Simple Button

Buttons are images that cause an action to happen. Buttons can be at rest or in a clicked state. When the button is clicked it changes to the clicked image.

Buttons are described as follows:

<button>     
<imagesrc>graphic/button.png</imagesrc>
<imagesrc_clicked>graphic/button_clicked.png</imagesrc_clicked>
</button>

imagesrc describes the name and location of the image in question. Images can be any of the following types: PNG, JPG, GIF, and BMP. The image location should be specified as a path relative to the skin.xml description file. The path separator should be a '/' for all platforms.

imagesrc_clicked describes the name and location of the image in question. Images can be any of the following types: PNG, JPG, GIF, and BMP. The image location should be specified as a path relative to the skin.xml description file. The path separator should be a '/' for all platforms.

Stencils

Making skins is simplified with the use of the following 3 'stencils' (these are transparent GIFs).

  • To use the templates, use a graphical application such as Photoimpact that supports objects in multiple layers, allowing you to move the templates above the appropriate (background-) image to the desired position.
  • The meaning of the template colors is as follows: The green lines / edges serve the positioning of the template above the respective (background-) image. The area tagged with red lines corresponds to the space to cut / paste for sequential images.
  • The source for the creation of a skin is an existing, complete background image with the size of 410 x 540 pixels.
  • Beginning with template_1 (to be moved, positioned and copied across the background_image) the creation of the workunit_area_background_image and the project_area_background_image takes place.
  • Now, if desired, the workunit_area_background_image and the project_area_background_image can be designed separately depending on the desired effects (i.e. transparency).
  • Subsequently template_2 (by copying, moving or positioning) can be used on the background_image, workunit_background_image or project_background_image to achieve the desired effects (i.e. transparency) in order to create further desired images (i.e. workunit_tab_area_background_image, workunit_gauge_background_image etc.)

Stencil_1.gif

Stencil_2.gif

Stencil_3.gif

 

 

Check out these cool BOINC videos!

LHC@home - CERN & the Large Hadron Collider (LHC)

LHC@home - CERN & the Large Hadron Collider (LHC) 

 

climateprediction.net - Results Programme Documentaryclimateprediction.net - Results Programme Documentary

 

The science behind Rosetta@homeThe science behind Rosetta@home

 

Poll Poll 1

Is BOINC manager "User friendly"?
 

Poll Poll 2

How many BOINC projects are you running?
 

Poll Poll 3

Have you ever used an Account Manager?