Select language
English : Russian
Desktop multi language  
Aston Shell Desktop manager and Shell replacement AltDesk virtual desktops aston desktop
Top main menuMainDownloadsRegistrationSupport 
Products
Aston2
  • Product details
  • Themes
  • Live desktop
  • Skinning Manual
  • Skinning Tutorials
  • Aston 1.x
  • Aston2 Menu
  • Product details
  • Skins
  • Aston Secure Desktop
  • Product details
  • AltDesk
  • Product details
  • FAQ
  • Skinning Tutorial
  • Skins
  • StarBlaze
  • Product details
  • FAQ
  • StarBlaze 2
  • Product details

  • Services
  • Upload center
  • Press
  • Links


    MrBiotech's site

    adni18 site

    Skinning.net site
    Freeware
  • Fox Hunting
  • c2pas32

  • Search

    Skin settings of standard widgets

     
     

    Skin settings of standard widgets.

    Panel.xml

    This file contains skins for following objects: popups, panels and sections for widgets. For example, here is the popup window of system start menu button:

    ...
        <object name="Popup"
                   disable_layered_style="0">
        
            <section_container>
                <pixel_rect  x="0" x2="0" y="16" y2="-2"/>
            </section_container>
            
            <close_button>
                <percent_rect x="100" x2="100" y="0"  y2="0"/>
                <pixel_rect   x="-40" x2="-10" y="10" y2="40"/>
            </close_button>
            
            <content_offset x="0" x2="0" y="-8" y2="8"/>
            
            <skin name="background"/>
            <skin name="foreground"/>
            <skin name="close button"/>
    
            <sounds>
                <sound event="sound_Show" file="test1.wav">
                <sound event="sound_Hide" file="test2.wav">
            </sounds>
    
        </object>
    ...
    

    The attribute disable_layered_style allows turn opaque window style on (if disable_layered_style="1").
    The section section_container contains percent and pixel components for section container rectangle (which contains sections with widgets).
    The section close_button contains percent and pixel components for close button rectangle (button allows to close popup window).
    The section content_offset contains pixel offset for popup windows relate to system start menu button.
    Supported skins are: "background", "foreground" and for "close button".
    Supported animation: "anim_Spawn", "anim_Highlight_On", "anim_Highlight_Off", "anim_Press_On", "anim_Press_Off". Supported sound events are: "sound_Show" and "sound_Hide".

    The side panels can be aligned to left, right, top or bottom. Accordingly, you can define objects with following names:

    • "Panel (Left)"
    • "Panel (Right)"
    • "Panel (Top)"
    • "Panel (Bottom)"
    • "Panel (Vertical)" - for left or right modes (if one of corresponded objects was being skipped)
    • "Panel (Horizontal) - for left or right modes (if one of corresponded objects was being skipped)"
    • "Panel" - default object (if no appropriate objects with suffix was found)
    For example:

    ...
        <object name="Panel"
                   gripper_size="8"
                   gripper_over="0"
                   thickness_resizer_size="2"
                   thickness_resizer_over="2"
                   length_resizer_size="4"
                   length_resizer_over="4"
                   width_min="100"
                   width_max="2000"
                   height_min="800"
                   height_max="800">
                   
            <out_frame>
                <pixel_rect   y="-6"/>
            </out_frame>
    
            <section_container>
                <pixel_rect   y="16" y2="-2"/>
            </section_container>
    
            <gripper>
                <pixel_rect   y="-6"/>
            </gripper>
    
            <thickness_resizer>
                <percent_rect x="100" x2="100" y2="100"/>
                <pixel_rect   x="-2"/>
            </thickness_resizer>
    
            <length_resizer>
                <percent_rect y="100" y2="100" x2="100"/>
                <pixel_rect   y="-2"/>
            </length_resizer>
    
            <skin name="background"/>
            <skin name="foreground"/>
            <skin name="gripper"/>
            <skin name="thickness resizer"/>
            <skin name="length resizer"/>
            <skin name="place holder"/>
        </object>
    ...
    

    The gripper is the element to drag a visual object. There are two ways to define panel gripper rectangle.
    First way is using of the attributes gripper_size and gripper_over.
    Please, skip the section gripper if you used this way!
    The gripper will be on top for vertical panels, and it will be on left side for horizontal panels. If gripper_over is equal gripper_size, than panel keeps the length on lock/unlock switching.
    Alternate way to define gripper rectangle is using of the section gripper which contains percent and pixel components.

    Same manner you can use two ways to define rectangle for panel thickness resizer rectangle.
    First way is using of the attributes thickness_resizer_size and thickness_resizer_over (in this case the section thickness_resizer must be skipped).
    Alternate way is using of the section thickness_resizer.

    Same manner you can use two ways to define rectangle for panel length resizer rectangle.
    First way is using of the attributes length_resizer_size and length_resizer_over (in this case the section length_resizer must be skipped).
    Alternate way is using of the section length_resizer.

    To define min/max panel size use the attributes width_min, width_max, height_min and height_max.

    The section out_frame contains pixel offset for out-panel rectangle. It's way to make the outbound panel elements like this:

    The section section_container contains percent and pixel components. This rectangle used to fill panel by sections with widgets.
    Supported skins are: "background", "foreground", "gripper", "thickness resizer", "length resizer" and "place holder".
    Last one used to paint the panel 'ghost' at place where the panel will be dropped (on panel dragging by mouse).
    Supported animation name is "anim_Spawn".

    Each widget lies on section with own gripper. The section uses same name suffices like the panel. The section can work in 3 modes: horizontal arrangement, vertical arrangement and with hided gripper.
    Here is an example:

    ...
        <object name="Section">
            
            <mode name="horizontal"
                  background="background"
                  foreground=""
                  gripper="horizontal gripper">
                <item_pixel_rect      x="0"  y="0" x2="0" y2="0"/>
                <gripper_percent_rect x="0"  y="0" x2="0" y2="0"/>
                <gripper_pixel_rect   x="0"  y="0" x2="0" y2="0"/>
            </mode>
            <mode name="vertical"/>
            <mode name="no gripper"/>
    
            <skin name="background"/>
            <skin name="horizontal gripper"/>
            <skin name="vertical gripper"/>
    
        </object>
    ...
    

    In the example above only "horizontal" mode is completely defined, other modes should be defined the same way. Each mode has the following attributes:

    background- the name for the background skin
    foreground- the name for the foreground skin
    gripper- the name for the gripper skin

    The skins list depends on the used names.
    Also, each mode defines some rectangles for the items sections and the grippers. Percent component of the section item (item_percent_rect) isn't used, since it is hard coded for the whole section area.

    Another popup object in Panel.xml are:

    ...
        <object name="File Popup"/>
        <object name="Programs Popup"/>
        <object name="Search Popup"/>
        <object name="Icon Bar Popup"/>
    ...
    

    Object "File Popup" used for such widget as: Disks, popup of programs list in start menu. Object "Programs Popup" used for programs menu in system start menu. Object "Search Popup" used search widget to show results of searching. Object "Icon Bar Popup" used for such widget as: Quick Launch, Desktop Icons.


    Desktop.xml

    If Aston2 uses skinned wallpaper, than it uses object "Wallpaper". It's default object for all wallpapers (on all monitors).
    You can override default object by "Wallpaper 1" for first monitor, by "Wallpaper 2" for second monitor etc. (don't use these objects if you don't need override)
    For example:

    <?xml version="1.0" encoding="utf-8"?>
    <layout>
    
        <object name="Wallpaper"
                image="clouds.jpg">
    
            <skin name="on wallpaper"/>
            <skin name="over desktop"/>
    
        </object>
        
        <object name="Wallpaper 1"/>
        <object name="Wallpaper 2"/>
    
    </layout>
    

    The attribute image gives image file name.
    The skin "on wallpaper" uses wallpaper rectangle (can be different with monitor rectangle). This skin can't being drawn if no wallpaper image was being declared.
    The skin "over desktop" uses whole desktop (monitor) rectangle.

    The supported animation is "anim_Spawn".

    Note: Don't forget to test your wallpapers for different monitor resolutions.


    Start Button.xml

    Start button used to open system start menu.

    <?xml version="1.0" encoding="utf-8"?>
    <layout>
    
        <object name="Start Button"
                width="128"
                height="128"
                popup_offset_w="2"
                popup_offset_h="1"
                pressed_text_x_offset="0"
                pressed_text_y_offset="1"
                >
        
            <text>
    	        <percent_rect  x="0" x2="100" y="0" y2="100"/>
                <pixel_rect    x="0" x2="0" y="0" y2="0"/>
    
                <normal_font    color="0xccffffff"
                                shadow_color="0x88000000"
                                font="Microsoft Sans Serif, size=10, style=B"
                                align_u = "center"
                                align_v = "center"/>
                <highlight_font color="0xFFffffff"
                                shadow_color="0x66000000"
                                font="Microsoft Sans Serif, size=12, style=B"
                                align_u = "center"
                                align_v = "center"/>
                <pressed_font color="0xFFffffff"
                                shadow_color="0x55000000"
                                font="Microsoft Sans Serif, size=13, style=B"
                                align_u = "center"
                                align_v = "center"/>
            </text>
    
            <skin name="horizontal"/>
            <skin name="vertical"/>
            
        </object>
    
    </layout>
    

    Object attributes:
    width- the width of the button
    height- the height of the button
    popup_offset_w- offset in pexels along horizontal direction. Used to shift popup that start button opened.
    popup_offset_h- along vertical direction
    pressed_text_x_offset- offset in pixels by x-axis. It allows to move localized text to show mouse click effect
    pressed_text_y_offset- offset in pixels by y-axis
    The section text describes localized (translated to user language) text "Start". It contains two rectangle component and sub-sections normal_font, highlight_font and pressed_font for three states of start button.
    The reserved skin names are "horizontal" and "vertical" (for the horizontal/vertical mode).
    This widget supports animation with the following names:
    "anim_Spawn"- animation on the first time when object appearing
    "anim_Highlight_On" - on mouse hover
    "anim_Highlight_Off" - on mouse out
    "anim_Press_On" - on left mouse button down
    "anim_Press_Off" - on left mouse button up
    "anim_Focus_On" - on keyboard navigation focus on
    "anim_Focus_Off" - on keyboard navigation focus off

    The widget supports standard suffices in name, for example "Start Button (Bottom)".


    User Name.xml


    Example:
    <?xml version="1.0" encoding="utf-8"?>
    <layout>
    
        <object name="User Name" width="200" height="50">
        
            <text font="Arial, size=10, style=B"
                  align_u = "center"
                  align_v = "center"
                  color="0xFFFFFFFF"
                  shadow_color="0xC0000000">
                <pixel_rect    x="90" x2="0" y="0" y2="0"/>
                <percent_rect  x="0" x2="100" y="0" y2="100"/>
            </text>
            
            <user_icon>
                <pixel_rect    x="55" x2="90" y="5" y2="-5"/>
                <percent_rect  x="0" x2="0" y="0" y2="100"/>
            </user_icon>
    
            <skin name="background"/>
            <skin name="glass"/>
            
        </object>
    
    </layout>
    

    Object attributes:
    width- the width of the widget
    height- the height of the widget
    This widget defines some rectangles for the user name (text) and the user icon (user_icon).
    The reserved skin names are "background" and "foreground".
    This widget supports animation with the following names:
    "anim_Spawn"- animation on the first time when object appearing
    "anim_Highlight_On" - on mouse hover
    "anim_Highlight_Off" - on mouse out
    "anim_Press_On" - on left mouse button down
    "anim_Press_Off" - on left mouse button up
    "anim_Focus_On" - on keyboard navigation focus on
    "anim_Focus_Off" - on keyboard navigation focus off

    The widget supports standard suffices in name, for example "User name (Menu)".


    Recycle Bin.xml


    Example:
    <?xml version="1.0" encoding="utf-8"?>
    <layout>
    
        <object name="Recycle Bin" width="240" height="118">
        
            <text font="Century Gothic, size=14, style=B"
                  align_u = "left"
                  align_v = "center"
                  color="0xFFFFFFFF"
                  shadow_color="0xFF000000">
                <percent_rect x="0" x2="100" y="0" y2="100"/>
                <pixel_rect   x="40" x2="0" y="0" y2="0"/>
            </text>
    
            <skin name="background"/>
            <skin name="foreground"/>
            <skin name="indicator"/>
            
        </object>
    
    </layout>
    

    Object attributes:
    width- the width of the widget
    height- the height of the widget
    The reserved skin names are "background", "foreground" and "indicator".
    You can set an indicator that will display the recycle bin infill level, using an indicator with "progress" name.
    The widget supports standard suffices in name, for example "Recycle Bin (Vertical)".


    Search.xml


    Example:
    <?xml version="1.0" encoding="utf-8"?>
    <layout>
    
        <object name="Search"
                width="100"
                height="80"
                popup_width="400"
                popup_height="600">
        
            <edit font="Arial, size=8, style=B">
                <percent_rect x="50" x2="50" y="0" y2="0"/>
                <pixel_rect   x="-120" x2="60" y="19" y2="31"/>
            </text>
            
            <icon>
                <percent_rect  x="50" x2="50" y="0" y2="0"/>
                <pixel_rect    x="-166" x2="-134" y="14" y2="46"/>
            </icon>
    
            <button>
                <percent_rect  x="50" x2="50" y="0" y2="0"/>
                <pixel_rect    x="90" x2="110" y="24" y2="46"/>
    
                <skin>
            </button>
    
            <skin name="background"/>
            <skin name="foreground"/>
            <skin name="local search"/>
            <skin name="google search"/>
    
            <sounds>
                <sound event="sound_Engine_Button" file="test1.wav">
                <sound event="sound_Search_Button" file="test2.wav">
                <sound event="sound_Search_Finish" file="test3.wav">
            </sounds>
    
        </object>
    
    </layout>
    

    Object attributes:
    width- the width of the widget
    height- the height of the widget
    popup_width- the width of the popup window with results
    popup_height- the height of the popup window with results

    The section edit contains percent and pixel components for edit box rectangle. Also, it contains font settings. The section icon contains percent and pixel components of rectangle for search engine icon. The section button contains percent and pixel components of rectangle for button "run".

    Supported skins:

    skin name="background"
    skin name="foreground"
    skin name="local search"- icon for local search engine
    skin name="google search"- icon for google search engine

    Supported sound events are: "sound_Engine_Button", "sound_Search_Button" and "sound_Search_Finish".
    The widget supports standard suffices in name, for example "Search (Horizontal)".

    Note: this widget opens popup window with search results. The object name for popup is "Search Popup". The object name for menu is "Search Menu".


    The widget supports standard suffices in name.


    Clock.xml


    Example:
    ...
        <object name="Aston Clock"
                height="120"
                width="98"
                skin_font_height="40"
                skin_font_width_num="20"
                skin_font_width_colon="20"
                skin_font_width_ampm="40"
                tick_anim="disabled">
    
            <name font="Century Gothic, size=12, style=B"
                  align_u = "center"
                  align_v = "center"
                  color="0xFFdfc5ac"
                  shadow_color="0xFF000000">
                <percent_rect  x="0" x2="100" y="0" y2="0"/>
                <pixel_rect    x="0" x2="0"   y="7" y2="20"/>
            </name >
    
            <text font="Century Gothic, size=12, style=B"
                  align_u = "center"
                  align_v = "center"
                  color="0xFFdfc5ac"
                  shadow_color="0xFF000000">
                <percent_rect  x="0" x2="100" y="100" y2="100"/>
                <pixel_rect    x="0" x2="0" y="-20" y2="-7"/>
            </text>
    
            <skin_text>
                <percent_rect  x="0" x2="100" y="100" y2="100"/>
                <pixel_rect    x="0" x2="0" y="-20" y2="-7"/>
            </skin_text>
    
            <face>
                <percent_rect  x="50" x2="50" y="0" y2="0"/>
                <pixel_rect    x="-50" x2="50" y="0" y2="100"/>
            </face>
    
            <hands shadow_x_offset="1" shadow_y_offset="1">
                <hand name="hours'   image="h.jpg" image_tail="20" size="55" width="3"/>
                <hand name="minutes" color="0xFFc0c0cf" shadow_color="0xFF000000" tail="30" size="75" width="2"/>
                <hand name="seconds" color="0xFFffc380" shadow_color="0xFF000000" tail="30" size="75" width="2"/>
            </hands>
    
            <skin name="background"/>
            <skin name="foreground"/>
            <skin name="face"/>
            <skin name="font"/>
    
        </object>
    ...
    

    Object attributes:
    width- the width of widget
    height- the height of widget
    skin_font_height - height of skinned symbol (if skinned font used)
    skin_font_width_num - width of skinned number symbol (if skinned font used)
    skin_font_width_colon - width of skinned colon symbol (if skinned font used)
    skin_font_width_ampm - width of skinned "am" or "pm" symbol (if skinned font used)
    tick_anim- used for second hand shaking animation. Can be "enabled" or "disabled"

    The widget reads some rectangles for the text, skinned text and clock face.
    If you don't want to use skinned text or just text, just skip the section skined_text or text accordingly.
    Clock hands are set in hands section. It can contains several sections hand. Available attributes for it are:

    name- available names are "hours", "minutes" or "seconds"
    size - length of hand percent of face size
    center_x_offset - offset from rotation point by x axis (to cast shadows, for example)
    center_y_offset - offset from rotation point by y axis
    color - if solid color hand used
    width - thickness of hand in pixels
    tail - lengths of hand tail
    image - in case when the hand painted in image. In this case, you can use section image_rect to define hand rectangle in image coordinates
    image_pin_x - point of rotation x-coordinate (if image used)
    image_pin_y - point of rotation y-coordinate (if image used)

    They can be used several times in any orders (for example to cast shadows). Available sections inside hands are: hours, minutes, seconds. You can assign an image or color for each hand independently.
    The reserved skin names are: "background", "foreground", "face" (for rectangle defined in face section), "font" (if skinned font used).
    The supported animation are:

    "anim_Spawn"- on first clock show
    "anim_Highlight_On" - on mouse hover
    "anim_Highlight_Off" - on mouse out
    "anim_Press_On" - on left mouse button down
    "anim_Press_Off" - on left mouse button up
    "anim_Focus_On" - on keyboard navigation focus on
    "anim_Focus_Off" - on keyboard navigation focus off
    "anim_Tick" - on every second
    "font_0" - to draw number "0"
    "font_1" - to draw number "1"
    "font_2" - to draw number "2"
    "font_3" - to draw number "3"
    "font_4" - to draw number "4"
    "font_5" - to draw number "5"
    "font_6" - to draw number "6"
    "font_7" - to draw number "7"
    "font_8" - to draw number "8"
    "font_9" - to draw number "9"
    "font_Space"- to draw space symbol " "
    "font_Colon"- to dtaw symbol ":"
    "font_Am" - to draw "am"
    "font_Pm" - to draw "pm"

    The supported indicators are:

    "hour" - to indicate hours
    "minute" - to indicate minutes
    "second" - to indicate seconds

    If you use 3D objects for hands you can mix animation. For example, you can to use indicator "second" to base angle, and to add shacking angle component via "anim_Tick" animation. It can be like this:

    ...
        <object name="Aston Clock"
                height="120"
                width="98"
                tick_anim="enabled">
    
            <face>
                <percent_rect  x="50"  x2="50" y="50"  y2="50"/>
                <pixel_rect    x="-40" x2="40" y="-40" y2="40"/>
            </face>
    
            <hands shadow_x_offset="1" shadow_y_offset="1">
                <hours   image="h.jpg" image_tail="20" size="55" width="3"/>
                <minutes color="0xFFc0c0cf" shadow_color="0xFF000000" tail="30" size="75" width="2"/>
            </hands>
    
            <skin name="face">
    
                <anim_vars>
                    <frame a_second="0"/>
                    <frame a_second="360"/>
                    <indicator name="second"/>
                </anim_vars>
    
                <anim_vars name=".">
                    <frame a_shake="+2.0"/>
                    <frame a_shake="-1.5"/>
                    <frame a_shake="+1.0"/>
                    <frame a_shake="-0.5"/>
                    <frame a_shake="0"/>
                    <sequence name="anim_Tick">
                        <frame render="0" fps="15"/>
                        <frame render="1" fps="15"/>
                        <frame render="2" fps="15"/>
                        <frame render="3" fps="15"/>
                        <frame render="4" fps=".1"/>
                    </sequence>
                </anim_vars>
    
                <paint render="scene3d" >
                
                    <obj3d model="*QUAD*">
                      <material diffuse_source="map"
                                diffuse_op="blend"
                                diffuse_image="secons_hand.png"/>
                      <render_options z_adjust="none"/>
                      <camera fov="1" aspect1="1"/>
                      <transform op="scale"  x=".075" y="2" z="1"/>
                      <transform op="move"   x="0" y="-1." z="0"/>
                      <transform op="rotate" z="a_second"/>
                      <transform op="rotate" z="a_shake"/>
                      <transform op="move"   x="0" y="0" z="8"/>
                    </obj3d>
    
                </paint>
    
            </skin>
    
        </object>
    ...
    

    Example of skinned font:

    ...
        <object name="Aston Clock"
                height="100"
                width="220"
                skin_font_width_num="30"
                skin_font_width_colon="10"
                skin_font_width_ampm="60"
                skin_font_height="40"
                skin_font_text_x="0"
                skin_font_text_y="0">
    
            <skin_text>
                <percent_rect  x="0"  x2="100" y="50" y2="50"/>
                <pixel_rect    x="40" x2="-20" y="10" y2="40"/>
            </skin_text>
    
            <skin name="font">
                <animation name="font">
                    <render image="font.png" u=  "0" v= "0" id="0"/>
                    <render image="font.png" u= "30" v= "0" id="1"/>
                    <render image="font.png" u= "60" v= "0" id="2"/>
                    <render image="font.png" u=" 90" v= "0" id="3"/>
                    <render image="font.png" u="120" v= "0" id="4"/>
                    <render image="font.png" u="150" v= "0" id="5"/>
                    <render image="font.png" u=  "0" v="44" id="6"/>
                    <render image="font.png" u= "30" v="44" id="7"/>
                    <render image="font.png" u= "60" v="44" id="8"/>
                    <render image="font.png" u= "90" v="44" id="9"/>
                    <render image="font.png" u="180" v= "0" id=" "/>
                    <render image="font.png" u="235" v="44" id=":"/>
                    <render image="font.png" u="120" v="44" id="am"/>
                    <render image="font.png" u="180" v="44" id="pm"/>
                    <sequence name="font_0">     <frame render= "0"/>   </sequence>
                    <sequence name="font_1">     <frame render= "1"/>   </sequence>
                    <sequence name="font_2">     <frame render= "2"/>   </sequence>
                    <sequence name="font_3">     <frame render= "3"/>   </sequence>
                    <sequence name="font_4">     <frame render= "4"/>   </sequence>
                    <sequence name="font_5">     <frame render= "5"/>   </sequence>
                    <sequence name="font_6">     <frame render= "6"/>   </sequence>
                    <sequence name="font_7">     <frame render= "7"/>   </sequence>
                    <sequence name="font_8">     <frame render= "8"/>   </sequence>
                    <sequence name="font_9">     <frame render= "9"/>   </sequence>
                    <sequence name="font_Space"> <frame render="10"/>   </sequence>
                    <sequence name="font_Colon">
                        <loop/>
                        <frame render="11" fps="2"/>
                        <frame render="10" fps="2"/>
                    </sequence>
                    <sequence name="font_Am">    <frame render="12"/> </sequence>
                    <sequence name="font_Pm">    <frame render="13"/> </sequence>
                </animation>
                <paint shader="blend" animation="font"/>
            </skin>
    
        </object>
    ...
    

    The widget supports standard suffices in name.


    Calendar.xml


    Example:
    ...
        <object name="Calendar" height="180" width="250">
    
            <date font="Century Gothic, size=12, style=B"
                  color="0xFF000000"
                  align_u = "center"
                  align_v = "center"
                  shadow_color="0xFFe8e8ef">
    
                <percent_rect x="0" x2="100" y="0" y2="0"/>
                <pixel_rect   x="0" x2="0"   y="0" y2="20"/>
    
                <today font="Century Gothic, size=11, style=B"
                       color="0xFFffe5cc"
                       shadow_color="0x008080c0">
                    <percent_rect x="0" x2="0"  y="0" y2="0"/>
                    <pixel_rect   x="4" x2="-4" y="0" y2="0"/>
                    <skin name="background"/>
                    <skin name="foreground"/>
                </today>
                
                <dayoff/>                    
                <events/>
                <gray/>
    
                <skin name="background"/>
            </date>
    
            <week font="Century Gothic, size=11, style=B">
                <skin name="background"/>
            </week>
            
            <month/>
            <year/>
    
            <buttons>
                <prev_month>
                    <percent_rect x="50"  x2="50"  y="0" y2="0"/>
                    <pixel_rect   x="-98" x2="-80" y="5" y2="15"/>
                    <skin/>
                </prev_month>
    
                <next_month/>
                <prev_year/>
                <next_year/>
            </buttons>
    
            <loose_leaf>
                <week font="Microsoft Sans Serif, size=18, style=B"
                      shadow_x_ofs="1"
                      shadow_y_ofs="1"
                      align_u = "center"
                      align_v = "top"
                      color="0xFF8080af"
                      shadow_color="0xFFe8e8ef">
                    <percent_rect  x="0" x2="100" y="0" y2="100"/>
                    <pixel_rect    x="0" x2="0"   y="0" y2="0"/>
                </week>
                
                <date/>
                <month/>
            </loose_leaf>
    
            <skin name="background"/>
            <skin name="foreground"/>
            <skin name="event background"/>
            <skin name="loose leaf background"/>
            <skin name="font"/>
        </object>
    ...
    

    The object attributes are: width and height of widget.
    The section date contains standard font settings (font, color, shadow_color, align_u, align_v, shadow_x_ofs, shadow_y_ofs) and two rectangle components for date table.
    Also it contains sections today, dayoff, events and gray.
    They all look similar.
    The section today used to paint today date.
    The section dayoff used to paint dayoff (holidays) dates.
    The section events used to paint dates with events (when it assign in scheduler).
    The section gray used to paint dates that out of current month.

    The sections today, dayoff, events and gray should be filled in similar manner (in example above filled today section only).
    The section week describe font (standard font settings), two rectangle components and background skin for days of week line.
    The section month should describe same components for month name (like in week).
    The section year should describe same components for year number (like in week).
    The sections button contains four buttons for switching to the next/previous year or month: prev_month, next_month, prev_year and next_year. All these buttons should be filled in similar manner (in example above filled prev_month sections only).
    Each button contains two rectangle components and skin with any name (you can skip name at all).

    The calendar can be shown in alternate loose leaf mode:

    Layout for this mode described in section loose_leaf. This section contains sub-sections: week, date and month, that should be filled in similar manner (in example above filled week section only).
    Each of them contains two rectangle component and font settings.

    The reserved skin names are: "background", "foreground", "event background" (for day with event), "loose leaf background" (alternate background for loose-leaf mode), "font" (if skinned font used to paint date in loose-leaf mode).

    The supported animation are:

    "anim_Spawn"- on first clock show
    "anim_Highlight_On" - on mouse hover
    "anim_Highlight_Off" - on mouse out
    "anim_Press_On" - on left mouse button down
    "anim_Press_Off" - on left mouse button up
    "anim_Focus_On" - on keyboard navigation focus on
    "anim_Focus_Off" - on keyboard navigation focus off
    "font_0" - to draw number "0"
    "font_1" - to draw number "1"
    "font_2" - to draw number "2"
    "font_3" - to draw number "3"
    "font_4" - to draw number "4"
    "font_5" - to draw number "5"
    "font_6" - to draw number "6"
    "font_7" - to draw number "7"
    "font_8" - to draw number "8"
    "font_9" - to draw number "9"

    Example for skinned font (for date in loose-leaf mode):

    ...
        <skin name="font">
            <animation name="font">
                <render image="font.png" u=  "0" v= "0" id="0"/>
                <render image="font.png" u= "30" v= "0" id="1"/>
                <render image="font.png" u= "60" v= "0" id="2"/>
                <render image="font.png" u=" 90" v= "0" id="3"/>
                <render image="font.png" u="120" v= "0" id="4"/>
                <render image="font.png" u="150" v= "0" id="5"/>
                <render image="font.png" u=  "0" v="44" id="6"/>
                <render image="font.png" u= "30" v="44" id="7"/>
                <render image="font.png" u= "60" v="44" id="8"/>
                <render image="font.png" u= "90" v="44" id="9"/>
                <sequence name="font_0">     <frame render= "0"/>   </sequence>
                <sequence name="font_1">     <frame render= "1"/>   </sequence>
                <sequence name="font_2">     <frame render= "2"/>   </sequence>
                <sequence name="font_3">     <frame render= "3"/>   </sequence>
                <sequence name="font_4">     <frame render= "4"/>   </sequence>
                <sequence name="font_5">     <frame render= "5"/>   </sequence>
                <sequence name="font_6">     <frame render= "6"/>   </sequence>
                <sequence name="font_7">     <frame render= "7"/>   </sequence>
                <sequence name="font_8">     <frame render= "8"/>   </sequence>
                <sequence name="font_9">     <frame render= "9"/>   </sequence>
            </animation>
            <paint shader="blend" animation="font"/>
        </skin>
    ...
    

    The widget supports standard suffices in name.


    Weather.xml


    Example:
    ...
        <object name="Weather" height="118" width="180">
    
            <city font="Century Gothic, size=12, style=B"
                  align_u = "left"
                  align_v = "center"
                  color="0xFFffffff"
                  shadow_color="0xFF000000">
                <percent_rect x="0" x2="0" y="0" y2="0"/>
                <pixel_rect   x="12" x2="200" y="12" y2="26"/>
            </city>
            <date/>
            <temperature/>
            <wind/>
            <conditions/>
    
            <day1>
                <icon>
                    <percent_rect  x="0" x2="0" y="100" y2="100"/>
                    <pixel_rect    x="6" x2="56" y="-53" y2="-3"/>
                </icon>
                <temperature font="Microsoft Sans Serif, size=10, style=B"
                    align_u = "left"
                    align_v = "center"
                    color="0xFFffffff"
                    shadow_color="0xFF000000">
                    <percent_rect  x="0" x2="0" y="100" y2="100"/>
                    <pixel_rect    x="53" x2="131" y="-43" y2="-23"/>
                </temperature>
                <dayofweek font="Microsoft Sans Serif, size=8, style=B"
                    align_u = "left"
                    align_v = "center"
                    color="0xFFdfc5ac"
                    shadow_color="0xFF000000">
                    <percent_rect  x="0" x2="0" y="100" y2="100"/>
                    <pixel_rect    x="53" x2="126" y="-28" y2="-8"/>
                </dayofweek>
            </day1>
    
            <day2/>
            <day3/>
            <day4/>
            <day5/>
            <day6/>
            <day7/>
            <day8/>
            <day9/>
    
            <skin name="background"/>
            <skin name="foreground"/>
            
            <skin name="icon">
                <percent_rect  x="0" x2="0"   y="0" y2="0"/>
                <pixel_rect    x="0" x2="120" y="0" y2="120"/>
                <animation name="anim_icon">
                    <render image="sun.png"          id= "0"/>
                    <render image="moon.png"         id= "1"/>
                    <render image="lightrain.png"    id= "2"/>
                    <render image="rain.png"         id= "3"/>
                    <render image="thunderstorm.png" id= "4"/>
                    <render image="rainsnow.png"     id= "5"/>
                    <render image="lightning.png"    id= "6"/>
                    <render image="cloudy.png"       id= "7"/>
                    <render image="lightsnow.png"    id= "8"/>
                    <render image="snow.png"         id= "9"/>
                    <render image="snowfog.png"      id="10"/>
                    <render image="windy.png"        id="11"/>
                    <render image="dust.png"         id="12"/>
                    <render image="fog.png"          id="13"/>
                    <render image="hail.png"         id="14"/>
                    <render image="haze.png"         id="15"/>
                    <render image="smoke.png"        id="16"/>
                    <render image="frigid.png"       id="17"/>
                    
                    <sequence name="SUN">           <frame render="0"/>     </sequence>
                    <sequence name="MOON">          <frame render="1"/>     </sequence>
                    <sequence name="LIGHT RAIN">    <frame render="2"/>     </sequence>
                    <sequence name="RAIN">          <frame render="3"/>     </sequence>
                    <sequence name="THUNDERSTORM">  <frame render="4"/>     </sequence>
                    <sequence name="RAIN SNOW">     <frame render="5"/>     </sequence>
                    <sequence name="LIGHTNING">     <frame render="6"/>     </sequence>
                    <sequence name="CLOUD">         <frame render="7"/>     </sequence>
                    <sequence name="LIGHT SNOW">    <frame render="8"/>     </sequence>
                    <sequence name="SNOW">          <frame render="9"/>     </sequence>
                    <sequence name="SNOW FOG">      <frame render="10"/>    </sequence>
                    <sequence name="WINDY">         <frame render="11"/>    </sequence>
                    <sequence name="DUST">          <frame render="12"/>    </sequence>
                    <sequence name="FOG">           <frame render="13"/>    </sequence>
                    <sequence name="HAIL">          <frame render="14"/>    </sequence>
                    <sequence name="HAZE">          <frame render="15"/>    </sequence>
                    <sequence name="SMOKE">         <frame render="16"/>    </sequence>
                    <sequence name="FRIGID">        <frame render="17"/>    </sequence>
                </animation>
    
                <paint shader="blend" animation="anim_icon"/>
    
            </skin>
            
        </object>
    ...
    

    Object attributes:

    width- the width of the widget
    height- the height of the widget

    This widget defines some font settings and rectangles for: city name, temperature info, wind info and other weather conditions info.
    In example above only section city was being full filled. The temperature, wind, conditions sections should be defined the same way as city.
    Also widget can show weather for several days forward. In this case, you can add sections: day1 (tomorrow), day2 (after tomorrow), day3 etc. (not bigger than day9)

    Each of that section should contains two rectangle components and sub-sections: dayofweek, temperature, wind, conditions and icon
    (each of them contains two rectangle components end font settings, except icon).
    The reserved skin names are "background", "foreground" and "icon".
    The widget paints the weather icon in two passes. For example "SUN" and "CLOUD".
    This widget supports the following animation:

    "anim_Spawn"- on the first object time when appearing
    "anim_Highlight_On" - on mouse hover
    "anim_Highlight_Off" - on mouse out
    "anim_Press_On" - on left mouse button down
    "anim_Press_Off" - on left mouse button up
    "anim_Focus_On" - on keyboard navigation focus on
    "anim_Focus_Off" - on keyboard navigation focus off
    "SUN" - to animate the sun
    "MOON" - to animate the moon
    "LIGHT RAIN" - to animate rain
    "RAIN" - to animate heavy shower
    "THUNDERSTORM" - to animate storm
    "RAIN SNOW" - to animate rain with snow
    "LIGHTNING" - to animate lighting
    "CLOUD" - to animate clouds
    "LIGHT SNOW" - to animate light snow
    "SNOW" - to animate snow
    "SNOW FOG" - to animate snow in fog
    "WINDY" - to animate wind
    "DUST" - to animate dust
    "FOG" - to animate fog
    "HAIL" - to animate hail
    "HAZE" - to animate haze
    "SMOKE" - to animate smoke
    "FRIGID" - to animate icicles

    The widget supports standard suffices in name.


    Resmon.xml


    Example:
    ...
        <object name="Resource Monitor"
                blocks_mode="vertical"
                margin_left="2"
                margin_right="2"
                margin_top="2"
                margin_bottom="2">
    
            <skin name="background"/>
            <skin name="foreground"/>
    
            <cpu size="40">
            
                <skin name="background"/>
                <skin name="foreground"/>
                <skin name="indicator"/>
    
                <skin name="graph">               <!--no sub-section 'paint' in this case-->
                    bgcolor="0x44000000"
                    linecolor="0xffeeeeee"
                    gridcolor="0x88cc0000"
                    solidcolor = "0x66eeeeee"
                    <percent_rect x="0" x2="100"   y="0" y2="100"/>
                    <pixel_rect x="0" x2="0" y="0" y2="0"/>
                </skin>
                
                <cpu_use_text font="Microsoft Sans Serif, size=9, style=B"
                        align_u = "left"
                        align_v = "top"
                        color="0xFFfffffff"
                        shadow_color="0x88000000">
                    <percent_rect  x="0" x2="100" y="0" y2="0"/>
                    <pixel_rect    x="0" x2="0" y="0" y2="20"/>
                </cpu_use_text>        
    
                <core_number_text font="Microsoft Sans Serif, size=8, style=B"
                        align_u = "left"
                        align_v = "top"
                        color="0xFFFFFFFF"
                        shadow_color="0x88000000">
                    <percent_rect  x="0" x2="100" y="0" y2="50"/>
                    <pixel_rect    x="0" x2="0" y="0" y2="0"/>
                </core_number_text>
                
            </cpu>
    
            <mem size="40">
            
                <skin name="background"/>
                <skin name="foreground"/>
                <skin name="indicator"/>
    
                <skin name="graph">               <!--no sub-section 'paint' in this case-->
                    bgcolor="0x44000000"
                    linecolor="0xffeeeeee"
                    gridcolor="0x88cc0000"
                    solidcolor = "0x66eeeeee"
                    <percent_rect x="0" x2="100"   y="0" y2="100"/>
                    <pixel_rect x="0" x2="0" y="0" y2="0"/>
                </skin>
                
                <name font="Microsoft Sans Serif, size=9, style=B"
                        align_u = "left"
                        align_v = "top"
                        color="0xFFfffffff"
                        shadow_color="0x88000000">
                    <percent_rect  x="0" x2="100" y="0" y2="0"/>
                    <pixel_rect    x="0" x2="0" y="0" y2="20"/>
                </name>        
                  
                <text font="Microsoft Sans Serif, size=9, style=B"
                        align_u = "left"
                        align_v = "top"
                        color="0xFFfffffff"
                        shadow_color="0x88000000">
                    <percent_rect  x="0" x2="100" y="0" y2="0"/>
                    <pixel_rect    x="0" x2="0" y="0" y2="20"/>
                </text>        
            </mem>
    
            <swap size="40">
            </swap>
    
            <net size="40">
            
                <skin name="background"/>
                <skin name="foreground"/>
                <skin name="indicator_net_in"/>
                <skin name="indicator_net_out"/>
    
                <skin name="graph_in">    <!--no sub-section 'paint' in this case-->
                    bgcolor="0x44000000"
                    linecolor="0xffeeeeee"
                    gridcolor="0x88cc0000"
                    solidcolor = "0x66eeeeee"
                    <percent_rect x="0" x2="100"   y="0" y2="100"/>
                    <pixel_rect x="0" x2="0" y="0" y2="0"/>
                </skin>
    
                <skin name="graph_out">    <!--no sub-section 'paint' in this case-->
                    bgcolor="0x44000000"
                    linecolor="0xffeeeeee"
                    gridcolor="0x88cc0000"
                    solidcolor = "0x66eeeeee"
                    <percent_rect x="0" x2="100"   y="0" y2="100"/>
                    <pixel_rect x="0" x2="0" y="0" y2="0"/>
                </skin>
                
                <name font="Microsoft Sans Serif, size=9, style=B"
                        align_u = "left"
                        align_v = "top"
                        color="0xFFfffffff"
                        shadow_color="0x88000000">
                    <percent_rect  x="0" x2="100" y="0" y2="0"/>
                    <pixel_rect    x="0" x2="0" y="0" y2="20"/>
                </name>        
                  
                <text font="Microsoft Sans Serif, size=9, style=B"
                        align_u = "left"
                        align_v = "top"
                        color="0xFFfffffff"
                        shadow_color="0x88000000">
                </text>
                
                <text_total_in/>
                <text_total_out/>
                <text_speed_in/>
                <text_speed_out/>
                
            </net>
    
            <ip size="40">
            
                <skin name="background"/>
                <skin name="foreground"/>
    
                <text font="Microsoft Sans Serif, size=9, style=B"
                        align_u = "left"
                        align_v = "top"
                        color="0xFFfffffff"
                        shadow_color="0x88000000">
                    <percent_rect  x="0" x2="100" y="0" y2="0"/>
                    <pixel_rect    x="0" x2="0" y="0" y2="20"/>
                </text>
    
            </ip>
    
            <uptime size="40">
            </uptime>
    
        </object>
    ...
    

    Object attributes:

    blocks_mode- can be "vertical" or "horizontal"
    margin_left- left margin
    margin_right- rigth margin
    margin_top- top margin
    margin_bottom- bottom margin

    Supported skins in object section are: "background", "foreground".
    All other sub-sections describe widget blocks of system information. Each section of block description has attribute size that means height of block if blocks_mode="vertical" or width if blocks_mode="horizontal".
    Such kind of sections can contain own skins with names: "background", "foreground".
    Now, let's consider these block descriptions one by one.
    The section cpu describe CPU usage block. In addition to skins "background", "foreground", it supports skin with name "indicator" to paint CPU usage percent indicator. The sub-section skin[name="graph"] contains two components of rectangle and some attributes to define colors (it doesn't support paint sub-sections in this case):

    bgcolor- color of graph background
    linecolor- color of graph (top edge of histogram)
    gridcolor- color of grid (under graph)
    solidcolor - color of histogram (under graph line)

    Also, this section contains description of information text strings: cpu_use_text and core_number_text (for CPU usage percent and number of CPU cores, accordingly). Each of them contains standard font settings and two components of rectangle.

    Well, the next section is mem for memory information block. It looks similar as cpu section, but it has got other text strings: name and text (name is "Memory" translated to user language, text is something like "463MB / 1Gb").

    The section swap used for system page file information block. It has similar content as in mem section.

    The section net used for network traffic information block. This block contains two graphs for input and output traffic. Thus, section net contains skins with names: "indicator_net_in" and "indicator_net_out". Also, this section contains two sub-section (skin[name="graph_in"] and skin[name="graph_out"]) to define two graphs. They filled same manner as the graph for cpu. The text strings for this case are:

    text- contains font settings for information part of strings
    text_total_in- contains font settings and two components of rectangle for input network traffic
    text_total_out- contains font settings and two components of rectangle for output network traffic
    text_speed_in- contains font settings and two components of rectangle for input network speed
    text_speed_out- contains font settings and two components of rectangle for output network speed

    The section ip used for IP-address information block. It has no indicators, just simple text with IP-address.

    The section uptime used for uptime information block (time after turning computer on). This section filled like ip.

    The widget supports standard suffices in name.




    LangSwitcher.xml


    Example:
    <?xml version="1.0" encoding="utf-8"?>
    <layout>
        <object name="LangSwitcher">
            <margin_pixel_rect x="4" x2="0" y="10" y2="-2" />
        </object>
    </layout>
    

    Object has no attributes. It contains pixel component of rectangle with name margin_pixel_rect.
    The widget supports standard suffices in name.




    Notebook.xml


    Example:
    <?xml version="1.0" encoding="utf-8"?>
    <layout>
      <object name="Notebook"
              width="100"
              height="140"
              popup_offset_w="0"
              popup_offset_h="0"
              pressed_text_x_offset="1"
              pressed_text_y_offset="1"
              pressed_icon_x_offset="1"
              pressed_icon_y_offset="1">
              
        <text>
          <normal_font      font="Arial, size=10, style=B"
                            color="0xFFFFFFFF"
                            shadow_color="0xFF000000"/>
          <highlight_font   font="Arial, size=10, style=B"
                            color="0xFFFFD75B"
                            shadow_color="0xFF000000"/>
          <pressed_font     font="Arial, size=10, style=B"
                            color="0xFFFFFFFF"
                            shadow_color="0xFF000000"/>
                          
          <percent_rect x="0"  x2="100" y="0" y2="0"/>
          <pixel_rect   x="40" x2="-40" y="0" y2="32"/>
        </text>
        
        <icon>
          <percent_rect x="50" x2="50" y="50" y2="50"/>
          <pixel_rect   x="-32" x2="32" y="-32" y2="32"/>
        </icon>
        
        <skin name="background"/>
        <skin name="foreground"/>
        <skin name="icon"/>
        
      </object>
    </layout>
    

    Object attributes:

    width- minimal widget width
    height- minimal widget height
    popup_offset_w- horizontal offset for popup window
    popup_offset_h- vertical offset for popup window
    pressed_text_x_offset- x-offset for text on push by left mouse button
    pressed_text_y_offset- y-offset for text on push by left mouse button
    pressed_icon_x_offset- x-offset for icon on push by left mouse button
    pressed_icon_y_offset- y-offset for icon on push by left mouse button

    The section text contains two components of text rectangle and three sub-section with font settings: normal_font, highlight_font, pressed_font.
    The section icon contains two components of icon rectangle (default icon size is 64x64).
    The widget supports skins with names: "background", "foreground", "icon".
    The widget supports animation with the following names:

    "anim_Spawn"- animation on the first time when object appearing
    "anim_Highlight_On" - on mouse hover
    "anim_Highlight_Off" - on mouse out
    "anim_Press_On" - on left mouse button down
    "anim_Press_Off" - on left mouse button up
    "anim_Focus_On" - on keyboard navigation focus on
    "anim_Focus_Off" - on keyboard navigation focus off

    The widget supports standard suffices in name.

    back


     
         
    Copyright © 1999-2024 Gladiators Software