tgui issues

Started by billarhos, 07 January 2016, 12:00:55



here is some misbehaves and a future request.

-1-.Caret vanished on edit boxes with right alignment if has width value "1" or "2"

-2-.Caret is smaller on edit boxes with right alignment if has value 3 or more than the edit boxes with center or left alignment.

-3-. Conclusion of -1- and -2-.  Carret can be seen if has 3 width value or more and the visible width is (width - 2)

-4-. CaretWidth of edit boxes is missing from properties (reading value form txt)

-5-. Need the feature of alignment of text in labels.
      Example: if There is an explanation label over an edit box there is no way to align proper this label on conjuction with edit box.
      The problem grows if the text of the label is changing dynamically (ex. change language). This problem is solving by dynamically recalculate width and position of label.
      Can provide photos if necessary.   


1-4 shouldn't be that hard to solve. I'll look into them when I have some time.
The 5th one requires me to render each lines seperately in label because the entire text is currently drawn with a single sf::Text object. But my word wrap algorithm can remain the same, so this won't be that much work.

I am assuming that the label has a fixed width. If you are auto-sizing (size of label determined by the text in it which is what you have when you don't call setSize), then alignment makes no sense in my code because the entire width is always filled. It is however easily solved in your code in this situation with layouts. If you want to align a single line of text to the right then you can use the following code (I'm also positioning the label direct above the edit box with 2 pixels in between).
Code (cpp) Select
label->setPosition(tgui::bindRight(editBox) - tgui::bindWidth(label), tgui::bindTop(editBox) - tgui::bindHeight(label) - 2);


thanks texus

In my case, i want to center the text label over an edit box. The text changing when language is changing, so it hasn't fixed
numbers of letters. (see attached photo). So, i count the width of label and set its potision to (editBox.xpos + editBox.width/2 - label.wdth/2)
to workaround.


This can be done with layouts like this:
Code (cpp) Select
label->setPosition(tgui::bindLeft(editBox) + (tgui::bindWidth(editBox) - tgui::bindWidth(label)) / 2.f, top);

The bind functions will cause the expression to be recalculating when the value they contain changes. So if you change the x position of the edit box or the width of the edit box or label then the layout system will automatically call label->setPosition with the new value. So changing the text of the label will cause it to be repositioned like you want.


great workaround texus thanks.

I attached a jpg where u can see another scenario of using labels. Here i use editboxes instead. Labels with frames that the text inside can
align all cases is used often by me.
Those edit boxes are disable and are not mean to be edit by user.


When replacing the edit boxes by labels in that scenario you have fixed-size labels (with size of current edit box) which indeed require the alignment to be inside the label class itself.
All 5 points in your original post will be fixed/added somewhere this month, but since I have exams until the 21st it is hard to say if it will be done during the next few days or by the end of the month.


Please texus take your time..
I have no complaints at all.

Here is some pictures of one out of three applications (one project) that u can see much clearly some details.


I always take my time, it's not like I'm going to skip studying. But when I work on tgui small tasks are given priority, so whenever some small changes like these are requested they will always be done soon. If you would ask something like this during the holidays then it is probably finished on the same day.

The project indeed seems to make heavy use of tgui.


I looked into the caret issue and it isn't as simple as I hoped.

Number 4 was not really an oversight, the CaretWidth was deliberately missing because it was a property of the editbox itself and not of the renderer. But when thinking about it, it makes sense to put it in the renderer. So in the latest version you can use that propery. This however means that the editBox->setCaretWidth(x) will become deprecated and will eventually be removed so that you would have to call editBox->getRenderer()->setCaretWidth(x) instead.

The conclusion from number 3 was unfortunately wrong. Just try to set the caret width to a rediculous high value like 20 or even higher and you will immediately see what the problem is: the text is placed against the right side of the editbox (minus the reserved padding space), there is no more space for the right half of the caret. I also can't disable the clipping for the caret because if it is too width then part of it could be be drawn outside of the edit box. Maybe the text of the caret should still be placed one or two extra pixels to the left to be absolutely correct but I will look into that when rewriting the renderers.


Alignment has been added to the label class.
Code (cpp) Select



Hi Texus.

I think now tgui is almost perfect (in my opinion).
Almost, because it is one more thing that is annoying. Label now can center its text. However, it is not aligned to vertical axis, just as editbox behaves out of the box.
Yes, i managed to make it look just like i wanted by adding little code :

"pLabel->getRenderer()->setPadding(0, Settings::handler()->layoutRevHeight(22.0f).getValue(), 0, 0);"

but i thing it would be better to do it itself.

There is a photo demonstrating this behavior.

Thanks again.


Vertical alignment was already on the todo list, I'll have a look whether it can be implemented easily or not.

Do you think it would be better to have setHorizontalAlignment and setVerticalAlignment functions each with their own enum (left, center, right) and (top, center, bottom) or would it be better to have one setAlignment function that takes an enum like the one in Grid?


Well it is difficult to answer this question because in my drive in programming all these years, i have seen both implementations. I would prefer this one just like grid...



Since I saw your post before the edit I ended up implementing separate functions. Although I would have actually chosen the one from Grid myself too since it saves one line of code when you want to set both alignments, it doesn't really matter that much.
So the code to center your label is now this:
Code (cpp) Select