PenCommander Skin definition file

The PenCommander Skin Definition (SD) file is a simple XML file. Each SD file contains one <Doc>…</Doc> element and one <Skin>…</Skin> sub-element.

 

File Header (required)

Below is the standard XML file header. We recommend you do not change this part when creating or modifying a PenCommander skin. The <Doc> tag has the required version attribute which must be set to 1 (see example 1).

 

Example 1: Skin definition file header

 

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>

<!-- PhatWare PenCommander Skin Definition File -->

<Doc version="1">

 

Skin Open Tag (required)

The <Skin>…</Skin> element starts with the <Skin> tag containing one attribute name. The skin name appears in the Skin Selector dialog box.

 

Example 2: Skin tag

 

<Skin name="My Favorite Skin">

 

Attributes Section (required)

Attributes section includes the following elements:

  1. The <Description>[text]</Description> element defines the text displayed in the Description section of the Skin Selector dialog box. The description text should not exceed 255 characters.

  2. The <Color> element defines the mask color used for all bitmaps including buttons. When background and button bitmaps are drawn, the matching color will become transparent. To change the mask color, modify values of the green, red and blue attributes (each RGB color component can be represented by a positive integer between 0 and 255).

  3. The <Sound> element specifies optional sounds that play when the PenCommand is executed. You can specify 2 different sounds: one will be played in case of the successful execution of the PenCommand and another in case of error. The <Sound> element has 2 attributes: type, which must be set to either success or error and name, which must specify the relative sound file name (Windows WAV file).

  4. The <Background> element specifies the file name of the background bitmap. Its only attribute - name - specifies the file name. The path name must be relative to the skin definition file. Only 16 or 24 bit Windows bitmap images are currently supported. The PenCommander main window is resized to match the background bitmap size.
    Note that it is not recommended to create background bitmaps larger than 350x350 pixels.

  5. The <Button>…<Button> sub-element inside the <Attributes>…</Attributes> section specifies the PenCommander Close button. This button closes the PenCommander window, but leaves the application running. The <Button>…</Button> element has 5 attributes:

    1. The Top and left attributes are required and specify the position of the button relative to the top left corner of the background image (in pixels). The coordinates correspond to the top left corner of the button.

    2. The command attributes is optional and is not used.

    3. The tooltip attribute is also optional; however, if the tool tip attribute is specified, the tool tip window showing the specified text will not be displayed when the cursor is pointed at the Close button.

    4. The id attribute specifies the button’s unique command ID. It must be set to 30005 (see “Table 1: Numeric values of supported menu commands” below).

 

The <Button>…<Button> element also has two <Image> sub-elements. Each <Image> element has 2 attributes: type and name. The name attribute specifies the image file name and the type attribute the image type. Currently the Close button supports only two types: normal (the button is not pressed, default) and pressed (the button is pressed).

 

Example 3: Attributes Element

 

<Attributes>

    <Description>Large Blue PenCommander Skin</Description>

    <Color green="255" red="255" Blue="255" />

    <Background name="PenCommnader.bmp" />

    <Button top="5" left="240" command=" " tooltip="Close" id="30005" >

        <Image type="normal" name=" close-normal.bmp" />

        <Image type="pressed" name=" close-down.bmp" />

    </Button>

    <Sound type="success" name="Default\success.wav"/>

    <Sound type="error" name="Default\error.wav"/>

</Attributes>

 

The Input Panel Section (required)

The <Input Panel>…</Input Panel> element specifies the position and size of the Input Panel (Ink Control) window and ink (pen) color. The top and left attributes specify the position of the Input Panel. All coordinates are relative to the top left corner of the background image. The width and height attributes specify the Input Panel size in pixels. If the optional transparent attribute is set to yes, the Input Panel will be transparent.

The <Color> sub-element is optional and specifies the Input Panel color. The default ink color is white. To change the ink color, set the red, green and blue attributes of the <Color> element. If the transparent attribute is set to yes, Input Panel color is ignored.

The <Pen>…</Pen> sub element is optional. It can be used to specify Pen width and color (see example below). The default pen color is black while the default pen width is 53 in HIMETRIC units (HIMETRIC unit is 0.01mm, so 53 HIMETRIC units corresponds to 2 pixels on the 96-dpi screen).

 

Example 4: Input Panel Element

 

<InputPanel top="23" left="10" width="218" height="93" transparent="yes">

    <Pen width="53">

        <Color green="32" red="32" Blue="128" />

    </Pen>

    <Color green="255" red="255" Blue="255" />

</InputPanel>

 

The Status Section (optional)

The <Status>…</Status> element is optional. It defines the color, font and position of the status text. If this element is not present in the skin file, the status text will not be displayed. The top and left tags specify the text position relative to the top left corner of the background image (in pixels).

Two additional sub-elements - <color> and <font> - define the appearance of the status text. As before, the <Color> element has 3 attributes – red, green and blue. The <Font> element has 4 attributes. The name and size attributes are required and specify font name and size respectively. The bold and italic attributes are optional and specify additional font styles. If you want to enable bold and/or italic style, set its value(s) to yes (see the example below).

 

Example 5: Status Element

 

<Status top = "121" left="11">

    <Color green="255" red="255" Blue="255" />

    <Font name="Arial" size="12" bold="yes" italic="no" />

</Status>

 

The Buttons Section (optional)

Additionally, you can add up to 40 custom push buttons to appear on the PenCommander window. There are two categories of custom buttons: buttons that execute specific PenCommands and buttons that duplicate popup menu commands.

 

Table 1: Numeric values of supported menu commands

 

Options                       30001

Start Visual PenCommander     30002

PenCommander Help             30003

Execute PenCommand            30004

Close PenCommander Window     30005

Exit PenCommander             30006

Show PenCommander Menu        30007

Change PenCommander Skin      30008

 

The top and left attributes specify the button position relative to the left top corner of the background bitmap. The tooltip attribute specifies an optional tool tip text.

Each custom button can also have up to three <Image> sub-elements. Each <Image> element has two attributes: type and name. The name attribute specifies the button’s image file name and the type attribute the image type. Custom buttons support three types: normal (the button is not pressed, default), pressed (the button is pressed) and disabled (the button is disabled).
Note that in this version of PenCommander, a custom button cannot be disabled and the disabled image element is ignored.
Below is the example of the typical <Buttons>…</ Buttons> section that contains two buttons. The first button executes the calc PenCommand and the second button displays the PenCommander Options dialog box.

 

 

Example 6: Buttons Element

 

<Buttons>

    <Button top="23" left="234" command="calc" tooltip="Calculator" id="11">

        <Image type="normal" name="calc-normal.bmp" />

        <Image type="pressed" name="calc-down.bmp" />

        <Image type="disabled" name="calc-gray.bmp" />

    </Button>

    <Button top="47" left="234" command="" tooltip="Options" id="30005">

        <Image type="normal" name="Default\option-normal.bmp" />

        <Image type="pressed" name="Default\option-down.bmp" />

        <Image type="disabled" name="Default\option-gray.bmp" />

    </Button>

</Buttons>

 

Skin definition file example.

Below is the example of the typical PenCommander skin definition file. It includes all required elements as well as optional elements, such as <Buttons>…</Buttons> and <Status>…</Status>.

 

Example 7: Typical Skin Definition File

 

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>

<!-- PhatWare PenCommander Skin Definition File -->

<Doc version="1">

<Skin name="Default">

<Attributes>

    <Description>Large Blue PenCommander Skin</Description>

    <Color green="255" red="255" blue="255" />

    <Background name="Default\PenCommanderUI.bmp" />

    <Button top="5" left="240" command="Close" tooltip="Close" id="30005">

        <Image type="normal" name="Default\close-normal.bmp" />

        <Image type="pressed" name="Default\close-down.bmp" />

    </Button>

    <Sound type="success" name="Default\success.wav"/>

    <Sound type="error" name="Default\error.wav"/>

    <Color green="255" red="255" blue="255" />

</Attributes>

<InputPanel top="23" left="10" width="218" height="93">

    <Color green="32" red="32" Blue="128" />

    <Pen width="53">

        <Color green="100" red="32" blue="210" />

    </Pen>

</InputPanel>

<Status top = "121" left="11">

    <Color green="255" red="0" Blue="255" />

    <Font name="Arial" size="12" bold="yes" italic="no" />

</Status>

<Buttons>

    <Button top="23" left="234" command="calc" tooltip="Calc" id="11">

        <Image type="normal" name="Default\ok-normal.bmp" />

        <Image type="pressed" name="Default\ok-down.bmp" />

        <Image type="disabled" name="Default\ok-gray.bmp" />

    </Button>

    <Button top="47" left="234" command="" tooltip="Options" id="30001">

        <Image type="normal" name="Default\option-normal.bmp" />

        <Image type="pressed" name="Default\option-down.bmp" />

        <Image type="disabled" name="Default\option-gray.bmp" />

    </Button>

    <Button top="71" left="234" tooltip="Visual PenCommander" id="30002">

        <Image type="normal" name="Default\vpc-normal.bmp" />

        <Image type="pressed" name="Default\vpc-down.bmp" />

        <Image type="disabled" name="Default\vpc-gray.bmp" />

    </Button>

    <Button top="95" left="234" command="" tooltip="Help" id="30003">

        <Image type="normal" name="Default\help-normal.bmp" />

        <Image type="pressed" name="Default\help-down.bmp" />

        <Image type="disabled" name="Default\help-gray.bmp" />

    </Button>

</Buttons>

</Skin>

</Doc>

 

See Also

PenCommander Skins dialog box