Reworked the way qml create sliders

Use the qml MVC to populate a ListView with components based on a template
VolumeSlider. Should now handle potential disconnections, volume changes
by third-party and also fix the issue where sliders are set to 0 at
startup.

Change-Id: I2961d5a1584a121c473ece253faa90a747c64445
Signed-off-by: Loïc Collignon <loic.collignon@iot.bzh>

1 files changed, 41 insertions, 97 deletions

diff --git a/app/Mixer.qml b/app/Mixer.qml
index 73587a5..455743a 100644
--- a/app/Mixer.qml
+++ b/app/Mixer.qml
@@ -21,101 +21,45 @@ import AGL.Demo.Controls 1.0
 import Mixer 1.0
 
 ApplicationWindow {
-    // ----- Signals
-
-    // ----- Properties
-    property Component volumeSlider
-
-    // ----- Setup
-    id: root
-    width: container.width * container.scale
-    height: container.height * container.scale
-
-    // ----- Childs
-    Mixer {
-        // ----- Signals
-        signal sliderVolumeChanged(string role, int value)
-
-        // ----- Properties
-
-        // ----- Setup
-        id: mixer
-
-        onSliderVolumeChanged: {
-            console.log("======role: " + role + ", volume: " + value);
-            mixer.setVolume(role, value);
-        }
-
-        Component.onCompleted: {
-            var vs = Qt.createComponent("VolumeSlider.qml");
-            if (vs.status !== Component.Ready) {
-                console.log("Failed to load the VolumeSlider.qml component: " + vs.errorString());
-            }
-            root.volumeSlider = vs
-            mixer.open(bindingAddress);
-        }
-
-        onRolesChanged: {
-            // Remove existing sliders
-            for(var i = sliders.children.length; i > 0 ; --i) {
-                console.log("destroying: " + i);
-                sliders.children[i-1].destroy();
-            }
-
-            // Add slider for each role
-            for(var j = 0; j < mixer.roles.length; ++j) {
-                addSlider(mixer.roles[j]);
-            }
-        }
-
-        onVolumeChanged: {
-            console.log("onVolumeChanged(\"" + name + "\", " + value + ")");
-            for(var i = 0; i < sliders.children.length ; i++) {
-                var sld = sliders.children[i];
-                console.log(i + " - Slider found:" + sld + "[\"" + sld.role + "\"] = " + sld.value);
-                if (sld.role === name) {
-                    sld.value = value;
-                }
-            }
-        }
-
-        // ----- Functions
-        function addSlider(name) {
-            var sld = root.volumeSlider.createObject(sliders)
-            sld.role = name
-            sld.onSliderValueChanged.connect(mixer.sliderVolumeChanged)
-            mixer.getVolume(name); // Update volume
-        }
-
-        function deleteChilds(item) {
-            for(var i = item.children.length; i > 0 ; i--) {
-                deleteChilds(item.children[i-1]);
-            }
-            item.destroy();
-        }
-    }
-
-    Item {
-        id: container
-        anchors.centerIn: parent
-        width: 1080
-        height: 1487
-        scale: screenInfo.scale_factor()
-
-        Label {
-            id: title
-            font.pixelSize: 48
-            text: "Mixer"
-            anchors.horizontalCenter: parent.horizontalCenter
-        }
-
-        ColumnLayout {
-            id: sliders
-            anchors.margins: 80
-            anchors.top: title.bottom
-            anchors.left: parent.left
-            anchors.right: parent.right
-        }
-    }
+	// ----- Signals
+
+	// ----- Properties
+	property Component volumeSlider
+
+	// ----- Setup
+	id: root
+	width: 1080 * roles.scale
+	height: 1487 * roles.scale
+
+	// ----- Childs
+	Label {
+		id: title
+		font.pixelSize: 48
+		text: "Mixer"
+		anchors.horizontalCenter: parent.horizontalCenter
+	}
+
+	Mixer {
+		signal sliderVolumeChanged(string role, int value)
+
+		id: mixer
+
+		Component.onCompleted: {
+			mixer.open(bindingAddress);
+		}
+	}
+
+	ListView {
+		id: roles
+		model: mixer.roles
+		scale: scale_factor
+
+		anchors.margins: 80
+		anchors.top: title.bottom
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.bottom: parent.bottom
+
+		delegate: VolumeSlider {}
+	}
 }
-