Imageset coords and my confusing result(s)

[LennyH]

[cegui 0.4.1]

The simplest method of messing with an imageset is simply to recolor an existing one, either by changing colors but keeping the 'style' or making sure whatever new things you create match the pixel positions of the previous.

But, that's no fun, right? :p

I'll go down to the most basic of cases that I can think of to demonstrate my problem.

Using the normal WindowsLook skin, let's say I want to change the 'Background' image defined in the imageset file.

Currently, this is defined as:

Code: Select all

<Image Name="Background" XPos="9" YPos="9" Width="2" Height="2" />


That area is a white area. It is an area inside a bigger white area, also. That is an important note.

Now, let's be wacky and say I want to make the background a navy blue. I find a free spot in my imageset image file, and I hunker down a single navy blue pixel. Let's say this pixel is at pixel coordinate 124x36.

I should then be able to redefine my Background as:

Code: Select all

<Image Name="Background" XPos="124" YPos="36" Width="1" Height="1" />


shouldn't I? I've got a single pixel, so it is 1x1, so width of 1 and height of 1. It is located at 124x36, so xpos=124, ypos=36.

But if I load up a test case, what I wind up with is that color in the upper left quadrant of whatever area; it is translucent. The other three quadrants are a translucent white. All quandrants blend together toward the center.


The solution is to surround that single pixel with itself, so that I now have a 3x3 square to let me use a 1x1 pixel for the background.

Is that a fine solution? Sure, for anything that stays a solid color. This doesn't help me when I'm trying to be 'fancy' though

What confuses me is that this behavior doesn't seem to occur on anything that is used as a 'static' image. What I mean is, anything that will not be stretched [discounting an actual resize of the entire window]. The close button, the slider bar, the arrows, the mouse cursors...

But that's not true entirely either. My normal button borders seem to work fine, but those are just re-colorations of what was already there. But I did see this same behavior of partial transparency on my button borders before, when I was placing the pixels at a different location and as a different size...

This behavior strikes me as odd, off the bat, but I am hoping there is just some odd setting or property or...something...that will change it to the expected behavior? Or is this behavior correct? If it is, why?

[Habba]

I think this issue might actually go beyond CEGUI. The problem here seems to be with assigning texture to quad in 3D enviroment. I don't know why it does it, but it seems that texture is automatically blended with the adjacent pixels (like you said) by some rendering algorithm.

Our project group also ran into similiar problem while rendering a tile-based terrain with OGRE (using quads). I don't really know how it got solved, but it was solved. What I know is that Ati and Nvidia have released a PDF manual concerning the issue.

So, what I'm talking about? My guess is pretty much as good as yours. I don't really know what's the core of the problem. All I know is that it exists.

I got rid of that problem by dumbing the FrameComponent for good, and replacing it with 9 ImageryComponent (aligning 8 of them into edges/corners and tiling the background) instead. That also gave me a lot more control over components.

[LennyH]

So for instance, here is a section of the frame window from windowslook.looknfeel:

Code: Select all

<ImagerySection name="withtitle_frame">
   <FrameComponent>
      <Area>
         <Dim type="LeftEdge">
            <AbsoluteDim value="0" />
         </Dim>
         <Dim type="TopEdge">
            <WidgetDim widget="__auto_titlebar__" dimension="Height" />
         </Dim>
         <Dim type="RightEdge">
            <UnifiedDim scale="1" type="RightEdge" />
         </Dim>
         <Dim type="BottomEdge">
            <UnifiedDim scale="1" type="BottomEdge" />
         </Dim>
      </Area>
      <Image type="BottomLeftCorner" imageset="WindowsLook" image="WindowFrameBottomLeft" />
      <Image type="BottomRightCorner" imageset="WindowsLook" image="WindowFrameBottomRight" />
      <Image type="LeftEdge" imageset="WindowsLook" image="WindowFrameLeft" />
      <Image type="RightEdge" imageset="WindowsLook" image="WindowFrameRight" />
      <Image type="BottomEdge" imageset="WindowsLook" image="WindowFrameBottom" />
   </FrameComponent>
</ImagerySection>


You say you would, in this case, dump out the frame component section and create an imagery component section for this?

Looking through the sparse tutorial(s) and trying to do some reasoning through code snippets, I'm not sure I quite understand what I should do (this stems from a lack of understanding on how the imagery component section is used).

For instance, from the examples, it seems that an imagery component is meant to define an area and then you set an image for that area. This makes sense.

Where I start losing the grasp is when I see imagery components that use an ImageDim.

For instance, the button has this:

Code: Select all

<ImageryComponent>
   <Area>
      <Dim type="LeftEdge">
         <ImageDim imageset="WindowsLook" image="ButtonHoverLeft" dimension="Width" />
      </Dim>
   </Area>
   ...
</ImagerComponent>


If I am reading correctly [from what the tutorial says and hopefully me gaining a better grasp] this snippet is defining the left edge of this new imagery section to be at 0 + Width, the result being that the area starts right next to the left edge, but does not include it.

Likewise

Code: Select all

<Dim type="RightEdge">
   <UnifiedDim scale="1" type="RightEdge">
      <DimOperator op="Subtract">
         <ImageDim imageset="WindowsLook" image="ButtonHoverRight" dimension="Width" />
      </DimOperator>
   </UnifiedDim>
</Dim>


This is saying that we first scale over to the right edge, which is our starting point. And then we subtract from that the width of the ButtonHoverRight specified in the imageset file. The result would be that it covers up to the left side of ButtonHoverRight.

So, all that said and done...I would have to make 9 imagery components to use my own custom frame? And this, supposedly, would solve the problem of surrounding pixels being sampled and blended?

I wonder why this behavior doesn't always seem to creep up, for instance, with the default WindowsLook imageset? I suppose I would have to do a pixel vs coordinate comparison to see if their images are always surrounded or not, but I can think of one case where I am sure this isn't true [the title bar]. So I wonder what the deal is *mind boggle*

[Habba]

So, all that said and done...I would have to make 9 imagery components to use my own custom frame?

Yes, that's true. Now you know why I said I've rewritten a large portition of my own LookNFeel-file.

This also gives you more control over your graphics, as you can also tile the edges, making it look much better.

If you (or someone else) managed to find out why it has this feature, I'd sure like to know too.

[LennyH]

So, all that said and done...I would have to make 9 imagery components to use my own custom frame?

Yes, that's true. Now you know why I said I've rewritten a large portition of my own LookNFeel-file.

This also gives you more control over your graphics, as you can also tile the edges, making it look much better.

If you (or someone else) managed to find out why it has this feature, I'd sure like to know too.

Tile, as opposed to stretching? That is actually a really good point. Although it looks like that this approach is going to be a pain in the neck, I guess the benefits will outweigh the negative of having just a little more work to do =p Now...to actually come up with the graphics to make a nice UI >_<

[Habba]

Although it looks like that this approach is going to be a pain in the neck, I guess the benefits will outweigh the negative of having just a little more work to do

It's a lot easier, if you invite your two friends "Copy" and "Paste" to help you.

I wrote those 9 ImageryComponents, and then applied them to almost every component (Button, StaticFrame, FrameWindow, EditBox, ComboBox, etc.)

[LennyH]

Although it looks like that this approach is going to be a pain in the neck, I guess the benefits will outweigh the negative of having just a little more work to do

It's a lot easier, if you invite your two friends "Copy" and "Paste" to help you.

I wrote those 9 ImageryComponents, and then applied them to almost every component (Button, StaticFrame, FrameWindow, EditBox, ComboBox, etc.)

Hmm, yeah, that is actually true. I forgot when I wrote that post that since the subtracts/adds are based off a variable [width, height, whatever] that it can easily be copied and pasting without having to worry about...anything. Who knows what I was thinking otherwise =p

[LennyH]

How do you specify the dimension of a corner [assuming a non square]?

Also:

Code: Select all

<ImagerySection name="normal">
   <ImageryComponent>
      <Area>
         <Dim type="LeftEdge">
            <ImageDim imageset="WindowsLook" image="TabButtonLeftNormal" dimension="Width" />
         </Dim>
         <Dim type="RightEdge">
            <ImageDim imageset="WindowsLook" image="TabButtonRightNormal" dimension="Width" />
         </Dim>
         <Dim type="TopEdge">
            <ImageDim imageset="WindowsLook" image="TabButtonUpperNormal" dimenion="Height" />
         </Dim>
         <Dim type="BottomEdge">
            <ImageDim imageset="WindowsLook" image="TabButtonLowerNormal" dimension="Height" />
         </Dim>
      </Area>
   </ImageryComponent>
...
</ImagerySection>


Granted, there are no corners. But, this doesn't show any images

[Habba]

But, this doesn't show any images

Might that be because you just define the area inside ImageryComponent, not the image you'd like to see?

How do you specify the dimension of a corner [assuming a non square]?

Not quite sure what you were looking for, but might this be any use for you?

Code: Select all

<Area>
   <Dim type="LeftEdge" >                   
      <UnifiedDim scale="1" type="RightEdge">
         <DimOperator op="Subtract">
            <ImageDim imageset="Horizon" image="ButtonNormalBottomRight" dimension="Width" />
         </DimOperator>
      </UnifiedDim>
   </Dim>
   <Dim type="TopEdge" >                  
      <UnifiedDim scale="1" type="TopEdge">
         <DimOperator op="Subtract">
            <ImageDim imageset="Horizon" image="ButtonNormalBottomRight" dimension="Height" />
         </DimOperator>
      </UnifiedDim>
   </Dim>
   <Dim type="Width" ><ImageDim imageset="Horizon" image="ButtonNormalBottomRight" dimension="Width" /></Dim>
   <Dim type="BottomEdge" ><UnifiedDim scale="1" type="BottomEdge" /></Dim>
</Area>



Now I have question: Any idea why my ImageryComponent is stretched when I draw it inside TabContentPane (a child object of TabControl)? I used exactly same block of code to draw my button, and it was un-stretched. So why would TabContentPane stretch objects drawn inside it? I wouldn't mind the thing, but with stretch comes annoying white blending to the edges of my image.

EDIT: I just found out that it comes only when I use PropertyDim to define the TopEdge of ContentPane (inside the Child-tag of TabControl). Apparently it resizes the object after images have been applied, thus just stretching the exisiting window image. Any way to recalculate image coordinates after reading PropertyDim?

[LennyH]

In your pasted segment of code, for LeftEdge, you reference RightEdge for the scale...although it probably makes no difference, that 'technically' should be LeftEdge, correct? And ultimately, it is saying to scale 100% LeftEdge the size of RightEdge and subtract off the width of ButtonNormalBottomRight. I'm not sure I understand what the desired outcome of that is.

You are definitely right: I was not setting up images for those areas. That is done by adding a set of:

Code: Select all

<Image type="LeftEdge" imageset="WindowsLook" image="TabButtonLeftNormal" />


after the <Area> tags, yes? Unfortunately, that still doesn't yield results. So, either my areas are wrong [highly likely since I still confuse myself on what the area is I am defining] or...something else =p

Your other question, in regards to my own about specifying the dimensions of a corner...

Well, take an example from the code you posted. You have RightEdge, TopEdge, Width, BottomEdge. Where are the TopLeftCorner, TopRightCorner, BottomLeftCorner, BottomRightCorner definitions? And corners are special because they are corners...you can have a nonsquare corner, so how do you specify the dimensions [all the examples say, for instance "dimension="width", but you want to define the width AND height of a corner]?

[Habba]

In your pasted segment of code, for LeftEdge, you reference RightEdge for the scale...although it probably makes no difference, that 'technically' should be LeftEdge, correct?

Yes, that's correct. Althought I have no idea what's the difference there anyways.

You are definitely right: I was not setting up images for those areas. That is done by adding a set of code after the <Area> tags, yes?

Yes, that's right. You can also change aligments by using <VertFormat> and <HorzFormat> tags. There's also an option for tiled drawing.

Well, take an example from the code you posted. You have RightEdge, TopEdge, Width, BottomEdge. Where are the TopLeftCorner, TopRightCorner, BottomLeftCorner, BottomRightCorner definitions?

When specifying an area of ImageryComponent, you'll have to set four values. LeftEdge (Also known as X) and TopEdge (Also known as Y) are mandatory. Besides these two, you can either define RightEdge (Another X coordinate) or Width, but you can't define both. The width of your image to be drawn would be RightEdge - LeftEdge, or just the Width (should you define Width over RightEdge). That was the problem with your code, your image had a width of 0, since your LeftEdge and RightEdge most likely had same values.

Same applies for BottomEdge and Height.

Here's an image that I hope would clarify things a bit:


There you can see 9 rectangles, each named after it's position. Their coordinates are represented in green. Let's say you want to draw the BottomRight rectangle.

When defining the area, we could use the following values:

TopEdge = 1 - Height of BottomEdge (or BottomRight, doesn't matter)

Code: Select all

<UnifiedDim scale="1" type="TopEdge">
         <DimOperator op="Subtract">
            <ImageDim imageset="Horizon" image="ButtonNormalBottomRight" dimension="Height" />
         </DimOperator>
</UnifiedDim>

LeftEdge = Same thing as TopEdge, but done with Width.

Code: Select all

<UnifiedDim scale="1" type="RightEdge">
         <DimOperator op="Subtract">
            <ImageDim imageset="Horizon" image="ButtonNormalBottomRight" dimension="Width" />
         </DimOperator>
</UnifiedDim>


Width = Width of BottomRight. We could also define RightEdge instead, in which case the value would just be UnifiedDim 1.0 (=right edge of whole area)

Code: Select all

<ImageDim imageset="Horizon" image="ButtonNormalBottomRight" dimension="Width" />

BottomEdge = 1.0. We could also define Height instead, in which case the value would be equal to the height of BottomRight

Code: Select all

<UnifiedDim scale="1" type="BottomEdge" />

Now you have a one of the 9 images drawn for your button. Now just make 8 more ImageryComponents with different area-values, and you have one fine looking button. Remember to tile the middle part in both directions, and edges in one direction.

[LennyH]

This clarified things a lot I was under a misunderstanding - a hangover from the way the frame components were done that I let mislead me about what it actually was doing.

So, I actually need to create nine different imagery component sections because each of those imagery components actually defines an area that will have something in it.

The frame components define an area over the entire widget, which is how I got mislead...I was creating a correlation in my mind that did not exist.

I will work from here and see what results I get

Thanks! I'll be back with questions, I'm sure =p


edit: It is a shame we cannot specify which area(s) should be 'content' sections in the looknfeel file so that the user does not have to worry about placing widgets on the borders using this method.

[Rackle]

I'm far from an expert on these matters but I would think that the 4 corners would always remain at their given size while the top and bottom edges would stretch horizontally, the left and right edges would stretch vertically, and the middle would stretch both horizontally and vertically. However the "stretch" behavior may not be accurate; can't we specify either stretch or tile?

Reading these messages makes me want to move my UI design from their paper form into an actual layout. But I'm still supposed to work on the drag and drop stuff. Grr.

[LennyH]

I'm far from an expert on these matters but I would think that the 4 corners would always remain at their given size while the top and bottom edges would stretch horizontally, the left and right edges would stretch vertically, and the middle would stretch both horizontally and vertically. However the "stretch" behavior may not be accurate; can't we specify either stretch or tile?

Reading these messages makes me want to move my UI design from their paper form into an actual layout. But I'm still supposed to work on the drag and drop stuff. Grr.

Correct, you can specify whether an area will stretch or tile; also, your description of desired behavior seems spot on, too

[LennyH]

Well, good progress on getting this. Like I said, your post has elucidated the situation quite well. I have 7 out of 9 [edit: 6 of 9, I forgot I have not done the middle] imagery component dones: TopLeft, TopRight, BottomLeft, BottomRight, LeftEdge, RightEdge.

But, as much as I stare at my code for TopEdge and BottomEdge, I have not figured out why they still show up as blank.

Code: Select all

...
<ImageryComponent> <!-- Bottom border area -->
   <Area>
      <Dim type="LeftEdge">
         <ImageDim imageset="WindowsLook" image="TabPaneLeft" dimension="Width" />
      </Dim>
      <Dim type="TopEdge">
         <UnifiedDim scale="1" type="BottomEdge">
            <DimOperator op="Subtract">
               <ImageDim imageset="WindowsLook" image="TabPaneLower" dimension="Height" />
            </DimOperator>
         </UnifiedDim>
      </Dim>
      <Dim type="Width">
         <UnifiedDim scale="1" Type="RightEdge">
            <DimOperator op="Subtract">
               <ImageDim imageset="WindowsLook" image="TabPaneRight" dimension="Width" />
            </DimOperator>
         </UnifiedDim>
      </Dim>
      <Dim type="BottomEdge">
         <UnifiedDim scale="1" type="BottomEdge" />
      </Dim>
   </Area>
   <Image type="BottomEdge" imageset="WindowsLook" image="TabPaneLower" />
   <VertFormat type="Tiled" />
   <HorzFormat type="Tiled" />
</ImageryComponent>
<ImageryComponent> <!-- Top border area -->
   <Area>
      <Dim type="LeftEdge">
         <ImageDim imageset="WindowsLook" image="TabPaneLeft" dimension="Width" />
      </Dim>
      <Dim type="TopEdge">
         <AbsoluteDim value="0" />
      </Dim>
      <Dim type="Width">
         <UnifiedDim scale="1" Type="RightEdge">
            <DimOperator op="Subtract">
               <ImageDim imageset="WindowsLook" image="TabPaneRight" dimension="Width" />
            </DimOperator>
         </UnifiedDim>
      </Dim>
      <Dim type="BottomEdge">
         <ImageDim imageset="WindowsLook" image="TabPaneUpper" dimension="Height" />
      </Dim>
   </Area>
   <Image type="TopEdge" imageset="WindowsLook" image="TabPaneUpper" />
   <VertFormat type="Tiled" />
   <HorzFormat type="Tiled" />
</ImageryComponent>
...