How to add text on imagebutton or image?

For help with general CEGUI usage:
- Questions about the usage of CEGUI and its features, if not explained in the documentation.
- Problems with the CMAKE configuration or problems occuring during the build process/compilation.
- Errors or unexpected behaviour.

Moderators: CEGUI MVP, CEGUI Team

marspass
Just popping in
Just popping in
Posts: 8
Joined: Wed Feb 11, 2009 08:13
Contact:

How to add text on imagebutton or image?

Postby marspass » Thu Feb 19, 2009 05:48

How to add text on imagebutton or image?

Can they be added two layers of text ?How?

Thanks !

djphilipe
Quite a regular
Quite a regular
Posts: 48
Joined: Thu Aug 23, 2007 10:15
Location: Slovakia
Contact:

Re: How to add text on imagebutton or image?

Postby djphilipe » Thu Feb 19, 2009 07:17

Hi, yes you can.
Add into your widget(imagebutton, image...) two textcomponents.

Code: Select all

<ImagerySection name="text1">
 <TextComponent>
  <Area>
    ....
  </Area>
  <VertFormat type="TopAligned" />
  <HorzFormat type="WordWrapCentreAligned" />
 </TextComponent>
</ImagerySection>


<ImagerySection name="text2">
 <TextComponent>
  <Area>
    ....
  </Area>
  <VertFormat type="TopAligned" />
  <HorzFormat type="WordWrapCentreAligned" />
 </TextComponent>
</ImagerySection>


<StateImagery name="Normal">
  <Layer>
    <Section section="text1" />
    <Section section="text2" />
       ....
  </Layer>
</StateImagery>

marspass
Just popping in
Just popping in
Posts: 8
Joined: Wed Feb 11, 2009 08:13
Contact:

Postby marspass » Thu Feb 19, 2009 07:29

djphilipe

Thank you very much!

marspass
Just popping in
Just popping in
Posts: 8
Joined: Wed Feb 11, 2009 08:13
Contact:

Postby marspass » Thu Feb 19, 2009 09:16

i get some trouble to use this, would you please give some guide if i can't

djphilipe
Quite a regular
Quite a regular
Posts: 48
Joined: Thu Aug 23, 2007 10:15
Location: Slovakia
Contact:

Postby djphilipe » Thu Feb 19, 2009 10:30

OK. Please wait.

djphilipe
Quite a regular
Quite a regular
Posts: 48
Joined: Thu Aug 23, 2007 10:15
Location: Slovakia
Contact:

Postby djphilipe » Thu Feb 19, 2009 10:55

EXAMPLE:
1. Add code below into WindowsLook/IconButton(WindowsLook.looknfeel):

Code: Select all

<ImagerySection name="text1">
 <TextComponent>
  <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" >
      <DimOperator op="Multiply">
       <AbsoluteDim value="0.5" />
      </DimOperator>
     </UnifiedDim>   
   </Dim>
  </Area>
  <VertFormat type="CentreAligned" />
  <HorzFormat type="WordWrapCentreAligned" />
 </TextComponent>
</ImagerySection>
         
<ImagerySection name="text2">
 <TextComponent>
  <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>
  <VertFormat type="CentreAligned" />
  <HorzFormat type="WordWrapCentreAligned" />
 </TextComponent>
</ImagerySection>


2. replace <StateImagery name="Normal"> in WindowsLook/IconButton for:

Code: Select all

<StateImagery name="Normal">
 <Layer>
 <Section look="WindowsLook/Button" section="normal" />
 <Section section="icon" />
 <Section section="text1">
  <Colours topLeft="FFFFFFFF" topRight="FFFFFFFF" bottomLeft="FFFFFFFF" bottomRight="FFFFFFFF" />
  </Section>
  <Section section="text2">
   <Colours topLeft="FFFF0000" topRight="FFFF0000" bottomLeft="FFFF0000" bottomRight="FFFF0000" />
  </Section>
 </Layer>
</StateImagery>


3. run CELayoutEditor 0.5.
WARNING: editor version 0.6... doesn't show this texts, because it has very many bugs :) , you must use version 0.5

4. create WindowsLook/IconButton and write text
You can write only one text, second text will be same.

RESULT:
Image

You can use this, for example shadow of text.
examle my app:(text1 is label, text2 is its shadow)
Image

Sorry for my bad English.
Filip

marspass
Just popping in
Just popping in
Posts: 8
Joined: Wed Feb 11, 2009 08:13
Contact:

thank you

Postby marspass » Thu Feb 26, 2009 07:11

Sorry for my late reply
I was confused by some UI problems.
Thanks for your help. I got it.
But it’s not what I want.Sorry for my bad English, too.
Pictures may give me some help.
I want the result shows as the fellowing picture a imagebutton with two different texts.

Image

That means imagebutton need two text property.

If it can be,How?
Thank you very much!



btw,where are you from?
Image

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

Postby CrazyEddie » Thu Feb 26, 2009 10:19

Basically you do what djphilipe says, with one addition... You should use a PropertyDefinition to create a new property to access the second text string (this goes at the top of the WidgetLook):

Code: Select all

<PropertyDefinition name="Text2" redrawOnWrite="true" />


and then reference that in the 'text2' TextComponent by way of the TextProperty element...

Code: Select all

<ImagerySection name="text2">
 <TextComponent>
  <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>
  <TextProperty name="Text2" />
  <VertFormat type="CentreAligned" />
  <HorzFormat type="WordWrapCentreAligned" />
 </TextComponent>
</ImagerySection>


HTH

CE

marspass
Just popping in
Just popping in
Posts: 8
Joined: Wed Feb 11, 2009 08:13
Contact:

thank you

Postby marspass » Tue Mar 03, 2009 06:23

Image

Thank you!

marspass
Just popping in
Just popping in
Posts: 8
Joined: Wed Feb 11, 2009 08:13
Contact:

Text and shadow

Postby marspass » Sat Mar 14, 2009 09:13

hi
I make text and it's shadow work in statictext.
But it's different form imagebutton.
Because imagebutton does not have text property.
When it added to staticimage,troubles come.
Text1 and the default text will not use the same property.
Such as area.
The default area will be changed in many layouts.
Text1 area cant change with the default property.


Text1 cede

Code: Select all

      <ImagerySection name="text1">
         <TextComponent>
            <Area>
               <Dim type="LeftEdge">
                  <AbsoluteDim value="1"/>
               </Dim>
               <Dim type="TopEdge">
                  <AbsoluteDim value="1"/>
               </Dim>
               <Dim type="Width">
                  <UnifiedDim scale="2" type="Width"/>
               </Dim>
               <Dim type="Height">
                  <UnifiedDim scale="2" type="Height"/>
               </Dim>
            </Area>
            <VertFormat type="TopAligned"/>
            <HorzFormat type="WordWrapLeftAligned"/>
         </TextComponent>



same area

Image

different area

Image

How can I make the Text1 area changed with the default text area?
Last edited by marspass on Mon Mar 16, 2009 07:35, 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 » Sun Mar 15, 2009 09:08

Hi,

I think the regular button text region is set to use the whole button area, and to render the text centred in that area. The main issue I see with the area you're using is that you have width and height scale values of two, this means the rendering area for the text will be twice as wide as the button itself - perhaps you meant to do this, perhaps not ;)

Usually, we set these areas to cover the whole area of the window, like:

Code: Select all

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

marspass
Just popping in
Just popping in
Posts: 8
Joined: Wed Feb 11, 2009 08:13
Contact:

scale values of two

Postby marspass » Mon Mar 16, 2009 08:08

hi,
I have width and height scale values of two.
It may be a wrong way.
I thought creat two layers of text,one white one black, and offest one a little amount.

But how to offset in statictext or how to make all of the widget?Can u tell me a good way to do this?

I searched the key word shadow

Beginners Help How to add text on imagebutton or image?
marspass 11 337 Mon Mar 16, 2009 8:08 am
marspass
Project Announcements The Intensity Engine
kripken 8 767 Fri Dec 12, 2008 7:21 pm
CrazyEddie
Skins and Themes Clearlooks Like Skin
GameEnder 5 2403 Sun Jul 08, 2007 4:32 am
lymantok
Advanced Help How to apply an outline to a font?
Vindi 4 1012 Wed Mar 07, 2007 3:43 am
tgraupmann
Beginners Help Compiling cegui with ogre renderer
doktor5000 4 397 Sun Dec 03, 2006 5:34 pm
lindquist
Advanced Help Drop Shadows on FrameWindows?
SuperGeek 3 659 Tue Sep 26, 2006 3:13 am
cutenoob
General Discussion CEGUI Future Direction
[ Goto page: 1, 2, 3 ] _mental_ 31 7705 Fri May 20, 2005 3:13 am
_mental_
Advanced Help A few questions
tomothy 4 458 Sat Feb 26, 2005 10:00 am
CrazyEddie
Advanced Help OGRE related: shadow problems
psyclonist 12 1202 Thu Aug 26, 2004 5:44 pm
CrazyEddie

did not find answer :cry:

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

Postby CrazyEddie » Mon Mar 16, 2009 14:37

I'm not 100% certain I understand anymore :(

So you're creating some text with a shadow by rendering the string twice; once in black, and again in white on top and offset a little?

You say you have this working on a static text, but that it does not work on an image button?

Where I don't understand is that the technique is the same for both :?

I'll try to post an image button based example in a little while.

CE.

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

Postby CrazyEddie » Mon Mar 16, 2009 16:45

Ok, I have produced the following approach to draw shadowed text. I'm not sure if this is what you were wanting or not, but this is what I'm posting anyway :lol:

First, near the top of the WidgetLook, you must make sure you have these new properties defined:

Code: Select all

        <PropertyDefinition name="VertLabelFormatting" initialValue="CentreAligned" />
        <PropertyDefinition name="HorzLabelFormatting" initialValue="CentreAligned" />
        <PropertyDefinition name="TextShadowColour" initialValue="FF000000" redrawOnWrite="true" />
        <PropertyDefinition name="TextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />


Then you need an ImagerySection to create the text. We'll call this 'label' and it contains two TextComponents; these are identical except that they use different ColourProperty names in order to access the shadow and text colours, and also in that the second copy has a negative two offset.

Code: Select all

        <ImagerySection name="label">
            <TextComponent>
                <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>
                <ColourProperty name="TextShadowColour" />
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="-2" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="-2" /></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height"><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <ColourProperty name="TextColour" />
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
        </ImagerySection>


Finally, you have to add references to the new ImagerySection in the StateImagery definitions, for example, the "Normal" state:

Code: Select all

        <StateImagery name="Normal">
            <Layer>
                <Section section="normal" />
                <Section section="label" />
            </Layer>
        </StateImagery>


Just to reiterate that I'm not sure if this is what you were asking or not, but I've done my best.

HTH

CE.

marspass
Just popping in
Just popping in
Posts: 8
Joined: Wed Feb 11, 2009 08:13
Contact:

thank you

Postby marspass » Tue Mar 17, 2009 07:07

Sorry for my bad English.
I appreciate what you have done.

I want to say that the text and it's shadow work well in imagebutton.

But not well in statictext.

Because imagebutton didn't have text property by default.
When it added to statictext,I cant make the alignment of shadow change with the default text.

so,my question

1 how to make the alignment of shadow change with the default text in statictext?

2 Is there a way to add shadow to all text in cegui ?


Any answer will be appreciated.


Return to “Help”

Who is online

Users browsing this forum: No registered users and 10 guests