Telemetry Panel Widget

The Telemetry Panel Widget is a subclass of Freeform Panel Widget that aggregates important physical state information about the aircraft. It includes the following widgets:

Usage

<dji.ux.beta.core.panel.telemetry.TelemetryPanelWidget
     android:id="@+id/widget_flight_telemetry"
     android:layout_width="350dp"
     android:layout_height="0dp"
     app:layout_constraintHeight_percent="0.25"/>

Customizations

This widget can be customized to match the style of the user's application by using the customizable methods on all the individual widgets. It supports all the customizations supported by Freeform Panel Widget. It can also be customized to exclude any of the individual widgets as required. These customizations can be done using attributes in XML or programmatically using the APIs. Each individual widget can also be accessed using the paneIDs for each widget.

XML Examples

<dji.ux.beta.core.panel.telemetry.TelemetryPanelWidget
     android:id="@+id/widget_flight_telemetry"
     android:layout_width="350dp"
     android:layout_height="0dp"
     app:uxsdk_excludeTelemetryItem="location|amsl_altitude"
     app:layout_constraintHeight_percent="0.15"/>

<dji.ux.beta.core.panel.telemetry.TelemetryPanelWidget
     android:id="@+id/widget_flight_telemetry"
     android:layout_width="350dp"
     android:layout_height="0dp"
     android:background="@color/white"
     app:uxsdk_excludeTelemetryItem="location"
     app:uxsdk_telemetry_widget_theme="@style/UXSDKTelemetryThemeExample"
     app:layout_constraintHeight_percent="0.25" />

While adding the Telemetry Panel Widget, a style can be added to customize the widgets in the panel. The style supports all the attributes supported by the telemetry widgets. Example of the style that can be used to customize all the children of the Telemetry Panel.

<style name="UXSDKTelemetryThemeExample">
     <item name="uxsdk_label_text_color">@color/black</item>
     <item name="uxsdk_value_text_color">@color/blue</item>
     <item name="uxsdk_unit_text_color">@color/blue</item>
     <item name="uxsdk_normal_text_color">@color/blue</item>
     <item name="uxsdk_vpsEnabledIcon">@drawable/ic_vision_sensor_active</item>
     <item name="uxsdk_vpsDisabledIcon">@drawable/ic_vision_sensor_inactive</item>
     <item name="uxsdk_upward_velocity_icon">@drawable/ic_up</item>
     <item name="uxsdk_downward_velocity_icon">@drawable/ic_down</item>
     <item name="uxsdk_widget_icon">@drawable/ic_custom_location</item>
</style>

Attributes

List of the customizable XML attributes

uxsdk_excludeTelemetryItem - This can be used to exclude widgets from the telemetry panel as required. This attribute can have any or all of the following as values with a pipe separating them.
- amsl_altitude
- agl_altitude
- horizontal_velocity
- distance_rc
- distance_home
- vertical_velocity
- vps
- location
uxsdk_telemetry_widget_theme - This can be used to define a style for all the telemetry panel widgets. It supports all the customizations supported by the above mentioned widgets.

Kotlin Example

val telemetryPanelWidget = findViewById<TelemetryPanelWidget>(R.id.widget_flight_telemetry)
telemetryPanelWidget.setBackgroundColor(resources.getColor(R.color.uxsdk_black_30_percent))
val amslAltitudeWidget = telemetryPanelWidget.viewInPane(telemetryPanelWidget.amslAltitudeWidgetPaneID) as AMSLAltitudeWidget?
amslAltitudeWidget?.valueTextColor = resources.getColor(R.color.blue)
val aglAltitudeWidget = telemetryPanelWidget.viewInPane(telemetryPanelWidget.aglAltitudeWidgetPaneID) as AGLAltitudeWidget?
aglAltitudeWidget?.valueTextColor = resources.getColor(R.color.blue)
val horizontalVelocityWidget = telemetryPanelWidget.viewInPane(telemetryPanelWidget.horizontalVelocityWidgetPaneID) as HorizontalVelocityWidget?
horizontalVelocityWidget?.valueTextColor = resources.getColor(R.color.green)
val distanceHomeWidget = telemetryPanelWidget.viewInPane(telemetryPanelWidget.distanceHomeWidgetPaneID) as DistanceHomeWidget?
distanceHomeWidget?.valueTextColor = resources.getColor(R.color.blue)
val verticalVelocityWidget = telemetryPanelWidget.viewInPane(telemetryPanelWidget.verticalVelocityWidgetPaneID) as VerticalVelocityWidget?
verticalVelocityWidget?.valueTextColor = resources.getColor(R.color.green)
telemetryPanelWidget.setPaneVisibility(telemetryPanelWidget.distanceRCWidgetPaneID, false)
telemetryPanelWidget.setPaneVisibility(telemetryPanelWidget.vpsWidgetPaneID, false)
telemetryPanelWidget.setPaneVisibility(telemetryPanelWidget.locationWidgetPaneID, false)

Java Example

TelemetryPanelWidget telemetryPanelWidget = findViewById(R.id.widget_flight_telemetry);
telemetryPanelWidget.setBackgroundColor(getResources().getColor(R.color.uxsdk_black_30_percent));
AMSLAltitudeWidget amslAltitudeWidget = (AMSLAltitudeWidget)telemetryPanelWidget.viewInPane(telemetryPanelWidget.getAmslAltitudeWidgetPaneID());
amslAltitudeWidget.setValueTextColor(getResources().getColor(R.color.blue));
AGLAltitudeWidget aglAltitudeWidget = (AGLAltitudeWidget) telemetryPanelWidget.viewInPane(telemetryPanelWidget.getAglAltitudeWidgetPaneID());
aglAltitudeWidget.setValueTextColor(getResources().getColor(R.color.blue));
HorizontalVelocityWidget horizontalVelocityWidget = (HorizontalVelocityWidget) telemetryPanelWidget.viewInPane(telemetryPanelWidget.getHorizontalVelocityWidgetPaneID());
horizontalVelocityWidget.setValueTextColor(getResources().getColor(R.color.green));
DistanceHomeWidget distanceHomeWidget = (DistanceHomeWidget) telemetryPanelWidget.viewInPane(telemetryPanelWidget.getDistanceHomeWidgetPaneID());
distanceHomeWidget.setValueTextColor(getResources().getColor(R.color.blue));
VerticalVelocityWidget verticalVelocityWidget = (VerticalVelocityWidget) telemetryPanelWidget.viewInPane(telemetryPanelWidget.getVerticalVelocityWidgetPaneID());
verticalVelocityWidget.setValueTextColor(getResources().getColor(R.color.green));
telemetryPanelWidget.setPaneVisibility(telemetryPanelWidget.getDistanceRCWidgetPaneID(), false);
telemetryPanelWidget.setPaneVisibility(telemetryPanelWidget.getVpsWidgetPaneID(), false);
telemetryPanelWidget.setPaneVisibility(telemetryPanelWidget.getLocationWidgetPaneID(), false);

APIs

List of the customization APIs

val amslAltitudeWidgetPaneID: Int - ID of the pane containing the AMSL Altitude Widget.
val aglAltitudeWidgetPaneID: Int - ID of the pane containing the AGL Altitude Widget.
val horizontalVelocityWidgetPaneID: Int - ID of the pane containing the Horizontal Velocity Widget.
val distanceRCWidgetPaneID: Int - ID of the pane containing the Distance RC Widget.
val distanceHomeWidgetPaneID: Int - ID of the pane containing the Distance Home Widget.
val verticalVelocityWidgetPaneID: Int - ID of the pane containing the Vertical Velocity Widget.
val vpsWidgetPaneID: Int - ID of the pane containing the VPS Widget.
val locationWidgetPaneID: Int - ID of the pane containing the Location Widget.