[Solved] - Icons in the titlebar

Forum for general chit-chat or off-topic discussion.

Moderators: CEGUI MVP, CEGUI Team

earthsruler
Quite a regular
Quite a regular
Posts: 74
Joined: Mon Apr 28, 2008 23:21
Location: Australia

[Solved] - Icons in the titlebar

Postby earthsruler » Thu May 22, 2008 08:31

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 :)
Last edited by earthsruler on Thu Jul 10, 2008 06:53, edited 1 time in total.

User avatar
CrazyEddie
CEGUI Project Lead
Posts: 6760
Joined: Wed Jan 12, 2005 12:06
Location: England
Contact:

Postby CrazyEddie » Sat May 24, 2008 08:44

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.

earthsruler
Quite a regular
Quite a regular
Posts: 74
Joined: Mon Apr 28, 2008 23:21
Location: Australia

Postby earthsruler » Mon May 26, 2008 08:56

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".

User avatar
CrazyEddie
CEGUI Project Lead
Posts: 6760
Joined: Wed Jan 12, 2005 12:06
Location: England
Contact:

Postby CrazyEddie » Tue May 27, 2008 08:20

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

User avatar
CrazyEddie
CEGUI Project Lead
Posts: 6760
Joined: Wed Jan 12, 2005 12:06
Location: England
Contact:

Postby CrazyEddie » Tue May 27, 2008 12:13

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.

earthsruler
Quite a regular
Quite a regular
Posts: 74
Joined: Mon Apr 28, 2008 23:21
Location: Australia

Postby earthsruler » Thu May 29, 2008 05:34

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 :)


Return to “Offtopic Discussion”

Who is online

Users browsing this forum: No registered users and 12 guests