Skip to content

Q
qgroundcontrol
Commit 66d45cc9 authored by Don Gagne's avatar Don Gagne
Browse files
Options

Merge pull request #1871 from DonLakeFlyer/Positioning 

Font size based sizing and relative positioning fixes
parents 0a77bbcf b30d4eb1
Expand all Show whitespace changes
Inline Side-by-side
Showing with 347 additions and 390 deletions
src/AutoPilotPlugins/PX4/AirframeComponent.qml
View file @ 66d45cc9
......@@ -94,6 +94,8 @@ QGCView {
id: panel
anchors.fill: parent
readonly property real spacerHeight: ScreenTools.defaultFontPixelHeight
QGCLabel {
id: header
width: parent.width
......@@ -104,12 +106,18 @@ QGCView {
Item {
id: headingSpacer
anchors.top: header.bottom
height: 20
height: parent.spacerHeight
width: 20
}
QGCLabel {
Item {
id: helpApplyRow
anchors.top: headingSpacer.bottom
width: parent.width
height: Math.max(helpText.contentHeight, applyButton.height)
QGCLabel {
id: helpText
width: parent.width - applyButton.width - 5
text: "Please select your airframe type. Click 'Apply and Restart' to reboot the autopilot. Please re-connect then manually."
wrapMode: Text.WordWrap
......@@ -117,17 +125,17 @@ QGCView {
QGCButton {
id: applyButton
anchors.top: headingSpacer.bottom
anchors.right: parent.right
text: "Apply and Restart"
onClicked: showDialog(applyRestartDialogComponent, "Apply and Restart", 50, StandardButton.Apply | StandardButton.Cancel)
}
}
Item {
id: lastSpacer
anchors.top: applyButton.bottom
height: 20
anchors.top: helpApplyRow.bottom
height: parent.spacerHeight
width: 10
}
......@@ -140,7 +148,7 @@ QGCView {
Flow {
width: scroll.width
spacing: 10
spacing: ScreenTools.defaultFontPixelWidth
ExclusiveGroup {
id: airframeTypeExclusive
......@@ -152,13 +160,13 @@ QGCView {
// Outer summary item rectangle
Rectangle {
id: airframeBackground
readonly property real titleHeight: 30
readonly property real innerMargin: 10
width: 250
height: 200
width: ScreenTools.defaultFontPixelWidth * 30
height: width * .75
color: (modelData.name != controller.currentAirframeType) ? qgcPal.windowShade : qgcPal.buttonHighlight
readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 1.75
readonly property real innerMargin: ScreenTools.defaultFontPixelWidth
MouseArea {
anchors.fill: parent
onClicked: airframeCheckBox.checked = true
......@@ -170,29 +178,26 @@ QGCView {
height: parent.titleHeight
color: qgcPal.windowShadeDark
Text {
QGCLabel {
anchors.fill: parent
color: qgcPal.buttonText
font.pixelSize: 12
text: modelData.name
verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter
text: modelData.name
}
}
Image {
id: image
anchors.topMargin: innerMargin
anchors.top: title.bottom
x: innerMargin
width: parent.width - (innerMargin * 2)
height: parent.height - title.height - combo.height - (innerMargin * 3)
anchors.topMargin: innerMargin
anchors.top: title.bottom
source: modelData.imageResource
fillMode: Image.PreserveAspectFit
smooth: true
source: modelData.imageResource
}
......@@ -220,8 +225,8 @@ QGCView {
anchors.topMargin: innerMargin
anchors.top: image.bottom
width: parent.width - (innerMargin * 2)
model: modelData.airframes
currentIndex: (modelData.name == controller.currentAirframeType) ? controller.currentVehicleIndex : -1
model: modelData.airframes
onActivated: {
if (index != -1) {
......
src/AutoPilotPlugins/PX4/FlightModesComponent.qml
View file @ 66d45cc9
......@@ -226,14 +226,20 @@ QGCView {
Item {
id: headingSpacer
anchors.top: header.bottom
height: 20
height: ScreenTools.defaultFontPixelHeight
width: 20
}
QGCLabel {
Item {
id: helpApplyRow
anchors.top: headingSpacer.bottom
anchors.left: parent.left
width: parent.width
height: Math.max(helpText.contentHeight, applyButton.height)
QGCLabel {
id: helpText
anchors.rightMargin: ScreenTools.defaultFontPixelWidth
anchors.left: parent.left
anchors.right: applyButton.left
text: topHelpText
wrapMode: Text.WordWrap
......@@ -241,18 +247,18 @@ QGCView {
QGCButton {
id: applyButton
anchors.top: headingSpacer.bottom
anchors.rightMargin: ScreenTools.defaultFontPixelWidth
anchors.right: parent.right
text: "Generate Thresholds"
onClicked: controller.generateThresholds()
}
}
Item {
id: lastSpacer
anchors.top: applyButton.bottom
height: 20
anchors.top: helpApplyRow.bottom
height: ScreenTools.defaultFontPixelHeight
width: 10
}
......
src/AutoPilotPlugins/PX4/PowerComponent.qml
View file @ 66d45cc9
This diff is collapsed.
src/AutoPilotPlugins/PX4/SensorsComponent.qml
View file @ 66d45cc9
......@@ -200,7 +200,7 @@ QGCView {
Column {
anchors.fill: parent
spacing: 10
spacing: ScreenTools.defaultFontPixelHeight
QGCLabel {
width: parent.width
......@@ -283,12 +283,12 @@ QGCView {
font.pixelSize: ScreenTools.largeFontPixelSize
}
Item { height: 20; width: 10 } // spacer
Item { height: ScreenTools.defaultFontPixelHeight; width: 10 } // spacer
Row {
readonly property int buttonWidth: 120
readonly property int buttonWidth: ScreenTools.defaultFontPixelWidth * 15
spacing: 20
spacing: ScreenTools.defaultFontPixelWidth
QGCLabel { text: "Calibrate:"; anchors.baseline: compassButton.baseline }
......@@ -367,17 +367,16 @@ QGCView {
}
}
Item { height: 20; width: 10 } // spacer
Item { height: ScreenTools.defaultFontPixelHeight; width: 10 } // spacer
ProgressBar {
id: progressBar
width: parent.width - rotationColumnWidth
}
Item { height: 10; width: 10 } // spacer
Item { height: ScreenTools.defaultFontPixelHeight; width: 10 } // spacer
Item {
readonly property int calibrationAreaHeight: 300
property int calDisplayAreaWidth: parent.width - rotationColumnWidth
width: parent.width
......@@ -406,24 +405,21 @@ QGCView {
QGCLabel {
id: orientationCalAreaHelpText
anchors.margins: ScreenTools.defaultFontPixelWidth
anchors.top: orientationCalArea.top
anchors.left: orientationCalArea.left
width: parent.width
wrapMode: Text.WordWrap
font.pixelSize: ScreenTools.mediumFontPixelSize
anchors.top: orientationCalArea.top
anchors.left: orientationCalArea.left
anchors.topMargin: 15
anchors.leftMargin: 15
anchors.rightMargin: 15
anchors.bottomMargin: 15
}
Flow {
anchors.topMargin: ScreenTools.defaultFontPixelWidth
anchors.top: orientationCalAreaHelpText.bottom
anchors.left: orientationCalAreaHelpText.left
anchors.topMargin: 15
width: parent.width
height: parent.height - orientationCalAreaHelpText.implicitHeight
spacing: 5
spacing: ScreenTools.defaultFontPixelWidth
VehicleRotationCal {
visible: controller.orientationCalDownSideVisible
......@@ -471,13 +467,13 @@ QGCView {
}
Column {
anchors.leftMargin: ScreenTools.defaultFontPixelWidth
anchors.left: orientationCalArea.right
anchors.leftMargin: 5
spacing: 20
x: parent.width - rotationColumnWidth
spacing: ScreenTools.defaultFontPixelWidth
Column {
spacing: 5
spacing: ScreenTools.defaultFontPixelWidth
QGCLabel {
font.pixelSize: sideBarH1PointSize
......@@ -499,7 +495,7 @@ QGCView {
}
Column {
spacing: 5
spacing: ScreenTools.defaultFontPixelWidth
// Compass 0 rotation
Component {
......@@ -510,6 +506,7 @@ QGCView {
text: "External Compass Orientation"
}
}
Component {
id: compass0ComponentCombo2
......@@ -520,12 +517,14 @@ QGCView {
fact: cal_mag0_rot
}
}
Loader { sourceComponent: showCompass0Rot ? compass0ComponentLabel2 : null }
Loader { sourceComponent: showCompass0Rot ? compass0ComponentCombo2 : null }
}
Column {
spacing: 5
spacing: ScreenTools.defaultFontPixelWidth
// Compass 1 rotation
Component {
id: compass1ComponentLabel2
......@@ -535,6 +534,7 @@ QGCView {
text: "External Compass 1 Orientation"
}
}
Component {
id: compass1ComponentCombo2
......@@ -545,12 +545,14 @@ QGCView {
fact: cal_mag1_rot
}
}
Loader { sourceComponent: showCompass1Rot ? compass1ComponentLabel2 : null }
Loader { sourceComponent: showCompass1Rot ? compass1ComponentCombo2 : null }
}
Column {
spacing: 5
spacing: ScreenTools.defaultFontPixelWidth
// Compass 2 rotation
Component {
id: compass2ComponentLabel2
......@@ -560,6 +562,7 @@ QGCView {
text: "Compass 2 Orientation"
}
}
Component {
id: compass2ComponentCombo2
......
src/QmlControls/IndicatorButton.qml
View file @ 66d45cc9
......@@ -3,6 +3,7 @@ import QtQuick.Controls 1.2
import QGroundControl.Controls 1.0
import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0
// An IndicatorButton works just like q QGCButton with the additional support or a red/green
// indicator on the right edge.
......@@ -11,14 +12,12 @@ QGCButton {
property bool indicatorGreen: false
Rectangle {
readonly property real indicatorRadius: 4
x: parent.width - (indicatorRadius * 2) - 5
y: (parent.height - (indicatorRadius * 2)) / 2
width: indicatorRadius * 2
height: indicatorRadius * 2
radius: indicatorRadius
anchors.rightMargin: ScreenTools.defaultFontPixelWidth / 3
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
width: radius * 2
height: width
radius: (ScreenTools.defaultFontPixelHeight * .75) / 2
color: indicatorGreen ? "#00d932" : "red"
}
}
src/QmlControls/QGCView.qml
View file @ 66d45cc9
......@@ -121,6 +121,11 @@ FactPanel {
}
}
/// Shows a QGCViewDialog component
/// @param compoent QGCViewDialog component
/// @param title Title for dialog
/// @param charWidth Width of dialog in characters (-1 for full parent width)
/// @param buttons Buttons to show in dialog using StandardButton enum
function showDialog(component, title, charWidth, buttons) {
if (__checkForEarlyDialog()) {
return
......
src/QmlControls/SubMenuButton.qml
View file @ 66d45cc9
......@@ -7,75 +7,67 @@ import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0
Button {
checkable: true
height: 60
property bool setupComplete: true ///< true: setup complete indicator shows as completed
property bool setupIndicator: true ///< true: show setup complete indicator
property string imageResource: "/qmlimages/subMenuButtonImage.png" ///< Button image
text: "Button" ///< Pass in your own button text
text: "Button"
property bool setupComplete: true
property bool setupIndicator: true
property string imageResource: "/qmlimages/subMenuButtonImage.png"
checkable: true
height: ScreenTools.defaultFontPixelHeight * 5
style: ButtonStyle {
id: buttonStyle
property var __qgcPal: QGCPalette {
QGCPalette {
id: qgcPal
colorGroupEnabled: control.enabled
}
property bool __showHighlight: control.pressed | control.checked
property bool showHighlight: control.pressed | control.checked
background: Rectangle {
id: innerRect
readonly property real titleHeight: 20
color: showHighlight ? qgcPal.buttonHighlight : qgcPal.button
color: __showHighlight ? __qgcPal.buttonHighlight : __qgcPal.button
readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 1.5
Text {
QGCLabel {
id: titleBar
width: parent.width
height: parent.titleHeight
verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter
color: showHighlight ? qgcPal.buttonHighlightText : qgcPal.buttonText
text: control.text
font.pixelSize: ScreenTools.defaultFontPixelSize
antialiasing: true
color: __showHighlight ? __qgcPal.buttonHighlightText : __qgcPal.buttonText
Rectangle {
id: setupIndicator
readonly property real indicatorRadius: 4
x: parent.width - (indicatorRadius * 2) - 3
y: (parent.height - (indicatorRadius * 2)) / 2
width: indicatorRadius * 2
height: indicatorRadius * 2
anchors.rightMargin: ScreenTools.defaultFontPixelWidth / 3
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
width: radius * 2
height: width
radius: indicatorRadius
color: control.setupIndicator ? (control.setupComplete ? "#00d932" : "red") : innerRect.color
color: control.setupComplete ? "#00d932" : "red"
visible: control.setupIndicator
readonly property real indicatorRadius: (ScreenTools.defaultFontPixelHeight * .75) / 2
}
}
Rectangle {
anchors.top: titleBar.bottom
anchors.bottom: parent.bottom
width: parent.width
height: parent.height - parent.titleHeight
y: parent.titleHeight
color: __qgcPal.windowShade
color: qgcPal.windowShade
QGCColoredImage {
source: control.imageResource
anchors.margins: ScreenTools.defaultFontPixelHeight * .75
anchors.fill: parent
fillMode: Image.PreserveAspectFit
width: parent.width - 20
height: parent.height - 20
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
smooth: true
color: __showHighlight ? __qgcPal.buttonHighlight : __qgcPal.button
color: showHighlight ? qgcPal.buttonHighlight : qgcPal.button
source: control.imageResource
}
}
}
......
src/VehicleSetup/VehicleSummary.qml
View file @ 66d45cc9
......@@ -26,36 +26,28 @@ import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QGroundControl.FactSystem 1.0
import QGroundControl.Palette 1.0
import QGroundControl.Controls 1.0
import QGroundControl.ScreenTools 1.0
import QGroundControl.MultiVehicleManager 1.0
import QGroundControl.Palette 1.0
Rectangle {
width: 600
height: 400
property var qgcPal: QGCPalette { id: palette; colorGroupEnabled: true }
id: topLevel
objectName: "topLevel"
color: qgcPal.window
QGCPalette {
id: qgcPal
colorGroupEnabled: enabled
}
Column {
anchors.fill: parent
spacing: ScreenTools.defaultFontPixelHeight
QGCLabel {
text: "VEHICLE SUMMARY"
font.pixelSize: ScreenTools.largeFontPixelSize
}
Item {
// Just used as a spacer
height: 15
width: 10
}
QGCLabel {
width: parent.width
wrapMode: Text.WordWrap
......@@ -68,12 +60,6 @@ Rectangle {
property bool setupComplete: multiVehicleManager.activeVehicle.autopilot.setupComplete
}
Item {
// Just used as a spacer
height: 20
width: 10
}
Flow {
width: parent.width
spacing: ScreenTools.defaultFontPixelWidth
......@@ -84,15 +70,15 @@ Rectangle {
// Outer summary item rectangle
Rectangle {
readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 2
width: ScreenTools.defaultFontPixelWidth * 28
height: ScreenTools.defaultFontPixelHeight * 13
color: qgcPal.windowShade
readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 2
// Title bar
Rectangle {
id: titleBar
width: parent.width
height: titleHeight
color: qgcPal.windowShadeDark
......@@ -100,34 +86,28 @@ Rectangle {
// Title text
QGCLabel {
anchors.fill: parent
color: qgcPal.buttonText
text: modelData.name.toUpperCase()
verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter
}
text: modelData.name.toUpperCase()
}
// Setup indicator
Rectangle {
readonly property real indicatorRadius: 6
readonly property real indicatorRightInset: 5
x: parent.width - (indicatorRadius * 2) - indicatorRightInset
y: (parent.titleHeight - (indicatorRadius * 2)) / 2
width: indicatorRadius * 2
height: indicatorRadius * 2
radius: indicatorRadius
anchors.rightMargin: ScreenTools.defaultFontPixelWidth / 3
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
width: 10//radius * 2
height: 10//height
radius: (ScreenTools.defaultFontPixelHeight * .75) * 2
color: modelData.setupComplete ? "#00d932" : "red"
visible: modelData.requiresSetup
}
}
// Summary Qml
Rectangle {
y: parent.titleHeight
anchors.top: titleBar.bottom
width: parent.width
height: parent.height - parent.titleHeight
color: qgcPal.windowShade
Loader {
anchors.fill: parent
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment