How to assign image source during runtime in QML

subram_QT

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

sierdzio

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
}
@

subram_QT

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

sierdzio

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.

subram_QT

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.

sierdzio

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.

subram_QT

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"

sierdzio

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

or, to have everything in:

QT += core gui qml quick
@

subram_QT

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 ?

sierdzio

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
@

subram_QT

Thanks , i had added in .pro file

subram_QT

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.

sierdzio

See "this":http://www.youtube.com/watch?v=cOViDcYWNCI.

subram_QT

Hi

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

sierdzio

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.

subram_QT

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

subram_QT

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

sierdzio

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;
}
@

subram_QT

Hi
Thanks for your reply

I ma getting error as below

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