ScreenTools

Import: import QGroundControl.ScreenTools

ScreenTools is a singleton that provides screen-density-aware sizing values, font information, and platform detection. Use it to build responsive plugin UIs that look correct on any screen.

---

Font sizes

Property	Relative size	Description
xxSmallFontPointSize	~6pt	Extra extra small
xSmallFontPointSize	~8pt	Extra small
smallFontPointSize	0.75x	Small text
defaultFontPointSize	1.0x	Standard text
mediumFontPointSize	1.25x	Medium text
largeFontPointSize	1.5x	Large text
xLargeFontPointSize	2.0x	Extra large text

Example

QGCLabel {
    text: "Title"
    font.pointSize: ScreenTools.largeFontPointSize
}

QGCLabel {
    text: "Caption"
    font.pointSize: ScreenTools.smallFontPointSize
}

---

Font families

Property	Description
normalFontFamily	Standard font
demiboldFontFamily	Semi-bold font (for emphasis)
fixedFontFamily	Monospace font
chakraPetchFontFamily	Chakra Petch display font

Example

QGCLabel {
    text: "Speed: 12.3"
    font.family: ScreenTools.demiboldFontFamily
    font.bold: true
}

---

Pixel dimensions

Property	Description
defaultFontPixelHeight	Height of default font in pixels
defaultFontPixelWidth	Width of default font in pixels
defaultFontDescent	Font descent value

These are the most commonly used sizing primitives. Most layout dimensions should be expressed as multiples of these values:

Rectangle {
    width: ScreenTools.defaultFontPixelWidth * 30
    height: ScreenTools.defaultFontPixelHeight * 4
}

---

Spacing and margins

Property	Value	Description
defaultMargin	fontPixelHeight * 0.5	Standard margin
toolsMargin	fontPixelWidth * 0.75	Toolbar margin
defaultSpacing	defaultMargin * 2	Standard spacing between elements
defaultDialogControlSpacing	fontPixelHeight / 2	Spacing in dialog controls
staticMargin	10	Fixed margin (non-scalable)

Example

ColumnLayout {
    spacing: ScreenTools.defaultSpacing

    QGCLabel { text: "First" }
    QGCLabel { text: "Second" }
}

Rectangle {
    anchors.margins: ScreenTools.defaultMargin
}

---

Control implicit sizes

Use these for consistent control sizing:

Property	Description
implicitButtonWidth	Standard button width
implicitButtonHeight	Standard button height
implicitCheckBoxHeight	Checkbox height
implicitRadioButtonHeight	Radio button height
implicitTextFieldHeight	Text field height
implicitComboBoxHeight	Combo box height
implicitComboBoxWidth	Combo box width
comboBoxPadding	Combo box internal padding
implicitSliderHeight	Slider height
checkBoxIndicatorSize	Checkbox indicator size
radioButtonIndicatorSize	Radio button indicator size

---

Toolbar

Property	Description
toolbarHeight	Standard toolbar height
batteryBarHeight	Battery bar height
defaultButtonSize	Default button size

---

Platform detection

Property	Type	Description
isAndroid	bool	Running on Android
isiOS	bool	Running on iOS
isMobile	bool	Running on a mobile device
isWindows	bool	Running on Windows
isMac	bool	Running on macOS
isLinux	bool	Running on Linux
hasTouch	bool	Device has touch input
isTinyScreen	bool	Very small screen
isShortScreen	bool	Short screen
isBigScreen	bool	Large screen
isHugeScreen	bool	Very large screen

Example: Adaptive layout

GridLayout {
    columns: ScreenTools.isMobile ? 1 : 2

    QGCLabel { text: "Field 1" }
    QGCTextField { text: "Value 1" }

    QGCLabel { text: "Field 2" }
    QGCTextField { text: "Value 2" }
}

---

Opacity constants

Property	Value	Description
opacityNone	1.0	Fully opaque
opacityDisabled	0.8	Disabled state
opacityPartiallyChecked	0.5	Partially checked

---

Touch sizing

Property	Description
minTouchMillimeters	Minimum touch target in mm (10)
minTouchPixels	Minimum touch target in pixels

---

Common patterns

Responsive widget sizing

Rectangle {
    width: ScreenTools.defaultFontPixelWidth * 20
    height: ScreenTools.defaultFontPixelHeight * 4
    radius: ScreenTools.defaultFontPixelWidth / 2

    QGCLabel {
        anchors.centerIn: parent
        font.pointSize: ScreenTools.mediumFontPointSize
        font.family: ScreenTools.demiboldFontFamily
    }
}

Consistent margins

ColumnLayout {
    property real _margins: ScreenTools.defaultFontPixelWidth

    Rectangle {
        Layout.preferredWidth: parent.width
        Layout.preferredHeight: ScreenTools.defaultFontPixelHeight * 4
        Layout.margins: _margins
    }
}