Dynamic/stochastic object allocation in QML

Question

I am currently trying to do the following in QML, simultaneously:

• do dynamic loading of Objects previously created a separate file;
• by doing what is described above, select objects stochastically

For that I am, very basically, using the code below:

import QtQuick 2.0

Item {
    id: randomMIDIkeyboardSelector;
    property var random: 0;

    function randomSelection(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      var out = Math.floor(Math.random() * (max - min + 1)) + min;
      console.log(parseFloat(out));
      return parseFloat(out);
    }

    function createMidiKeyboard(itemToBeInstantiated) {
        var component = Qt.createComponent("MidiKeyboard.qml");
        var midiKeyboard = component.createObject(itemToBeInstantiated, {});
    }

    function randomPicking() {
        random = parseInt(randomSelection(1, 8));
        if(random == 1) {createMidiKeyboard(MidiKeyboard);}
        if(random == 2) {createMidiKeyboard(MidiKeyboard2);}
        if(random == 3) {createMidiKeyboard(MidiKeyboard3);}
        if(random == 4) {createMidiKeyboard(MidiKeyboard4);}
        if(random == 5) {createMidiKeyboard(MidiKeyboard5);}
        if(random == 6) {createMidiKeyboard(MidiKeyboard6);}
        if(random == 7) {createMidiKeyboard(MidiKeyboard7);}
        if(random == 8) {createMidiKeyboard(Midikeyboard8);}
        return random;
    }

    Component.onCompleted: randomPicking();

}

Basically, I’m creating a random number and using a javascript function to create objects dynamically, that I urge from a if statement

However, when I load the file into the main document, the desired user interface object is not created in the window

To better understand the content of the project I suggest, if you are interested, to consult the link below:

https://github.com/tiagmoraismorgado/TMM_QML_UI_UX_FRAMEWORK_WIP

Answer 1

first you have to give a size to the component

2º The createComponent operation is asynchronous by default. So you have to wait for the component to be loaded.

3º You need to define the relative or absolute path of the components you want to load because they are in different folders/paths.

Here is my fix:

import QtQuick 2.0

Item {
    id: randomMIDIkeyboardSelector;
    anchors.fill: parent  // fit item size to parent size 
    property var random: 0;

    function randomSelection(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        var out = Math.floor(Math.random() * (max - min + 1)) + min;
        console.log(parseFloat(out));
        return parseFloat(out);
    }

    function createMidiKeyboard(itemToBeInstantiated) {
        var component = Qt.createComponent(itemToBeInstantiated)
        if (component.status === Component.Ready) {
            console.log("Component created with success!! ")
            var midiKeyboard = component.createObject(randomMIDIkeyboardSelector, {});
        }
        else if (component.status === Component.Error) {
            console.log("Error loading component: ", component.errorString())
        }
    }

    function randomPicking() {
        random = parseInt(randomSelection(1, 8));
        if(random == 1) {createMidiKeyboard("qrc:/_files_qml/_MIDIKeyboards/MidiKeyboard.qml");}
        if(random == 2) {createMidiKeyboard("qrc:/_files_qml/_MIDIKeyboards/MidiKeyboard2.qml");}
        if(random == 3) {createMidiKeyboard("qrc:/_files_qml/_MIDIKeyboards/MidiKeyboard3.qml");}
        if(random == 4) {createMidiKeyboard("qrc:/_files_qml/_MIDIKeyboards/MidiKeyboard4.qml");}
        if(random == 5) {createMidiKeyboard("qrc:/_files_qml/_MIDIKeyboards/MidiKeyboard5.qml");}
        if(random == 6) {createMidiKeyboard("qrc:/_files_qml/_MIDIKeyboards/MidiKeyboard6.qml");}
        if(random == 7) {createMidiKeyboard("qrc:/_files_qml/_MIDIKeyboards/MidiKeyboard7.qml");}
        if(random == 8) {createMidiKeyboard("qrc:/_files_qml/_MIDIKeyboards/Midikeyboard8.qml");}
        return random;
    }

    Component.onCompleted: {
        randomPicking();
    }

}

Additionally I also needed to add in the main file (instantiationTest.qml) the following Imports:

import QtQuick 2.0
import QtQuick.Window 2.0
import "qrc:/_files_qml/_Buttons/"
import "qrc:/_files_qml/_MIDIKeyboards/"
import "qrc:/_files_qml/_Stochastic Selectors/"

Window {
  ....
}

I hope I’ve helped.

Answer 2

in my case I put the code like this:

import Qtquick 2.0

Item { id: randomMIDIkeyboardSelector; Anchors.Fill: Parent //fit item size to Parent size Property var Random: 0;

function randomSelection(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    var out = Math.floor(Math.random() * (max - min + 1)) + min;
    console.log(parseFloat(out));
    return parseFloat(out);
}

function createMidiKeyboard(itemToBeInstantiated) {
    var component = Qt.createComponent(itemToBeInstantiated)
    if (component.status === Component.Ready) {
        console.log("Component created with success!! ")
        var midiKeyboard = component.createObject(randomMIDIkeyboardSelector, {});
    }
    else if (component.status === Component.Error) {
        console.log("Error loading component: ", component.errorString())
    }
}

function randomPicking() {
    random = parseInt(randomSelection(1, 8));
    if(random == 1) {createMidiKeyboard("./../_MIDIKeyboards/MidiKeyboard.qml");}
    if(random == 2) {createMidiKeyboard("./../_MIDIKeyboards/MidiKeyboard2.qml");}
    if(random == 3) {createMidiKeyboard("./../_MIDIKeyboards/MidiKeyboard3.qml");}
    if(random == 4) {createMidiKeyboard("./../_MIDIKeyboards/MidiKeyboard4.qml");}
    if(random == 5) {createMidiKeyboard("./../_MIDIKeyboards/MidiKeyboard5.qml");}
    if(random == 6) {createMidiKeyboard("./../_MIDIKeyboards/MidiKeyboard6.qml");}
    if(random == 7) {createMidiKeyboard("./../_MIDIKeyboards/MidiKeyboard7.qml");}
    if(random == 8) {createMidiKeyboard("./../_MIDIKeyboards/Midikeyboard8.qml");}
    return random;
}

Component.onCompleted: {
    randomPicking();
}

}

import Qtquick 2.0 import Qtquick.Window 2.0 import "_Buttons/" import "_Midikeyboards/" import "_Stochasticselectors/" import "_Sliders/" import "_imgButtons/"

Window {

id: root
width: 640
height: 320
minimumWidth: 640
maximumWidth: 640
minimumHeight: 320
maximumHeight: 320
visible: true
title: qsTr("instantiationTest")
color: "black"

    // Button1 {}            // the button looks good and is working fine, feedback is welcome
    // Button1_1 {}          // the button looks good and is working fine, feedback is welcome
    // Button2 {}            // the button looks good and is working fine, feedback is welcome
    // Button2_2 {}            // the button looks good and is working fine, feedback is welcome
    // Button3 {}            // the button is working fine, but looking terribly. feedback is welcome
    // Button3_3 {}
    // Button4 {}            // the button is working fine, but looking terribly. feedback is welcome
    // Button4_4 {}
    // Slider1 {}            // slider looks good but is buggy and faulty. feedback is welcome
    // Toggle1 {}            // toggle looks good nad is working fine. feedback is welcome
    // Toggle2 {}            // toggle looks good nad is working fine. feedback is welcome
    // Radial {}             // radial looks good and is working fine. feedback is welcome
    // Switch {}             // switch works fine. images need to be treated in photoshop, to keep black background and same size. feedback is welcome
    // UpDownArrows {}       // working and looking fine. needs some twweaking within dimensions cropping
    // PlayStop {}           // looks and works perfectly.feedback is welcome, however
    // Click1 {}             // looks and works perfectly. needs mouseX and mouseY coordinates
    // Click2 {}             // looks and works perfectly. needs mouseX and mouseY coordinates
    // MidiKeyboard {}
    // MidiKeyboard2 {}
    // MidiKeyboard4 {}
    // MidiKeyboard5 {}
    // MidiKeyboard6 {}
    // MidiKeyboard7 {}
    // Midikeyboard8 {}
    // MidiKeyboardRandomSelect {}
    // ButtonStochasticSelector {}
    // ToggleStochasticSelector {}
    // MasterStochasticallocation {}

}