From 7ceb6c1a126ff5093348d6ce2ad06b535949cdd7 Mon Sep 17 00:00:00 2001 From: dogmaphobic Date: Thu, 29 Oct 2015 15:49:17 -0400 Subject: [PATCH] Scaling UI Elements --- src/FlightDisplay/FlightDisplayView.qml | 9 +-- .../FlightDisplayViewWidgets.qml | 10 ++-- src/FlightMap/Widgets/QGCAttitudeWidget.qml | 2 +- src/FlightMap/Widgets/QGCCompassWidget.qml | 6 +- src/FlightMap/Widgets/QGCInstrumentWidget.qml | 58 ++++++++++--------- src/FlightMap/Widgets/QGCPitchIndicator.qml | 3 +- src/QmlControls/DropButton.qml | 4 +- src/QmlControls/RoundButton.qml | 4 +- src/QmlControls/ScreenTools.qml | 6 +- src/ui/MainWindow.qml | 6 +- 10 files changed, 55 insertions(+), 53 deletions(-) diff --git a/src/FlightDisplay/FlightDisplayView.qml b/src/FlightDisplay/FlightDisplayView.qml index e14b4f98e..7734fe120 100644 --- a/src/FlightDisplay/FlightDisplayView.qml +++ b/src/FlightDisplay/FlightDisplayView.qml @@ -80,7 +80,7 @@ Item { property var _flightVideo: null property var _savedZoomLevel: 0 - property real _pipSize: ScreenTools.isAndroid ? ScreenTools.defaultFontPixelSize * (8) : ScreenTools.defaultFontPixelSize * (9) + property real _pipSize: mainWindow.width * 0.2 FlightDisplayViewController { id: _controller } @@ -132,16 +132,13 @@ Item { anchors.margins: ScreenTools.defaultFontPixelHeight anchors.left: parent.left anchors.bottom: parent.bottom - height: _pipSize - width: _pipSize * (16/9) + width: _pipSize + height: _pipSize * (9/16) color: "#000010" - border.width: 4 - radius: 4 border.color: _isBackgroundDark ? Qt.rgba(1,1,1,0.75) : Qt.rgba(0,0,0,0.75) Loader { id: pipLoader anchors.fill: parent - anchors.margins: 2 onLoaded: { if(_mainIsMap) { _flightVideo = item diff --git a/src/FlightDisplay/FlightDisplayViewWidgets.qml b/src/FlightDisplay/FlightDisplayViewWidgets.qml index bd082a88d..0fec4f8ef 100644 --- a/src/FlightDisplay/FlightDisplayViewWidgets.qml +++ b/src/FlightDisplay/FlightDisplayViewWidgets.qml @@ -35,8 +35,6 @@ import QGroundControl.Palette 1.0 import QGroundControl.Vehicle 1.0 import QGroundControl.FlightMap 1.0 -/// This component is used to delay load the items which are direct children of the -/// FlightDisplayViewControl. Item { readonly property string _InstrumentVisibleKey: "IsInstrumentPanelVisible" @@ -84,7 +82,7 @@ Item { anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter visible: _isInstrumentVisible - size: ScreenTools.defaultFontPixelSize * (9) + size: mainWindow.width * 0.15 active: _activeVehicle != null heading: _heading rollAngle: _roll @@ -124,7 +122,7 @@ Item { anchors.fill: parent onClicked: { _isInstrumentVisible = true - QGroundControl.saveBoolGlobalSetting(_InstrumentVisibleKey, false) + QGroundControl.saveBoolGlobalSetting(_InstrumentVisibleKey, true) } } } @@ -213,7 +211,7 @@ Item { //-- Zoom Map In RoundButton { id: mapZoomPlus - visible: _mainIsMap + visible: _mainIsMap && !ScreenTools.isTinyScreen buttonImage: "/qmlimages/ZoomPlus.svg" exclusiveGroup: _dropButtonsExclusiveGroup z: QGroundControl.zOrderWidgets @@ -227,7 +225,7 @@ Item { //-- Zoom Map Out RoundButton { id: mapZoomMinus - visible: _mainIsMap + visible: _mainIsMap && !ScreenTools.isTinyScreen buttonImage: "/qmlimages/ZoomMinus.svg" exclusiveGroup: _dropButtonsExclusiveGroup z: QGroundControl.zOrderWidgets diff --git a/src/FlightMap/Widgets/QGCAttitudeWidget.qml b/src/FlightMap/Widgets/QGCAttitudeWidget.qml index fa2801c99..d6e488bd2 100644 --- a/src/FlightMap/Widgets/QGCAttitudeWidget.qml +++ b/src/FlightMap/Widgets/QGCAttitudeWidget.qml @@ -90,7 +90,7 @@ Item { QGCPitchIndicator { id: pitchWidget visible: root.showPitch - size: root.size * 0.65 + size: root.size * 0.5 anchors.verticalCenter: parent.verticalCenter pitchAngle: _pitchAngle rollAngle: _rollAngle diff --git a/src/FlightMap/Widgets/QGCCompassWidget.qml b/src/FlightMap/Widgets/QGCCompassWidget.qml index 28fc249b5..d10a23b14 100644 --- a/src/FlightMap/Widgets/QGCCompassWidget.qml +++ b/src/FlightMap/Widgets/QGCCompassWidget.qml @@ -38,9 +38,11 @@ Item { property bool active: false ///< true: actively connected to data provider, false: show inactive control property real heading: 0 - property real size: ScreenTools.defaultFontPixelSize * (10) + property real size: _defaultSize - property int _fontSize: ScreenTools.defaultFontPixelSize * 0.8 + property real _defaultSize: ScreenTools.defaultFontPixelSize * (10) + property real _sizeRatio: ScreenTools.isTinyScreen ? (size / _defaultSize) * 0.5 : size / _defaultSize + property int _fontSize: ScreenTools.defaultFontPixelSize * _sizeRatio width: size height: size diff --git a/src/FlightMap/Widgets/QGCInstrumentWidget.qml b/src/FlightMap/Widgets/QGCInstrumentWidget.qml index 0dfef8412..d2575e688 100644 --- a/src/FlightMap/Widgets/QGCInstrumentWidget.qml +++ b/src/FlightMap/Widgets/QGCInstrumentWidget.qml @@ -23,7 +23,7 @@ This file is part of the QGROUNDCONTROL project /** * @file - * @brief QGC Compass Widget + * @brief QGC Fly View Widgets * @author Gus Grubba */ @@ -44,19 +44,23 @@ Item { property real altitude: 0 property real groundSpeed: 0 property real airSpeed: 0 - property real size: ScreenTools.defaultFontPixelSize * (10) + property real size: _defaultSize property bool isSatellite: false property bool active: false - property bool _isVisible: true + property real _defaultSize: ScreenTools.defaultFontPixelSize * (9) + + property real _sizeRatio: ScreenTools.isTinyScreen ? (size / _defaultSize) * 0.5 : size / _defaultSize + property real _bigFontSize: ScreenTools.defaultFontPixelSize * 2.5 * _sizeRatio + property real _normalFontSize:ScreenTools.defaultFontPixelSize * 1.5 * _sizeRatio + property real _labelFontSize: ScreenTools.defaultFontPixelSize * 0.75 * _sizeRatio //-- Instrument Panel Rectangle { id: instrumentPanel - height: instruments.height + ScreenTools.defaultFontPixelSize + height: instruments.height + (size * 0.05) width: root.size radius: root.size / 2 - visible: _isVisible color: isSatellite ? Qt.rgba(1,1,1,0.75) : Qt.rgba(0,0,0,0.75) anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter @@ -68,7 +72,7 @@ Item { //-- Attitude Indicator QGCAttitudeWidget { id: attitude - size: parent.width * 0.9 + size: parent.width * 0.95 active: root.active anchors.horizontalCenter: parent.horizontalCenter } @@ -80,16 +84,16 @@ Item { anchors.horizontalCenter: parent.horizontalCenter } QGCLabel { - text: "Altitude" - font.pixelSize: ScreenTools.defaultFontPixelSize * 0.75 + text: "Altitude (m)" + font.pixelSize: _labelFontSize width: parent.width - height: ScreenTools.defaultFontPixelHeight * 0.5 + height: _labelFontSize color: isSatellite ? "black" : "white" horizontalAlignment: TextEdit.AlignHCenter } QGCLabel { text: altitude < 10000 ? altitude.toFixed(1) : altitude.toFixed(0) - font.pixelSize: ScreenTools.defaultFontPixelSize * 2.5 + font.pixelSize: _bigFontSize font.weight: Font.DemiBold width: parent.width color: isSatellite ? "black" : "white" @@ -101,25 +105,25 @@ Item { width: parent.width * 0.9 color: isSatellite ? Qt.rgba(0,0,0,0.25) : Qt.rgba(1,1,1,0.25) anchors.horizontalCenter: parent.horizontalCenter - visible: airSpeed <= 0 + visible: airSpeed <= 0 && !ScreenTools.isTinyScreen } QGCLabel { - text: "Ground Speed" - font.pixelSize: ScreenTools.defaultFontPixelSize * 0.75 + text: "Ground Speed (km/h)" + font.pixelSize: _labelFontSize width: parent.width - height: ScreenTools.defaultFontPixelHeight * 0.75 + height: _labelFontSize color: isSatellite ? "black" : "white" horizontalAlignment: TextEdit.AlignHCenter - visible: airSpeed <= 0 + visible: airSpeed <= 0 && !ScreenTools.isTinyScreen } QGCLabel { - text: groundSpeed.toFixed(1) - font.pixelSize: ScreenTools.defaultFontPixelSize * 1.25 + text: (groundSpeed * 3.6).toFixed(1) + font.pixelSize: _normalFontSize font.weight: Font.DemiBold width: parent.width color: isSatellite ? "black" : "white" horizontalAlignment: TextEdit.AlignHCenter - visible: airSpeed <= 0 + visible: airSpeed <= 0 && !ScreenTools.isTinyScreen } //-- Air Speed Rectangle { @@ -127,24 +131,24 @@ Item { width: parent.width * 0.9 color: isSatellite ? Qt.rgba(0,0,0,0.25) : Qt.rgba(1,1,1,0.25) anchors.horizontalCenter: parent.horizontalCenter - visible: airSpeed > 0 + visible: airSpeed > 0 && !ScreenTools.isTinyScreen } QGCLabel { - text: "Air Speed" - font.pixelSize: ScreenTools.defaultFontPixelSize * 0.75 + text: "Air Speed (km/h)" + font.pixelSize: _labelFontSize width: parent.width - height: ScreenTools.defaultFontPixelHeight * 0.75 + height: _labelFontSize color: isSatellite ? "black" : "white" - visible: airSpeed > 0 + visible: airSpeed > 0 && !ScreenTools.isTinyScreen horizontalAlignment: TextEdit.AlignHCenter } QGCLabel { - text: airSpeed.toFixed(1) - font.pixelSize: ScreenTools.defaultFontPixelSize * 1.25 + text: (airSpeed * 3.6).toFixed(1) + font.pixelSize: _normalFontSize font.weight: Font.DemiBold width: parent.width color: isSatellite ? "black" : "white" - visible: airSpeed > 0 + visible: airSpeed > 0 && !ScreenTools.isTinyScreen horizontalAlignment: TextEdit.AlignHCenter } //-- Compass @@ -156,7 +160,7 @@ Item { } QGCCompassWidget { id: compass - size: parent.width * 0.9 + size: parent.width * 0.95 active: root.active anchors.horizontalCenter: parent.horizontalCenter } diff --git a/src/FlightMap/Widgets/QGCPitchIndicator.qml b/src/FlightMap/Widgets/QGCPitchIndicator.qml index 884ec64ac..ba461461d 100644 --- a/src/FlightMap/Widgets/QGCPitchIndicator.qml +++ b/src/FlightMap/Widgets/QGCPitchIndicator.qml @@ -44,9 +44,8 @@ Rectangle { property real _defaultSize: ScreenTools.isAndroid ? 300 : 100 - height: size * 0.9 + height: size width: size - radius: ScreenTools.defaultFontPixelSize * (0.66) anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter clip: true diff --git a/src/QmlControls/DropButton.qml b/src/QmlControls/DropButton.qml index 59975b30e..b39cb2963 100644 --- a/src/QmlControls/DropButton.qml +++ b/src/QmlControls/DropButton.qml @@ -10,7 +10,7 @@ Item { signal clicked() property alias buttonImage: button.source - property real radius: (ScreenTools.defaultFontPixelHeight * 3) / 2 + property real radius: ScreenTools.defaultFontPixelHeight * 1.5 property int dropDirection: dropDown property alias dropDownComponent: dropDownLoader.sourceComponent property real viewportMargins: 0 @@ -159,7 +159,7 @@ Item { Rectangle { anchors.fill: parent radius: width / 2 - border.width: 2 + border.width: ScreenTools.defaultFontPixelHeight * 0.0625 border.color: "white" color: checked ? qgcPal.mapButtonHighlight : qgcPal.mapButton diff --git a/src/QmlControls/RoundButton.qml b/src/QmlControls/RoundButton.qml index c9e7bc8db..c2a4867b1 100644 --- a/src/QmlControls/RoundButton.qml +++ b/src/QmlControls/RoundButton.qml @@ -10,7 +10,7 @@ Item { signal clicked() property alias buttonImage: button.source - property real radius: (ScreenTools.defaultFontPixelHeight * 3) / 2 + property real radius: ScreenTools.defaultFontPixelHeight * 1.5 width: radius * 2 height: radius * 2 @@ -29,7 +29,7 @@ Item { Rectangle { anchors.fill: parent radius: width / 2 - border.width: 2 + border.width: ScreenTools.defaultFontPixelHeight * 0.0625 border.color: "white" color: checked ? qgcPal.mapButtonHighlight : qgcPal.mapButton diff --git a/src/QmlControls/ScreenTools.qml b/src/QmlControls/ScreenTools.qml index 659ba6953..efb4e1557 100644 --- a/src/QmlControls/ScreenTools.qml +++ b/src/QmlControls/ScreenTools.qml @@ -1,7 +1,8 @@ pragma Singleton -import QtQuick 2.2 +import QtQuick 2.4 import QtQuick.Controls 1.2 +import QtQuick.Window 2.2 import QGroundControl.ScreenToolsController 1.0 @@ -22,6 +23,7 @@ Item { property bool isiOS: ScreenToolsController.isiOS property bool isMobile: ScreenToolsController.isMobile property bool isDebug: ScreenToolsController.isDebug + property bool isTinyScreen: (Screen.width / Screen.pixelDensity) < 120 // 120mm function mouseX() { return ScreenToolsController.mouseX() @@ -35,7 +37,7 @@ Item { id: _textMeasure text: "X" - property real fontWidth: contentWidth * (ScreenToolsController.testHighDPI ? 2 : 1) + property real fontWidth: contentWidth * (ScreenToolsController.testHighDPI ? 2 : 1) property real fontHeight: contentHeight * (ScreenToolsController.testHighDPI ? 2 : 1) } diff --git a/src/ui/MainWindow.qml b/src/ui/MainWindow.qml index 387eb77ca..81f34f299 100644 --- a/src/ui/MainWindow.qml +++ b/src/ui/MainWindow.qml @@ -32,7 +32,7 @@ import QGroundControl.ScreenTools 1.0 /// Qml for MainWindow Item { - id: _root + id: mainWindow property var _toolbar: toolbarLoader.item @@ -121,7 +121,7 @@ Item { anchors.bottom: parent.bottom visible: false - property var tabletPosition: _root.tabletPosition + property var tabletPosition: mainWindow.tabletPosition } Loader { @@ -132,6 +132,6 @@ Item { anchors.bottom: parent.bottom visible: false - property var tabletPosition: _root.tabletPosition + property var tabletPosition: mainWindow.tabletPosition } } -- 2.22.0