[SOLVED] Space to other elements

[lars.saalbach]

Hello all,

 

i'm working on a settingsscreen but have some "problems", my problem:

 

I got a label, under this i got a WidgetSlider, but now i want to have a space between my label and my WidgetSlider, but as i looked between the functions i just found "SpaceY", the problem is here, that i space to the _TOP_ and the _BOT_ but i just want to space to the _BOT_ because else I detroy my layout.

 

Are there any points to do?

 

PS: I don't want to use the "setScreen X Y" Methode, because i want to do it as easy as possible...

 

Hope you can help me, maybe it could be a new feature too =)

 

Best regards

lars

[unclebob]

Hi,

 

Could you provide code sample that shows the problem?

[lars.saalbach]

Hey thanks for your reply,

here's a screenshot:

 

<a href='http://postimage.org/' target='_blank'><img src='http://s18.postimage.org/d4t6febat/gui_space.png' border='0' alt="gui space" /></a>

 

Hope this image works ;)

Else here's the link: http://postimage.org/image/d4t6febat/aa4a7383/

 

The code is hard to give because i wrote a wrapper class, but i try it:

settingsVBox = new WidgetVBox(gui,750,0);

 

// Create the main window

gui.addChild ( settingsVBox, GUI_ALIGN_CENTER );

WidgetTabBox mainTabBox;

mainTabBox = new WidgetTabBox(gui,0,0);

mainTabBox.setSpace(20,20);

settingsVBox.addChild(mainTabBox, GUI_ALIGN_LEFT );

 

guiGraphics.addGridBox("globalGridBox",GUI_ALIGN_LEFT,1,3,15,0);

-> 3 = 3 Columns, 15 = space x, 0 = space y

 

guiGraphics.addGridBox("globalGridBox","guiGridBoxContainer",GUI_ALIGN_TOP,2,1,0,0);

In globalGridBox container i add a new gridBoxcontainer with 1 column and 0 space x and 0 space y

 

guiGraphics.addGridBox("guiGridBoxContainer","guiGridBoxTop",GUI_ALIGN_LEFT,3,1,0,0);

in this i add a gridBoxContainer Top with 1 column and 0 space x and 0 space y

 

WidgetSlider tmpSlider;

WidgetLabel tmpLabel;

guiGraphics.addLabel("guiGridBoxTop",GUI_ALIGN_LEFT,"GUI","");

WidgetSpacer tmpGuiSpacer;

tmpGuiSpacer = guiGraphics.addSpacer("guiGridBoxTop",GUI_ALIGN_LEFT,1,"");

tmpGuiSpacer.setWidth(150);

 

guiGraphics.addHBox("guiGridBoxTop","guiUIBackgroundColorColumn1",GUI_ALIGN_LEFT,4,0,10);

here i added an HBox into the gridBoxtop, with space x = 0 space y = 10.

guiGraphics.addLabel("guiUIBackgroundColorColumn1",GUI_ALIGN_LEFT,"UI Background Color","");

and now add the label to my added hBox.

 

add now the label and slider below the label, with no y spacing.

guiGraphics.addHBox("guiGridBoxBot","guiBackGroundRedColorColumn1",GUI_ALIGN_LEFT,4,0,0);

guiGraphics.addLabel("guiBackGroundRedColorColumn1",GUI_ALIGN_LEFT,"R","");

guiGraphics.addHBox("guiGridBoxBot","guiBackGroundRedColorColumn2",GUI_ALIGN_LEFT,4,0,0);

tmpSlider = guiGraphics.addSlider("guiBackGroundRedColorColumn2",GUI_ALIGN_LEFT,0,255,0,"");

tmpLabel = guiGraphics.addLabel("guiBackGroundRedColorColumn2",GUI_ALIGN_EXPAND,"","");

tmpSlider.addAttach(tmpLabel);

 

 

The problem is painted in red into the graphic, i just want to get the space at top but not to the bot.

Hope this helps you, if you need further information just say it, also we could talk in the evening over ts3 if it helps.

 

the addHBox, addLabel, addGridBox functions are just wrapper classes and just add the WidgetElements in the given container which is the first parameter.

After this wrapper class we just do an addChild and so on.

 

Thanks :)

Lars

[unclebob]

Try to set y spacing to your global GridBox instead of setting y spacing to 'guiUIBackgroundColorColumn1' HBox. Also, try to add 'guiUIBackgroundColorColumn1' to 'guiGridBoxBot' instead of 'guiGridBoxTop'.

 

So, you probably get this layout:

 

GlobalGridBox (set y spacing here)

 

| y spacing

 

*TopGridBox (no y spacing)

**Spacer (no y spacing)

 

| y spacing

 

*BottomGridBox (no y spacing)

**'Background Color' label (no y spacing)

**HBox (no y spacing)

***'R' label

***'R' slider

 

| y spacing

[lars.saalbach]

I tryied this solution

and it would work but my problem is, that i inserted a GridBox with 2 Columns, like i explained above.

 

I think this new screenshot will explain the following problem:

http://postimage.org/image/wkkuua207/

 

The thing is, through the 2 Columns i need to do an alonestanding gridbox before my bot GridBox so i got

 

TOP UI BackgroundColor

Bot Backgroundcolor

R

G

B

 

TOP2 Textcolor

Bot2 Textcolor

R

G

B

 

and so on.

 

And with this a nother problem comes, because i cant combine like in excel 2 cells with eachother.

e.g:

|------Combinedcell-----------|

|----1cell----||----2cell----|

 

The next problem is, that there's no dynamic in this solution, i mean u got FontVSpacing in the WidgetClass, but thats can just be used in a "WidgetLabel", this space can be set to the bot of the element but the top is missing.

So would it be possible to include 2 more options to set, spaceTop, spaceBot to each WidgetElement?

With this you could create GUI's much more easier.

 

Hope i explained my "second" or better "combined" problem good enough,

 

thanks for your effort!

Lars

[unclebob]

You can add blank vbox right after your 'UI BackgroundColor' label, so it'll match with GridBox layout. Don't forget to set 'expand' alignment to your label.

[unclebob]

Also, you can use set of hboxes and vboxes instead of gridbox if you want non-uniform grid.

 

For example:

 

|------Combinedcell-----------|

|----1cell----||----2cell----|

 

Can easily be translated onto 'vbox + hbox' solution:

 

<vbox>

<label><text>Combinedcell</text></label>

 

<hbox>

<label><text>cell1</text></label>

<label><text>cell2</text></label>

</hbox>

 

</vbox>

[lars.saalbach]

Hey i tried it with vBox and label but i get this:http://postimage.org/image/mjxiopx25/d8e05b39/

code is, so it looks like it matches, but its wrong combined after

 

guiGraphics.addLabel("guiGridBoxBot",GUI_ALIGN_EXPAND,"UI Background Color","");

guiGraphics.addVBox("guiGridBoxBot","guiUIBackgroundColorColumn2",GUI_ALIGN_EXPAND,4,0,0);

 

If i swap the code so first vBox and then label, it neither works, then the UI Background color just starts at the slider.

 

 

i also tried GUI_ALIGN_LEFT for vBox.

 

I also would be pleased if you give me feedback because of: "So would it be possible to include 2 more options to set, spaceTop, spaceBot to each WidgetElement?" like FontVSpacing, in my opinion it makes sense to include this?

 

Thanks again,

lars

[unclebob]

Actually, we do not plan to add 'setSpaceTop, setSpaceBottom' methods.

 

But I've prepared a test scene for you with proper gui layout. Put it into your data folder and launch ui_layout/ui_layout.bat to start sample.

 

Please look at ui_layout.ui file. Does it solve your problem?

ui_layout.zip

[lars.saalbach]

Hello Unclebob

 

thanks for your test scene code, y it works, but i didn't need to put the GUI_ALIGN_EXPAND, i just needed to add this vBox with height 1.

If i understood it right, then a label is not evaluated at spacing, just vBox and so on?

 

Thanks for your help,

just a little demand to the end: Don't forget about the feature with spacing top / bot, because a vBox is also evaluated in a gridbox as a column an a lable too.

If this feature would be enabled, you could set all widgets to an own spacing, and you don't need to think about "oh on which column i'm at the moment, and what do i need to now, that i'll get a space to the top now".

That woud simplify the work very very very much.

 

Still a nice evening and again thanks for this nice & fast help.

Lars