Page 1 of 1

[Solved] - Icons in the titlebar

Posted: Thu May 22, 2008 08:31
by earthsruler
Hello all.

I need to be able to have an icon in the title bar of a window that i can change and resize while it is still attached to the window.

(not resizable by the user, just in code if you want)

From what I can tell this isn't currently supported.

How would i go about this.

My initial instinct would be to manipulate the titlebar as it currently is to have a image attached. I have a feeling though that there might be a way to get this behavior from the look and feel file or something as the scripting side of cegui seems really powerful.

Any way I would love some opinions or suggestions :)

Posted: Sat May 24, 2008 08:44
by CrazyEddie
Hi,

There are a few ways of doing this; the precise method you will want to use will depend upon the exact usage you have in mind. The main thing would be to consider placement of the image/icon and what happens to the size of the titlebar as the the size of the icon changes (meaning, should the icon be clipped, or should the titlebar expand to accommodate the bigger size?).

Anyway, the two main approaches are:

Use the auto window abilities to target a StaticImage (or similar) widget directly into the title bar of those windows needing icons.

Pros:
    Extremely fast to get up and running.
    Requires no editing of looknfeel skins.
    Uses existing window operations and properties to function.

Cons:
    Accessing the icon window is slightly more complex.
    The looknfeel is unaware of the new widget so can't react to size changes.
    Uses a whole Window object and so carries a lot of baggage.
    Must be applied separately for all windows needing icons.

Add the icon as part of the looknfeel skin for FrameWindow and Titlebar. Defining properties for the size, position and image on the Titlebar, use those properties to define the ImageryComponent to contain the icon, then create property links to expose those properties via the base FrameWindow skin.

Pros:
    Easy to have the icon 'automatically' available on all FrameWindows.
    Has the possibility of tying a Titlebar dimension, or other parts of titlebar imagery (caption location, etc) to the size of the icon defined.
    Generally a more lightweight solution.

Cons:
    More work up front to set it up.
    Some advanced window features not directly available to just the icon.


If you get stuck and have no clue how to go about either of these, pick the approach you'd like to use and someone will be able to offer some concrete ideas for an implementation.

CE.

Posted: Mon May 26, 2008 08:56
by earthsruler
ok I dont know what auto window abilities are and all the windows will need an icon anyway, so option two it is!!


Im using the Aqualook skin at the moment and tried a little bit of lookandfeel hacking today to try to get an icon appearing.

I failed.

This is what I tried in the titlebar section of the lookandfeel file


In their ImagerySection after all their ImageryComponents I added

Code: Select all


<ImageryComponent>
   <Area>
      <Dim type="LeftEdge" >
         <AbsoluteDim value="0" />
      </Dim>
            
      <Dim type="TopEdge" >
         <AbsoluteDim value="0" />
      </Dim>
            
      <Dim type="Width" >
         <UnifiedDim scale="1" type="Width"/>
      </Dim>
      
      <Dim type="Height" >
         <UnifiedDim scale="1" type="Height"/>
      </Dim>
   </Area>
         
   <Image imageset="AquaLook" image="RedButton" />
         
   <VertFormat type="LeftAligned" />
            
</ImageryComponent>



By my reckoning that should make an image cover the title bar but it didn't do anything at all.

Also i thought i may be able to do something in the lookandfeel similar to the framewindow with the titlebar and use <Child> and __auto_ prefix to play with everything and then use PropertyLinkDefinition to expose the sizes and scales to the people but it seems like there isnt a child type that is an image that a widget can "Inherit".

Posted: Tue May 27, 2008 08:20
by CrazyEddie
Hi,

The ImageryComponent looks ok; not sure what's happening there, I guess it's something to do with where precisely you have it.

I'll try to post a couple of complete examples of how to add an icon to the titlebar a little bit later on - it will take me a little while to come up with these :)

CE

Posted: Tue May 27, 2008 12:13
by CrazyEddie
Ok, in this post I present one possible solution to adding an icon to the titlebar. You should not feel the need to use this solution verbatim, there are other ways to do this completely, and this particular effort could be hacked around some more also :)

Basically, we're defining a new ImagerySection for the AquaLook/Titlebar, named 'icon'. The imagery section will have an area, image name and colours all defined via properties. We will subsequently expose these properties via AquaLook/FrameWindow.

First of all we need the properties in AquaLook/Titlebar for the various things we'll be needing...

Code: Select all

<PropertyDefinition name="IconX" initialValue="0" redrawOnWrite="true" />
<PropertyDefinition name="IconY" initialValue="0" redrawOnWrite="true" />
<PropertyDefinition name="IconWidth" initialValue="16" redrawOnWrite="true" />
<PropertyDefinition name="IconHeight" initialValue="16" redrawOnWrite="true" />
<PropertyDefinition name="IconImage" initialValue="" redrawOnWrite="true" />
<PropertyDefinition name="IconColour" initialValue="FFFFFFFF" redrawOnWrite="true" />


Now, the ImagerySection. This basically is built completely in a way that depends on the properties defined above. Note that the way we use "PropertyDim" here is expecting a property name that will return a single float value which will be interpreted as pixels.

Code: Select all

<ImagerySection name="icon" >
    <ImageryComponent>
        <Area>
            <Dim type="LeftEdge" >
                <PropertyDim name="IconX" />
            </Dim>
            <Dim type="TopEdge" >
                <PropertyDim name="IconY" />
            </Dim>
            <Dim type="Width" >
                <PropertyDim name="IconWidth" />
            </Dim>
            <Dim type="Height" >
                <PropertyDim name="IconHeight" />
            </Dim>
        </Area>
        <ImageProperty name="IconImage" />
        <ColourProperty name="IconColour" />
        <VertFormat type="Stretched" />
        <HorzFormat type="Stretched" />
    </ImageryComponent>
</ImagerySection>


Now we add a reference to this in the imagery section definitions. Here I have shown a whole section definition for context:

Code: Select all

<StateImagery name="Active">
    <Layer>
    <Section section="main" />
    <Section section="caption" />
    <Section section="icon" />
    </Layer>
</StateImagery>


Since I want my icon on the left side of the titlebar, I thought it would be good if the caption label would auto-adjust its position based upon the size and position of the icon - so here is a modifed Area specification for the "caption" imagery section (note that if the icon were to appear on the right of the caption, you would not need to do this):

Code: Select all

<Area>

    <!-- new LeftEdge specification that allows for size and position of icon -->

    <Dim type="LeftEdge" >
        <ImageDim imageset="AquaLook" image="NewTitlebarLeft" dimension="Width" >
            <DimOperator op="Add">
                <PropertyDim name="IconWidth">
                    <DimOperator op="Add">
                        <PropertyDim name="IconX" />
                    </DimOperator>
                </PropertyDim>
            </DimOperator>
        </ImageDim>
    </Dim>

    <Dim type="TopEdge" >
        <AbsoluteDim value="0" />
    </Dim>
    <Dim type="Width" >
        <UnifiedDim scale="1" offset="-75" type="Width" />
    </Dim>
    <Dim type="Height" >
        <ImageDim imageset="AquaLook" image="NewTitlebarMiddle" dimension="Height">
            <DimOperator op="Add">
                <ImageDim imageset="AquaLook" image="NewTitlebarDivider" dimension="Height" />
            </DimOperator>
        </ImageDim>
    </Dim>
</Area>


Finally, since we use FrameWindows and not Titlebars directly, we need to make all this accessible from the FrameWindow. This is easily done by defining property links (note the need to re-specify the default values, if we do not do this, they all default to 0/null/empty values) in AquaLook/FrameWindow:

Code: Select all

<PropertyLinkDefinition name="IconX" widget="__auto_titlebar__" targetProperty="IconX" initialValue="0" />
<PropertyLinkDefinition name="IconY" widget="__auto_titlebar__" targetProperty="IconY" initialValue="0" />
<PropertyLinkDefinition name="IconWidth" widget="__auto_titlebar__" targetProperty="IconWidth" initialValue="16" />
<PropertyLinkDefinition name="IconHeight" widget="__auto_titlebar__" targetProperty="IconHeight" initialValue="16" />
<PropertyLinkDefinition name="IconImage" widget="__auto_titlebar__" targetProperty="IconImage" initialValue="" />
<PropertyLinkDefinition name="IconColour" widget="__auto_titlebar__" targetProperty="IconColour" initialValue="FFFFFFFF" />


HTH

CE.

Posted: Thu May 29, 2008 05:34
by earthsruler
OMG!

I totally just clicked on to how beautiful this system is :). Fantastic.

Of course your example worked perfectly. I previously didn't add anything to the state imagery section which seems to be the main reason that nothing was showing up. It doesn't help that the RedButton has no alpha so was transparent :?

i added

Code: Select all

clipped="false"

to the StateImagery declaration though so the icon wont be clipped when its bigger than the titlebar :)

Great work guys!!

CEGUI is really growing on me :)