[Interest] QML introspection and dynamic component creation

[gareth.stockwell at accenture.com]

I'm working on a piece of UI which would be straightforward to implement using an imperative toolkit, but I'm struggling to understand how to express it declaratively.  Hopefully one of the QML gurus out there can show me the way.

The application (*) is a demo of how to apply post-processing effects to video/viewfinder content, using shader programs.  Each effect has zero, one or more parameters, which consist of a real value and a name.  When a given effect is selected, the application should display the appropriate number of sliders, each labeled with the name of the parameter, and connect up each slider to the corresponding parameter value.  The problem is that, while I can express the list of parameters in QML, I can't figure out a clean way of creating and connecting the slider controls.

Here are some code snippets which should make this a bit clearer:

    // Parameter.qml
    QtObject {
       property string name
       property real value: 0.5
   }

   // WobbleEffect.qml
   ShaderEffect {
       Parameter {
            id: speedParameter
            name: "speed"
        }

        Parameter {
            id: amplitudeParameter
            name: "amplitude"
        }

        // Define names which will be mapped onto shader uniforms
        property alias speed: speedParameter.value
        property alias amplitude: amplitudeParameter.value

        fragmentShader: "
            uniform float speed;
            uniform float amplitude;
            // ...
        "
   }

   // Slider.qml
   Rectangle {
       property string label
       property real value
       // ...
   }

   // ParameterPanel.qml
   Rectangle {
       property Item effect
   }

When the user selects Wobble from the list of effects, a Loader is used to create a WobbleEffect item, and the id of this item is assigned to the effect property of the ParameterPanel.  What I then want to happen is for sliders to be created and connected, so that we end up with the equivalent of the following:

   ParameterPanel {
       Slider {
            id: speedSlider
            anchors { top: parent.top; left: parent.left; right: parent.right }
            width: parent.width
            label: effect.speedParameter.name
            value: effect.speedParameter.value
            onValueChanged: effect.speedParameter.value = value
        }

       Slider {
           id: amplitudeSlider
            anchors { top: speedSlider.bottom; left: parent.left; right: parent.right }
            width: parent.width
            label: effect.amplitudeParameter.name
            value: effect.amplitudeParameter.value
            onValueChanged: effect.amplitudeParameter.value = value
        }
   }

I feel that this should be possible, using a combination of the effect.children list, some JavaScript and Qt.createComponent(), but I can't quite see how to put these together.  Can anyone shed some light?

(*) The app has recently been added to QtMobility (demos/video/qmlvideofx<http://qt.gitorious.org/qt-mobility/qt-mobility/trees/master/demos/video/qmlvideofx>) and I've just about finished porting it to Qt5<https://bugreports.qt.nokia.com/browse/QTBUG-23118> for contribution to the QtMultimedia module.  The code as it stands does dynamically create sliders, and connects them up to the appropriate ShaderEffect properties, but the way this is done is not very clean - hence this message.



________________________________
Subject to local law, communications with Accenture and its affiliates including telephone calls and emails (including content), may be monitored by our systems for the purposes of security and the assessment of internal compliance with Accenture policy.
______________________________________________________________________________________

www.accenture.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20111216/2d6b5baf/attachment.html>