+Skins allow you to customize how an interface looks to suite your personal tastes. +
+A skin.xml file needs to be created for any customized skin, this document describes the +layout of the skin.xml file. +
+A skin.xml file should be contained within it's own directory under the 'skins' directory. +
+An example would look like this: +"; block_start(); echo " ++ /BOINC +| ++---+ /Skins + | + +---+ /Custom Skin + | + +--- skin.xml +"; block_end(); echo " +
+ +
+BOINC Manager attempts to find and use localized skin references. It gracefully falls back +to a suiteable language and if none can be found it'll fall back to english. Overriding the +language being searched for can be done in the Advanced GUI's option dialog. +
+If the preffered language is 'pt_BR' and it cannot be found then the next language searched for +is 'pt'. If 'pt cannot be found then the manager resorts to 'en'. + +
+The skin.xml file is described as follows: +"; block_start(); echo " +<skin> + <pt_BR> + <simple /> + [ <advanced /> ] + [ <wizards /> ] + </pt_BR> + <pt> + <Simple /> + [ <advanced /> ] + [ <wizards /> ] + </pt> + <en> + <Simple /> + [ <advanced /> ] + [ <wizards /> ] + </en> +</skin> +"; block_end(); echo " +
+Both the advanced and wizards collections are optional. +
+ +
+The World Community Grid skin can be found here. +
+ +
+The Simple collection contains all the elements need to construct the Simple GUI. +
+The Simple collection contains the following elements: +
| Name | +Type | +Image Height | +Image Width | +Notes | +
|---|---|---|---|---|
| background_image | +Image | +540px | +410px | +
+ Used as the Simple GUI background image. + A background color should be specified for this element. + |
+
| spacer_image | +Image | +11px | +2px | +Used to seperate 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 | +35px | +264px | ++ |
| connecting_indicator_image | +Image | +15px | +14px | ++ |
| error_indicator_image | +Image | +20px | +69px | ++ |
| workunit_active_tab | +Simple Tab | +16px | +16px | ++ |
| workunit_suspended_tab | +Simple Tab | +16px | +16px | ++ |
| workunit_tab_area_background_image | +Image | +24px | +343px | ++ |
| workunit_area_background_image | +Image | +314px | +343px | ++ |
| workunit_animation_background_image | +Image | +146px | +294px | ++ |
| workunit_animation_image | +Image | +126px | +290px | ++ |
| workunit_gauge_background_image | +Image | +18px | +258px | ++ |
| workunit_gauge_progress_indicator_image | +Image | +7px | +8px | ++ |
| project_area_background_image | +Image | +113px | +343px | ++ |
| 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 | +18px | +81px | ++ |
| right_arrow_button | +Simple Button | +20px | +20px | ++ |
| left_arrow_button | +Simple Button | +20px | +20px | ++ |
| save_button | +Simple Button | +16px | +57px | ++ |
| cancel_button | +Simple Button | +16px | +57px | ++ |
| close_button | +Simple Button | +16px | +57px | ++ |
| messages_link_image | +Simple Link | +20px | +70px | ++ |
| messages_alert_link_image | +Simple Link | +20px | +70px | ++ |
| suspend_link_image | +Simple Link | +20px | +59px | ++ |
| resume_link_image | +Simple Link | +20px | +59px | ++ |
| preferences_link_image | +Simple Link | +20px | +81px | ++ |
| advanced_link_image | +Simple Link | +20px | +101px | ++ |
| preferences_dialog_background_image | +Image | +600px | +800px | ++ The dialogs height and width change according to the configuraton of the computer + so the center of the image is what is drawn on to the dialog. + | +
| messages_dialog_background_image | +Image | +600px | +800px | ++ The dialogs height and width change according to the configuraton of the computer + so the center of the image is what is drawn on to the dialog. + | +
+The Simple collection is described as follows: +"; block_start(); echo " +<simple> + <background_image /> + <spacer_image /> + ... +</simple> +"; block_end(); echo " +
+ + +
+The Advanced collection contains all the elements need to construct the Advanced GUI. +
+The Advanced collection contains the following elements: +
| Name | +Type | +Image Height | +Image Width | +Notes | +
|---|---|---|---|---|
| application_name | +String | ++ | + | Displayed in title bar. | +
| 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 | +47px | +Application logo that appears in the about box. | +
| company_name | +String | ++ | + | Company associated with the release of the client software package. | +
| company_website | +String | ++ | + | Company website. | +
| project_name | +String | ++ | + | Shorter version of the application name, or a specific project who sponsored the client package. | +
| 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: +"; block_start(); echo " +<advanced> + <application_name /> + <application_icon /> + ... +</advanced> +"; block_end(); echo " +
+ + +
+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 descibed like this: +"; block_start(); echo " +<attach_to_project> + <title>Attach to Project</title> + <logo>graphic/logo.png</logo> +</attach_to_project> +"; block_end(); echo " +
+The title is displayed in the wizard's title bar. +
+The logo is played 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 seperator should be a +'/' for all platforms. +
+The attach to account manager element is descibed like this: +"; block_start(); echo " +<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> +"; block_end(); echo " +
+The title is displayed in the wizard's title bar. +
+The logo is played 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 seperator 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: +"; block_start(); echo " +<wizards> + <attach_to_project /> + <attach_to_account_manager /> + ... +</wizards> +"; block_end(); echo " +
+ + +
+Images are used for backgrounds and miscellaneous visual elements. +
+Images are described as follows: +"; block_start(); echo " +<image> + <imagesrc>graphics/image.jpg</imagesrc> + [ <background_color>255:0:255</background_color> ] +</image> +"; block_end(); echo " +
+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 seperator should be a '/' for all platforms. +
+background_color is optional and describes the backgrond 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 ':'. +
+ + +
+These elements are used to describe the taskbar icons in various states. +
+Icons are described as follows: +"; block_start(); echo " +<image> + <imagesrc>graphics/image.jpg</imagesrc> + <transparency_mask>255:0:255</transparency_mask> +</image> +"; block_end(); echo " +
+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 seperator should be a '/' for all platforms. +
+transparency_mask describes the backgrond color that should be used as the +transparency mask. The color is represented as an RGB value with the token +being ':'. +
+ + +
+The different types of simple tabs represent the different states an active +task can be displayed as. +
+Tabs are described as follows: +"; block_start(); echo " +<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> +"; block_end(); echo " +
+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 seperator 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 ':'. +
+ + +
+Links are images that cause an action to happen. Links do not change state +when clicked. +
+Links are described as follows: +"; block_start(); echo " +<image> + <imagesrc>graphic/image.png</imagesrc> +</image> +"; block_end(); echo " +
+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 seperator should be a '/' for all platforms. +
+ + +
+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: +"; block_start(); echo " +<button> + <imagesrc>graphic/button.png</imagesrc> + <imagesrc_clicked>graphic/button_clicked.png</imagesrc_clicked> +</button> +"; block_end(); echo " +
+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 seperator 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 seperator should be a '/' for all platforms. +
+ +"; +page_tail(); +?> diff --git a/doc/project_skin.php b/doc/project_skin.php new file mode 100644 index 0000000000..63eb1cdbdb --- /dev/null +++ b/doc/project_skin.php @@ -0,0 +1,143 @@ +Contents +
+ ++A 'project_files.xml' file can be created for the purposes of sending project customization +elements to the BOINC client's Simple GUI. The file should be created in the project root +directory. +
+The contents of 'project_files.xml' should look like this: +"; block_start(); echo " +<file_info /> +<file_info /> +... +<project_files> + <file_ref /> + <file_ref /> + ... +</project_files> +"; block_end(); echo " +
+It is important to note that all file_info records must appear before the project_files +record. +
+ + +
+A project icon is a 40x40 image that will uniquely identify your project within the simple +GUI. Project icons can be any of the following image types: PNG, JPG, GIF, and BMP. +
+An example would look like this: +"; block_start(); echo " +<file_info> + <name>stat_icon_01.png</name> + <url>http://www.example.com/download/stat_icon_01.png.gz</url> +</file_info> +<project_files> + <file_ref> + <file_name>stat_icon_01.png</file_name> + <open_name>stat_icon</open_name> + </file_ref> +</project_files> +"; block_end(); echo " +
+Two things to note here: +
+You can have one or more images displayed in the Simple GUI when BOINC is processing your +task. Each image can have a height of 126px and a width of 290px, and can be any of the +following image types: PNG, JPG, GIF, and BMP. +
+An example would look like this: +"; block_start(); echo " +<file_info> + <name>slideshow_exampleapp_01_01.png</name> + <url>http://www.example.com/download/slideshow_exampleapp_01_01.png</url> +</file_info> +<file_info> + <name>slideshow_exampleapp_02_01.png</name> + <url>http://www.example.com/download/slideshow_exampleapp_02_01.png</url> +</file_info> +<project_files> + <file_ref> + <file_name>slideshow_exampleapp_01_01.png</file_name> + <open_name>slideshow_exampleapp_01</open_name> + </file_ref> + <file_ref> + <file_name>slideshow_exampleapp_02_01.png</file_name> + <open_name>slideshow_exampleapp_02</open_name> + </file_ref> +</project_files> +"; block_end(); echo " +
+In this example:
+slideshow_exampleapp_02_01.png
+
+'slideshow_' is the beginning of what the manager is looking for, 'exampleapp' is the +applications short name for which the slideshow belongs too, '02' is the index of the +slide within the slideshow, and 01 is the version of the file. +
+ +
+Here is the 'project_files.xml' file SETI@Home is using: +"; block_start(); echo " +<file_info> + <name>arecibo_181.png</name> + <url>http://setiathome.berkeley.edu/sg_images/arecibo_181.png</url> +</file_info> +<file_info> + <name>sah_40.png</name> + <url>http://setiathome.berkeley.edu/sg_images/sah_40.png</url> +</file_info> +<file_info> + <name>sah_banner_290.png</name> + <url>http://setiathome.berkeley.edu/sg_images/sah_banner_290.png</url> +</file_info> +<file_info> + <name>sah_ss_290.png</name> + <url>http://setiathome.berkeley.edu/sg_images/sah_ss_290.png</url> +</file_info> +<project_files> + <file_ref> + <file_name>sah_40.png</file_name> + <open_name>stat_icon</open_name> + </file_ref> + <file_ref> + <file_name>sah_ss_290.png</file_name> + <open_name>slideshow_setiathome_enhanced_00</open_name> + </file_ref> + <file_ref> + <file_name>arecibo_181.png</file_name> + <open_name>slideshow_setiathome_enhanced_01</open_name> + </file_ref> + <file_ref> + <file_name>sah_banner_290.png</file_name> + <open_name>slideshow_setiathome_enhanced_02</open_name> + </file_ref> +</project_files> +"; block_end(); echo " +"; +page_tail(); +?>