Grid and sf::Text
« on: 13 February 2015, 17:38:22 »
Hi,

Sorry another question as I struggle to learn sfml and tgui :)

I have a vector of  sf::Text that I want to output, I've got the positions defined for each sf::Text element so that they all align up nicely in 4-5 columns and a series of rows, i.e. as below.

      <col1>   <col2>   <col3>   <col4>
<row1>
<row2>
etc

I want to add a list of radioButtons (or in other menus a list of checkboxs) that line up with each row. I define the xpos, ypos of each widget using the positions defined within the <vector> of the sf::text....however they always seem a little out of alignment.

I wanted to try to use a grid so that all would align up nicely. However from the grid tutorial it said "Grid allows you to automatically position your widgets."

So is there a way for me to insert sf::Text as well as widget elements into a grid?

*

texus

  • *****
  • 1143
    • View Profile
    • Texus's Blog
Re: Grid and sf::Text
« Reply #1 on: 13 February 2015, 17:43:38 »
Quote
So is there a way for me to insert sf::Text as well as widget elements into a grid?
No, only tgui widgets can be added to the grid.

Quote
however they always seem a little out of alignment
I'm not sure if this is what you mean, but in checkboxes there is a space of 1/10th of the checkbox size between the checkbox image and the text that it displays next to it.
If that is not what you meant then could you explain a bit better what you mean with this? (screenshot or piece of code perhaps)

Re: Grid and sf::Text
« Reply #2 on: 13 February 2015, 19:31:57 »
Ok sorry, let me clarify in more detail.

I init a vector string (strVector) with the data that i want to display. Each entry is a row, for example as below (with title) entry within this vector is below.

"Name,Age,Skl,Lyl,Rank"
"Cmdr Name, 24, 5, 5, Governor"

In parallel, I define a vector<int> which has the column width for each column. Example as below. So 160 is the width for the Name, etc.
160, 40, 40, 40, 160

I wrote a function to create a vector<sf::Text> using this vector<string> and vector<int>. I basically splits up each csv delimited row into individual strings. Then using the column width vector<int>, it assigns the x and y pos for each sf::Text. It then returns a vector of sf::Text where the position of each Text is defined so that it's position is a nice column/row output. This is what I had before deciding to add tgui/buttons etc.

vector<sf::Text> drawEngine::setupColsOfText(vector<string> strVector, vector<int> columnWidthSizes, position passed_pos, bool underline)
{
        vector<sf::Text> tmpColsOfText;
        vector<string> splitRow;
        displayDataRow rowData;
        position pos = passed_pos;
        float newRowStartXPos;

        for (int i = 0; i < strVector.size(); i++)
        {
                splitRow = rowData.splitCsvStr(strVector[i]);
                newRowStartXPos = pos.getPosX();
                for (int j = 0; j < splitRow.size(); j++)
                {
                        tmpColsOfText.push_back(setText(splitRow[j], pos.getPosX(), pos.getPosY(), underline));
                        pos.setPosX(pos.getPosX() + columnWidthSizes[j]);

                }

                if (pos.getPosY() < getMaxCurrentViewYPos())
                {
                        pos.setPosX(newRowStartXPos);
                        pos.setPosY(pos.getPosY() + getDataRowSize());
                }
                else
                {
                        pos.setPosX((newRowStartXPos + getColumnWidthTotal(columnWidthSizes) + 20));
                        pos.setPosY(passed_pos.getPosY());
                }

                splitRow.clear();
        }

        return tmpColsOfText;
}
 

Now I want the user to be able to tick a checkbox for each row. So I create a vector of checkbox's. I add a new checkbox for each row of data from the strVector. Note I do not set the text field of each checkbox. The reason is that I want to align each of my columns neatly and the name of each character varies in length. If there is some way to do that though - please let me know. :)

See below an example of the code. Note I've not shown how I init the strVector nor the columnwidth int vector but that is a series of simply push_back.

position dataPos;
dataPos.setPos(50, 20);

vector<sf::Text> colsOfText = setupColsOfText(StrVector, columnWidthSizes, dataPos, true);

vector<tgui::Checkbox::Ptr> CheckboxList;
CheckboxList.push_back(tgui::Checkbox::Ptr(gui));
position initPos, initSize;

int yposIncrementer = 0;

initPos.setPos(colsOfText[0].getPosition().x, colsOfText[0].getPosition().y);
initSize.setPos(20,20);

for (int i = 0; i < CheckboxList.size(); i++)
{
        CheckboxList[i]->load(themeConfFile);
        CheckboxList[i]->setPosition(initPos.getPosX() - 50, (initPos.getPosY() + yposIncrementer));
        CheckboxList[i]->setSize(initSize.getPosX(), initSize.getPosY());      
        yposIncrementer += initSize.getPosY();
}
 

When I do it this way, though - sometimes the checkbox doesn't quite line up on the y position, i.e. sometimes it is a little below the vector of sf::text or higher...depending on the menu. See below. Is there an easier way to do all of this?

« Last Edit: 13 February 2015, 19:33:45 by starkhorn »

*

texus

  • *****
  • 1143
    • View Profile
    • Texus's Blog
Re: Grid and sf::Text
« Reply #3 on: 13 February 2015, 19:53:11 »
I think what you are doing can be done with tgui::Grid if you use tgui::Label instead of sf::Text. But that is of course not possible if you need to do something with the text that the Label class doesn't support. Using a grid will make positioning easier (you just have to say in which row and column, not an exact position), but you will have to play around a bit with the borders that you set around widgets so that the texts don't glue to each other.

For the problem with the checkboxes, my guess is that you don't take the text.getLocalBounds().top into account. If you draw text with sfml then there are always a few empty pixels above the character. This could explain why the checkboxes are placed too high.

So you should try with
initPos.setPos(colsOfText[0].getPosition().x + colsOfText[0].getLocalBounds().top, colsOfText[0].getPosition().y);

Edit: I was hoping that Grid still supported a way to set the row height, but looking at the documentation it seems like it was removed. So you should probably forget about using a Grid if you want each row to have the exact same height.
« Last Edit: 13 February 2015, 19:56:17 by texus »