CEGUI (Crazy Eddie's GUI) Forums

Posted: **Thu Feb 19, 2009 05:48**

How to add text on imagebutton or image?

Can they be added two layers of text ?How?

Thanks !

Posted: **Thu Feb 19, 2009 07:17**

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

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

Posted: **Thu Feb 19, 2009 07:29**

djphilipe

Thank you very much!

Posted: **Thu Feb 19, 2009 09:16**

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

Posted: **Thu Feb 19, 2009 10:30**

OK. Please wait.

Posted: **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:

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

Sorry for my bad English.
Filip

Posted: **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.

That means imagebutton need two text property.

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

btw,where are you from?

Posted: **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

Posted: **Tue Mar 03, 2009 06:23**

Thank you!

Posted: **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

different area

How can I make the Text1 area changed with the default text area?

Posted: **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>

Posted: **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:

Posted: **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.

Posted: **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.

Posted: **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.

CEGUI (Crazy Eddie's GUI) Forums

How to add text on imagebutton or image?

How to add text on imagebutton or image?

Re: How to add text on imagebutton or image?

thank you

thank you

Text and shadow

scale values of two

thank you