Top Bar Panel Widget

The Top Bar Panel Widget is a specialized subclass of Bar Panel Widget configured to work in Horizontal orientation. It is provided to display the standard list of status bar widgets. The bar panel provides an option to organize its child widgets into left side widgets and right side widgets. In the top bar panel widget, the items are split as:

Left Side Widgets

System Status Widget

Right Side Widgets

The top bar panel is seen as below:

Disconnected State

Connected State

This is a good example of how you can create a self contained bar panel widget.

Usage

<dji.ux.beta.core.panelwidget.topbar.TopBarPanelWidget
     android:id="@+id/panel_top_bar"
     android:layout_width="0dp"
     android:layout_height="0dp"
     android:background="@color/black"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintHeight_percent="0.08"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf="parent"/>

Customizations

The UI elements can be customized to match the style of the user's application. The customizations can be done using attributes in XML or programmatically using the APIs. The widget supports all the customizations that its parent Bar Panel Widget supports. Individual elements of the panel can also be customized using a style.

XML Example

<dji.ux.beta.core.panelwidget.topbar.TopBarPanelWidget
     android:id="@+id/panel_top_bar"
     android:layout_width="0dp"
     android:layout_height="0dp"
     android:background="@color/light_gray"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintHeight_percent="0.08"
     app:layout_constraintStart_toStartOf="parent"
     style="@style/UXSDKTopbarStyle"
     app:layout_constraintTop_toTopOf="parent"
     app:uxsdk_excludeTopBarItem="air_sense|connection|simulator_indicator"
     app:uxsdk_itemsMarginRight="@dimen/spacing_normal"
     app:uxsdk_itemsSpacing="@dimen/spacing_normal" />

<style name="UXSDKTopbarStyle">
   <item name="uxsdk_disconnectedStateIconColor">@color/red</item>
   <item name="uxsdk_connectedStateIconColor">@color/green</item>
</style>

Attributes

List of the customizable XML attributes

uxsdk_excludeTopBarItem - The item that should be excluded from the topbar. The full list of flags that can be used to exclude widgets is as below:
- system_status
- flight_mode
- simulator_indicator
- air_sense
- gps_signal
- vision
- rc_signal
- video_signal
- battery
- connection

Multiple items can be excluded using the pipe symbol. For example,

uxsdk_excludeTopBarItem = "system_status|flight_mode".

Java Example

TopBarPanelWidget topBarPanel = findViewById(R.id.panel_top_bar);
SystemStatusWidget systemStatusWidget = topBarPanel.getSystemStatusWidget();
if (systemStatusWidget != null) {
   systemStatusWidget.setStateChangeCallback(findViewById(R.id.widget_panel_system_status_list));
}

Kotlin Example

val topBarPanel: TopBarPanelWidget = findViewById(R.id.panel_top_bar)
val systemStatusWidget: SystemStatusWidget = topBarPanel.getSystemStatusWidget()
if (systemStatusWidget != null) {
   systemStatusWidget.stateChangeCallback = findViewById(R.id.widget_panel_system_status_list)
}

APIs

List of the customization APIs

val systemStatusWidget: SystemStatusWidget? - Instance of System Status Widget. Null when excluded from the top bar panel.
val flightModeWidget: FlightModeWidget? - Instance of Flight Mode Widget. Null when excluded from the top bar panel.
val simulatorIndicatorWidget: SimulatorIndicatorWidget? - Instance of Simulator Indicator Widget. Null when excluded from the top bar panel.
val airSenseWidget: AirSenseWidget? - Instance of AirSense Widget. Null when excluded from the top bar panel.
val gpsSignalWidget: GPSSignalWidget? - Instance of GPS Signal Widget. Null when excluded from the top bar panel.
val visionWidget: VisionWidget? - Instance of Vision Widget. Null when excluded from the top bar panel.
val remoteControllerSignalWidget: RemoteControllerSignalWidget? - Instance of Remote Controller Signal Widget. Null when excluded from the top bar panel.
val videoSignalWidget: VideoSignalWidget? - Instance of Video Signal Widget. Null when excluded from the top bar panel.
val batteryWidget: BatteryWidget? - Instance of Battery Widget. Null when excluded from the top bar panel.
val connectionWidget: ConnectionWidget? - Instance of Connection Widget. Null when excluded from the top bar panel.