Improve output of multiple screen resolution

[apps/mixer.git] / app / Mixer.qml

diff --git a/app/Mixer.qml b/app/Mixer.qml
index 631eda5..73587a5 100644 (file)
--- a/app/Mixer.qml
+++ b/app/Mixer.qml
@@ -14,10 +14,6 @@
  * limitations under the License.
  */
 
-// BUG: ValueChanged event is raised by sliders when you are moving the caret, should be raised only when you release it.
-// TODO: Call mixer.setVolume(sliderName, Value) on value change
-// TODO: Call mixer.getVolume(sliderName) on load
-
 import QtQuick 2.6
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
@@ -25,83 +21,101 @@ 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: {
-            mixer.open(bindingAddress)
+            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()
+                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])
+                addSlider(mixer.roles[j]);
             }
         }
 
-        function addSlider(name) {
-            Qt.createQmlObject("
-import QtQuick.Layouts 1.1
-import QtQuick.Controls 2.0
-RowLayout {
-    property int value
-    id: slider_" + name + "
-            Layout.minimumHeight: 75
-            Label {
-                font.pixelSize: 24
-                text: \"" + name+ "\"
-                Layout.minimumWidth: 150
-            }
-            Label {
-                id: slider_" + name + "_textvalue
-                font.pixelSize: 24
-                text: \"0 %\"
-            }
-            Slider {
-                id: slider_" + name + "_slider
-                Layout.fillWidth: true
-                from: 0
-                to: 100
-                stepSize: 1
-                snapMode: Slider.SnapOnRelease
-                onValueChanged: {
-                    slider_" + name + "_textvalue.text = value + \" %\"
-                    mixer.setVolume(\"" + name + "\", value)
-                }
-                               Component.objectName: {
-                    mixer.getVolume(\"" + name + "\")
+        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;
                 }
             }
-        }", sliders, "volumeslider")
+        }
+
+        // ----- 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])
+                deleteChilds(item.children[i-1]);
             }
-            item.destroy()
+            item.destroy();
         }
     }
 
-    Label {
-        id: title
-        font.pixelSize: 48
-        text: "Mixer"
-        anchors.horizontalCenter: parent.horizontalCenter
-    }
+    Item {
+        id: container
+        anchors.centerIn: parent
+        width: 1080
+        height: 1487
+        scale: screenInfo.scale_factor()
 
-    ColumnLayout {
-        id: sliders
-        anchors.margins: 80
-        anchors.top: title.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
+        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
+        }
     }
 }