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 Hide 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,30 +106,36 @@ 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 - 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
}
width: parent.width
height: Math.max(helpText.contentHeight, applyButton.height)
QGCButton {
id: applyButton
anchors.top: headingSpacer.bottom
anchors.right: parent.right
text: "Apply and Restart"
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
}
onClicked: showDialog(applyRestartDialogComponent, "Apply and Restart", 50, StandardButton.Apply | StandardButton.Cancel)
QGCButton {
id: applyButton
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,16 +160,16 @@ 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
anchors.fill: parent
onClicked: airframeCheckBox.checked = true
}
Rectangle {
......@@ -170,36 +178,33 @@ QGCView {
height: parent.titleHeight
color: qgcPal.windowShadeDark
Text {
anchors.fill: parent
color: qgcPal.buttonText
font.pixelSize: 12
text: modelData.name
QGCLabel {
anchors.fill: parent
color: qgcPal.buttonText
verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter
text: modelData.name
}
}
Image {
id: image
x: innerMargin
width: parent.width - (innerMargin * 2)
height: parent.height - title.height - combo.height - (innerMargin * 3)
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)
fillMode: Image.PreserveAspectFit
smooth: true
source: modelData.imageResource
source: modelData.imageResource
fillMode: Image.PreserveAspectFit
smooth: true
}
QGCCheckBox {
id: airframeCheckBox
anchors.bottom: image.bottom
anchors.right: image.right
anchors.right: image.right
checked: modelData.name == controller.currentAirframeType
exclusiveGroup: airframeTypeExclusive
......@@ -214,14 +219,14 @@ QGCView {
}
QGCComboBox {
id: combo
objectName: modelData.airframeType + "ComboBox"
x: innerMargin
anchors.topMargin: innerMargin
anchors.top: image.bottom
width: parent.width - (innerMargin * 2)
model: modelData.airframes
currentIndex: (modelData.name == controller.currentAirframeType) ? controller.currentVehicleIndex : -1
id: combo
objectName: modelData.airframeType + "ComboBox"
x: innerMargin
anchors.topMargin: innerMargin
anchors.top: image.bottom
width: parent.width - (innerMargin * 2)
currentIndex: (modelData.name == controller.currentAirframeType) ? controller.currentVehicleIndex : -1
model: modelData.airframes
onActivated: {
if (index != -1) {
......
src/AutoPilotPlugins/PX4/FlightModesComponent.qml
View file @ 66d45cc9
......@@ -226,33 +226,39 @@ QGCView {
Item {
id: headingSpacer
anchors.top: header.bottom
height: 20
height: ScreenTools.defaultFontPixelHeight
width: 20
}
QGCLabel {
anchors.top: headingSpacer.bottom
anchors.left: parent.left
anchors.rightMargin: ScreenTools.defaultFontPixelWidth
anchors.right: applyButton.left
text: topHelpText
wrapMode: Text.WordWrap
}
QGCButton {
id: applyButton
anchors.top: headingSpacer.bottom
anchors.rightMargin: ScreenTools.defaultFontPixelWidth
anchors.right: parent.right
text: "Generate Thresholds"
onClicked: controller.generateThresholds()
Item {
id: helpApplyRow
anchors.top: headingSpacer.bottom
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
}
QGCButton {
id: applyButton
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
......@@ -405,25 +404,22 @@ QGCView {
color: qgcPal.windowShade
QGCLabel {
id: orientationCalAreaHelpText
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
id: orientationCalAreaHelpText
anchors.margins: ScreenTools.defaultFontPixelWidth
anchors.top: orientationCalArea.top
anchors.left: orientationCalArea.left
width: parent.width
wrapMode: Text.WordWrap
font.pixelSize: ScreenTools.mediumFontPixelSize
}
Flow {
anchors.top: orientationCalAreaHelpText.bottom
anchors.left: orientationCalAreaHelpText.left
anchors.topMargin: 15
width: parent.width
height: parent.height - orientationCalAreaHelpText.implicitHeight
spacing: 5
anchors.topMargin: ScreenTools.defaultFontPixelWidth
anchors.top: orientationCalAreaHelpText.bottom
anchors.left: orientationCalAreaHelpText.left
width: parent.width
height: parent.height - orientationCalAreaHelpText.implicitHeight
spacing: ScreenTools.defaultFontPixelWidth
VehicleRotationCal {
visible: controller.orientationCalDownSideVisible
......@@ -471,13 +467,13 @@ QGCView {
}
Column {
anchors.left: orientationCalArea.right
anchors.leftMargin: 5
spacing: 20
x: parent.width - rotationColumnWidth
anchors.leftMargin: ScreenTools.defaultFontPixelWidth
anchors.left: orientationCalArea.right
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
import QtQuick 2.2
import QtQuick 2.2
import QtQuick.Controls 1.2
import QGroundControl.Controls 1.0
import QGroundControl.Palette 1.0
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
color: indicatorGreen ? "#00d932" : "red"
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
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtGraphicalEffects 1.0
import QGroundControl.Palette 1.0
import QGroundControl.ScreenTools 1.0
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"
property bool setupComplete: true
property bool setupIndicator: true
property string imageResource: "/qmlimages/subMenuButtonImage.png"
text: "Button" ///< Pass in your own button text
checkable: true
height: ScreenTools.defaultFontPixelHeight * 5
style: ButtonStyle {
id: buttonStyle
property var __qgcPal: QGCPalette {
colorGroupEnabled: control.enabled
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
Text {
id: titleBar
id: innerRect
color: showHighlight ? qgcPal.buttonHighlight : qgcPal.button
width: parent.width
height: parent.titleHeight
readonly property real titleHeight: ScreenTools.defaultFontPixelHeight * 1.5
verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter
text: control.text
font.pixelSize: ScreenTools.defaultFontPixelSize
antialiasing: true
color: __showHighlight ? __qgcPal.buttonHighlightText : __qgcPal.buttonText
QGCLabel {
id: titleBar
width: parent.width
height: parent.titleHeight
verticalAlignment: TextEdit.AlignVCenter
horizontalAlignment: TextEdit.AlignHCenter
color: showHighlight ? qgcPal.buttonHighlightText : qgcPal.buttonText
text: control.text
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.setupComplete ? "#00d932" : "red"
visible: control.setupIndicator
radius: indicatorRadius
color: control.setupIndicator ? (control.setupComplete ? "#00d932" : "red") : innerRect.color
readonly property real indicatorRadius: (ScreenTools.defaultFontPixelHeight * .75) / 2
}
}
Rectangle {
width: parent.width
height: parent.height - parent.titleHeight
y: parent.titleHeight
color: __qgcPal.windowShade
anchors.top: titleBar.bottom
anchors.bottom: parent.bottom
width: parent.width
color: qgcPal.windowShade
QGCColoredImage {
source: control.imageResource
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
anchors.margins: ScreenTools.defaultFontPixelHeight * .75
anchors.fill: parent
fillMode: Image.PreserveAspectFit
smooth: true
color: showHighlight ? qgcPal.buttonHighlight : qgcPal.button
source: control.imageResource
}
}
}
label: Item {}
label: Item {}
}
}
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
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,54 +70,48 @@ 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 {
width: parent.width
id: titleBar
width: parent.width
height: titleHeight
color: qgcPal.windowShadeDark
color: qgcPal.windowShadeDark
// Title text
QGCLabel {
anchors.fill: parent
color: qgcPal.buttonText
text: modelData.name.toUpperCase()
anchors.fill: parent
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
color: modelData.setupComplete ? "#00d932" : "red"
// Setup indicator
Rectangle {
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
width: parent.width
height: parent.height - parent.titleHeight
color: qgcPal.windowShade
anchors.top: titleBar.bottom
width: parent.width
Loader {
anchors.fill: parent
source: modelData.summaryQmlSource
anchors.fill: parent
source: modelData.summaryQmlSource
}
}
}
......
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