Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    [SOLVED] How do I retrieve image from XmlListModel for Splash Screen?

    QML and Qt Quick
    2
    7
    2489
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • H
      honeyhong last edited by

      Hey I have these codes and tested it manually by placing the link into the Image Source area and it worked successfully. But instead of putting it manually, I want call it from a XmlListModel. I have these codes and all that is left is retrieving the 'image'. I tried calling it by splash1.name and several other attempts but I failed. How do I retrieve it? What did I do wrong?

      @
      import QtQuick 1.1
      import com.nokia.symbian 1.1

      Page
      {
      id:root
      //---------------------------------------XML----------------------------
      XmlListModel {
      id: splash1
      property string feedUrl: ""
      property bool loading: status == XmlListModel.Loading

              source: "http://appsfactory.my/client/canonmsia2/android/startup.php"
              query: "/plist/dict"
      
              XmlRole { name: "image"; query: "string[2]/string()" }
          }
      

      //---------------------------------------splash----------------------------
      Item {
      id: splashScreenContainer2
      signal splashScreenCompleted()

      Image {
          id: splashImage2
          source: splash1.name //i'm trying to call the image from the XmlListModel here.
          anchors{top:parent.top;}
      }
      
      SequentialAnimation {
          id:splashanimation2
          PauseAnimation { duration: 8200 }
          PropertyAnimation {
              target: splashImage2
              duration: 700
              properties: "opacity"
              to:0
          }
          onCompleted: {
             splashScreenContainer2.splashScreenCompleted()
             root.pageStack.push(window.homePage)
          }
      }
      //starts the splashScreen
       Component.onCompleted: splashanimation2.start()
      

      }

      }
      @

      1 Reply Last reply Reply Quote 0
      • I
        Ices_Eyes last edited by

        It should be enough for you to change the source of the Image with the name you assign to the role on the model, i.e.:

        @
        import QtQuick 1.1
        import com.nokia.symbian 1.1

        Page
        {
        id:root
        //---------------------------------------XML----------------------------
        XmlListModel {
        id: splash1
        property string feedUrl: ""
        property bool loading: status == XmlListModel.Loading

                source: "http://appsfactory.my/client/canonmsia2/android/startup.php"
                query: "/plist/dict"
        
                XmlRole { name: "splashImage"; query: "string[2]/string()" }
            }
        

        //---------------------------------------splash----------------------------
        Item {
        id: splashScreenContainer2
        signal splashScreenCompleted()

        Image {
            id: splashImage2
            source: splashImage
            anchors{top:parent.top;}
        }
        
        SequentialAnimation {
            id:splashanimation2
            PauseAnimation { duration: 8200 }
            PropertyAnimation {
                target: splashImage2
                duration: 700
                properties: "opacity"
                to:0
            }
            onCompleted: {
               splashScreenContainer2.splashScreenCompleted()
               root.pageStack.push(window.homePage)
            }
        }
        //starts the splashScreen
         Component.onCompleted: splashanimation2.start()
        

        }

        }
        @

        another solution is to assign the image source when the xmlmodel is read, like this:

        @
        onStatusChanged: {
        if(status == XmlListModel.Ready) {
        splashImage2.source = imageThumb;
        }
        @

        1 Reply Last reply Reply Quote 0
        • H
          honeyhong last edited by

          I've tried assigning the source of the Image with the name assigned to the role on the model before this but it didn't work. I get this error "ReferenceError: Can't find variable: splashImage"

          1 Reply Last reply Reply Quote 0
          • I
            Ices_Eyes last edited by

            Hmmm.. :)
            I'm not good with xpath, but is "string[2]/string()" a valid xparh expression?

            1 Reply Last reply Reply Quote 0
            • H
              honeyhong last edited by

              i am not good too :) yeah it is. if u check the xml link, string[2]/string() links to this -->
              http://www.appsfactory.my/client/canonmsia2/images/splashBanners/010.jpg

              i tried your 2nd method, but i can't get it to work as well. i will keep trying though. :)

              1 Reply Last reply Reply Quote 0
              • I
                Ices_Eyes last edited by

                Sorry, my bad :D
                Your xmllistmodel is not used as a model, so you cannot use it in that way :P

                You can simply solve by using this for the model:
                @
                onStatusChanged: {
                if(status == XmlListModel.Ready) {
                splashImage2.source = splash1.get(0).splashImage;
                }
                }@

                But as of now, I'm not completely sure you will still be able to see your splash screen (i.e. the item that contain the image should be properly sized, or it will have a size of 0x0px). But the image will be correctly loaded as the image source :)

                1 Reply Last reply Reply Quote 0
                • H
                  honeyhong last edited by

                  It worked! It managed to load the image correctly and the splash screen appeared as well. Thank you very much for your help. You just made my day! :D

                  For future reference, here is my final code.
                  @
                  import QtQuick 1.1
                  import com.nokia.symbian 1.1

                  Page
                  {
                  id:root
                  orientationLock: PageOrientation.LockPortrait
                  //---------------------------------------XML----------------------------
                  XmlListModel {
                  id: splash1
                  property string feedUrl: ""
                  property bool loading: status == XmlListModel.Loading

                          source: "http://appsfactory.my/client/canonmsia2/android/startup.php"
                          query: "/plist/dict"
                  
                          XmlRole { name: "splashImage"; query: "string[2]/string()" }
                  
                      onStatusChanged: {
                              if(status == XmlListModel.Ready) {
                              splashImage2.source = splash1.get(0).splashImage;
                              }
                          }
                      }
                  

                  //---------------------------------------splash----------------------------
                  Item {
                  id: splashScreenContainer2
                  signal splashScreenCompleted()

                  Image {
                  id: splashImage2
                  anchors{top:parent.top}
                  }

                  SequentialAnimation {
                  id:splashanimation2
                  PauseAnimation { duration: 8200 }
                  PropertyAnimation {
                  target: splashImage2
                  duration: 700
                  properties: "opacity"
                  to:0
                  }

                      onCompleted: {
                         splashScreenContainer2.splashScreenCompleted()
                         root.pageStack.push(window.homePage)
                      }
                    }
                  

                  //starts the splashScreen
                  Component.onCompleted: splashanimation2.start()
                  }
                  }
                  @

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post