Hi
we are mirating our mcf client to a cegui client,
so far its going well, however we would need to implement a mechanism to embedd a picture (png or jpg) inside a tooltip along with its text.
What would be the best approach ?
thanks
displaying an image in a tooltip?
Moderators: CEGUI MVP, CEGUI Team
- scriptkid
- Home away from home
- Posts: 1178
- Joined: Wed Jan 12, 2005 12:06
- Location: The Hague, The Netherlands
- Contact:
Hi,
A solution might be to add an icon to the existing Tooltip definition (.looknfeel). Before the current ImagerySection="label", which you can see in the Windowslook/Tooltip, you might add a new section for the icon. If you also divide the available space for a little, you might come up with something like this: 25% for the icon, 75% for the text.
Also, don't forget to define a property for your icon:
What i also just thought of -after writing this - is that you can also look at the Checkbox definitions, which sort of do the same...
HTH.
A solution might be to add an icon to the existing Tooltip definition (.looknfeel). Before the current ImagerySection="label", which you can see in the Windowslook/Tooltip, you might add a new section for the icon. If you also divide the available space for a little, you might come up with something like this: 25% for the icon, 75% for the text.
Code: Select all
<!-- Icon in front of the label, take 25 of the space -->
<ImagerySection name="icon">
<ImageryComponent>
<Area>
<Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
<Dim type="Width" ><UnifiedDim scale="0.25" type="Width"/></Dim>
<Dim type="Height" ><UnifiedDim scale="0.25" type="Height"></Dim>
</Area>
<ImageProperty name="IconImage" />
<VertFormatProperty name="VertImageFormatting" />
<HorzFormatProperty name="HorzImageFormatting" />
</ImageryComponent>
</ImagerySection>
<!-- Existing label, but only take 75 of the space -->
<ImagerySection name="label">
<TextComponent>
<Area>
<Dim type="LeftEdge"><AbsoluteDim value="0.25" /> </Dim>
<Dim type="TopEdge"><AbsoluteDim value="0.25" /></Dim>
<Dim type="RightEdge"><UnifiedDim scale="1" type="RightEdge"/></Dim>
<Dim type="BottomEdge"><UnifiedDim scale="1" type="BottomEdge" /></Dim>
</Area>
<Colours topLeft="FF000000" topRight="FF000000" bottomLeft="FF000000" bottomRight="FF000000" />
<VertFormat type="CentreAligned" />
<HorzFormat type="CentreAligned" />
</TextComponent>
</ImagerySection>
<!-- Also add the icon to its usage -->
<StateImagery name="Enabled">
<Layer>
<Section section="main" />
<Section section="icon" />
<Section section="label" />
</Layer>
</StateImagery>
<StateImagery name="Disabled">
<Layer>
<Section section="main" />
<Section section="icon" />
<Section section="label" />
</Layer>
</StateImagery>
</WidgetLook>
Also, don't forget to define a property for your icon:
Code: Select all
<PropertyDefinition name="IconImage" initialValue="" redrawOnWrite="true" />
What i also just thought of -after writing this - is that you can also look at the Checkbox definitions, which sort of do the same...
HTH.
Check out my released snake game using Cegui!
- scriptkid
- Home away from home
- Posts: 1178
- Joined: Wed Jan 12, 2005 12:06
- Location: The Hague, The Netherlands
- Contact:
when you say "icon", it doesnt matter if at the end we insert a png/jpg/bmp file?
Well, that depends on the ImageCodec you are/will be using. Since Cegui does not use files directly, but always through an ImageSet. That is why, in code or XML, you will always see a reference to an image in the format "set:SetName image:ImageName".
HTH.
Check out my released snake game using Cegui!
Return to “Modifications / Integrations / Customisations”
Who is online
Users browsing this forum: No registered users and 8 guests