找回密码
 新注册用户
搜索
查看: 7386|回复: 6

[已完成翻译] 创建BOINC管理器皮肤Creating a skin for the BOINC Manager[已翻译:Nye]

[复制链接]
发表于 2007-11-15 05:55:20 | 显示全部楼层 |阅读模式
来自这一页的 http://boinc.berkeley.edu/trac/wiki/ManagerSkin (该页下部有GNU许可,不知这样算不算合理的使用?)


创建BOINC管理器的皮肤Creating a skin for the BOINC Manager

这篇文章记述的是如何制作BOINC管理器简单视图的外观(BOINC皮肤)

This document describes how to customize the appearance of the BOINC Manager simple view.
皮肤Skins

皮肤允许你定制BOINC管理器的样式。Skins allow you to customize how the BOINC Manager looks.
任何皮肤都需要skin.xml文件。这篇文章将告诉你skin.xml文件的格式。A skin.xml file needs to be created for any customized skin. This document describes the layout of the skin.xml file.
skin.xml文件应在skins文件夹下自身的目录里(即该皮肤名称的目录下)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.

假如“pt_BR”是正确的地区并且它在该皮肤中找不到,则下一个搜索的语言是“pt”。如果“pt”也找不到,则会转为“en”。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>

advanced与wizards是可选的。Both the advanced and wizards collections are optional.

示例Samples



Skin Collections(这里的Collections我实在不知道要翻译成什么好(底下都是这样)

简易Simple

这些都是构成简易GUI所必需的。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


410px

540px

背景图片。应指明背景色。Used as the Simple GUI background image. A background color should be specified for this element.

spacer_image


2px

11px

用于分隔简易GUI上部的链接。Used to separate the links on the bottom of the Simple GUI

static_line_color

String





使用“:”代表RGB颜色The color is represented as an RGB value with the token being ':'

state_indicator_background_image


264px

35px



connecting_indicator_image


14px

15px



error_indicator_image


69px

20px



workunit_active_tab


16px

16px



workunit_suspended_tab


16px

16px



workunit_tab_area_background_image


343px

24px



workunit_area_background_image


343px

314px



workunit_animation_background_image


294px

146px



workunit_animation_image


290px

126px



workunit_gauge_background_image


258px

18px



workunit_gauge_progress_indicator_image


8px

7px



project_area_background_image


343px

113px



project_image


40px

40px

假如项目没图片,用这个图作为默认的。Default image to display for a project that does not currently have an image defined.

attach_project_button


81px

18px



right_arrow_button


20px

20px



left_arrow_button


20px

20px



save_button


57px

16px



synchronize_button


81px

18px



cancel_button


57px

16px



close_button


57px

16px



help_button


18px

18px



copy_all_button


85px

18px



copy_button


85px

18px



messages_link_image


70px

20px



messages_alert_link_image


70px

20px



suspend_link_image


59px

20px



resume_link_image


59px

20px



preferences_link_image


81px

20px



advanced_link_image


101px

20px



dialog_background_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

高级视图包括高级GUI所需的要素。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


16px

16px

任务栏图标Taskbar icon.

application_disconnected_icon


16px

16px

无法连接时的任务栏图标Taskbar icon when disconnected.

application_snooze_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





高级GUI默认显示。“0”表示打开上次使用的。Which tab to open by default in the Advanced GUI. A value of '0' means open the last tab used.

exit_message

String





BOINC管理器关闭时显示给用户。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>





===============
已由Nye翻译完毕(见3、4楼)。十分感谢。


[ 本帖最后由 cnchina 于 2007-11-16 20:31 编辑 ]
回复

使用道具 举报

 楼主| 发表于 2007-11-15 05:56:03 | 显示全部楼层
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.)

一页发不下,再发一次。
回复

使用道具 举报

发表于 2007-11-16 18:20:52 | 显示全部楼层
为BOINC Manager创建皮肤
本文档将描述如何自定义BOINC Manger普通视图的外观。

皮肤
皮肤可以使你自定义BOINC Manager的外观。

任何自定义皮肤都需要一个skin.xml文件。本文档将介绍skin.xml文件的结构。

skin.xml应当包含在在'skins'文件夹下自己的目录内。

实例:
+ /BOINC
|
+---+ /Skins
    |
    +---+ /Skin Name
        |
        +---+ skin.xml
        |
        +---+ <skin resources>

本地化

BOINC Manager 会尝试找出并使用本地化的皮肤选项。它将自动选择合适的语言,如果无法找到合适的语言,则回到英文。在‘Advanced GUI’的选项对话框内可以设置忽略语言搜索功能。

如果当前的本地设置为'pt_BR',而所选择的皮肤里无法找到这个本地设置,那么下一个要搜索的语言就是'pt'。如果'pt’也无法找到,那么Manager就会选择'en'。

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


结构
skin.xml文件结构如下:
<skin>
    <pt_BR>
        <simple />
        [ <advanced /> ]
        [ <wizards /> ]
    </pt_BR>
    <pt>
        <simple />
        [ <advanced /> ]
        [ <wizards /> ]
    </pt>
    <en>
        <simple />
        [ <advanced /> ]
        [ <wizards /> ]
    </en>
</skin>

以上的advanced和wizard部分都是可选的。

示例
World Communit Grid 皮肤
Skin examples 皮肤实例

皮肤设计语句
普通设计语句
普通设计语句包含组成Simple GUI的所有元素。
普通设计语句内有:
Name名字Type
类型
Image Width
宽度
Image Height
高度
Notes
备注
background_imageImage410px540pxUsed as the Simple GUI background image. A background color should be specified for this element. 用作Simple GUI背景图像。此元素需要确定一个背景颜色。
spacer_imageImage2px11pxUsed to separate the links on the bottom of the Simple GUI
用于分隔Simple GUI底部的链接
static_line_colorString

The color is represented as an RGB value with the token being ':'
此颜色以':'为标志,用RGB值表示。
state_indicator_background_imageImage264px35px
connecting_indicator_imageImage14px15px
error_indicator_imageImage69px20px
workunit_active_tabSimple Tab16px16px
workunit_suspended_tabSimple Tab16px16px
workunit_tab_area_background_imageImage343px24px
workunit_area_background_imageImage343px314px
workunit_animation_background_imageImage294px146px
workunit_animation_imageImage290px126px
workunit_gauge_background_imageImage258px18px
workunit_gauge_progress_indicator_imageImage8px7px
project_area_background_imageImage343px113px
project_imageImage40px40pxDefault image to display for a project that does not currently have an image defined. 未设定图片的项目的默认显示图片。
attach_project_buttonSimple Button81px18px
right_arrow_buttonSimple Button20px20px
left_arrow_buttonSimple Button20px20px
save_buttonSimple Button57px16px
synchronize_buttonSimple Button81px18px
cancel_buttonSimple Button57px16px
close_buttonSimple Button57px16px
help_buttonSimple Button18px18px
copy_all_buttonSimple Button85px18px
copy_buttonSimple Button85px18px
messages_link_imageSimple Link70px20px
messages_alert_link_imageSimple Link70px20px
suspend_link_imageSimple Link59px20px
resume_link_imageSimple Link59px20px
preferences_link_imageSimple Link81px20px
advanced_link_imageSimple Link101px20px
dialog_background_imageImage800px600pxThedialogs height and width change according to the configuration of thecomputer so the center of the image is what is drawn on to the dialog. 对话框的高和宽随着计算机的设置而变化,所以图像的中心就是在对话框中所指定的位置。

普通设计语句结构如下:
<simple>
    <background_image />
    <spacer_image />
    ...
</simple>



评分

参与人数 2基本分 +300 维基拼图 +180 收起 理由
BiscuiT + 300 + 150
霊烏路 空 + 30

查看全部评分

回复

使用道具 举报

发表于 2007-11-16 18:21:25 | 显示全部楼层
高级设计语句
高级设计语句包含组成Advanced GUI的所有元素。
高级设计语句内有:
NameTypeImage WidthImage HeightNotes
application_nameString
      

      
Displayed in title bar. 显示于标题栏
      
application_short_nameString
      

      
Shorter version of the application name 名字的简写
      
application_iconIcon16px16pxTaskbar icon. 任务栏图标
      
application_disconnected_iconIcon16px16pxTaskbar icon when disconnected. 无连接时任务栏图标
      
application_snooze_iconIcon16px16pxTaskbar icon when snoozing. 休息时任务栏图标
      
application_logoString50px50pxApplication logo that appears in the about box. 显示在“关于”里的logo
      
organization_nameString
      

      
Organization associated with the release of the client software package.
与客户端软件包发布相关的组织。
      
organization_websiteString
      

      
Organization website.组织的网站。      
organization_help_urlString
      

      
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_tabNumber
      

      
Which tab to open by default in the Advanced GUI. A value of '0' means open the last tab used.      
exit_messageString
      

      
What message should be sent to the user when they close BOINC manager.      

高级设计语句结构如下:
<advanced>
    <application_name />
    <application_icon />
    ...
</advanced>

向导设计语句
向导设计语句包含两个元素,分为项目向导附加元素和帐号向导附加元素。
项目向导附加元素结构如下:
<attach_to_project>
    <title>Attach to Project</title>
    <logo>graphic/logo.png</logo>
</attach_to_project>
其中标题会在向导的标题栏中显示。
logo将在向导的每个页面里显示,logo文件应高280px,宽115px。格式可以为以下任何一种:PNG,JPG,GIF,和BMP。logo文件的放置位置应参照skin.xml描述文件,其中地址分隔符在所有平台下都为'/'。
帐号向导附加元素结构如下:
<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>
其中标题会在向导的标题栏中显示。
logo将在向导的每个页面里显示,logo文件应高280px,宽115px。格式可以为以下任何一种:PNG,JPG,GIF,和BMP。logo文件的放置位置应参照skin.xml描述文件,其中地址分隔符在所有平台下都为'/'。

皮肤基本元素
图像
图像用于背景和其它视觉元素。
图像语句结构如下:
<image>
    <imagesrc>graphics/image.jpg</imagesrc>
    [ <background_color>255:0:255</background_color> ]
</image>
imagesrc语句描述所使用的图像的名字和位置。图像文件格式可以为以下任何一种:PNG,JPG,GIF,和BMP。其位置应参照skin.xml描述文件,其中地址分隔符在所有平台下都为'/'。
注意:我们收到过JPG格式文件在backgroud_image,project_area_backgroud_image,dialog_backgroud_image和workunit_area_backgroud_image语句里无效的报告。如果你也遇到了这样的情况,请把图像文件转为PNG格式。我们会在5.10.x版本里修正这个问题。
background_color语句是可选的,它描述的是在描绘出图像以前在对话框里要显示的颜色(译:就是对话框的背景色)。此颜色以':'为标志,用RGB值表示。

图标
这些元素用于描述多种场合下任务栏的图标。
图标语句结构如下:
<image>
    <imagesrc>graphics/image.jpg</imagesrc>
    <transparency_mask>255:0:255</transparency_mask>
</image>
imagesrc描述所使用图像文件的名字和位置。文件格式可以为以下任何一种:PNG,JPG,GIF,和BMP。而位置应参照skin.xml描述文件,其中地址分隔符在所有平台下都为'/'。
transparency_mask描述应作为透明蒙版的背景色。此颜色以':'为标志,用RGB值表示。

普通选项卡
普通选项卡的各种类型就表示活动任务可以显示的各种状态。
选项卡语句结构如下:
<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描述所使用图像文件的名字和位置。文件格式可以为以下任何一种:PNG,JPG,GIF,和BMP。而位置应参照skin.xml描述文件,其中地址分隔符在所有平台下都为'/'。
border_color描述标识外圈的颜色。此颜色以':'为标志,用RGB值表示。
gradient_from_color描述开始渐变效果的颜色。此颜色以':'为标志,用RGB值表示。
gradient_to_color描述结束渐变效果的颜色。此颜色以':'为标志,用RGB值表示。

普通链接
链接是指能引发一个动作的图像。当被点击时,链接不改变状态。
链接语句结构如下:
<image>
    <imagesrc>graphic/image.png</imagesrc>
</image>
imagesrc描述所使用图像文件的名字和位置。文件格式可以为以下任何一种:PNG,JPG,GIF,和BMP。而位置应参照skin.xml描述文件,其中地址分隔符在所有平台下都为'/'。

普通按钮

按钮是指能引发一个动作的图像。按钮有未被点击和被点击两个状态。当被点击时,按钮就显示为被点击图像。
按钮语句结构如下:
<button>
    <imagesrc>graphic/button.png</imagesrc>
    <imagesrc_clicked>graphic/button_clicked.png</imagesrc_clicked>
</button>
imagesrc描述所使用图像(未被点击图像)文件的名字和位置。文件格式可以为以下任何一种:PNG,JPG,GIF,和BMP。而位置应参照skin.xml描述文件,其中地址分隔符在所有平台下都为'/'。
imagesrc_clicked描述所使用图像(被点击图像)文件的名字和位置。文件格式可以为以下任何一种:PNG,JPG,GIF,和BMP。而位置应参照skin.xml描述文件,其中地址分隔符在所有平台下都为'/'。

版式
使用以下3种版式将是皮肤制作变得更加容易(以下版式为透明GIF)。
* 要使用模板,就要有能支持多层对象的图像处理程序,如Photoimpact,这样你就能把模板移到合适图像(背景图像)上所想要放置的位置。
* 模板颜色说明:绿色线/边缘线表示模板在相应图像(背景图像)上的位置。红色线条标示的区域对应于剪切/粘贴依次图像的位置。
* 创造一个皮肤所需要的是一个现有的完整的背景图像,大小410×540像素。
* 从template_1开始(通过移动,放置,复制到背景图像中),我们开始创建workunit_area_backgroud_image和project_area_backgroud_image。
* 现在,如果需要,workunit_area_backgroud_image和project_area_backgroud_image可以分别按照需要的效果进行设计(比如透明效果)。
*然后,template_2(通过复制,移动和放置)可以用于background_image,workunit_backgroud_image和project_background_image,以达到需要的效果(比如透明效果),最终创造以后需要的图像(如workunit_tab_area_background_image, workunit_gauge_background_image等)。

评分

参与人数 1维基拼图 +40 收起 理由
霊烏路 空 + 40

查看全部评分

回复

使用道具 举报

 楼主| 发表于 2007-11-16 20:14:38 | 显示全部楼层
感谢Nye的翻译。(比预料中的更好、更快。:)
回复

使用道具 举报

发表于 2008-6-27 20:23:02 | 显示全部楼层
来自这一页的 http://boinc.berkeley.edu/trac/wiki/ManagerSkin (该页下部有GNU许可,不知这样算不算合理的使用?)

才半年时间链接无效了。尝试搜索相关没有结果。GOOGLE关键字“ManagerSkin”第一个结果都是无效的。还没有和官方联系,不知道还能不能恢复。
回复

使用道具 举报

发表于 2008-6-27 21:03:18 | 显示全部楼层
几个月前boinc的官方有过一次大调整,用户相关的都从trac下剥离出来放在wiki下了:

http://boinc.berkeley.edu/wiki/C ... r_the_BOINC_Manager
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 新注册用户

本版积分规则

论坛官方淘宝店开业啦~

Archiver|手机版|小黑屋|中国分布式计算总站 ( 沪ICP备05042587号 )

GMT+8, 2024-3-29 09:40

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表