Confused by "Align" in Layout Editor

Hi Folks,

I have searched the forum / wiki for an answer but I haven't quite found it

What I'm trying to achieve is to have a picture in the bottom left hand corner of the screen of a fixed size (even if the window is resized). This should work if for any reasonable resolution and aspect ratio.

What I expected to happen was if the size of the StaticImage box was too big the texture would sit in the bottom left hand corner (when I set Align to Left Bottom), but it always seems to stretch.

How is Align supposed to work? Have I got the wrong end of the stick?

Thanks for your help
All the best,
Ash

PS. I am using the MyGUI 3.0.0 binary demos

Align used only for widget position and size, but not for StaticImage behaviour. So it doesn't control StaticImage content, and by default StaticImage stretch any image inside it. To make it smaller you should check size of your texture by hands and change widget size.

Also there is helper function for that :
MyGUI::IntSize textureSize = MyGUI::texture_utility::getTextureSize("texture.png");

Align used only for widget position and size, but not for StaticImage behaviour. So it doesn't control StaticImage content, and by default StaticImage stretch any image inside it. To make it smaller you should check size of your texture by hands and change widget size.

Also there is helper function for that :
MyGUI::IntSize textureSize = MyGUI::texture_utility::getTextureSize("texture.png");

Thanks Altren. That makes sense, but it doesn't seem to be working that way in the LayoutEditor. For example if I have a StaticImage widget that is 100 pixels by 100 pixels in the middle of the screen and the Window is 1280x1024, when I select "Left Top" in "Align" it doesn't move the control to 0,0,100,100 as I would expect.

Perhaps this only happens when the window size is set? Is there any way to get this to happen in the LayoutEditor?

Thanks for your help and a fantastic library!
All the best,
Ash

I have a similar (or exact same) problem, but for me it seems the align attributes are always ignored.
I also got a StaticImage I want to move to left bottom (screen resolution independent).

Following does NOT work as I'd expect:
<Widget type="StaticImage" skin="StaticImage" position="0 0 192 48" align="Bottom" layer="Main" name="bottomlogo">
<Property key="Image_Texture" value="LogoSmall.png" />
</Widget>

Also stretching doesn't work, even with buttons?!
<Widget type="Button" skin="Button" position="0 0 32 32" align="VCENTER HSTRETCH" layer="Main" name="testbutton">
<Property key="Widget_Caption" value="Test" />
</Widget>
Shouldn't this code move the button to the vertical center and stretch it horizontally (ignoring the 32px width set in position attribute)?

Same here, Align parameters don's seem to do anything. Your GUI seriously needs some better documentation of its basic concepts, I'm just starting out and am having a terribly slow time doing things that should be simple.

Seems like there are more people having problems with aligns. It' sure needs a better documentation.
Did anyone find a solution? Is there any additional code to add in the program or layout file? It's tiring to have to calculate the positions in the program for each widget...

Align is not a command - it is behaviour that change widget size/position when parent widget changes (or whole application window for root widgets).
For example Right Top align means that when Parent resized widgets with Right Top align keep their distances to Right Top corner constant.
Try to do next thing: create resizeable window (WindowCSX) and several child widgets with different aligns and see what happens when you resize that Window.

So what you're saying is if we want to have some widget always in the bottom right corner we have to code this ourself since your interpretation of align is completely misleading not what we want? That should be part of a gui system, not of the program code of the application.

You shout simply put such widget in right bottom corner, set Right Bottom align and your widget will be always there.

Hi Altren,

It doesn't seem to be working as you describe. Perhaps a bug in 3.0.1?

Here is the layout file for my Main menu
<?xml version="1.0" encoding="UTF-8"?>
<MyGUI type="Layout">
<Widget type="StaticImage" skin="StaticImage" position="0 296 1000 750" align="Left Bottom" layer="Middle" name="backgroundTexture">
<Property key="Image_Texture" value="racingbackdrop.png"/>
<Widget type="Button" skin="ButtonPracticeHost" position="144 364 430 60">
<Property key="Button_ImageResource" value="startracing.png"/>
<Property key="Button_ModeImage" value="true"/>
<Property key="Button_Pressed" value="false"/>
</Widget>
<Widget type="Button" skin="ButtonJoinRace" position="144 449 135 55">
<Property key="Button_ModeImage" value="true"/>
</Widget>
<Widget type="Button" skin="ButtonOptions" position="144 539 235 55" name="options"/>
<Widget type="Button" skin="ButtonExit" position="144 629 125 55" name="exit"/>
</Widget>
<Widget type="Widget" skin="PanelEmpty" position="1000 540 200 500" align="Right Bottom" layer="Main" name="otherButtons">
<Widget type="Button" skin="ButtonChangePlayer" position="55 0 93 92" name="changePlayer"/>
<Widget type="Button" skin="ButtonStats" position="55 130 93 92" name="stats"/>
<Widget type="Button" skin="ButtonTopup" position="55 260 93 92" name="topUp"/>
<Widget type="Button" skin="ButtonWWW" position="55 390 93 92" name="www"/>
</Widget>
</MyGUI>


If I load this using loadLayout (with a parent Widget), it seems to ignore the Align property and use the absolute positions producing something like this: - http://tweetphoto.com/23036533

If I add some code myself to do the alignment it looks correct: - http://tweetphoto.com/23036629

Here is the code I used for alignment: -
MyGUI::Widget * MyGuiMenuSystem::loadLayout( const string &layoutName, const string &parentName, int width, int height )
{
Widget *parent = _gui->createWidget<Widget>("DarkBackground",0,0,width,height,Align::Default, "Main", parentName);
VectorWidgetPtr widgetsVec = MyGUI::LayoutManager::getInstance().loadLayout(layoutName, layoutName, parent);
parent->setPosition(0,0);
parent->setSize(width,height);
parent->hide();

VectorWidgetPtr::iterator it = widgetsVec.begin();
while (it != widgetsVec.end())
{
Widget *widget = (*it);
Logger::LOGD("Widget Name %s Layer %s", widget->getName().c_str(), widget->getLayerName().c_str());


if (widget->getAlign().isStretch()){
widget->setRealSize(1,1);
widget->setPosition(0,0);

Logger::LOGD("Stretch");
}
if (widget->getAlign().isCenter()){
widget->setPosition(
(width - widget->getWidth())/2,
(height - widget->getHeight())/2);

Logger::LOGD("Centre %d %d", widget->getPosition().left, widget->getPosition().top);
}
if (widget->getAlign().isLeft()){
widget->setPosition(0, widget->getPosition().top);
Logger::LOGD("Left %d %d", widget->getPosition().left, widget->getPosition().top);
}

if (widget->getAlign().isRight()){
widget->setPosition(width - widget->getWidth(), widget->getPosition().top);
Logger::LOGD("Right %d %d", widget->getPosition().left, widget->getPosition().top);
}

if (widget->getAlign().isBottom()){
widget->setPosition(widget->getPosition().left,height - widget->getHeight());
Logger::LOGD("Bottom %d %d", widget->getPosition().left, widget->getPosition().top);
}

it++;
}

return parent;
}

Have I made a mistake somewhere or is there a problem with 3.0.1

Thanks for your help
All the best,
Ash

Align never moves your widget at load time. It moves widget only when parent resized. What you doing in your code is ok, but here's simple example that can't be done easy: let's say you need widget that have Right align, but should be 10 pixels away from right side.
We are working on more complex positions politic, but it's nor really simple to do and it's still WIP.

To make align work in way you described you should do next thing: create root widgets with widgets that have proper align and properly placed related to that root widget and then, when you loading that widget change it's size to 0,0,1,1 like you done in Stretch case.

I've had similar problems. The idea of creating a master widget that stretches to the whole screen is good. Seems like the same functionality could be implemented in a MyGUI function without actually needing the master widget. It could be called after loading a loadout for people who wanted it, so they'd just call loadLayout() and then forceGlobalAlignment().

As for me, I got around it a similar way: an invisible panel housing most of my widgets that I manually position based on the screen size.

We use BaseLayout wrapper for that. And it have SnapTo property, that Stretch/Move widget according to it's alignment.