How to add text on imagebutton or image?

[CrazyEddie]

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

This is largely dependant upon whether you're using or need the scrollbars and such things. If you do not it may be possible to 'match' the area of the copy of the text used for shadow with the named area that is used by the static text (meaning WithFrameTextRenderArea or whatever).

If you need the text scrolling, or need to use anything other than the simplest cases, then you'll probably end up writing a replacement WindowRenderer object.

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

Shadowed text is not directly supported, which is why you have to resort to drawing strings twice.

You might consider using a Pixmap based font which can have the shadows pre-rendered for each glyph (You might find this useful: http://www.cegui.org.uk/phpBB2/viewtopic.php?t=3875 for that).

CE

[djphilipe]

Hi,
you must make a new widget in looknfeel and use it for your texts.

Example looknfeel:

Code: Select all

    <!--
    ***************************************************
        MyLook/StaticShadowText
    ***************************************************
    -->
    <WidgetLook name="MyLook/StaticShadowText">
        <PropertyDefinition name="VertLabelFormatting" initialValue="CentreAligned" />
        <PropertyDefinition name="HorzLabelFormatting" initialValue="CentreAligned" />
        <PropertyDefinition name="TextShadowColour" initialValue="77000000" redrawOnWrite="true" />
        <PropertyDefinition name="TextColours" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="ShadowShiftDown" initialValue="1" redrawOnWrite="true"/>
        <PropertyDefinition name="ShadowShiftRight" initialValue="1" redrawOnWrite="true"/>
       
        <ImagerySection name="label">
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge"><PropertyDim name="ShadowShiftRight"/></Dim>
                    <Dim type="TopEdge"><PropertyDim name="ShadowShiftDown"/></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" >
                           <DimOperator op="Subtract">
                                 <PropertyDim name="ShadowShiftRight"/>
                                </DimOperator>
                     </UnifiedDim>
                    </Dim>
                         <Dim type="Height"><UnifiedDim scale="1" type="Height" >
                      <DimOperator op="Subtract">
                                 <PropertyDim name="ShadowShiftDown"/>
                                </DimOperator>
                     </UnifiedDim>
                    </Dim>
                </Area>
                <ColourProperty name="TextShadowColour" />
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width"><UnifiedDim scale="1" type="Width" >
                           <DimOperator op="Subtract">
                                 <PropertyDim name="ShadowShiftRight"/>
                                </DimOperator>
                     </UnifiedDim>
                    </Dim>
                         <Dim type="Height"><UnifiedDim scale="1" type="Height" >
                      <DimOperator op="Subtract">
                                  <PropertyDim name="ShadowShiftDown"/>
                                 </DimOperator>
                     </UnifiedDim>
                    </Dim>
                </Area>
                <ColourProperty name="TextColours" />
                <VertFormatProperty name="VertLabelFormatting" />
                <HorzFormatProperty name="HorzLabelFormatting" />
            </TextComponent>
        </ImagerySection>
       
        <StateImagery name="Enabled" ><Layer><Section section="label" /></Layer></StateImagery>
        <StateImagery name="Disabled" />   
         
    </WidgetLook>


Example scheme:

Code: Select all

<FalagardMapping WindowType="MyLook/StaticShadowText"  TargetType="DefaultWindow" Renderer="Falagard/Default"  LookNFeel="MyLook/StaticShadowText" />

And result:


Filip

[06casswp]

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.

Cheers for that code CE, was looking for a way to give my text an outline and that code solved it very quickly for me. Here is the widgetlook I created out of it. Gives a pretty cool effect:

Code: Select all

<WidgetLook name="Eternity/Label">
   <PropertyDefinition name="TextColours" initialValue="FFFFFFFF" redrawOnWrite="true" />
    <PropertyDefinition name="VertFormatting" initialValue="CentreAligned" redrawOnWrite="true" />
    <PropertyDefinition name="HorzFormatting" initialValue="CentreAligned" redrawOnWrite="true" />
   <PropertyDefinition name="BackgroundTextColours" initialValue="tl:00000000 tr:00000000 bl:00000000 br:00000000" redrawOnWrite="true" />
    <PropertyDefinition name="TextShadowColour" initialValue="FF000000" redrawOnWrite="true" />
    <PropertyDefinition name="TextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />

            <ImagerySection name="label">
               
                <TextComponent>
                    <Area>
                        <Dim type="LeftEdge"><AbsoluteDim value="-1" /></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="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            <TextComponent>
                    <Area>
                        <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                        <Dim type="TopEdge"><AbsoluteDim value="-1" /></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="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            <TextComponent>
                    <Area>
                        <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                        <Dim type="TopEdge"><AbsoluteDim value="1" /></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="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            <TextComponent>
                    <Area>
                        <Dim type="LeftEdge"><AbsoluteDim value="1" /></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="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            <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="TextColour" />
                    <VertFormatProperty name="VertFormatting" />
                    <HorzFormatProperty name="HorzFormatting" />
                </TextComponent>
            </ImagerySection>
   
    <ImagerySection name="label_bg">
      <ImageryComponent>
          <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>
                <Image imageset="Eternity" image="LabelBackground" />
                <ColourRectProperty name="BackgroundTextColours" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            
        </ImageryComponent>
    </ImagerySection>
    <StateImagery name="Enabled">
        <Layer>
         <Section section="label_bg" />

            <Section section="label">
             <ColourProperty name="TextColours" />
         </Section>
         
        </Layer>
    </StateImagery>
    <StateImagery name="Disabled">
        <Layer>
         <Section section="label_bg" />

            <Section section="label">
             <ColourProperty name="TextColours" />
         </Section>
        </Layer>
    </StateImagery>
    </WidgetLook>