Fix layout in the qml hmi for the water pump example

Adding the slider to Tank2Unit produces two tanks of different width.
Putting the slider into a separate column and assigning the height of
the first tank to Layout.preferredHeight fixes this.

Change-Id: I716105963856f5a6727051e8fb6f261fb224a7de
Reviewed-by: Maurice Kalinowski <maurice.kalinowski@qt.io>
Reviewed-by: Frank Meerkoetter <frank.meerkoetter@basyskom.com>

3 files changed, 31 insertions, 28 deletions

diff --git a/examples/opcua/waterpump/qml-hmi/Tank1Unit.qml b/examples/opcua/waterpump/qml-hmi/Tank1Unit.qml
index a4df167..9709690 100644
--- a/examples/opcua/waterpump/qml-hmi/Tank1Unit.qml
+++ b/examples/opcua/waterpump/qml-hmi/Tank1Unit.qml
@@ -54,6 +54,8 @@ import QtQuick.Layouts 1.3
 import OpcUaMachineBackend 1.0
 
 Item {
+    property alias tankHeight: tank1.height
+
     ColumnLayout {
         anchors.fill: parent
         RowLayout {
diff --git a/examples/opcua/waterpump/qml-hmi/Tank2Unit.qml b/examples/opcua/waterpump/qml-hmi/Tank2Unit.qml
index ab17625..1195a31 100644
--- a/examples/opcua/waterpump/qml-hmi/Tank2Unit.qml
+++ b/examples/opcua/waterpump/qml-hmi/Tank2Unit.qml
@@ -64,35 +64,18 @@ Item {
                 uaBackend.flushTank2()
             }
         }
-        RowLayout {
+        Layout.fillHeight: true
+        Tank {
+            id: tank2
             Layout.fillHeight: true
-            Tank {
-                id: tank2
-                Layout.fillHeight: true
-                Layout.fillWidth: true
-                percentFilled: uaBackend.percentFilledTank2
-                Rectangle {
-                    color: uaBackend.tank2ValveState ? "#00BFFF" : "lightgrey"
-                    anchors.top: parent.bottom
-                    anchors.right: parent.right
-                    width: tank2.width / 10
-                    height: 40
-                }
-            }
-            Slider {
-                id: setpointSlider
-                Layout.fillHeight: true
-                height: tank2.height
-                enabled: uaBackend.connected && uaBackend.machineState === OpcUaMachineBackend.MachineState.Idle
-                from: 0
-                to: 100
-                value: uaBackend.tank2TargetPercent
-                live: false
-                stepSize: 1.0
-                orientation: Qt.Vertical
-                onValueChanged: {
-                    uaBackend.machineWriteTank2TargetPercent(value);
-                }
+            Layout.fillWidth: true
+            percentFilled: uaBackend.percentFilledTank2
+            Rectangle {
+                color: uaBackend.tank2ValveState ? "#00BFFF" : "lightgrey"
+                anchors.top: parent.bottom
+                anchors.right: parent.right
+                width: tank2.width / 10
+                height: 40
             }
         }
     }
diff --git a/examples/opcua/waterpump/qml-hmi/TankSimulation.qml b/examples/opcua/waterpump/qml-hmi/TankSimulation.qml
index a49bc31..3d58f28 100644
--- a/examples/opcua/waterpump/qml-hmi/TankSimulation.qml
+++ b/examples/opcua/waterpump/qml-hmi/TankSimulation.qml
@@ -50,6 +50,8 @@
 
 import QtQuick 2.10
 import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.3
+import OpcUaMachineBackend 1.0
 
 RowLayout {
     opacity: uaBackend.connected ? 1.0 : 0.25
@@ -63,5 +65,21 @@ RowLayout {
         Layout.fillHeight: true
         Layout.fillWidth: true
     }
+    Slider {
+        id: setpointSlider
+        Layout.fillHeight: false
+        Layout.preferredHeight: tank1unit.tankHeight
+        Layout.alignment: Qt.AlignBottom
+        enabled: uaBackend.connected && uaBackend.machineState === OpcUaMachineBackend.MachineState.Idle
+        from: 0
+        to: 100
+        value: uaBackend.tank2TargetPercent
+        live: false
+        stepSize: 1.0
+        orientation: Qt.Vertical
+        onValueChanged: {
+            uaBackend.machineWriteTank2TargetPercent(value);
+        }
+    }
     ValueDisplay {}
 }