Imageset Edit box alignment

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

Rakkar
Not too shy to talk
Not too shy to talk
Posts: 34
Joined: Tue Aug 15, 2006 02:49

Imageset Edit box alignment

Postby Rakkar » Thu May 10, 2007 22:16

In the imageset file, I made a new image for "EditBoxLeft" where the width is pretty big:

<Image Name="EditBoxLeft" XPos="3" YPos="260" Width="59" Height="73" XOffset="20"/>

But when I type in the edit box, the cursor's origin is at the left edge of "EditBoxLeft" and not at the left edge of "EditBoxMiddle" as it should be, so you end up typing over the left border, and although I didn't check, probably the right too.

How do I make the cursor stay within "EditBoxMiddle" or at least define offsets so I don't type over the edges?

Also, what is XOffset for? As far as I can tell all that happens is that it subtracted from XPos and does no good.

Pompei2
Home away from home
Home away from home
Posts: 489
Joined: Tue May 23, 2006 16:31

Postby Pompei2 » Fri May 11, 2007 13:17

In the look'n'feel file,at the definition of the editbox, there is this:

Code: Select all

<NamedArea name="TextArea">
   <Area>
       <Dim type="LeftEdge" ><AbsoluteDim value="5" /></Dim>
       <Dim type="TopEdge" ><AbsoluteDim value="5" /></Dim>
       <Dim type="RightEdge" ><UnifiedDim scale="1.0" offset="-5" type="RightEdge" /></Dim>
       <Dim type="BottomEdge" ><UnifiedDim scale="1.0" offset="-5" type="BottomEdge" /></Dim>
    </Area>
</NamedArea>

Change this to your needs.

Rakkar
Not too shy to talk
Not too shy to talk
Posts: 34
Joined: Tue Aug 15, 2006 02:49

Postby Rakkar » Fri May 11, 2007 17:09

This doesn't work because it doesn't scale with the screen resolution. For a left edge of 58 pixels at 1600x1200

<Dim type="LeftEdge" ><UnifiedDim scale="0.0" offset="58" type="LeftEdge" /></Dim>

Goes twice as far as it should at 800x600.

Rackle
CEGUI Team (Retired)
Posts: 534
Joined: Mon Jan 16, 2006 11:59
Location: Montréal

Postby Rackle » Fri May 11, 2007 17:36

Have a read through Skinning part 2, particularly the Text section.

We start out with the left edge. In the frame we used the image named EditboxL for the left edge. And as the area we want to define is to lie inside the frame, we'll use the width of this specific image as the left edge of our area. The XML for this ImageDim is like so:


In the following snippet you'll need to replace MyImages with an appropriate name.

Code: Select all

<ImageDim imageset="MyImages" image="EditBoxLeft" dimension="Width" />


I've never done this myself so I don't know what I'm talking about; hopefully I'm right on the mark.

Rakkar
Not too shy to talk
Not too shy to talk
Posts: 34
Joined: Tue Aug 15, 2006 02:49

Postby Rakkar » Fri May 11, 2007 17:37

I got it working. It should have been setup like this to begin with

Code: Select all

<Area>
   <Dim type="LeftEdge" ><ImageDim imageset="GalacticMeleeLook" image="EditBoxLeft" dimension="Width" /></Dim>
   <Dim type="TopEdge" ><AbsoluteDim value="5" /></Dim>
   <Dim type="RightEdge" >
      <UnifiedDim scale="1" type="RightEdge">
          <DimOperator op="Subtract">
              <ImageDim imageset="GalacticMeleeLook" image="EditBoxRight" dimension="Width" />
          </DimOperator>
      </UnifiedDim>
  </Dim>
   <Dim type="BottomEdge" ><UnifiedDim scale="1.0" offset="-5" type="BottomEdge" /></Dim>
</Area>

Rakkar
Not too shy to talk
Not too shy to talk
Posts: 34
Joined: Tue Aug 15, 2006 02:49

Postby Rakkar » Fri May 11, 2007 18:00

I take that back - it still doesn't work. The right edge is too far away, but the left edge is ok.

Rackle
CEGUI Team (Retired)
Posts: 534
Joined: Mon Jan 16, 2006 11:59
Location: Montréal

Postby Rackle » Fri May 11, 2007 21:52

Let's say that the left edge measures 10 and the right edge measures 15. And let's say that the EditBox is rendered and takes a total of 100.

The middle's left position is the width of the left edge, making it x = 10. It's width is set to 100%, making it 100, to which we substract the 10 from the left edge; it's final width is 90. The x position of its right side is 10 + 90 = 100, which is on top of the right edge.

The solution is to substract the right edge's width from the middle's width; there needs to be a second substraction.

Well, that's what I think anyway...

Pompei2
Home away from home
Home away from home
Posts: 489
Joined: Tue May 23, 2006 16:31

Postby Pompei2 » Sun May 13, 2007 12:58

That would be right if he had set <Dim type="Width" > but he has done it right: <Dim type="RightEdge" >
At first look, your code looks ok :? maybe try to find out a relation between the "too far away" and all sizes you know (the images widths, the widget width etc.) that can help us to find out what's doing wrong.


Return to “Help”

Who is online

Users browsing this forum: No registered users and 32 guests