2
require_once("docutil.php");
3
page_head("Creating a skin for the BOINC Manager");
5
This document describes how to customize the appearance
6
of the BOINC Manager simple GUI (available in 5.8+).
10
<li><a href=#Skin>Skins</a>
12
<li><a href=\"#Localization\">Localization</a>
13
<li><a href=\"#Layout\">Layout</a>
14
<li><a href=\"#Samples\">Samples</a>
16
<li><a href=\"#SkinCollections\">Skin Collections</a>
18
<li><a href=\"#Simple\">Simple</a>
19
<li><a href=\"#Advanced\">Advanced</a>
20
<li><a href=\"#Wizards\">Wizards</a>
22
<li><a href=\"#SkinBasicElements\">Skin Basic Elements</a>
24
<li><a href=\"#Image\">Image</a>
25
<li><a href=\"#Icon\">Icon</a>
26
<li><a href=\"#SimpleTab\">Simple Tab</a>
27
<li><a href=\"#SimpleLink\">Simple Link</a>
28
<li><a href=\"#SimpleButton\">Simple Button</a>
30
<li> <a href=#stencils>Stencils</a>
33
<h3><a name=Skin>Skins</a></h3>
35
Skins allow you to customize how the BOINC Manager looks.
37
A skin.xml file needs to be created for any customized skin.
38
This document describes the layout of the skin.xml file.
40
A skin.xml file should be contained within its
41
own directory under the 'skins' directory.
43
An example would look like this:
44
"; block_start(); echo "
52
"; block_end(); echo "
55
<h4><a name=\"Localization\">Localization</a></h4>
57
BOINC Manager attempts to find and use localized skin references.
58
It falls back to a suitable language
59
and if none can be found it'll fall back to English.
61
language being searched for can be done in the Advanced GUI's option dialog.
63
If the prefered language is 'pt_BR' and it cannot be found then the next language searched for is 'pt'.
64
If 'pt cannot be found then the manager resorts to 'en'.
66
<h4><a name=\"Layout\">Layout</a></h4>
68
The skin.xml file is described as follows:
69
"; block_start(); echo "
72
<<a href=\"#Simple\">simple</a> />
73
[ <<a href=\"#Advanced\">advanced</a> /> ]
74
[ <<a href=\"#Wizards\">wizards</a> /> ]
77
<<a href=\"#Simple\">simple</a> />
78
[ <<a href=\"#Advanced\">advanced</a> /> ]
79
[ <<a href=\"#Wizards\">wizards</a> /> ]
82
<<a href=\"#Simple\">simple</a> />
83
[ <<a href=\"#Advanced\">advanced</a> /> ]
84
[ <<a href=\"#Wizards\">wizards</a> /> ]
87
"; block_end(); echo "
89
Both the <a href=\"#Advanced\">advanced</a> and <a href=\"#Wizards\">wizards</a> collections are optional.
92
<h4><a name=\"Sample\">Sample</a></h4>
94
The World Community Grid skin can be found <a href=http://boinc.berkeley.edu/trac/browser/trunk/boinc/clientgui/skins/World%20Community%20Grid>here</a>.
97
<h3><a name=\"SkinCollections\">Skin Collections</a></h3>
99
<h4><a name=\"Simple\">Simple</a></h4>
101
The Simple collection contains all the elements need to construct the Simple GUI.
103
The Simple collection contains the following elements:
108
<th>Image Height</th>
113
<td>background_image</td>
114
<td><a href=\"#Image\">Image</a></td>
118
Used as the Simple GUI background image.<br>
119
A background color should be specified for this element.
123
<td>spacer_image</td>
124
<td><a href=\"#Image\">Image</a></td>
127
<td>Used to seperate the links on the bottom of the Simple GUI</td>
130
<td>static_line_color</td>
134
<td>The color is represented as an RGB value with the token being ':'</td>
137
<td>state_indicator_background_image</td>
138
<td><a href=\"#Image\">Image</a></td>
144
<td>connecting_indicator_image</td>
145
<td><a href=\"#Image\">Image</a></td>
151
<td>error_indicator_image</td>
152
<td><a href=\"#Image\">Image</a></td>
158
<td>workunit_active_tab</td>
159
<td><a href=\"#SimpleTab\">Simple Tab</a></td>
165
<td>workunit_suspended_tab</td>
166
<td><a href=\"#SimpleTab\">Simple Tab</a></td>
172
<td>workunit_tab_area_background_image</td>
173
<td><a href=\"#Image\">Image</a></td>
179
<td>workunit_area_background_image</td>
180
<td><a href=\"#Image\">Image</a></td>
186
<td>workunit_animation_background_image</td>
187
<td><a href=\"#Image\">Image</a></td>
193
<td>workunit_animation_image</td>
194
<td><a href=\"#Image\">Image</a></td>
200
<td>workunit_gauge_background_image</td>
201
<td><a href=\"#Image\">Image</a></td>
207
<td>workunit_gauge_progress_indicator_image</td>
208
<td><a href=\"#Image\">Image</a></td>
214
<td>project_area_background_image</td>
215
<td><a href=\"#Image\">Image</a></td>
221
<td>project_image</td>
222
<td><a href=\"#Image\">Image</a></td>
225
<td>Default image to display for a project that does not currently have an image defined.</td>
228
<td>attach_project_button</td>
229
<td><a href=\"#SimpleButton\">Simple Button</a></td>
235
<td>right_arrow_button</td>
236
<td><a href=\"#SimpleButton\">Simple Button</a></td>
242
<td>left_arrow_button</td>
243
<td><a href=\"#SimpleButton\">Simple Button</a></td>
250
<td><a href=\"#SimpleButton\">Simple Button</a></td>
256
<td>cancel_button</td>
257
<td><a href=\"#SimpleButton\">Simple Button</a></td>
263
<td>close_button</td>
264
<td><a href=\"#SimpleButton\">Simple Button</a></td>
270
<td>copy_all_button</td>
271
<td><a href=\"#SimpleButton\">Simple Button</a></td>
278
<td><a href=\"#SimpleButton\">Simple Button</a></td>
284
<td>messages_link_image</td>
285
<td><a href=\"#SimpleLink\">Simple Link</a></td>
291
<td>messages_alert_link_image</td>
292
<td><a href=\"#SimpleLink\">Simple Link</a></td>
298
<td>suspend_link_image</td>
299
<td><a href=\"#SimpleLink\">Simple Link</a></td>
305
<td>resume_link_image</td>
306
<td><a href=\"#SimpleLink\">Simple Link</a></td>
312
<td>preferences_link_image</td>
313
<td><a href=\"#SimpleLink\">Simple Link</a></td>
319
<td>advanced_link_image</td>
320
<td><a href=\"#SimpleLink\">Simple Link</a></td>
326
<td>dialog_background_image</td>
327
<td><a href=\"#Image\">Image</a></td>
331
The dialogs height and width change according to the configuraton of the computer
332
so the center of the image is what is drawn on to the dialog.
337
The Simple collection is described as follows:
338
"; block_start(); echo "
340
<background_image />
341
<spacer_image />
344
"; block_end(); echo "
348
<h4><a name=\"Advanced\">Advanced</a></h4>
350
The Advanced collection contains all the elements need to construct the Advanced GUI.
352
The Advanced collection contains the following elements:
357
<th>Image Height</th>
362
<td>application_name</td>
366
<td>Displayed in title bar.</td>
369
<td>application_icon</td>
370
<td><a href=\"#Icon\">Icon</a></td>
373
<td>Taskbar icon.</td>
376
<td>application_disconnected_icon</td>
377
<td><a href=\"#Icon\">Icon</a></td>
380
<td>Taskbar icon when disconnected.</td>
383
<td>application_snooze_icon</td>
384
<td><a href=\"#Icon\">Icon</a></td>
387
<td>Taskbar icon when snoozing.</td>
390
<td>application_logo</td>
394
<td>Application logo that appears in the about box.</td>
397
<td>company_name</td>
401
<td>Company associated with the release of the client software package.</td>
404
<td>company_website</td>
408
<td>Company website.</td>
411
<td>project_name</td>
415
<td>Shorter version of the application name, or a specific project who sponsored the client package.</td>
422
<td>Which tab to open by default in the Advanced GUI. A value of '0' means open the last tab used.</td>
425
<td>exit_message</td>
429
<td>What message should be sent to the user when they close BOINC manager.</td>
433
The Advanced collection is described as follows:
434
"; block_start(); echo "
436
<application_name />
437
<application_icon />
440
"; block_end(); echo "
444
<h4><a name=\"Wizards\">Wizards</a></h4>
446
The Wizards collection consists of two elements which are broken out into the attach
447
to project wizard and the attach to account manager wizard.
449
The attach to project element is descibed like this:
450
"; block_start(); echo "
451
<attach_to_project>
452
<title>Attach to Project</title>
453
<logo>graphic/logo.png</logo>
454
</attach_to_project>
455
"; block_end(); echo "
457
The title is displayed in the wizard's title bar.
459
The logo is played on each wizard page and should have a height of 280px and a width of 115px.
460
logos can be any of the following types: PNG, JPG, GIF, and BMP. The logo location should be
461
specified as a path relative to the skin.xml description file. The path seperator should be a
462
'/' for all platforms.
464
The attach to account manager element is descibed like this:
465
"; block_start(); echo "
466
<attach_to_account_manager>
467
<title>Attach to Account Manager</title>
468
<logo>graphic/logo.png</logo>
469
<account_info_message></account_info_message>
470
</attach_to_account_manager>
471
"; block_end(); echo "
473
The title is displayed in the wizard's title bar.
475
The logo is played on each wizard page and should have a height of 280px and a width of 115px.
476
logos can be any of the following types: PNG, JPG, GIF, and BMP. The logo location should be
477
specified as a path relative to the skin.xml description file. The path seperator should be a
478
'/' for all platforms.
480
The account_info_message is text that is displayed when the user is asked for
481
username/email address and password information for the account manager.
483
The Wizards collection is described as follows:
484
"; block_start(); echo "
486
<attach_to_project />
487
<attach_to_account_manager />
490
"; block_end(); echo "
494
<h3><a name=\"SkinBasicElements\">Skin Basic Elements</a></h3>
496
<h4><a name=\"Image\">Image</a></h4>
498
Images are used for backgrounds and miscellaneous visual elements.
500
Images are described as follows:
501
"; block_start(); echo "
503
<imagesrc>graphics/image.jpg</imagesrc>
504
[ <background_color>255:0:255</background_color> ]
506
"; block_end(); echo "
508
imagesrc describes the name and location of the image in question. Images
509
can be any of the following types: PNG, JPG, GIF, and BMP. The image location
510
should be specified as a path relative to the skin.xml description file. The
511
path seperator should be a '/' for all platforms.
513
NOTE: we have had reports of JPG files not working with background_image,
514
project_area_background_image, dialog_background_image, and
515
workunit_area_background_image. If you experience this issue swithc the
516
image file format to PNG. We'll try to address this issue in 5.10.x.
518
background_color is optional and describes the backgrond color that
519
should be painted on to the dialog before the image is drawn over the top
520
of it. The color is represented as an RGB value with the token being ':'.
524
<h4><a name=\"Icon\">Icon</a></h4>
526
These elements are used to describe the taskbar icons in various states.
528
Icons are described as follows:
529
"; block_start(); echo "
531
<imagesrc>graphics/image.jpg</imagesrc>
532
<transparency_mask>255:0:255</transparency_mask>
534
"; block_end(); echo "
536
imagesrc describes the name and location of the image in question. Images
537
can be any of the following types: PNG, JPG, GIF, and BMP. The image location
538
should be specified as a path relative to the skin.xml description file. The
539
path seperator should be a '/' for all platforms.
541
transparency_mask describes the backgrond color that should be used as the
542
transparency mask. The color is represented as an RGB value with the token
547
<h4><a name=\"SimpleTab\">Simple Tab</a></h4>
549
The different types of simple tabs represent the different states an active
550
task can be displayed as.
552
Tabs are described as follows:
553
"; block_start(); echo "
555
<imagesrc>graphic/icon.png</imagesrc>
556
<border_color>51:102:102</border_color>
557
<gradient_from_color>51:102:102</gradient_from_color>
558
<gradient_to_color>134:179:176</gradient_to_color>
560
"; block_end(); echo "
562
imagesrc describes the name and location of the image in question. Images
563
can be any of the following types: PNG, JPG, GIF, and BMP. The image location
564
should be specified as a path relative to the skin.xml description file. The
565
path seperator should be a '/' for all platforms.
567
border_color describes the color that surrounds the tab. The color is
568
represented as an RGB value with the token being ':'.
570
gradient_from_color describes the color that should start the gradient
571
effect. The color is represented as an RGB value with the token being ':'.
573
gradient_to_color describes the color that should finish the gradient
574
effect. The color is represented as an RGB value with the token being ':'.
578
<h4><a name=\"SimpleLink\">Simple Link</a></h4>
580
Links are images that cause an action to happen. Links do not change state
583
Links are described as follows:
584
"; block_start(); echo "
586
<imagesrc>graphic/image.png</imagesrc>
588
"; block_end(); echo "
590
imagesrc describes the name and location of the image in question. Images
591
can be any of the following types: PNG, JPG, GIF, and BMP. The image location
592
should be specified as a path relative to the skin.xml description file. The
593
path seperator should be a '/' for all platforms.
597
<h4><a name=\"SimpleButton\">Simple Button</a></h4>
599
Buttons are images that cause an action to happen. Buttons can be at rest or in
600
a clicked state. When the button is clicked it changes to the clicked image.
602
Buttons are described as follows:
603
"; block_start(); echo "
605
<imagesrc>graphic/button.png</imagesrc>
606
<imagesrc_clicked>graphic/button_clicked.png</imagesrc_clicked>
608
"; block_end(); echo "
610
imagesrc describes the name and location of the image in question. Images
611
can be any of the following types: PNG, JPG, GIF, and BMP. The image location
612
should be specified as a path relative to the skin.xml description file. The
613
path seperator should be a '/' for all platforms.
615
imagesrc_clicked describes the name and location of the image in question. Images
616
can be any of the following types: PNG, JPG, GIF, and BMP. The image location
617
should be specified as a path relative to the skin.xml description file. The
618
path seperator should be a '/' for all platforms.
621
<h3><a name=stencils>Stencils</a></h3>
623
Making skins is simplified with the use of the following 3
624
'stencils' (these are transparent GIFs).
627
<li> To use the templates,
628
use a graphical application such as Photoimpact
629
that supports objects in multiple layers,
630
allowing you to move the templates
631
above the appropriate (background-) image to the desired position.
633
<li> The meaning of the template colours is as follows:
634
The green lines / edges serve the positioning of the template
635
above the respective (background-) image.
636
The area tagged with red lines corresponds to the space
637
to cut / paste for sequential images.
638
<li> The source for the creation of a skin is an existing,
639
complete background image with the size of 410 x 540 pixels.
640
<li> Beginning with template_1 (to be moved,
641
positioned and copied across the background_image)
642
the creation of the workunit_area_background_image
643
and the project_area_background_image takes place.
644
<li> Now, if desired, the workunit_area_background_image and
645
the project_area_background_image can be designed separately
646
depending on the desired effects (i.e. transparency).
648
<li> Subsequently template_2 (by copying, moving or positioning)
649
can be used on the background_image, workunit_background_image
650
or project_background_image to achieve the desired effects
651
(i.e. transparency) in order to create further desired images
652
(i.e. workunit_tab_area_background_image,
653
workunit_gauge_background_image etc.)
655
<p> <img src=images/Stencil_1.gif>
656
<p><img src=images/Stencil_2.gif>
657
<p><img src=images/Stencil_3.gif>
added
removed
doc/manager_skin.php
