Widgets

Import: import QGroundControl.Widgets

AMC widgets are higher-level components built for the AMC UI. They include toolbar buttons, dividers, custom inputs, and display components.

---

CustomToolBarButton

A toolbar-style button with icon support, used for menu item buttons and toolbar hooks.

Properties

Property	Type	Default	Description
iconColor	color	--	Color override for the icon
showIconOverlay	bool	true	Show icon overlay effect
autoExclusive	bool	true	Auto-exclusive group (only one can be checked)
text	string	--	Button label text
icon.source	url	--	Icon image source
checked	bool	--	Whether the button is in checked state

Behavior

• Opacity is 1.0 when enabled, 0.3 when disabled.
• Background highlights on pressed or checked using qgcPal.buttonHighlight.
• Text color uses qgcPal.buttonText normally and qgcPal.buttonHighlightText when highlighted.

Example: Menu item button (manual)

CustomToolBarButton can be used directly for menu item buttons, but the recommended approach is to use PluginMenuItemButton instead (see below).

import QGroundControl.Widgets

CustomToolBarButton {
    text: "My View"
    icon.source: Qt.resolvedUrl("../img/icon.svg")
    // When used manually, you must handle drawer, mainWindow,
    // viewIndex, checked, and onClicked yourself.
}

---

PluginMenuItemButton

A convenience wrapper around CustomToolBarButton for plugin menu item buttons. Handles the divider, highlight state, and navigation automatically.

Properties

Property	Type	Default	Injected by AMC?	Description
drawer	var	undefined	Yes	Reference to the side drawer
mainWindow	var	undefined	Yes	Reference to the main window
viewIndex	int	-1	Yes (when paired)	Absolute StackLayout index of the paired view
text	string	""	No	Button label
icon.source	url	""	No	Button icon

Inherits all CustomToolBarButton properties (checked, enabled, visible, iconColor, etc.).

Behavior

• Includes a CustomDivider at the top automatically.
• checked is bound to highlight the button when its paired view is active.
• onClicked closes the drawer and navigates to the paired view.
• For standalone buttons (no paired view), viewIndex is -1, checked is always false, and you override onClicked with custom behaviour.

Example: Paired button

import QGroundControl.Widgets

PluginMenuItemButton {
    text: "My View"
    icon.source: Qt.resolvedUrl("../img/icon.svg")
}

Example: Standalone button

import QGroundControl.Widgets

PluginMenuItemButton {
    text: "Help"
    icon.source: Qt.resolvedUrl("../img/help.svg")
    onClicked: {
        drawer.close()
        Qt.openUrlExternally("https://example.com/help")
    }
}

---

CustomDivider

A horizontal or vertical divider line that adapts to the current theme.

Properties

Property	Type	Default	Description
vertical	bool	false	If true, renders as a vertical line

Behavior

• Color adapts automatically: semi-transparent black in light mode, semi-transparent white in dark mode.
• Width/height are set automatically based on the vertical property.

Example

import QGroundControl.Widgets

Column {
    QGCLabel { text: "Section A" }

    CustomDivider { width: parent.width }

    QGCLabel { text: "Section B" }
}

Vertical divider

import QGroundControl.Widgets

Row {
    height: 40
    QGCLabel { text: "Left" }
    CustomDivider { vertical: true }
    QGCLabel { text: "Right" }
}

---

CustomButton

A highly customizable button with icon support, checkable state, and multiple color overrides.

Properties

Property	Type	Default	Description
text	string	--	Button label
primary	bool	false	Primary button styling
iconSource	url	--	Icon image source
iconSize	real	--	Icon dimensions
showBorder	bool	false	Show border
borderRadius	real	--	Corner radius
checkable	bool	false	Allow toggle behavior
checked	bool	false	Current toggle state
colorPrimary	color	themed	Override primary color
colorSecondary	color	themed	Override secondary color
colorText	color	themed	Override text color

Example

import QGroundControl.Widgets

Row {
    spacing: ScreenTools.defaultFontPixelWidth

    CustomButton {
        text: qsTr("Start")
        primary: true
        iconSource: Qt.resolvedUrl("../img/play.svg")
        onClicked: MyPluginData.start()
    }

    CustomButton {
        text: qsTr("Debug")
        checkable: true
        checked: MyPluginData.debugMode
        onClicked: MyPluginData.debugMode = checked
    }
}

---

CustomSlider

A slider with an optional value display tooltip.

Properties

Property	Type	Default	Description
displayValue	bool	false	Show current value above the handle
maximumValue	real	1.0	Maximum value
minimumValue	real	0.0	Minimum value

Example

import QGroundControl.Widgets

CustomSlider {
    width: parent.width
    minimumValue: 0
    maximumValue: 100
    value: 50
    displayValue: true
    onValueChanged: MyPluginData.threshold = value
}

---

CustomTextEdit

A text input with password toggle, placeholder text, and validation.

Properties

Property	Type	Default	Description
text	string	--	Current text value
placeHolderText	string	--	Placeholder when empty
isPassword	bool	false	Mask input as password (with toggle)
validator	Validator	--	Input validator (e.g. IntValidator)
readOnly	bool	false	Read-only mode

Signals

Signal	Description
editingFinished()	Emitted when editing is complete (Enter or focus lost)
textEdited()	Emitted on every keystroke

Example

import QGroundControl.Widgets

Column {
    spacing: ScreenTools.defaultSpacing

    CustomTextEdit {
        placeHolderText: qsTr("Server URL")
        text: MyPluginData.serverUrl
        onEditingFinished: MyPluginData.serverUrl = text
    }

    CustomTextEdit {
        placeHolderText: qsTr("API Key")
        isPassword: true
        text: MyPluginData.apiKey
        onEditingFinished: MyPluginData.apiKey = text
    }
}

---

CustomValueDisplay

A numeric value display with title and optional page-indicator dots.

Properties

Property	Type	Default	Description
titleText	string	--	Title/label above the value
valueText	string	--	Display value
colorText	color	themed	Text color
indicatorCount	int	0	Number of page-indicator dots (0 to hide)
indicatorCurrentIndex	int	0	Active dot index

Example

import QGroundControl.Widgets

Row {
    spacing: ScreenTools.defaultFontPixelWidth * 2

    CustomValueDisplay {
        titleText: qsTr("Altitude")
        valueText: vehicle.altitudeRelative.value.toFixed(1) + " m"
    }

    CustomValueDisplay {
        titleText: qsTr("Speed")
        valueText: vehicle.groundSpeed.value.toFixed(1) + " m/s"
        indicatorCount: 3
        indicatorCurrentIndex: 1
    }
}

---

CustomInfoDisplay

An expandable info panel that shows an icon alongside label-value pairs. Useful for displaying grouped telemetry or status information.

Properties

Property	Type	Default	Description
iconSource	url	--	Icon image source
model	var	--	Array or ListModel of { label, value } items
expandable	bool	false	Allow expand/collapse
rowLayout	bool	false	Lay out label-value pairs in a row instead of a column

Example

```qml import QGroundControl.Widgets

CustomInfoDisplay { iconSource: Qt.resolvedUrl("../img/battery.svg") expandable: true model: [ { label: qsTr("Voltage"), value: vehicle.battery.voltage.valueString }, { label: qsTr("Current"), value: vehicle.battery.current.valueString }, { label: qsTr("Remaining"), value: vehicle.battery.percentRemaining.valueString } ] }