How to assign image source during runtime in QML



  • Hi

    I am trying to assign image source during run time.
    I tried the following code

    Rectangle {
    id: base; width: 25;
    height: 25; x:35 y:35
    property variant images : [ “images/image_tick.png”, “images/image1.png”, “images/image_loading.png”, ]; property int currentImage : 1;
    Image {
    id:status_locked
    source:base.images
    anchors.bottom: parent.top
    anchors.bottomMargin: -28
    anchors.left : parent.left
    anchors.leftMargin: 11
    visible :base.currentImage }
    }

    I am getting error while running " Unable to assign QVariantList to QUrl"

    Please help me in solving this issue

    Regards
    subram


  • Moderators

    Please wrap all code between '@' tags.

    You are trying to pass an integer to 'visible' property of the image + you are trying to assign an array to 'source'. Source needs to be string, visible: boolean. This should work better:
    @
    Image {
    source: base.images[base.currentImage]
    visible: true
    }
    @



  • Thanks for your reply ,

    Now How to change the currentImage from a CPP code , so that i can display different images on same rectangle ID during run time mapped to an event


  • Moderators

    Depends on the event. A lot of events are captured by QML, so you don't need to go c++ to handle them. Also, depends on how you're connection to c++ is made. There are simply too many possibilities to give you a good answer right away.



  • Let say i would like to update an variable in c++ on key event , how can i map that variable to this currentimage.

    Are there some hadlers/API functions, through which i can set the property of the image in a QML file from a c++ program.


  • Moderators

    Read "the docs":http://qt-project.org/doc/qt-4.8/qtbinding.html. And "wikis":http://qt-project.org/wiki/How_to_bind_a_QML_property_to_a_CPlusPlus_function.

    You can handle key events in QML, no need for C++. But of course you can also do it in C++ and push updates to QML.



  • Hi
    In 5.1.0 QT version , if a QML project is created the following error is displayed

    In my header file i included

    "#include <QQmlContext>"

    "Main.h:3: error: C1083: Cannot open include file: 'QQmlContext': No such file or directory"


  • Moderators

    Make sure you have added Qml module to your project file:
    @
    QT += qml

    or, to have everything in:

    QT += core gui qml quick
    @



  • after adding "QT+=qml" in additional arguments of build steps , i am getting following error.

    wrcMain.h:4: error: C1083: Cannot open include file: 'QQuickView': No such file or directory.

    Actually i crated a QML project , still why these errors are coming, The same project i crated for 5.02 there was no error ?


  • Moderators

    How should I know? Clearly something is wrong, but I can't say what or where without more info.

    Don't modify the build steps. Open your project file (usualy <yourProjectName>.pro) and add it there.

    For this second error, obviously you need to add:
    @
    QT += quick
    @



  • Thanks , i had added in .pro file



  • Hi

    Now i would like to do transition between QML files . by having one part of screen as static .

    1.How can i do the view/screen transiiton in QML
    2.how will i create a static view that can be shown in all view.


  • Moderators



  • Hi

    How to perform animation for image(.png files)
    I would like to make the image visibility to false after some duration


  • Moderators

    Please, read the documentation, it is really well-written...

    Here:
    @
    Image {
    id: myImg
    source: "somesource.png"
    opacity: 1.0
    NumberAnimation on opacity { duration: 2000 }
    }
    @

    Then simply change opacity to 0.0 somewhere in your code.



  • Hi

    I actually tried to set the visible property after the number animation , but its not working.

    @Image {

        property int currentImage ;
        id: startup
        x: 46
        y: 64
        width: 223
        height: 175
        z: 5
        rotation: 0
        scale: 0.7
        fillMode: Image.PreserveAspectCrop
        clip: true
        source: "images/start.png"
        visible: true
        opacity : 1.0
        NumberAnimation on opacity { to: 0.0; duration: 4000 }
        NumberAnimation on scale { to: 1.3; duration: 4000 }
        Component.onCompleted:{ start_menu.visible = true}
    
    
    
    }
    

    Image {
    id: start_menu
    source: "images/Setting.png"
    anchors.bottom: stop.bottom
    anchors.bottomMargin: -210
    anchors.left : stop.down
    anchors.leftMargin: 10
    visible: false
    }@

    I tried to display startup image to be displayed first and get invisible and then start_menu to be diaplayed



  • But both the images are getting displayed together and startup get invisible due to number animation


  • Moderators

    QML is declarative. It means that when you add a NumberAnimation it will only work then the property is changed. It is not imperative code like in C++ that tells the engine to run the animation. If you want it to run, you need to trigger it by running start(), or changing the value in question.

    I don't have time now to explain fully, here is a piece of code that will work a bit, but it is not a full solution to your problem. Better use states to achieve it.
    @
    visible: true
    opacity : 1.0
    NumberAnimation on opacity { duration: 4000 }
    NumberAnimation on scale { duration: 4000
    onRunningChanged: {
    if (!running)
    start_menu.visible = true;
    }
    }
    Component.onCompleted:{
    opacity = 0.0; // this should start the animation
    scale = 1.3;
    }
    @



  • Hi
    Thanks for your reply

    I ma getting error as below

    Cannot assign to non-existent property "onRunningChanged"
    onRunningChanged: {


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.