Results 1 to 7 of 7

Thread: QML files loading

  1. #1
    Join Date
    Jun 2013
    Location
    South Africa
    Posts
    4
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Windows

    Default QML files loading

    Hi all

    I am new at Qt and currently using Qt 5.0.1 and developing for windows. I want to make a nice looking GUI, at first i built the GUI using Photoshop then converted to qml files (4). the issue i have got now is how to navigate between my pages (page 1, 2,3, 4) by mouse click. I have tried the tutorials (created a mouse area over parts of my main menu) but it still doesn't work.Can someone please help me here, what am i missing? is it even possible to achieve what i am intended to do with the technology i have chosen?

    Thx

    Parfait

  2. #2
    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: QML files loading

    Post your code please.
    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.


  3. #3
    Join Date
    Jun 2013
    Location
    South Africa
    Posts
    4
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: QML files loading

    MainGui.qml

    javascript Code:
    1. import Qt 4.7
    2.  
    3. Item {
    4. width: 600
    5. height: 900
    6.  
    7. Loader
    8. {
    9. id: pageLoader
    10. focus: true
    11. }
    12.  
    13.  
    14. Image {
    15. id: back_ground_main
    16. source: "images/back_ground_main.png"
    17. x: 0
    18. y: 0
    19. width: 600
    20. height: 900
    21. opacity: 1
    22. }
    23. Image {
    24. id: tabs_main
    25. source: "images/tabs_main.png"
    26. x: 0
    27. y: 0
    28. width: 600
    29. height: 900
    30. opacity: 1
    31. }
    32. Image {
    33. id: pics_main
    34. source: "images/pics_main.png"
    35. x: 0
    36. y: 0
    37. width: 600
    38. height: 900
    39. opacity: 1
    40. }
    41. Image {
    42. id: text_main
    43. source: "images/text_main.png"
    44. x: 0
    45. y: 0
    46. width: 600
    47. height: 900
    48. opacity: 1
    49. }
    50. Image {
    51. id: logo_copy
    52. source: "images/logo_copy.png"
    53. x: 0
    54. y: 0
    55. width: 600
    56. height: 900
    57. opacity: 1
    58. }
    59. Image {
    60. id: shape_2
    61. source: "images/shape_2.png"
    62. x: 0
    63. y: 0
    64. width: 600
    65. height: 900
    66. opacity: 1
    67. }
    68. Image {
    69. id: logo_main
    70. source: "images/logo_main.png"
    71. x: 0
    72. y: 0
    73. width: 600
    74. height: 900
    75. opacity: 1
    76. }
    77.  
    78. MouseArea {
    79. id: mouse_area1
    80. x: 52
    81. y: 302
    82. width: 496
    83. height: 129
    84. opacity: 0
    85. hoverEnabled: false
    86. anchors.fill: parent
    87. onClicked:
    88. {
    89. pageLoader.source = "SunglassesGui.qml"
    90.  
    91. }
    92. }
    93.  
    94. MouseArea {
    95. id: mouse_area2
    96. x: 52
    97. y: 431
    98. width: 496
    99. height: 129
    100. opacity: 0
    101. anchors.fill: parent
    102. onClicked: pageLoader.source = "MakeupGui.qml"
    103.  
    104. }
    105.  
    106. MouseArea {
    107. id: mouse_area3
    108. x: 52
    109. y: 560
    110. width: 496
    111. height: 130
    112. opacity: 0
    113. hoverEnabled: true
    114. anchors.fill: parent
    115. onClicked:
    116. {
    117. pageLoader.source = "ClothesGui.qml"
    118. }
    119. }
    120. }
    To copy to clipboard, switch view to plain text mode 

    SunglassesGui.qml

    javascript Code:
    1. import Qt 4.7
    2. Item {
    3. id: sunglasse
    4. width: 600
    5. height: 900
    6. Image {
    7. id: back_ground_sunglasses
    8. source: "images/back_ground_sunglasses.png"
    9. x: 0
    10. y: 0
    11. width: 600
    12. height: 900
    13. opacity: 1
    14. }
    15. Image {
    16. id: tabs_sunglasses
    17. source: "images/tabs_sunglasses.png"
    18. x: 0
    19. y: 0
    20. width: 600
    21. height: 900
    22. opacity: 1
    23. }
    24. Image {
    25. id: text_sunglasses
    26. source: "images/text_sunglasses.png"
    27. x: 0
    28. y: 0
    29. width: 600
    30. height: 900
    31. opacity: 1
    32. }
    33. }
    To copy to clipboard, switch view to plain text mode 

    MakeupGui.qml

    javascript Code:
    1. import Qt 4.7
    2. Item {
    3. width: 600
    4. height: 900
    5. Image {
    6. id: background_makeup
    7. source: "images/background_makeup.png"
    8. x: 0
    9. y: 0
    10. width: 600
    11. height: 900
    12. opacity: 1
    13. }
    14. Image {
    15. id: tabs_makeup
    16. source: "images/tabs_makeup.png"
    17. x: 0
    18. y: 0
    19. width: 600
    20. height: 900
    21. opacity: 1
    22. }
    23. Image {
    24. id: text_makeup
    25. source: "images/text_makeup.png"
    26. x: 0
    27. y: 0
    28. width: 600
    29. height: 900
    30. opacity: 1
    31. }
    32. }
    To copy to clipboard, switch view to plain text mode 

    ClothesGui.qml

    javascript Code:
    1. import Qt 4.7
    2. Item {
    3. width: 600
    4. height: 900
    5. Image {
    6. id: background_clothes
    7. source: "images/background_clothes.png"
    8. x: 0
    9. y: 0
    10. width: 600
    11. height: 900
    12. opacity: 1
    13. }
    14. Image {
    15. id: tab_clothes
    16. source: "images/tab_clothes.png"
    17. x: 0
    18. y: 0
    19. width: 600
    20. height: 900
    21. opacity: 1
    22. }
    23. Image {
    24. id: text_clothes
    25. source: "images/text_clothes.png"
    26. x: 0
    27. y: 0
    28. width: 600
    29. height: 900
    30. opacity: 1
    31. }
    32. Image {
    33. id: icons_clothes
    34. source: "images/icons_clothes.png"
    35. x: 0
    36. y: 0
    37. width: 600
    38. height: 900
    39. opacity: 1
    40. }
    41. }
    To copy to clipboard, switch view to plain text mode 

    thx
    Attached Files Attached Files
    Last edited by wysota; 22nd June 2013 at 01:10. Reason: missing [code] tags

  4. #4
    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: QML files loading

    javascript Code:
    1. Item {
    2. id: root
    3. Row {
    4. Image { ...
    5. MouseArea { anchors.fill: parent; onClicked: root.state = "sunglasses" }
    6. }
    7. Image { ...
    8. MouseArea { anchors.fill: parent; onClicked: root.state = "makeup" }
    9. }
    10. }
    11. Item {
    12. anchors { top: col.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
    13. Sunglasses {
    14. anchors.fill: parent
    15. visible: root.state == "sunglasses"
    16. }
    17. MakeupGui {
    18. anchors.fill: parent
    19. visible: root.state == "makeup"
    20. }
    21. }
    22. states: [
    23. State { name: "sunglasses" },
    24. State { name: "makeup" }
    25. ]
    26. }
    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.


  5. #5
    Join Date
    Jun 2013
    Location
    South Africa
    Posts
    4
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: QML files loading

    Hi wysota

    I really tried to figured out how to applied it to my code without success finally i decided to convert the qml files to png instead and load as GUI and it works. I hope it will not slow the application. here Bellow is my code. My other issue now is how to get back to the main menu from the other ui (i have tried to design a back button but it does work). Can someone please help?
    Thx

    import QtQuick 1.1

    Rectangle {
    id: root
    width: 600
    height: 900
    opacity: 1

    Image {
    id: mainGui
    x: 0
    y: 0
    width: 600
    height: 900
    source: "../../uiu.png"
    anchors.centerIn: parent
    }

    Image {
    id: sunglassesGui
    x: 0
    y: 0
    width: 600
    height: 900
    visible: false
    source: "../../sunglass_screen.png"
    anchors.centerIn: parent
    }

    Image {
    id: makeupGui
    x: 0
    y: 0
    width: 600
    height: 900
    visible: false
    source: "../../make_up_screen.png"
    anchors.centerIn: parent
    }


    Image {
    id: clothesGui
    x: 0
    y: 0
    width: 600
    height: 900
    visible: false
    source: "../../clothes_screen.png"
    anchors.centerIn: parent

    MouseArea {
    id: back_from_clothes
    x: 364
    y: 772
    width: 56
    height: 54
    anchors.rightMargin: 180
    anchors.bottomMargin: 74
    anchors.leftMargin: 364
    anchors.topMargin: 772
    anchors.fill: parent
    onClicked: mainGui.visible = true
    }

    MouseArea {
    id: capClothes
    x: 464
    y: 778
    width: 68
    height: 42
    }

    MouseArea {
    id: faceblinkclothes
    x: 464
    y: 836
    width: 62
    height: 58
    }
    }


    MouseArea {
    id: glasses
    x: 52
    y: 300
    width: 498
    height: 132
    anchors.leftMargin: 52
    anchors.rightMargin: 50
    anchors.topMargin: 300
    anchors.bottomMargin: 468
    anchors.fill: parent
    onClicked: sunglassesGui.visible = true

    }

    MouseArea {
    id: makeup
    x: 52
    y: 432
    width: 498
    height: 128
    anchors.rightMargin: 50
    anchors.leftMargin: 52
    anchors.bottomMargin: 340
    anchors.topMargin: 432
    visible: true
    anchors.fill: parent
    onClicked: makeupGui.visible = true
    }

    MouseArea {
    id: clothes
    x: 52
    y: 560
    width: 498
    height: 128
    anchors.rightMargin: 50
    anchors.bottomMargin: 212
    anchors.leftMargin: 52
    anchors.topMargin: 560
    anchors.fill: parent
    onClicked: clothesGui.visible = true;

    }
    // }


    }

  6. #6
    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: QML files loading

    I'm afraid that without proper comprehension of how QML works it might be too hard for you to implement it. I suggest you use a ready page stack implementation if you don't want to invest your time in learning 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.


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

    parfait (25th June 2013)

  8. #7
    Join Date
    Jun 2013
    Location
    South Africa
    Posts
    4
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: QML files loading

    I think you are right. I should really start learning it from scratch

Similar Threads

  1. Loading 3DS files??
    By xleniz in forum Newbie
    Replies: 1
    Last Post: 24th February 2012, 03:26
  2. Saving / Loading Files
    By nightroad in forum Qt Programming
    Replies: 3
    Last Post: 26th August 2011, 14:13
  3. Problems with loading ui files on windows
    By tyrdal in forum Qt Programming
    Replies: 2
    Last Post: 5th August 2009, 12:42
  4. Loading files using Qt
    By A.H.M. Mahfuzur Rahman in forum Qt Programming
    Replies: 2
    Last Post: 9th June 2009, 18:34
  5. Loading TGA files
    By ChMaster in forum Qt Programming
    Replies: 2
    Last Post: 28th June 2007, 10:55

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.