From 90ff8382d477dc7fb06a330f9cfc1f0b8f0ac5de Mon Sep 17 00:00:00 2001 From: Tomi Korpipaa Date: Fri, 13 Jan 2023 09:35:51 +0200 Subject: Fix qmlspectrogram example for portrait mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Pick-to: 6.2 6.4 6.5 Fixes: QTBUG-110043 Change-Id: I8bff73b914b9cd657b2f2ac718120ca2c3a5f3f0 Reviewed-by: Kwanghyo Park Reviewed-by: Tomi Korpipää --- .../qmlspectrogram/qml/qmlspectrogram/main.qml | 147 ++++++++++++--------- 1 file changed, 85 insertions(+), 62 deletions(-) (limited to 'examples') diff --git a/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml b/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml index c6eec673..289f0df5 100644 --- a/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml +++ b/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml @@ -2,10 +2,9 @@ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only import QtQuick -import QtQuick.Layouts import QtQuick.Controls import QtQuick.Window -import QtDataVisualization 1.2 +import QtDataVisualization import "." Window { @@ -16,16 +15,18 @@ Window { height: 768 color: surfaceGraph.theme.windowColor + property bool portraitMode: width < height + Data { id: surfaceData } Item { id: surfaceView - width: mainview.width - height: mainview.height - anchors.top: mainview.top - anchors.left: mainview.left + anchors.top: buttons.bottom + anchors.left: parent.left + anchors.right: legend.left + anchors.bottom: parent.bottom ColorGradient { id: surfaceGradient @@ -88,8 +89,7 @@ Window { Surface3D { //! [7] id: surfaceGraph - width: surfaceView.width - height: surfaceView.height + anchors.fill: parent shadowQuality: AbstractGraph3D.ShadowQualityNone selectionMode: AbstractGraph3D.SelectionSlice | AbstractGraph3D.SelectionItemAndColumn @@ -138,26 +138,29 @@ Window { //! [0] } - RowLayout { - id: buttonLayout + Item { + id: buttons anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right - opacity: 0.5 + height: portraitMode ? (polarToggle.height + 10) * 3 : polarToggle.height + 30 + anchors.margins: 10 //! [3] Button { id: polarToggle - Layout.fillWidth: true - Layout.fillHeight: true - text: "Switch to polar" + anchors.margins: 5 + anchors.left: parent.left + anchors.top: parent.top + width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5 + text: "Switch to\npolar" onClicked: { if (surfaceGraph.polar === false) { surfaceGraph.polar = true - text = "Switch to cartesian" + text = "Switch to\ncartesian" } else { surfaceGraph.polar = false - text = "Switch to polar" + text = "Switch to\npolar" } } } @@ -165,9 +168,11 @@ Window { Button { id: orthoToggle - Layout.fillWidth: true - Layout.fillHeight: true - text: "Switch to perspective" + anchors.margins: 5 + anchors.left: polarToggle.right + anchors.top: parent.top + width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5 + text: "Switch to\nperspective" onClicked: { if (surfaceGraph.orthoProjection === true) { surfaceGraph.orthoProjection = false; @@ -175,7 +180,7 @@ Window { yAxis.labelAutoRotation = 30 zAxis.labelAutoRotation = 30 customInputHandler.rotationEnabled = true - text = "Switch to orthographic" + text = "Switch to\northographic" } else { surfaceGraph.orthoProjection = true; surfaceGraph.scene.activeCamera.cameraPreset = Camera3D.CameraPresetDirectlyAbove @@ -184,16 +189,18 @@ Window { yAxis.labelAutoRotation = 0 zAxis.labelAutoRotation = 0 customInputHandler.rotationEnabled = false - text = "Switch to perspective" + text = "Switch to\nperspective" } } } Button { id: flipGridToggle - Layout.fillWidth: true - Layout.fillHeight: true - text: "Toggle axis grid on top" + anchors.margins: 5 + anchors.left: portraitMode ? parent.left : orthoToggle.right + anchors.top: portraitMode ? orthoToggle.bottom : parent.top + width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5 + text: "Toggle axis\ngrid on top" onClicked: { if (surfaceGraph.flipHorizontalGrid === true) { surfaceGraph.flipHorizontalGrid = false; @@ -205,9 +212,11 @@ Window { Button { id: labelOffsetToggle - Layout.fillWidth: true - Layout.fillHeight: true - text: "Toggle radial label position" + anchors.margins: 5 + anchors.left: flipGridToggle.right + anchors.top: portraitMode ? orthoToggle.bottom : parent.top + width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5 + text: "Toggle radial\nlabel position" visible: surfaceGraph.polar onClicked: { if (surfaceGraph.radialLabelOffset >= 1.0) { @@ -220,9 +229,16 @@ Window { Button { id: surfaceGridToggle - Layout.fillWidth: true - Layout.fillHeight: true - text: "Toggle surface grid" + anchors.margins: 5 + anchors.left: portraitMode ? (labelOffsetToggle.visible ? parent.left + : flipGridToggle.right) + : (labelOffsetToggle.visible ? labelOffsetToggle.right + : flipGridToggle.right) + anchors.top: portraitMode ? (labelOffsetToggle.visible ? labelOffsetToggle.bottom + : orthoToggle.bottom) + : parent.top + width: portraitMode ? (mainview.width - 35) / 2 : (mainview.width - 50) / 5 + text: "Toggle\nsurface grid" visible: !surfaceGraph.orthoProjection onClicked: { if (surfaceSeries.drawMode & Surface3DSeries.DrawWireframe) { @@ -232,46 +248,53 @@ Window { } } } - } - Rectangle { + Item { id: legend - anchors.margins: 20 anchors.bottom: parent.bottom - anchors.top: buttonLayout.bottom + anchors.top: buttons.bottom anchors.right: parent.right - border.color: "black" - border.width: 1 - width: 50 - rotation: 180 - gradient: Gradient { - GradientStop { position: 0.0; color: "black" } - GradientStop { position: 0.2; color: "red" } - GradientStop { position: 0.5; color: "blue" } - GradientStop { position: 0.8; color: "yellow" } - GradientStop { position: 1.0; color: "white" } + width: portraitMode ? 100 : 125 + + Rectangle { + id: gradient + anchors.margins: 20 + anchors.bottom: legend.bottom + anchors.top: legend.top + anchors.right: legend.right + border.color: "black" + border.width: 1 + width: portraitMode ? 25 : 50 + rotation: 180 + gradient: Gradient { + GradientStop { position: 0.0; color: "black" } + GradientStop { position: 0.2; color: "red" } + GradientStop { position: 0.5; color: "blue" } + GradientStop { position: 0.8; color: "yellow" } + GradientStop { position: 1.0; color: "white" } + } } - } - Text { - anchors.verticalCenter: legend.bottom - anchors.right: legend.left - anchors.margins: 2 - text: surfaceGraph.axisY.min + "%" - } + Text { + anchors.verticalCenter: gradient.bottom + anchors.right: gradient.left + anchors.margins: 2 + text: surfaceGraph.axisY.min + "%" + } - Text { - anchors.verticalCenter: legend.verticalCenter - anchors.right: legend.left - anchors.margins: 2 - text: (surfaceGraph.axisY.max + surfaceGraph.axisY.min) / 2 + "%" - } + Text { + anchors.verticalCenter: gradient.verticalCenter + anchors.right: gradient.left + anchors.margins: 2 + text: (surfaceGraph.axisY.max + surfaceGraph.axisY.min) / 2 + "%" + } - Text { - anchors.verticalCenter: legend.top - anchors.right: legend.left - anchors.margins: 2 - text: surfaceGraph.axisY.max + "%" + Text { + anchors.verticalCenter: gradient.top + anchors.right: gradient.left + anchors.margins: 2 + text: surfaceGraph.axisY.max + "%" + } } } -- cgit v1.2.3