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
_______________________________________________
Interest mailing list
Interest@qt-project.org
http://lists.qt-project.org/mailman/listinfo/interest
