(9.07) Windows symmetry issues

christianboutin.com

13-09-2009 19:54:19

Me again :)

Found an issue with the window system where Border_Left and Border_Right are of different values.

To demonstrate this I made a test window file :



And the ini file, first symmetrical :

Window testwindow
{
SkinReference hscrollbar
{
ClassName HScrollBar
SkinType default
}

SkinReference vscrollbar
{
ClassName VScrollBar
SkinType default
}

SkinReference titlebar
{
ClassName TitleBar
SkinType default
}

SkinElement background
{
Border_Bottom 9
Border_Left 9
Border_Right 9
Border_Top 9
Texture testwindow.png
TileBackground true
TileBorders true
}

}


Result :



Exactly as it should be.

Now went into the skinType file and change Border_Left from 9 to 6



You can see white lines in the lower border, which is normal, and purple lines in the middle, which is also normal. However the top end has both blue and red lines, so the looping part encroaches on both the left and the right side for its data. Took a look into the code but that one's kinda deep. Thought you might like to know.

kungfoomasta

13-09-2009 20:45:01

I actually think this is all correct. And my apologies for not having any place to really understand how the borders work.

When you shorten the left border size, you're also affecting other border edges: topleft, botleft, top, bot.

As you shorten the left side, the top border, which spans from the left to the right border, will now grow and contain some red, green, and blue. As its tiled, you will see all 3 colors. In fact, I'm expecting to see the same on the bottom, with white, black, and grey tiled across. Just remember that all borders must make up the outter edge of the texture, so if you're decreasing one border, you're increasing another, and vice versa.

disclaimer: I'm no expert on how this system *should* work, but this is the system in place and how I'm using it in my own project. I'd be interested to hear if you thought things would work differently.

christianboutin.com

13-09-2009 21:00:58

If what you say is correct, shouldn't I get Purple/Cyan AND yellow in the middle as well as White/Black AND gray at the bottom? The behaviour at the top is different. The way I understand how border works is as follows :



I use little black markers outside the box to illustrate the boundaries (at least how I perceive them).

In image A, everything is fine, symmetrical, and gives the first result. If I shrink the Border_Left value, what I expect is what is on image B.

The result should (in my mind) be that you get red lines in the green area, purple lines in the cyan area and white lines in the black area.

Why I think there's a bug, is that what I get are white lines in the black area as expected, purple lines in the cyan area as expected, but in the green area I get both red and blue lines. So the behaviours is not consistent across the three zones, and I wonder how that can be.

kungfoomasta

13-09-2009 21:58:53

Oops, somehow I was thinking you shortened both sides. You've outlined the scenario correctly, let me check the code..

kungfoomasta

13-09-2009 22:25:12

Hm, I think I've confused myself. I've found the code where I determine the UV coords for the various borders, but a lot of it looks wrong to me..


// Top Left Corner
mBorderUV[BORDER_TOP_LEFT].left = 0;
mBorderUV[BORDER_TOP_LEFT].right = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_TOP_LEFT].top = 0;
mBorderUV[BORDER_TOP_LEFT].bottom = mBorderThickness[BORDER_TOP] / texHeight;
// Top Side
mBorderUV[BORDER_TOP].left = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_TOP].right = 1.0 - (mBorderThickness[BORDER_RIGHT] / texWidth);
mBorderUV[BORDER_TOP].top = 0;
mBorderUV[BORDER_TOP].bottom = mBorderThickness[BORDER_TOP] / texHeight;
// Top Right Corner
mBorderUV[BORDER_TOP_RIGHT].left = 1.0 - (mBorderThickness[BORDER_LEFT] / texWidth);
mBorderUV[BORDER_TOP_RIGHT].right = 1.0;
mBorderUV[BORDER_TOP_RIGHT].top = 0;
mBorderUV[BORDER_TOP_RIGHT].bottom = mBorderThickness[BORDER_TOP] / texHeight;
// Right Side
mBorderUV[BORDER_RIGHT].left = 1.0 - (mBorderThickness[BORDER_LEFT] / texWidth);
mBorderUV[BORDER_RIGHT].right = 1.0;
mBorderUV[BORDER_RIGHT].top = mBorderThickness[BORDER_TOP] / texHeight;
mBorderUV[BORDER_RIGHT].bottom = 1.0 - (mBorderThickness[BORDER_BOTTOM] / texHeight);
// Bottom Right Corner
mBorderUV[BORDER_BOTTOM_RIGHT].left = 1.0 - (mBorderThickness[BORDER_LEFT] / texWidth);
mBorderUV[BORDER_BOTTOM_RIGHT].right = 1.0;
mBorderUV[BORDER_BOTTOM_RIGHT].top = 1 - (mBorderThickness[BORDER_BOTTOM] / texHeight);
mBorderUV[BORDER_BOTTOM_RIGHT].bottom = 1.0;
// Bottom Side
mBorderUV[BORDER_BOTTOM].left = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_BOTTOM].right = 1.0 - (mBorderThickness[BORDER_RIGHT] / texWidth);
mBorderUV[BORDER_BOTTOM].top = 1 - (mBorderThickness[BORDER_BOTTOM] / texHeight);
mBorderUV[BORDER_BOTTOM].bottom = 1.0;
// Left Bottom Corner
mBorderUV[BORDER_BOTTOM_LEFT].left = 0;
mBorderUV[BORDER_BOTTOM_LEFT].right = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_BOTTOM_LEFT].top = 1 - (mBorderThickness[BORDER_BOTTOM] / texHeight);
mBorderUV[BORDER_BOTTOM_LEFT].bottom = 1.0;
// Left Side
mBorderUV[BORDER_LEFT].left = 0;
mBorderUV[BORDER_LEFT].right = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_LEFT].top = mBorderThickness[BORDER_TOP] / texHeight;
mBorderUV[BORDER_LEFT].bottom = 1.0 - (mBorderThickness[BORDER_BOTTOM] / texHeight);


For example, the Top border's right UV coord shouldn't be

mBorderUV[BORDER_TOP].right = 1.0 - (mBorderThickness[BORDER_RIGHT] / texWidth);

it should be

mBorderUV[BORDER_TOP].right = mBorderThickness[BORDER_RIGHT];

Does this seem accurate?

christianboutin.com

13-09-2009 22:37:52

In the code I got from SVN it reads this
mBorderUV[BORDER_TOP].right = 1.0 - (mBorderThickness[BORDER_LEFT] / texWidth);
Should read that:
mBorderUV[BORDER_TOP].right = 1.0 - (mBorderThickness[BORDER_RIGHT] / texWidth);

*edit made a mistake in my original post. Fixed now. I fixed it on my end and the window looks fine now

christianboutin.com

13-09-2009 22:53:42

Actually, there was more to it than just that one line, I found after trying buttons with different sized left/right. Here's a patch that should take care of all the glitches:

http://dl.getdropbox.com/u/123055/ogreguiborder.patch

kungfoomasta

13-09-2009 23:19:41

I committed what I thought was the issue, but without any real testing. I thought about it some more, and it looked like a lot of calculations were wrong. The code has a lot of "1 - ..." expressions, but I don't think that would ever be what we want.

Here is what I'm proposing, can you see if this works?


// Top Left Corner
mBorderUV[BORDER_TOP_LEFT].left = 0;
mBorderUV[BORDER_TOP_LEFT].right = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_TOP_LEFT].top = 0;
mBorderUV[BORDER_TOP_LEFT].bottom = mBorderThickness[BORDER_TOP] / texHeight;
// Top Side
mBorderUV[BORDER_TOP].left = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_TOP].right = (texWidth - mBorderThickness[BORDER_RIGHT]) / texWidth;
mBorderUV[BORDER_TOP].top = 0;
mBorderUV[BORDER_TOP].bottom = mBorderThickness[BORDER_TOP] / texHeight;
// Top Right Corner
mBorderUV[BORDER_TOP_RIGHT].left = (texWidth - mBorderThickness[BORDER_RIGHT]) / texWidth;
mBorderUV[BORDER_TOP_RIGHT].right = 1.0;
mBorderUV[BORDER_TOP_RIGHT].top = 0;
mBorderUV[BORDER_TOP_RIGHT].bottom = mBorderThickness[BORDER_TOP] / texHeight;
// Right Side
mBorderUV[BORDER_RIGHT].left = (texWidth - mBorderThickness[BORDER_RIGHT]) / texWidth;
mBorderUV[BORDER_RIGHT].right = 1.0;
mBorderUV[BORDER_RIGHT].top = mBorderThickness[BORDER_TOP] / texHeight;
mBorderUV[BORDER_RIGHT].bottom = (texHeight - mBorderThickness[BORDER_BOTTOM]) / texHeight;
// Bottom Right Corner
mBorderUV[BORDER_BOTTOM_RIGHT].left = (texWidth - mBorderThickness[BORDER_RIGHT]) / texWidth;
mBorderUV[BORDER_BOTTOM_RIGHT].right = 1.0;
mBorderUV[BORDER_BOTTOM_RIGHT].top = (texHeight - mBorderThickness[BORDER_BOTTOM]) / texHeight;
mBorderUV[BORDER_BOTTOM_RIGHT].bottom = 1.0;
// Bottom Side
mBorderUV[BORDER_BOTTOM].left = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_BOTTOM].right = (texWidth - mBorderThickness[BORDER_RIGHT]) / texWidth;
mBorderUV[BORDER_BOTTOM].top = (texHeight - mBorderThickness[BORDER_BOTTOM]) / texHeight;
mBorderUV[BORDER_BOTTOM].bottom = 1.0;
// Left Bottom Corner
mBorderUV[BORDER_BOTTOM_LEFT].left = 0;
mBorderUV[BORDER_BOTTOM_LEFT].right = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_BOTTOM_LEFT].top = (texHeight - mBorderThickness[BORDER_BOTTOM]) / texHeight;
mBorderUV[BORDER_BOTTOM_LEFT].bottom = 1.0;
// Left Side
mBorderUV[BORDER_LEFT].left = 0;
mBorderUV[BORDER_LEFT].right = mBorderThickness[BORDER_LEFT] / texWidth;
mBorderUV[BORDER_LEFT].top = mBorderThickness[BORDER_TOP] / texHeight;
mBorderUV[BORDER_LEFT].bottom = (texHeight - mBorderThickness[BORDER_BOTTOM]) / texHeight;

kungfoomasta

13-09-2009 23:30:35

I went ahead and tested my proposed changes, and I tested it, looks like its working as expected now. (committed to SVN) Thanks for raising this issue!

christianboutin.com

14-09-2009 00:38:39

Will check that out tomorrow. Cheers!