Results 1 to 17 of 17

Thread: help on QSGGeometry

  1. #1
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default help on QSGGeometry

    Hi,

    I would like to know some advise on creating a custom geometry using scene graph.
    My problem is I don't know how to fill the custom geometry with color.
    And how to add text on geometry node without using QPainter, is it possible?

    Below is my code:

    Qt Code:
    1. QSGNode *TabBar::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *)
    2. {
    3. QSGNode *root = static_cast<QSGNode *>(oldNode);
    4. if(!root) root = new QSGNode;
    5. root->removeAllChildNodes();
    6.  
    7. QSGGeometry *geometry;
    8.  
    9. geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 6);
    10. geometry->setDrawingMode(GL_TRIANGLE_FAN);
    11. geometry->vertexDataAsPoint2D()[0].set(20, 40);
    12. geometry->vertexDataAsPoint2D()[1].set(0, 0);
    13. geometry->vertexDataAsPoint2D()[2].set(100, 0);
    14. geometry->vertexDataAsPoint2D()[3].set(120, 40);
    15. geometry->vertexDataAsPoint2D()[4].set(100, 80);
    16. geometry->vertexDataAsPoint2D()[5].set(0, 80);
    17. node = drawPolygon(geometry, Qt::red);
    18. root->appendChildNode(node);
    19. }
    20. QSGNode *TabBar::drawPolygon(QSGGeometry *geometry, const QColor &color)
    21. {
    22. QSGFlatColorMaterial *material = new QSGFlatColorMaterial;
    23. material->setColor(color);
    24.  
    25. QSGGeometryNode *node = new QSGGeometryNode;
    26. node->setGeometry(geometry);
    27. node->setFlag(QSGNode::OwnsGeometry);
    28. node->setMaterial(material);
    29. node->setFlag(QSGNode::OwnsMaterial);
    30. return node;
    31. }
    To copy to clipboard, switch view to plain text mode 

    Update:
    I managed to fill the geometry using GL_TRIANGLE_FAN drawingMode and by modifying the vertices which will start on the vertex which will create a triangle without intersecting each other.

    The problem now is how to draw a text on the geometry.

    Please advise. TIA.
    Last edited by joko; 2nd April 2015 at 17:35.

  2. #2
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: help on QSGGeometry

    update:

    Found this thread that there is no available text/glyph node yet for text rendering on the scene graph node.

    http://comments.gmane.org/gmane.comp.lib.qt.user/13735

    It was suggested (but not ideal) to draw text using QPainter on QImage and show on texture.
    Any advise how to convert the image into texture? I can't find any example. Thanks.

  3. #3
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: help on QSGGeometry

    Quote Originally Posted by joko View Post
    My problem is I don't know how to fill the custom geometry with color.
    All OpenGL rules apply. If you construct geometry made of polygons, these polygons are filled with the current material.

    And how to add text on geometry node without using QPainter, is it possible?
    Yes, but I don't see why you couldn't simply compose your item from your custom geometry and a regular Text item.

    Removing child nodes is wrong. You should update existing nodes if possible instead of recreating everything from scratch.

    Basically I think you are doing something terribly wrong here. Why are you trying to implement this custom item?
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  4. #4
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,230
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: help on QSGGeometry

    QSGNode *root = static_cast<QSGNode *>(oldNode);
    And this makes no sense either. "oldNode" is already a QSGNode pointer, so what is the point of the static cast? Aside from that, this code won't compile anyway, because updatePaintNode() needs a return value.

  5. #5
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: help on QSGGeometry

    Quote Originally Posted by wysota View Post
    All OpenGL rules apply. If you construct geometry made of polygons, these polygons are filled with the current material.


    Yes, but I don't see why you couldn't simply compose your item from your custom geometry and a regular Text item.

    Removing child nodes is wrong. You should update existing nodes if possible instead of recreating everything from scratch.

    Basically I think you are doing something terribly wrong here. Why are you trying to implement this custom item?
    Thank you for your reply wysota.

    The previous code posted was just my test as i am trying to create a polygon using qsggeometry.

    Here is my code:

    Qt Code:
    1. QSGNode *TabBar::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *)
    2. {
    3. QSGNode *root = static_cast<QSGNode *>(oldNode);
    4. if(!root) root = new QSGNode;
    5. root->removeAllChildNodes();
    6.  
    7. int pos = 0;
    8. int missingWidth = missingWidth_;
    9.  
    10. int s = 0;
    11. if (missingWidth > 0 && current_ > s)
    12. {
    13. missingWidth += dotsWidth_;
    14. for (; s < current_; ++s)
    15. {
    16. missingWidth -= labelsWidth_[labels_[s]] + (s == 0 ? 0 : border_);
    17. if (missingWidth <= 0)
    18. {
    19. ++s;
    20. break;
    21. }
    22. }
    23. }
    24.  
    25. int e = labels_.size() - 1; // this will be the last element to be drawn normally
    26. if (missingWidth > 0 && current_ < e)
    27. {
    28. missingWidth += dotsWidth_;
    29. for (; e > current_; --e)
    30. {
    31. missingWidth -= labelsWidth_[labels_[e]] + border_;
    32. if (missingWidth <= 0)
    33. {
    34. --e;
    35. break;
    36. }
    37. }
    38. }
    39.  
    40. int additionalWidthPerLabel = (additionalWidth_ + abs(missingWidth)) / (e - s + 1);
    41.  
    42. int height = TabBar::height();
    43.  
    44. int width;
    45. bool active;
    46. LabelPosition position;
    47.  
    48. if (s != 0)
    49. {
    50. paintBox(root, pos, "...", QSizeF(dotsWidth_, height), true, FirstLabel);
    51.  
    52. pos += dotsWidth_ + border_;
    53. }
    54. for (int i = s; i <= e; i++)
    55. {
    56. width = labelsWidth_[labels_[i]] + additionalWidthPerLabel;
    57. active = (i <= current_);
    58. position = (i == 0 ? FirstLabel : (i == (labels_.size() - 1) ? LastLabel : MiddleLabel) );
    59.  
    60. paintBox(root, pos, labels_[i], QSizeF(width, height), active, position);
    61.  
    62. pos += width + border_;
    63. }
    64. if (e != (labels_.size() - 1) )
    65. {
    66. paintBox(root, pos, "...", QSizeF(dotsWidth_, height), false, LastLabel);
    67. }
    68.  
    69. return root;
    70. }
    71.  
    72. void TabBar::paintBox(QSGNode *root, qreal pos, const QString &text, const QSizeF &size, bool active, LabelPosition labelPosition)
    73. {
    74.  
    75. qreal width = size.width();
    76. qreal height = size.height();
    77.  
    78. int arrow = height / 2;
    79.  
    80. QColor backgroundColor = active ? activeBg_ : inactiveBg_;
    81. QColor textColor = active ? activeFg_ : inactiveFg_;
    82.  
    83. QSGNode *node;
    84. QSGGeometry *geometry;
    85.  
    86. switch (labelPosition)
    87. {
    88. case FirstLabel:
    89. geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 5);
    90. geometry->setDrawingMode(GL_TRIANGLE_FAN);
    91. geometry->vertexDataAsPoint2D()[0].set(pos, 0);
    92. geometry->vertexDataAsPoint2D()[1].set(pos + width, 0);
    93. geometry->vertexDataAsPoint2D()[2].set(pos + arrow + width, height/2);
    94. geometry->vertexDataAsPoint2D()[3].set(pos + width, height);
    95. geometry->vertexDataAsPoint2D()[4].set(pos, height);
    96. break;
    97.  
    98. case LastLabel:
    99. geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 5);
    100. geometry->setDrawingMode(GL_TRIANGLE_FAN);
    101. geometry->vertexDataAsPoint2D()[0].set(pos + arrow, height/2);
    102. geometry->vertexDataAsPoint2D()[1].set(pos, 0);
    103. geometry->vertexDataAsPoint2D()[2].set(pos + width, 0);
    104. geometry->vertexDataAsPoint2D()[3].set(pos + width, height);
    105. geometry->vertexDataAsPoint2D()[4].set(pos, height);
    106. break;
    107.  
    108. default:
    109. geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 6);
    110. geometry->setDrawingMode(GL_TRIANGLE_FAN);
    111. geometry->vertexDataAsPoint2D()[0].set(pos + arrow, height/2);
    112. geometry->vertexDataAsPoint2D()[1].set(pos, 0);
    113. geometry->vertexDataAsPoint2D()[2].set(pos + width, 0);
    114. geometry->vertexDataAsPoint2D()[3].set(pos + arrow + width, height/2);
    115. geometry->vertexDataAsPoint2D()[4].set(pos + width, height);
    116. geometry->vertexDataAsPoint2D()[5].set(pos, height);
    117. break;
    118. }
    119.  
    120. node = drawPolygon(geometry, backgroundColor);
    121. root->appendChildNode(node);
    122. }
    123.  
    124. QSGNode *TabBar::drawPolygon(QSGGeometry *geometry, const QColor &color)
    125. {
    126. QSGFlatColorMaterial *material = new QSGFlatColorMaterial;
    127. material->setColor(color);
    128.  
    129. QSGGeometryNode *node = new QSGGeometryNode;
    130. node->setGeometry(geometry);
    131. node->setFlag(QSGNode::OwnsGeometry);
    132. node->setMaterial(material);
    133. node->setFlag(QSGNode::OwnsMaterial);
    134. return node;
    135. }
    To copy to clipboard, switch view to plain text mode 

    The reason I removed all the child nodes because it will overlapped the bar once updated.

    I need to put the text at the center of each polygon. Please advise. TIA.
    Last edited by joko; 10th April 2015 at 13:01.

  6. #6
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: help on QSGGeometry

    I found this option to render text using QML text which would be implemented using updatePolish() function.
    This code actually don't work.

    Qt Code:
    1. QQuickItem *root = view.rootObject();
    2.  
    3. QmlEngine *engine = qmlEngine(this);
    4. QQmlComponent component(engine);
    5. QString str = "Text { text:" + text + "}";
    6. QByteArray data(str);
    7. component.setData(data, QUrl());
    8.  
    9. QQuickItem* item = qobject_cast<QQuickItem*>(component.create());
    10. item->setParentItem(root);
    To copy to clipboard, switch view to plain text mode 

    My question is how to render it into my custom geometry.
    I can't find any example around.
    Please advise. Thanks.
    Last edited by joko; 10th April 2015 at 17:33.

  7. #7
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: help on QSGGeometry

    Don't make your own text item. Render the text by centering a Text item over your custom item in QML.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  8. #8
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: help on QSGGeometry

    Quote Originally Posted by wysota View Post
    Don't make your own text item. Render the text by centering a Text item over your custom item in QML.
    You mean i don't need to create a new qmlcomponent for Text element? And render the text in qml file?

    If i understood you correctly on the second statement, I think that is not possible because the size of each custom geometry node depends on the length of the text.
    That is why I have to render it along with the nodes.

  9. #9
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: help on QSGGeometry

    Quote Originally Posted by joko View Post
    If i understood you correctly on the second statement, I think that is not possible
    Of course it is possible.

    because the size of each custom geometry node depends on the length of the text.
    That is why I have to render it along with the nodes.
    Text item knows its size so make your custom tab dependent on that size.

    javascript Code:
    1. MyCustomItem {
    2. width: txt.width+20
    3. height: txt.height+10
    4. Text { id: txt; anchors.centerIn: parent; text: "BBB" }
    5. }
    To copy to clipboard, switch view to plain text mode 
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  10. #10
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: help on QSGGeometry

    Quote Originally Posted by wysota View Post
    Of course it is possible.

    Text item knows its size so make your custom tab dependent on that size.
    My custom TabBar is a QSGNode with some QSGGeometryNodes as child.
    The text should be rendered in each geometry nodes.

    Here's the sample.

    tab.png

  11. #11
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: help on QSGGeometry

    And what exactly is the problem? You are making things more complicated than they really are.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  12. #12
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: help on QSGGeometry

    Quote Originally Posted by wysota View Post
    And what exactly is the problem? You are making things more complicated than they really are.
    I just want to render the text after creating the geometry in paintBox function (from the previous code posted).

  13. #13
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: help on QSGGeometry

    Excuse my crude implementation of BarItem (no borders and no AA).

    javascript Code:
    1. //BarItem.qml
    2. import QtQuick 2.0
    3.  
    4. ShaderEffect {
    5. id: root
    6. property color color
    7. property bool first: false
    8. mesh: GridMesh { resolution: Qt.size(1, 2) }
    9.  
    10. vertexShader: "
    11. uniform highp mat4 qt_Matrix;
    12. attribute highp vec4 qt_Vertex;
    13. attribute highp vec2 qt_MultiTexCoord0;
    14. varying highp vec2 qt_TexCoord0;
    15. uniform highp float height;
    16. uniform lowp vec4 color;
    17. uniform bool first;
    18.  
    19. void main() {
    20. highp vec4 pos = qt_Vertex;
    21. if((!first || pos.x > 0.0) && ((pos.y > 0.0) && (pos.y < height))) pos.x = pos.x+0.5*height;
    22. gl_Position = qt_Matrix * pos;
    23. qt_TexCoord0 = qt_MultiTexCoord0;
    24. }
    25. "
    26. fragmentShader: "
    27. uniform lowp vec4 color;
    28. varying highp vec2 qt_TexCoord0;
    29. void main() {
    30. gl_FragColor = color;
    31. }
    32. "
    33. }
    To copy to clipboard, switch view to plain text mode 

    javascript Code:
    1. import QtQuick 2.0
    2.  
    3. Item {
    4. width: 1200
    5. height: 300
    6.  
    7. Row {
    8. anchors.centerIn: parent
    9. Repeater {
    10. model: [ "blue", "red", "yellow", "orange", "purple" ]
    11. BarItem {
    12. color: modelData
    13. width: 200
    14. height: 50
    15. first: index == 0
    16. Text {
    17. anchors.centerIn: parent
    18. text: modelData
    19. }
    20. }
    21. }
    22. }
    23. }
    To copy to clipboard, switch view to plain text mode 

    Attached Images Attached Images
    Last edited by wysota; 13th April 2015 at 15:19.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  14. #14
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: help on QSGGeometry

    Quote Originally Posted by wysota View Post
    Excuse my crude implementation of BarItem (no borders and no AA).
    Thanks wysota. I tried understanding the GLSL, but it seems complicated to me.

    I decided to just create an arrow class that would be displayed using repeater and render text using Text QML type.

    The arrow's color changes once active and if not all elements will fit on the row, an arrow with dotted text will be added either at the last (there were missing elements) or at first (there were prior elements missing). The arrow's width depends on the length of the text.

    I'm having problem how to determining the total width of all elements and comparing it into the row width. Because from there I can determine the remaining width available for dotted element. And modify the model elements if needs to add a dotted element and drop the remaining elements. Then once the current active index increments, remove the dotted element and replace it with the previous missing element, the same thing on the first element, hide it and replace with dotted element. After establishing the model, repeater will then start rendering its delegate items.

    Am I making any sense? Is this even possible?

    Please advise another option how to possibly implement such. TIA.

    ps: this has been implemented already using QQuickPaintedItem, however due to a bug on iOS (blurred render), i'm trying to implement it using QQuickItem with Text QML element.
    Last edited by joko; 21st April 2015 at 18:20.

  15. #15
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: help on QSGGeometry

    Quote Originally Posted by joko View Post
    Thanks wysota. I tried understanding the GLSL, but it seems complicated to me.
    Never mind GLSL, it was just to quickly obtain something similar to what you had.

    I decided to just create an arrow class that would be displayed using repeater and render text using Text QML type.
    Great

    The arrow's color changes once active and if not all elements will fit on the row, an arrow with dotted text will be added either at the last (there were missing elements) or at first (there were prior elements missing). The arrow's width depends on the length of the text.

    I'm having problem how to determining the total width of all elements and comparing it into the row width. Because from there I can determine the remaining width available for dotted element. And modify the model elements if needs to add a dotted element and drop the remaining elements.
    I would not modify the model.

    Then once the current active index increments, remove the dotted element and replace it with the previous missing element, the same thing on the first element, hide it and replace with dotted element. After establishing the model, repeater will then start rendering its delegate items.

    Am I making any sense? Is this even possible?
    It is possible but I see no reason to modify your data model.

    Please advise another option how to possibly implement such. TIA.
    Element width is determined by the view (by size of the font and text to be drawn). Thus everything needs to be implemented in the view. The simplest approach I can think of is to put all items in an item to form a row, then put that row into another item with clipping enabled and size forced to the desired size of the bar so that only those arrows which fit into the viewport are visible. Then overlay the dotted arrow on top of that to cover the leftmost or rightmost visible element, depending on your needs.

    Another approach would be to put all items in a row and based on the "active" element depend which items should be visible and simply make all other hidden. Finally the dotted arrow should be positioned where it is needed.

    Of course all that should be done in a declarative way
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  16. #16
    Join Date
    Oct 2014
    Posts
    104
    Thanks
    16
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: help on QSGGeometry

    Quote Originally Posted by wysota View Post
    Of course all that should be done in a declarative way
    Hi wysota,

    Please bear with me for I have some additional questions.

    Here's my current code:

    Qt Code:
    1. // WizardBar.cpp code snippet
    2. QSGNode *WizardBar::updatePaintNode(QSGNode *oldNode, UpdatePaintNodeData *)
    3. {
    4. QSGNode *root = static_cast<QSGNode *>(oldNode);
    5. if(!root) root = new QSGNode;
    6.  
    7. QSGGeometry *geometry;
    8.  
    9. int height = WizardBar::height();
    10. int width = WizardBar::width();
    11.  
    12. int arrow = height / 2;
    13.  
    14. int pos = 0;
    15.  
    16. QColor backgroundColor = active_ ? activeBg_ : inactiveBg_;
    17.  
    18. switch (position_)
    19. {
    20. case FirstLabel:
    21. geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 5);
    22. geometry->setDrawingMode(GL_TRIANGLE_FAN);
    23. geometry->vertexDataAsPoint2D()[0].set(pos, 0);
    24. geometry->vertexDataAsPoint2D()[1].set(pos + width, 0);
    25. geometry->vertexDataAsPoint2D()[2].set(pos + arrow + width, arrow);
    26. geometry->vertexDataAsPoint2D()[3].set(pos + width, height);
    27. geometry->vertexDataAsPoint2D()[4].set(pos, height);
    28. break;
    29.  
    30. case LastLabel:
    31. geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 5);
    32. geometry->setDrawingMode(GL_TRIANGLE_FAN);
    33. geometry->vertexDataAsPoint2D()[0].set(pos + arrow, arrow);
    34. geometry->vertexDataAsPoint2D()[1].set(pos, 0);
    35. geometry->vertexDataAsPoint2D()[2].set(pos + width, 0);
    36. geometry->vertexDataAsPoint2D()[3].set(pos + width, height);
    37. geometry->vertexDataAsPoint2D()[4].set(pos, height);
    38. break;
    39.  
    40. default:
    41. geometry = new QSGGeometry(QSGGeometry::defaultAttributes_Point2D(), 6);
    42. geometry->setDrawingMode(GL_TRIANGLE_FAN);
    43. geometry->vertexDataAsPoint2D()[0].set(pos + arrow, arrow);
    44. geometry->vertexDataAsPoint2D()[1].set(pos, 0);
    45. geometry->vertexDataAsPoint2D()[2].set(pos + width, 0);
    46. geometry->vertexDataAsPoint2D()[3].set(pos + arrow + width, arrow);
    47. geometry->vertexDataAsPoint2D()[4].set(pos + width, height);
    48. geometry->vertexDataAsPoint2D()[5].set(pos, height);
    49. break;
    50. }
    51.  
    52. root->appendChildNode(drawPolygon(geometry, backgroundColor));
    53.  
    54. return root;
    55. }
    56.  
    57. QSGNode *WizardBar::drawPolygon(QSGGeometry *geometry, const QColor &color)
    58. {
    59. QSGFlatColorMaterial *material = new QSGFlatColorMaterial;
    60. material->setColor(color);
    61.  
    62. QSGGeometryNode *node = new QSGGeometryNode;
    63. node->setGeometry(geometry);
    64. node->setFlag(QSGNode::OwnsGeometry);
    65. node->setMaterial(material);
    66. node->setFlag(QSGNode::OwnsMaterial);
    67. return node;
    68. }
    To copy to clipboard, switch view to plain text mode 


    Qt Code:
    1. // qml page
    2. Item {
    3. id: container
    4.  
    5. property int conWidth: StaticData.screenWidth - header.anchors.leftMargin*2; // i can't get the implicit width of anchored items
    6. property int missingWidth: 0
    7. property int extraWidth: 0
    8.  
    9. function getWidth(rowWidth) {
    10. if (rowWidth <= conWidth) {
    11. missingWidth = 0;
    12. extraWidth = conWidth - rowWidth;
    13. } else {
    14. extraWidth = 0;
    15. missingWidth = rowWidth - conWidth
    16. }
    17. }
    18.  
    19. anchors {
    20. right: parent.right
    21. left: parent.left
    22. bottom: parent.bottom
    23. }
    24. clip: true
    25. height: 60
    26.  
    27. Row {
    28. id: barRow
    29.  
    30. property int rowWidth
    31. property int curIdx
    32.  
    33. spacing: 1
    34.  
    35. ListModel {
    36. id: barModel
    37.  
    38. ListElement {
    39. label: qsTr("Protocol")
    40. group: "protocols"
    41. }
    42. ListElement {
    43. label: qsTr("Host")
    44. group: "host"
    45. }
    46. ListElement {
    47. label: qsTr("Login")
    48. group: "login"
    49. }
    50. ListElement {
    51. label: qsTr("Proxy")
    52. group: "proxy"
    53. }
    54. ListElement {
    55. label: qsTr("Save")
    56. group: "save"
    57. }
    58. }
    59.  
    60. Component.onCompleted: {
    61. container.getWidth(rowWidth);
    62.  
    63. if (container.extraWidth > 0) {
    64. var addtlWidth = Math.floor(container.extraWidth/barModel.count)
    65. for (var i = 0; i <= barModel.count - 1; i++) {
    66. barRepeater.itemAt(i).width += addtlWidth ;
    67. }
    68. }
    69. }
    70.  
    71. Repeater {
    72. id: barRepeater
    73.  
    74. model: barModel
    75.  
    76. onItemAdded: {
    77. barRow.rowWidth += item.width;
    78. }
    79.  
    80. WizardBar {
    81. id: wizardBar
    82.  
    83. property bool mid: index != 0
    84. property bool curGroup: model.group === newConnPagesModel.curGroup // to synch with the wizard pages
    85.  
    86. onCurGroupChanged: {
    87. if (curGroup) barRow.curIdx = index;
    88. }
    89.  
    90. height: 60
    91. width: label.paintedWidth + 10
    92.  
    93. active: index <= barRow.curIdx
    94. position: index === 0 ? WizardBar.FirstLabel : ((index === (barModel.count - 1)) ? WizardBar.LastLabel : WizardBar.MiddleLabel) // labels are enum in class which indicates the shape of the arrow to be drawn
    95.  
    96. Item { // created as text container so that the arrow part will be excluded
    97. id: labelItem
    98.  
    99. x: index != 0 ? parent.height/2 : 0
    100. width: index != 0 ? parent.width - parent.height/2 : parent.width
    101. height: parent.height
    102.  
    103. Text
    104. {
    105. id: label
    106. anchors.centerIn: parent
    107.  
    108. color: wizardBar.active ? Colors.text.title.normal : Colors.text.title.disabled
    109. font { pixelSize: Fonts.fontSize; family: Fonts.fontFamily }
    110.  
    111. text: model.label
    112. }
    113. }
    114. }
    115. }
    116. }
    117. }
    To copy to clipboard, switch view to plain text mode 

    Questions:
    1. I connected the widthChanged() signal into update(). The label font pixelSize, scales based on screen diagonal width. However, seems like it is not updating when label.paintedWidth and screen orientation changes.
    2. Is there a way to clear or delete previous render or force to clear all the delegate items of the repeater because they're not being cleared. I mean, I can still see the original render when I tried increasing the window size.
    3. I'm still having a hard time figuring out how to move the model elements upon navigation and placing the dotted arrow if there is a missing element either on left or right or both. Can you give more tips please.
    4. I tried putting a permanent dotted arrows on both sides of the main Item and control its visibility on missingWidth and adjust the width of those visible elements, however I still can get it to work, which goes back also to #3 problem in moving the elements. Is this even possible? Any tips?

    Thank you!
    Last edited by joko; 27th April 2015 at 19:17.

  17. #17
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,359
    Thanks
    3
    Thanked 5,015 Times in 4,792 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: help on QSGGeometry

    Quote Originally Posted by joko View Post
    Questions:
    1. I connected the widthChanged() signal into update(). The label font pixelSize, scales based on screen diagonal width. However, seems like it is not updating when label.paintedWidth and screen orientation changes.
    The diagonal length doesn't change when orientation changes. You should base your font on height value.

    2. Is there a way to clear or delete previous render or force to clear all the delegate items of the repeater because they're not being cleared. I mean, I can still see the original render when I tried increasing the window size.
    Repeater will recreate its items when the model is changed. However it seems to me you should just update your items in the situation you are describing.

    3. I'm still having a hard time figuring out how to move the model elements upon navigation and placing the dotted arrow if there is a missing element either on left or right or both. Can you give more tips please.
    I would have to sit down and try it myself. I don't know your exact use case, maybe your current approach doesn't fit it that well.

    4. I tried putting a permanent dotted arrows on both sides of the main Item and control its visibility on missingWidth and adjust the width of those visible elements, however I still can get it to work, which goes back also to #3 problem in moving the elements. Is this even possible? Any tips?
    What is it that you can't get to work? Hiding items?
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  18. The following user says thank you to wysota for this useful post:

    joko (5th May 2015)

Similar Threads

  1. Need help with two questions please
    By phantom2323 in forum Qt Programming
    Replies: 1
    Last Post: 5th March 2012, 12:33
  2. Qt like VS add-in questions
    By GreenScape in forum General Programming
    Replies: 0
    Last Post: 4th August 2010, 10:28
  3. Sql questions
    By Nb2Qt in forum Qt Programming
    Replies: 4
    Last Post: 15th February 2007, 23:53

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.