How to add text on imagebutton or image?

[marspass]

How to add text on imagebutton or image?

Can they be added two layers of text ?How?

Thanks !

[djphilipe]

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]

djphilipe

Thank you very much!

[marspass]

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

[djphilipe]

OK. Please wait.

[djphilipe]

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

[marspass]

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?

[CrazyEddie]

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]

Thank you!

[marspass]

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?

[CrazyEddie]

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]

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

[CrazyEddie]

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.

[CrazyEddie]

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

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]

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.