Dynamic generation of images using JavaScript in QML

This article describes how to use JavaScript to animate a screen. In our previous example, "How to use QML to dynamically generate component to complete our balloon game (2)" has been described in the dynamic production qml. Maybe the project is more duplicated, and now I'm going to use some simple examples to illustrate that it's more intuitive. More instructions can be found in the article "Dynamic QML Object Creation from JavaScript".

1) Create our dynamic QML file
This file will be used for dynamic production by JavaScript. This is a template although the properties of each generated object may be different.
Dynamic-image.qml

Import QtQuick 2.0Image {    width:400    height:225    Source: "Images/image1.jpg"    Image {        id:overlay        anchors.fill:parent        Source: "Images/image2.jpg"        opacity:0;        Behavior on opacity {numberanimation {duration:300}}    }    mousearea {        anchors.fill:parent        onclicked : {            if (overlay.opacity = = = 0)                overlay.opacity = 1;            else                overlay.opacity = 0;}}}    

This is a very simple qml file. It shows a screen that, when we click on the screen, the screen in the overlay will be cross-displayed or hidden.


2) creating JavaScript that dynamically produces QML object
Create-component.js

var component;function createimageobject (x, y) {    component = qt.createcomponent ("dynamic-image.qml");    if (component.status = = = Component.ready | | component.status = = component.error)        finishcreation (x, y);    else        Component.statusChanged.connect (finishcreation);} function finishcreation (x, y) {    if (component.status = = = Component.ready)    {        var image = Component.createobject (Container, {"X": X, "y": Y, width:300, height:200});        if (image = = null)            console.log ("Error creating image");    }    else if (component.status = = = Component.error)        console.log ("Error Loading component:", component.errorstring ());}

This file is used to dynamically produce the QML Object we need. The template it uses is the "dynamic-image.qml" that we used in the previous section. We can set its positional parameters. Of course, we can also set other properties of it. The "container" here is where we want the QML object to be placed, that is, its "father".

3) call JavaScript in QML code to produce QML object

Import QtQuick 2.0import ubuntu.components 1.1import "Create-component.js" as imagecreator/*! \brief MainView with a Label and Button Elements.*/mainview {//ObjectName for functional testing purposes (autopilot- QT5) ObjectName: "MainView"//note!     ApplicationName needs to match the "name" field of the click Manifest ApplicationName: "Dynamicqml.liu-xiao-guo"/* The enables the application to change orientation when the device is rotated.    The default is False.    *///automaticorientation:true//Removes the old toolbar and enables new features of the new header. Usedeprecatedtoolbar:false Width:units.gu (Height:units.gu) Page {id:root title:i18n.tr ("DYNAMICQML") property int position:0 flickable {width:parent.width height:parent . Height Clip:true contentHeight:container.childrenRect.height Column {ID      : Container          Anchors.centerIn:parent}} Row {Anchors.bottom:parent.bottom Anchors.horizontalCenter:parent.horizontalCenter Anchors.bottomMargin:units.gu (1) SPACING:UNITS.G U (1) button {text: "Create New" onclicked: {imagecreator.cre                    Ateimageobject (0, root.position);                Root.position + = 200;                   }} button {text: "Create from String" onclicked: {                        var newObject = qt.createqmlobject (' Import QtQuick 2.0;                    Image {Source: "images/image3.jpg"; width:300; height:200} ', container, "DynamicSnippet1");                    newobject.x = 0;                Newobject.y = root.position;            }}} component.oncompleted: {imagecreator.createimageobject (0, 0); Root.positIon + = 200}} 

In the code above:

   button {                text: "Create New"                onclicked: {                    imagecreator.createimageobject (0, root.position);                    Root.position + + +;                }            }

This code is used to produce the QML Object we need and to place it where we need it. As we described in the previous section, we define a "container". Here is actually a column layout manager.
In addition, we can also use the code:

           button {                text: "Create from String"                onclicked: {                   var newObject = qt.createqmlobject (' Import QtQuick 2.0;< c11/>image {Source: "images/image3.jpg"; width:300; height:200} ',                        container, "DynamicSnippet1");                    newobject.x = 0;                    Newobject.y = root.position;                }            }

Using a string, use Qt.createqmlobject to create our Qml object. This is also a concise way.
To run our application:




We can use the buttons below the screen to dynamically produce our Qml object. In order to be able to delete the Qml object we produced.

4) Management of dynamic production QML object
We can destroy the already produced Qml object by using Destroy. To manage our object, let's create a Listmodel:

        Listmodel {            Id:objectsmodel        }

We can add our generated object in the following way:

function itemAdded (obj, source) {        objectsmodel.append ({"obj": obj, "source": Source})    }

So, whenever we create a new object, we also add it in:

       Row {            anchors.bottom:parent.bottom            anchors.horizontalCenter:parent.horizontalCenter            Anchors.bottomMargin:units.gu (1)            Spacing:units.gu (1)            button {                text: "Create New"                onclicked: {                    var image = Imagecreator.createimageobject (0, root.position);                    itemAdded (Image, "dynamic-image.qml");                    Root.position + + +;                }            }

Finally, we can destroy all the DYNAMIC-IMAGE.QML objects we have created by the following way.

            button {                text: "Clear objects"                onclicked: {while                    (Objectsmodel.count > 0) {                        objectsmodel.get (0 ). Obj.destroy ();                        Objectsmodel.remove (0);}}            

The top right of the image is displayed after pressing "Clear objects".

The source code for the entire project is: Git clone https://gitcafe.com/ubuntu/dynamicqml.git

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Dynamic generation of images using JavaScript in QML