Results 1 to 6 of 6

Thread: Display Array in popup window / dialog box

  1. #1

    Default Display Array in popup window / dialog box

    I have an array and I need a way to relay this information back to the user. I am creating a GIS application and the results are from a user click on the map and identifying features...

    This is what I get back from the user click....

    [{"objectid":3255,"idcount":"private","userid":"gat e","Surveyed":null,"class":null},{"objectid":3256, "idcount":"public","userid":"parking","Surveyed":" kjkjhkjhkjhkhjkhj","class":"yujjhjhkjh"},{"objecti d":3257,"idcount":"private","userid":"fishing spot","Surveyed":null,"class":null},{"objectid":36 55,"idcount":"public","userid":"parking","Surveyed ":"kjkjhkjhkjhkhjkhj","class":"yujjhjhkjh"}]

    What I am trying to create is a popup/dialog window of some sort that:
    1. Displays only one record at a time.
    2. Have an arrow of some sort at the top that allows the user to flip through the multiple records.


    I am very new to this and looking for suggestions and/or examples. Think I have to convert the array to a ListView or ListModel? Looking for a javascript solution.

    Any thoughts?

  2. #2
    Join Date
    Jul 2008
    Location
    Germany
    Posts
    503
    Thanks
    11
    Thanked 76 Times in 74 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Display Array in popup window / dialog box

    Hi, if you have only these five entries (objectid, idcount, ...), you could simply design a dialog with a few QLabels or QLineEdits to display the content.

    Ginsengelf

  3. #3

    Default Re: Display Array in popup window / dialog box

    SORRY FOR ALL THE CODE....I Don't know how else to explain myself...

    OK I have tried this 2 ways...

    Below you can see that:
    1 . I am grabbing a returned array and braking it up into a variable msgText3 in a For Loop.

    [{"objectid":5,"idcount":"public","userid":"parking ","Surveyed":"boat","class":"777jjj7u"},{"objectid ":2455,"idcount":"private","userid":"fishing spot","Surveyed":null,"class":null}]

    firstexample.png

    2. I am also writing the results to global variables (ex msgvobjectid ) in this FOR loop

    secondexample.jpg



    In the first example above I can take the array and push it to a variable and get that to display in a dialog box that I can scroll through the records.

    In the second example above I shot myself in the foot because I am only setting the variable with the last record that passes through the For loop. So while the Update Window code below has it nicely formatted it only shows me the last record that goes through the FOR loop.



    What I am after is a dialog box of some sort that gives me 1 record at a time and has an arrow or flip that I can flip through all the records...I dont want to scroll.
    I would love to see something like the second example above but have a flickabe screen to filter through the rest of the results...

    Can I send the array to a list model and then use that list model in a popup at allows for flicking through the results?


    Sort of stuck at this point




    // SNIP

    var msgText3 = ""

    for (var i = 0; i < results.length; i++) {
    var result = results[i];
    var count = geoElementsCountFromResult(result);
    var layerName = result.layerContent.name;

    // GO BUILD THE ARRAY
    var returnarray = geoElementsGetElements(result);


    for (var e = 0; e < returnarray.length; e++) {

    var msgText3 = ""
    msgText3 += "\n" + headerText + "\n"
    + "objectid: " + returnarray[e].objectid + "\n"
    + "item: " + returnarray[e].userid + "\n"
    + "pub/priv: " + returnarray[e].idcount + "\n"
    + "comments: " + returnarray[e].Surveyed + "\n"
    + "case num: " + returnarray[e].class + "\n"
    + "--------------------"+ "\n";
    console.log(msgText3);


    msgvobjectid = returnarray[e].objectid;
    msgvidcount = returnarray[e].userid;
    msgvuserid = returnarray[e].idcount;
    msgvSurveyed = returnarray[e].Surveyed;
    msgvclass = returnarray[e].class;

    }

    // add new line character if not the final element in array
    if (i !== results.length)
    msgText3 += "\n";

    }


    // SNIP


    function geoElementsGetElements(identifyLayerResult) {
    // create temp array
    var tempResults = [identifyLayerResult];
    var identifyResult2 = tempResults[index];

    // use Depth First Search approach to handle recursion
    var count = 0;
    var index = 0;

    var vobjectid = "";
    var vidcount = "";
    var vuserid = "";
    var vSurveyed = "";
    var vclass = "";

    var arrayName = [];
    var NewObject = {};

    // DEFINE ARRAY VARIABLES
    var arr = [];

    // create an array to store the features
    var identifiedObjects = [];

    for (var i = 0; i < identifyResult2.geoElements.length; i++){

    var elem = identifyResult2.geoElements[i];
    identifiedObjects.push(elem);

    vobjectid = identifyResult2.geoElements[i].attributes.attributeValue("objectid")
    vidcount = identifyResult2.geoElements[i].attributes.attributeValue("PublicPrivate")
    vuserid = identifyResult2.geoElements[i].attributes.attributeValue("Item")
    vSurveyed = identifyResult2.geoElements[i].attributes.attributeValue("Comments")
    vclass = identifyResult2.geoElements[i].attributes.attributeValue("CaseNum")

    arrayName = [vobjectid, vidcount, vuserid, vSurveyed, vclass]

    // BUILD THE ARRAY
    var obj = {};
    obj['objectid'] = vobjectid;
    obj['idcount'] = vidcount;
    obj['userid'] = vuserid;
    obj['Surveyed'] = vSurveyed;
    obj['class'] = vclass;
    arr.push(obj);

    return arr
    }

    HERE IS THE DIALOG BOX AND MESSAGE BOX CODE


    I THEN TRY AND RETURN THOSE RESULTS.... I push to a DIALOG box and TO what I call an UPDATE WINDOW BOTH EXAMPLES ARE BELOW.

    I push the msgText3 array to a Dialog as seen below...

    I can see all the records and scroll through them in the dialog window.

    Dialog {
    id: msgDialog
    property alias text : textLabel.text
    width: 300
    height: 250
    x: Math.round(parent.width - width) / 2
    y: Math.round(parent.height - height) / 2

    Rectangle {
    id: frame
    clip: true
    width: msgDialog.width * .90
    height: msgDialog.height * .85
    anchors.left: parent.left

    Text {
    id: textLabel
    width: frame.width
    height: frame.height
    text: msgText3
    font.pixelSize: 10
    x: -hbar.position * frame.width
    y: -vbar.position * frame.height * 4 // This allows me to see the whole list
    }

    ScrollBar {
    id: vbar
    hoverEnabled: true
    active: hovered || pressed
    orientation: Qt.Vertical
    size: frame.height / content.height
    //size: frame.height
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    }

    ScrollBar {
    id: hbar
    hoverEnabled: true
    active: hovered || pressed
    orientation: Qt.Horizontal
    size: frame.width / content.width
    //size: frame.width
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    }
    }
    }





    ALTERNATIVELY I am pushing the individual variables into what I am calling the update window.



    // Update Window
    Rectangle {
    id: updateWindow
    width: 320
    height: 230
    anchors.centerIn: parent
    radius: 10
    visible: false

    GaussianBlur {
    anchors.fill: updateWindow
    source: mapView
    radius: 40
    samples: 20
    }

    MouseArea {
    anchors.fill: parent
    onClicked: mouse.accepted = true;
    onWheel: wheel.accepted = true;
    }

    GridLayout {
    columns: 2
    anchors.margins: 5

    Text {
    Layout.columnSpan: 2
    text: " "
    font.pixelSize: 30
    }

    Text {
    Layout.columnSpan: 1
    Layout.margins: 2
    text: "objectid : "
    font.pixelSize: 16
    leftPadding: 10
    }
    Rectangle{
    id: myTextField_objectid
    color: "white"
    width: 200
    anchors.leftMargin: 100
    height:25
    radius: 5
    Layout.columnSpan: 1
    Layout.margins: 2
    Layout.fillWidth: true
    Text{
    id:txt_objectid
    text: " " + msgvobjectid
    anchors.leftMargin: 100
    verticalAlignment: Qt.AlignVCenter
    horizontalAlignment: Qt.AlignLeft
    font.family: "helvetica"
    font.pointSize: 12
    }
    }
    Text {
    Layout.columnSpan: 1
    Layout.margins: 2
    text: "idcount : "
    font.pixelSize: 16
    leftPadding: 10
    }
    Rectangle{
    id: myTextField_idcount
    color: "white"
    anchors.leftMargin: 10
    height:25
    radius: 5
    Layout.columnSpan: 1
    Layout.margins: 2
    Layout.fillWidth: true
    Text{
    id:txt_idcount
    text: " " + msgvidcount
    anchors.leftMargin: 10
    verticalAlignment: Qt.AlignVCenter
    horizontalAlignment: Qt.AlignLeft
    font.family: "helvetica"
    font.pointSize: 12
    }
    }
    Text {
    Layout.columnSpan: 1
    Layout.margins: 2
    text: "userid : "
    font.pixelSize: 16
    leftPadding: 10
    }
    Rectangle{
    id: myTextField_msgvuserid
    color: "white"
    anchors.leftMargin: 10
    height:25
    radius: 5
    Layout.columnSpan: 1
    Layout.margins: 2
    Layout.fillWidth: true
    Text{
    id:txt_msgvuserid
    text: " " + msgvuserid
    anchors.leftMargin: 10
    verticalAlignment: Qt.AlignVCenter
    horizontalAlignment: Qt.AlignLeft
    font.family: "helvetica"
    font.pointSize: 12
    }
    }
    Text {
    Layout.columnSpan: 1
    Layout.margins: 2
    text: "surveyed : "
    font.pixelSize: 16
    leftPadding: 10
    }
    Rectangle{
    id: myTextField_msgvSurveyed
    color: "white"
    anchors.leftMargin: 10
    height:25
    radius: 5
    Layout.columnSpan: 1
    Layout.margins: 2
    Layout.fillWidth: true
    Text{
    id:txt_msgvSurveyed
    text: " " + msgvSurveyed
    anchors.leftMargin: 10
    verticalAlignment: Qt.AlignVCenter
    horizontalAlignment: Qt.AlignLeft
    font.family: "helvetica"
    font.pointSize: 12
    }
    }
    Text {
    Layout.columnSpan: 1
    Layout.margins: 2
    text: "class : "
    font.pixelSize: 16
    leftPadding: 10
    }
    Rectangle{
    id: myTextField_msgvclass
    color: "white"
    anchors.leftMargin: 10
    height:25
    radius: 5
    Layout.columnSpan: 1
    Layout.margins: 2
    Layout.fillWidth: true
    Text{
    id:txt_msgvclass
    text: " " + msgvclass
    anchors.leftMargin: 10
    verticalAlignment: Qt.AlignVCenter
    horizontalAlignment: Qt.AlignLeft
    font.family: "helvetica"
    font.pointSize: 12
    }
    }


    }
    } // END OF UPDATE WINDOW

  4. #4

    Default Re: Display Array in popup window / dialog box

    OK sorry for the mess in the last post....I did some modifying and changed my approach

    I know this is a mapping application but this boils down to grabbing an array and displaying it....
    In this approach I call a function and populate an array and then append the array line by line in the FOR loop to the ListModel
    This list model is then referenced in the ListView and as such displays the records as seen below.


    thirdimage.png

    This is working...and in the example you can see that two records are returned.
    BUT what I want to do is return them one at a time and have the ability to flick through them or have an arrow icon to flip through them.
    NOT see them one after another as in the image.

    My question is how do I do this????? Any suggestions would be appreciated....





    // WHEN THE USER CLICKS THE MAP THIS IS CALLED WHICH IN TUNR CALLS THIS FUNCTION: geoElementsGetElements(result);
    onIdentifyLayersStatusChanged: {

    if (identifyLayersStatus !== Enums.TaskStatusCompleted)
    return;

    msgvobjectid = "";
    msgvidcount = "";
    msgvuserid = "";
    msgvSurveyed = "";
    msgvclass = "";

    // loop through the results
    var results = mapView.identifyLayersResults;

    for (var i = 0; i < results.length; i++) {
    var result = results[i];

    var returnarray = geoElementsGetElements(result);

    for (var e = 0; e < returnarray.length; e++) {

    msgvobjectid = returnarray[e].objectid;
    msgvidcount = returnarray[e].userid;
    msgvuserid = returnarray[e].idcount;
    msgvSurveyed = returnarray[e].Surveyed;
    msgvclass = returnarray[e].class;

    speedModel.append({objectid:msgvobjectid,idcount:m sgvidcount,userid:msgvuserid,Surveyed:msgvSurveyed });

    }
    }
    }


    // FUNCTION THAT IS CALLED THAT CREATES THE ARRAY AND SENDS BACK
    function geoElementsGetElements(identifyLayerResult) {
    // create temp array
    var tempResults = [identifyLayerResult];

    var vobjectid = "";
    var vidcount = "";
    var vuserid = "";
    var vSurveyed = "";
    var vclass = "";

    var arrayName = [];
    var identifyResult2 = tempResults[index];

    // DEFINE ARRAY VARIABLES
    var arr = [];

    // create an array to store the features
    var identifiedObjects = [];

    for (var i = 0; i < identifyResult2.geoElements.length; i++){

    var elem = identifyResult2.geoElements[i];
    identifiedObjects.push(elem);

    vobjectid = identifyResult2.geoElements[i].attributes.attributeValue("objectid")
    vidcount = identifyResult2.geoElements[i].attributes.attributeValue("PublicPrivate")
    vuserid = identifyResult2.geoElements[i].attributes.attributeValue("Item")
    vSurveyed = identifyResult2.geoElements[i].attributes.attributeValue("Comments")
    vclass = identifyResult2.geoElements[i].attributes.attributeValue("CaseNum")

    arrayName = [vobjectid, vidcount, vuserid, vSurveyed, vclass]

    // BUILD THE ARRAY
    var obj = {};
    obj['objectid'] = vobjectid;
    obj['idcount'] = vidcount;
    obj['userid'] = vuserid;
    obj['Surveyed'] = vSurveyed;
    obj['class'] = vclass;
    arr.push(obj);

    }
    return arr
    }


    // CREATE THE LIST MODEL
    ListModel {
    id: speedModel
    Component.onCompleted: {
    [
    {"objectid":0,
    "idcount":"",
    "userid":"",
    "Surveyed":""}
    ]
    }
    }

    // CREATE THE DIALOG AND LISTVIEW THAT WILL SHOW THE RECORDS[/COLOR]
    Dialog {
    id: msgDialog
    modal: true
    title: headerCount
    font.pixelSize: 10
    width: 300
    height: 250

    // POSITION OF msgDialog
    x: Math.round(parent.width - width) / 2
    y: Math.round(parent.height - height) / 2


    Rectangle {
    id: inside
    width: msgDialog.width * .9; height: 125

    Component {
    id: contactDelegate
    Item {
    width: 180; height: 70
    Column {
    Text { text: '<b>ObjectID:</b> ' + objectid }
    Text { text: '<b>idcount: </b> ' + idcount }
    Text { text: '<b>userid: </b> ' + userid }
    Text { text: '<b>idcount: </b> ' + Surveyed }
    }
    }
    }

    ListView {
    anchors.fill: inside
    model: speedModel
    delegate: contactDelegate
    //highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
    focus: true
    }
    }

  5. #5
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Display Array in popup window / dialog box

    I would suggest editing these posts and using code tags to mark code.

    Much easier to read.

    Cheers,
    _

  6. #6

    Default Re: Display Array in popup window / dialog box

    Will do so from no on....was looking for the tags in the toolbar but did not see them....and I dont see an option to go back and edit my post to add them...

    Here is my code from the last post with Code tags...found them...sorry about that...

    As I stated I am looking to have all the records returned but ONLY view 1 record at a time and allow for a vertical or horizontal swipe....

    Qt Code:
    1. // WHEN THE USER CLICKS THE MAP THIS IS CALLED WHICH IN TUNR CALLS THIS FUNCTION: geoElementsGetElements(result);
    2.  
    3. onIdentifyLayersStatusChanged: {
    4.  
    5. if (identifyLayersStatus !== Enums.TaskStatusCompleted)
    6. return;
    7.  
    8. msgvobjectid = "";
    9. msgvidcount = "";
    10. msgvuserid = "";
    11. msgvSurveyed = "";
    12. msgvclass = "";
    13.  
    14. // loop through the results
    15. var results = mapView.identifyLayersResults;
    16.  
    17. for (var i = 0; i < results.length; i++) {
    18. var result = results[i];
    19. var count = geoElementsCountFromResult(result);
    20. var layerName = result.layerContent.name;
    21.  
    22. var returnarray = geoElementsGetElements(result);
    23.  
    24. for (var e = 0; e < returnarray.length; e++) {
    25.  
    26. msgvobjectid = returnarray[e].objectid;
    27. msgvidcount = returnarray[e].userid;
    28. msgvuserid = returnarray[e].idcount;
    29. msgvSurveyed = returnarray[e].Surveyed;
    30. msgvclass = returnarray[e].class;
    31.  
    32. speedModel.append({objectid:msgvobjectid,idcount:msgvidcount,userid:msgvuserid,Surveyed:msgvSurveyed});
    33.  
    34. }
    35.  
    36. }
    37.  
    38.  
    39. // FUNCTION THAT IS CALLED THAT CREATES THE ARRAY AND SENDS BACK
    40. function geoElementsGetElements(identifyLayerResult) {
    41. // create temp array
    42. var tempResults = [identifyLayerResult];
    43.  
    44. var vobjectid = "";
    45. var vidcount = "";
    46. var vuserid = "";
    47. var vSurveyed = "";
    48. var vclass = "";
    49.  
    50. var arrayName = [];
    51.  
    52. var identifyResult2 = tempResults[index];
    53.  
    54. // DEFINE ARRAY VARIABLES
    55. var arr = [];
    56.  
    57. for (var i = 0; i < identifyResult2.geoElements.length; i++){
    58.  
    59. var elem = identifyResult2.geoElements[i];
    60. identifiedObjects.push(elem);
    61.  
    62. vobjectid = identifyResult2.geoElements[i].attributes.attributeValue("objectid")
    63. vidcount = identifyResult2.geoElements[i].attributes.attributeValue("PublicPrivate")
    64. vuserid = identifyResult2.geoElements[i].attributes.attributeValue("Item")
    65. vSurveyed = identifyResult2.geoElements[i].attributes.attributeValue("Comments")
    66. vclass = identifyResult2.geoElements[i].attributes.attributeValue("CaseNum")
    67.  
    68. arrayName = [vobjectid, vidcount, vuserid, vSurveyed, vclass]
    69.  
    70. // BUILD THE ARRAY
    71. var obj = {};
    72. obj['objectid'] = vobjectid;
    73. obj['idcount'] = vidcount;
    74. obj['userid'] = vuserid;
    75. obj['Surveyed'] = vSurveyed;
    76. obj['class'] = vclass;
    77. arr.push(obj);
    78.  
    79. }
    80.  
    81. return arr
    82. }
    83.  
    84.  
    85.  
    86.  
    87. // CREATE THE LIST MODEL
    88. ListModel {
    89. id: speedModel
    90. Component.onCompleted: {
    91. [
    92. {"objectid":0,
    93. "idcount":"",
    94. "userid":"",
    95. "Surveyed":""}
    96. ]
    97. }
    98. }
    99.  
    100. // CREATE THE DIALOG AND LISTVIEW THAT WILL SHOW THE RECORDS
    101.  
    102.  
    103. Dialog {
    104. id: msgDialog
    105. modal: true
    106. title: headerCount
    107. font.pixelSize: 10
    108. //standardButtons: Dialog.Ok
    109.  
    110. //property alias text : textLabel.text
    111. width: 300
    112. height: 250
    113.  
    114. // POSITION OF msgDialog
    115. x: Math.round(parent.width - width) / 2
    116. y: Math.round(parent.height - height) / 2
    117.  
    118. Rectangle {
    119. id: inside
    120. width: msgDialog.width * .9; height: 180
    121. anchors.fill: parent
    122. border.color: "black"
    123. border.width: 5
    124. Component {
    125. id: contactDelegate
    126. Item {
    127. width: 180; height: 160
    128. Column {
    129. Text { text: '<b>ObjectID:</b> ' + objectid }
    130. Text { text: '<b>idcount: </b> ' + idcount }
    131. Text { text: '<b>userid: </b> ' + userid }
    132. Text { text: '<b>idcount: </b> ' + Surveyed }
    133. Text { text: '-------------' }
    134. }
    135. }
    136. }
    137.  
    138. ListView {
    139. anchors.fill: inside
    140. flickableDirection: Flickable.VerticalFlick
    141. model: speedModel
    142. delegate: contactDelegate
    143. //highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
    144. focus: true
    145. }
    146. }
    147. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by jaykappy; 26th July 2019 at 14:42.

Similar Threads

  1. Replies: 6
    Last Post: 12th August 2013, 19:13
  2. Replies: 12
    Last Post: 1st May 2011, 12:38
  3. Replies: 2
    Last Post: 17th February 2011, 13:30
  4. Replies: 2
    Last Post: 10th December 2009, 08:01
  5. how to create a popup dialog
    By Morea in forum Qt Programming
    Replies: 1
    Last Post: 19th November 2006, 17:40

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.