Overlaying images over buttons...

[saurabh]

Hi :
I want to put images over buttons but CEGUI layout editor does not provide this facility.
I wrote layout file and set property for normalButton, hoveButton etc.. manually...

Prob 1.
Now problem is that buttons are not exactly fitting the images because of which some part of underlying skin is visible. What should i do to resolve this?

Prob 2.
I changed skin layout from teherezlook to Vanilla but i am not able to find anyway to set border color and background color of these skins...?

Prob 3.
I changed alpha value but that made button + over-laid image invisible.

For details i have uploaded the screen shot here.. http://docs.google.com/View?id=dcpsbjrs_161g4fdprq4

[CrazyEddie]

Hi,

To affect the formatting of the image, set the properties "VertImageFormatting" and "HorzImageFormatting". For example, setting thes to "Stretched" should cause the image to fill the button area.
With the Vanilla skin, to disable the regular button imagery you can set the property "UseStandardImagery" to "False", in the TahareaLook skin use "TaharezLook/ImageButton" instead.

Colours are applied to imagery by modulating a colour value with the source imagery value. This means that if the original imagery has some colour of it's own, the modulation affects the colours differently. For example, in TaharezLook, much of the imagery in the texture is dark or black - so modulating this has very little effect. The best colour to allow configurable setting of the colour is obviously white. Vanilla had much more scope for affecting the colours, though these are presently specified explicitly in the looknfeel file - so you can change those colours in there (they're specified in the Section definitions of the various StateImagery elements) or modify the skin to use a ColourProperty instead and thus be able to affect the colour by setting a property.

IIRC there is currently no way to exempt part of a skin of having the alpha of the target window applied to it. You can work around this by using a child window for the image instead, and setting the InheritsAlpha property to False.

CE.

[saurabh]

With the Vanilla skin, to disable the regular button imagery you can set the property "UseStandardImagery" to "False",

This one works for me.... Thanks

Few more problem related to this:
1. When i set the property Name="Text" Value="XXXX" then the value is not reflected on top of button...
However when i use layout editor, i am able to set the text on top of button... but when i load that layout using CEGUI-OGRE program then button caption or text is not getting rendered.

2. How do i change font color.

To solve first problem.. I tried doing following things:

<Window Type="Vanilla/Button" Name="Menu/SmallBtn" >
<Property Name="Font" Value="Commonwealth-10" />
<Property Name="Text" Value="Hello" />
.
.
.
<Property Name="UseStandardImagery" Value="False" />
<Property Name>
</Window>

also i tried this....

<Window Type="Vanilla/Button" Name="Menu/MedianBtn" >
<Property Name="Font" Value="Commonwealth-10" />
<Property Name="Tooltip" Value="Not implemented yet" />
<Property Name="UnifiedMaxSize" Value="{{1,0},{1,0}}" />
<Property Name="UnifiedAreaRect" Value="{{0.212658,0},{0.369565,0},{0.524051,0},{0.467392,0}}" />
<Property Name="WantsMultiClickEvents" Value="True" />
<Property Name="NormalImage" Value="set:Buttons image:ButtonUp" />
<Property Name="HoverImage" Value="set:Buttons image:ButtonDisabled" />
<Property Name="PushedImage" Value="set:Buttons image:ButtonHighlighted" />
<Property Name="DisabledImage" Value="set:Buttons image:ButtonDisabled" />
<Property Name="UseStandardImagery" Value="False" />

<Window Type="Vanilla/StaticText" Name="btnNewGame_text__">
<!-- We make the text take all the space of the button to center the text. -->
<!-- You should adapt these values to your pictures, just play a bit with em -->
<Property Name="UnifiedPosition" Value="{{0,0},{0,0}}" />
<Property Name="UnifiedSize" Value="{{1,0},{1,0}}" />
<!-- Disable the frame and background, so we got only the text and not a StaticText widget. -->
<Property Name="FrameEnabled" Value="False" />
<Property Name="BackgroundEnabled" Value="False" />
<!-- Here we center the text into the button -->
<Property Name="HorzFormatting" Value="WordWrapCentred" />
<Property Name="VertFormatting" Value="Middle" />
<!-- We MUST disable the text so that it is the button that gets our mouse events, -->
<!-- and not the static text ! If you forget that line, the buttons graphics will correspond, -->
<!-- but the clicks on the button won't work ! because they are "eaten" by the staticText. -->
<Property Name="Disabled" Value="True" />
<!-- finally, this is the caption we want the button to have. -->
<Property Name="Text">Median Button</Property>
</Window>
</Window>


To summarise:
1. Displaying text on top of button
2. Changing font color and related attribute
3. <Property Name="UseStandardImagery" Value="False" /> is working for vanilla/buttons but not for vanilla/StaticText ....

Thanks
Saurabh

[CrazyEddie]

1) To enforce layering you should edit the looknfeel and split the appropriate parts into separate layers with appropriate priorities.

Foe example, where there is this:

Code: Select all

<StateImagery name="Normal">
    <Layer>
        <Section look="Vanilla/Shared" section="Frame" controlProperty="UseStandardImagery" >
            <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
        </Section>
        <Section section="normal_image" />
        <Section section="label">
            <ColourProperty name="NormalTextColour" />
        </Section>
    </Layer>
</StateImagery>

Changing it to:

Code: Select all

<StateImagery name="Normal">
    <Layer>
        <Section look="Vanilla/Shared" section="Frame" controlProperty="UseStandardImagery" >
            <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
        </Section>
        <Section section="normal_image" />
    </Layer>
    <Layer priority="1" >
        <Section section="label">
            <ColourProperty name="NormalTextColour" />
        </Section>
    </Layer>
</StateImagery>

will correctly draw the text on top of the image, since it's layer has the higher priority.

2) To change the colour of the text on a button, you set the properties "NormalTextColour", "HoverTextColour", "PushedTextColour" and "DisabledTextColour" (the property value string should be a hex-type string describing the AARRGGBB colour).

3) Not all properties are available on all types of window, and where similar properties do exist they may be named differently either for functional or historical (compatibility) reasons. For StaticText and StaticImage the appropriate properties are "FrameEnabled" and "BackgroundEnabled" - you should have been able to find these by searching the forum, since they've been posted here about a million times so far.

[Edit]
I think I answered the wrong question for number 1 If you get no text at all, I have to ask... have you loaded a font?

CE.

[saurabh]

Hey thanks.. i am able to remove the staticImage background by setting backGroundenabled property to false but i am still not able to get the text right on buttons and staticimages...

My log file says this message.... when i use vanilla skin
30/09/2009 18:44:30 (Error) Exception: FontManager::getFont - A Font object with the specified name 'BlueHighway-12' does not exist within the system

However it works fine when i use teherezlook Skin....

Just wondering what might prompt this? files related to teherezLook skin has no information on "BlueHighway-12".. they are just generic files...

Also i tried using vanilla and teherezLook with Commonwealth-10 font . I placed font files into project/media/fonts folder... but still program is crashing with these instructions....


30/09/2009 18:53:57 (InfL1) Creating falagard mapping for type 'TaharezLook/StaticImage' using base type 'DefaultWindow', window renderer 'Falagard/StaticImage' and Look'N'Feel 'TaharezLook/StaticImage'.
30/09/2009 18:53:57 (InfL1) Creating falagard mapping for type 'TaharezLook/StaticText' using base type 'DefaultWindow', window renderer 'Falagard/StaticText' and Look'N'Feel 'TaharezLook/StaticText'.
30/09/2009 18:53:57 (Error) Exception: FontManager::getFont - A Font object with the specified name 'Commonwealth-10' does not exist within the system

Any clue on what might happen... I am loading fonts...

To summarize:
1. Vanilla not working with BlueHighway-12..
2. Vanilla and TeherexLook .. both not working with Commonwealth-10...

Common wealth files are placed in the appropriate directory of project and fonts are loaded....

Thanks
Saurabh

[saurabh]

I am doing this as well in my program...

if(!CEGUI::FontManager::getSingleton().isFontPresent("Commonwealth-10"))
CEGUI::FontManager::getSingleton().createFont("Commonwealth-10.font");

mSystem->setDefaultFont((CEGUI::utf8*)"Commonwealth-10");

When i do this then it does nt crash but even then it is not showing any text on images...

Saurabh

[saurabh]

It works now.. I had some problem in looknfeel file and once that was resolved, text is displayed properly...

Thanks
Saurabh