Results 1 to 4 of 4

Thread: QML: display an image onClicked

  1. #1
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Unhappy QML: display an image onClicked

    Hi, I am new to QML and so I am learning it by creating a simple tic tac toe game......

    My problem is mentioned below:

    I have used Grid to display all of the 9 rectangle blocks for tic tac toe game.....
    Qt Code:
    1. Grid {
    2. x: 22
    3. y: 7
    4. anchors.horizontalCenter: parent.horizontalCenter
    5. anchors.verticalCenter: parent.verticalCenter
    6. columns: 3
    7. spacing: 3
    8.  
    9. Block11 {
    10. id: block11
    11. text: ""
    12. MouseArea {
    13. anchors.fill: parent
    14. }
    15. onClicked: [problem is here]
    16.  
    17. }
    18. Block12 {...}
    19. .
    20. .
    21. .
    22. .
    23. .
    24. Block33{.....}
    To copy to clipboard, switch view to plain text mode 

    I have problem in the onClicked section. When user clicks anyone of these blocks then an image "x.png" should be displayed on that block, but i am unable to do so....

    I,ve tried following:
    Qt Code:
    1. Block11 {
    2. id: block11
    3. text: ""
    4. MouseArea {
    5. anchors.fill: parent
    6. }
    7. onClicked: Image{
    8. source: "x.png"
    9. anchors.centerIn: parent
    10. }
    To copy to clipboard, switch view to plain text mode 
    but the above code gives an error.....i've also tried to find a way from many sites but was unsuccessful......please help.....

  2. #2
    Join Date
    Apr 2011
    Posts
    9
    Thanks
    2
    Thanked 7 Times in 3 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: QML: display an image onClicked

    You can't declare an Image element inside "onClicked". Declare it first inside the Block, give it an id, then in onClicked use the "opacity" or "visible" properties to hide/show the image. for example:

    Qt Code:
    1. Item {
    2. id: block
    3.  
    4. Image {
    5. id: pic
    6. source: "x.jpg"
    7. visible: false //hidden by default
    8. anchors.centerIn: parent
    9. }
    10.  
    11. MouseArea {
    12. anchors.fill: parent
    13. onClicked: pic.visible = true
    14. }
    15. }
    To copy to clipboard, switch view to plain text mode 

  3. The following user says thank you to mushroom for this useful post:

    mohit_king (11th July 2011)

  4. #3
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: QML: display an image onClicked

    Quote Originally Posted by mushroom View Post
    You can't declare an Image element inside "onClicked". Declare it first inside the Block, give it an id, then in onClicked use the "opacity" or "visible" properties to hide/show the image.
    Hey this method works....but by using this i gotta load two images (x.png and zero.png) for each block and make visible whichever is appropritae.......dont u think this will make the app a bit slow.....

  5. #4
    Join Date
    Apr 2011
    Posts
    9
    Thanks
    2
    Thanked 7 Times in 3 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: QML: display an image onClicked

    Quote Originally Posted by mohit_king View Post
    Hey this method works....but by using this i gotta load two images (x.png and zero.png) for each block and make visible whichever is appropritae.......dont u think this will make the app a bit slow.....
    In QML all the elements that are declared are loaded the first time the file is read, from top to bottom.
    You can dynamically load elements using the Loader element apparently:
    http://doc.qt.nokia.com/4.7-snapshot/qml-loader.html

    I don't know about performance because i don't really know how it all works under the hood, but i doubt it's gonna slow your program down..

Similar Threads

  1. Qt Image Display...
    By mahe2310 in forum Qt Programming
    Replies: 9
    Last Post: 22nd July 2013, 10:06
  2. How to Display the image in Qt
    By sdastagirmca in forum Qt Programming
    Replies: 1
    Last Post: 10th February 2009, 07:17
  3. Image display
    By bmn in forum Qt Programming
    Replies: 1
    Last Post: 5th June 2008, 14:52
  4. Display rectangle on Image
    By parmar ranjit in forum Qt Programming
    Replies: 3
    Last Post: 22nd February 2008, 14:09
  5. Display image
    By Pesho in forum Qt Programming
    Replies: 1
    Last Post: 14th September 2007, 01:21

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.