Skip to content

Compass Widget

Jump to bottom
Siddharth Utgikar edited this page Dec 22, 2020 · 3 revisions

The compass widget aggregates the attitude and location data received from the aircraft into one widget. This includes the following:

Image Description
Position within the widget represents position of the aircraft relative to the pilot. Rotation represents the yaw of the aircraft.
True north relative to the pilot and the aircraft.
The aircraft's last recorded home location.
The pilot's position, determined by the location of the pilot's mobile device and the location of the RC.
Yaw of the gimbal
Concentric circles represent distance of the aircraft from the pilot, with each circle representing 100 meters. If the aircraft is farther than 400 meters, the aircraft icon will shrink and more rings will be added.
Height of the blue background represents the pitch of the aircraft. Rotation of the blue background represents the roll of the aircraft.
Yaw of the gimbal relative to the aircraft yaw. If the yaw is greater than 190 degrees, a red indicator will appear, and if the yaw is greater than 270 degrees the red indicator will blink.

The center of the compass can be set to the pilot's location or the home location.

Usage

<dji.ux.beta.core.widget.compass.CompassWidget
    android:id="@+id/widget_compass"
    android:layout_width="100dp"
    android:layout_height="100dp"/>

The ideal dimension ratio for this widget is 1:1.

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.

XML Example

<dji.ux.beta.core.widget.compass.CompassWidget
    android:id="@+id/widget_compass"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:uxsdk_homeIcon="@drawable/ic_home_custom"
    app:uxsdk_rcLocationIcon="@drawable/compass_rc_custom"
    app:uxsdk_aircraftIcon="@drawable/ic_aircraft_custom"
    app:uxsdk_gimbalYawIcon="@drawable/ic_gimbal_yaw_custom"
    app:uxsdk_northIcon="@drawable/ic_north_custom"
    app:uxsdk_innerCirclesIcon="@drawable/ic_inner_circles_custom"
    app:uxsdk_compassBackgroundIcon="@drawable/ic_background_custom"
    app:uxsdk_aircraftAttitudeIcon="@drawable/compass_attitude_custom"
    app:uxsdk_visualCompassViewStrokeWidth="3dp"
    app:uxsdk_visualCompassViewLineColor="@color/pink"
    app:uxsdk_visualCompassViewLineInterval="100"
    app:uxsdk_visualCompassViewNumberOfLines="5"
    app:uxsdk_gimbalYawViewStrokeWidth="3dp"
    app:uxsdk_gimbalYawViewYawColor="@color/green"
    app:uxsdk_gimbalYawViewBlinkColor="@color/white"
    app:uxsdk_gimbalYawViewInvalidColor="@color/orange"/>

Attributes

List of the customizable XML attributes
  • uxsdk_gimbalIndex - The gimbal index to which the widget should react.
  • uxsdk_homeIcon - The drawable for the home icon.
  • uxsdk_rcLocationIcon - The drawable for the RC location icon.
  • uxsdk_aircraftIcon - The drawable for the aircraft icon.
  • uxsdk_gimbalYawIcon - The drawable for the gimbal yaw icon.
  • uxsdk_northIcon - The drawable for the north icon.
  • uxsdk_innerCirclesIcon - The drawable for the inner circles icon in the compass background.
  • uxsdk_compassBackgroundIcon - The drawable for the background of the compass.
  • uxsdk_aircraftAttitudeIcon - The drawable for the aircraft attitude, preferably as a progress bar.
  • uxsdk_visualCompassViewStrokeWidth - Stroke width for the lines in the compass background (from 1 to 4).
  • uxsdk_visualCompassViewLineColor - Line color for the lines in the compass background.
  • uxsdk_visualCompassViewLineInterval - Line interval between the lines in the compass background (1 or higher).
  • uxsdk_visualCompassViewNumberOfLines - Number of lines in the compass background (3 or higher).
  • uxsdk_gimbalYawViewStrokeWidth - Stroke width for the lines in the gimbal yaw view (from 1 to 4).
  • uxsdk_gimbalYawViewYawColor - Color for the yaw in the gimbal yaw view.
  • uxsdk_gimbalYawViewInvalidColor - Color for invalid yaw in the gimbal yaw view.
  • uxsdk_gimbalYawViewBlinkColor - Color for the blinking warning in the gimbal yaw view.

Java Example

CompassWidget compassWidget = findViewById(R.id.widget_compass);
compassWidget.setHomeIcon(R.drawable.ic_home_custom);
compassWidget.setHomeIconBackground(customBackgroundDrawable);
compassWidget.setRCLocationIcon(customCompassRCDrawable);
compassWidget.setAircraftIcon(R.drawable.ic_compass_aircraft_custom);
compassWidget.setGimbalYawIcon(customGimbalYawIconDrawable);
compassWidget.setNorthIcon(R.drawable.ic_north_custom);
compassWidget.setInnerCirclesIcon(customInnerCirclesDrawable);
compassWidget.setCompassBackgroundIcon(R.drawable.custom_background_icon);
compassWidget.setAircraftAttitudeIcon(customProgressDrawableIcon);
compassWidget.setVisualCompassViewStrokeWidth(3f);
compassWidget.setVisualCompassViewLineColor(getResources().getColor(R.color.pink));
compassWidget.setVisualCompassViewLineInterval(100);
compassWidget.setVisualCompassViewNumberOfLines(5);
compassWidget.setGimbalYawViewStrokeWidth(3f);
compassWidget.setGimbalYawViewYawColor(getResources().getColor(R.color.green));
compassWidget.setGimbalYawViewInvalidColor(getResources().getColor(R.color.white));
compassWidget.setGimbalYawViewBlinkColor(getResources().getColor(R.color.orange));

Kotlin Example

val compassWidget = findViewById<CompassWidget>(R.id.widget_compass)
compassWidget.setHomeIcon(R.drawable.ic_home_custom)
compassWidget.homeIconBackground = customBackgroundDrawable
compassWidget.rcLocationIcon = customCompassRCDrawable
compassWidget.setAircraftIcon(R.drawable.ic_compass_aircraft_custom)
compassWidget.gimbalYawIcon = customGimbalYawIconDrawable
compassWidget.setNorthIcon(R.drawable.ic_north_custom)
compassWidget.innerCirclesIcon = customInnerCirclesDrawable
compassWidget.setCompassBackgroundIcon(R.drawable.custom_background_icon)
compassWidget.aircraftAttitudeIcon = customProgressDrawableIcon
compassWidget.visualCompassViewStrokeWidth = 3f
compassWidget.visualCompassViewLineColor = resources.getColor(R.color.pink)
compassWidget.visualCompassViewLineInterval = 100
compassWidget.visualCompassViewNumberOfLines = 5
compassWidget.gimbalYawViewStrokeWidth = 3f
compassWidget.gimbalYawViewYawColor = resources.getColor(R.color.green)
compassWidget.gimbalYawViewInvalidColor = resources.getColor(R.color.white)
compassWidget.gimbalYawViewBlinkColor = resources.getColor(R.color.orange)

APIs

List of the customization APIs
  • fun getGimbalIndex(): GimbalIndex? - Get the index of the gimbal to which the widget is reacting.
  • fun setGimbalIndex(gimbalIndex: GimbalIndex?) - Set the index of gimbal to which the widget should react.
  • fun setHomeIcon(@DrawableRes resourceId: Int) - Set the resource ID for the home icon.
  • var homeIcon: Drawable - The drawable resource for the home icon.
  • fun setHomeIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the home icon's background.
  • var homeIconBackground: Drawable - The drawable resource for the home icon's background.
  • fun setRCLocationIcon(@DrawableRes resourceId: Int) - Set the resource ID for the RC location icon.
  • var rcLocationIcon: Drawable - Set the drawable resource for the RC location icon.
  • fun setRCLocationIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the RC location icon's background.
  • var rcLocationIconBackground: Drawable - The drawable resource for the RC location icon's background.
  • fun setAircraftIcon(@DrawableRes resourceId: Int) - Set the resource ID for the aircraft icon.
  • var aircraftIcon: Drawable - The drawable resource for the aircraft icon.
  • fun setAircraftIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the aircraft icon's background.
  • var aircraftIconBackground: Drawable - The drawable resource for the aircraft icon's background.
  • fun setGimbalYawIcon(@DrawableRes resourceId: Int) - Set the resource ID for the gimbal yaw icon.
  • var gimbalYawIcon: Drawable - The drawable resource for the gimbal yaw icon.
  • fun setGimbalYawIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the gimbal yaw icon's background.
  • var gimbalYawIconBackground: Drawable - The drawable resource for the gimbal yaw icon's background.
  • fun setNorthIcon(@DrawableRes resourceId: Int) - Set the resource ID for the north icon.
  • var northIcon: Drawable - The drawable resource for the north icon.
  • fun setNorthIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the north icon's background.
  • var northIconBackground: Drawable - The drawable resource for the north icon's background.
  • fun setInnerCirclesIcon(@DrawableRes resourceId: Int) - Set the resource ID for the inner circles icon.
  • var innerCirclesIcon: Drawable - The drawable resource for the inner circles icon.
  • fun setInnerCirclesIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the inner circles icon's background.
  • var innerCirclesIconBackground: Drawable - The drawable resource for the inner circles icon's background.
  • fun setCompassBackgroundIcon(@DrawableRes resourceId: Int) - Set the resource ID for the compass background icon.
  • var compassBackgroundIcon: Drawable - The drawable resource for the compass background icon.
  • fun setCompassBackgroundIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the compass background icon's background.
  • var compassBackgroundIconBackground: Drawable - The drawable resource for the compass background icon's background.
  • var aircraftAttitudeIcon: Drawable? - The drawable resource for the aircraft attitude icon.
  • fun setAircraftAttitudeIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the aircraft attitude icon's background.
  • var aircraftAttitudeIconBackground: Drawable - The drawable resource for the aircraft attitude icon's background.
  • var visualCompassViewStrokeWidth: Float - The stroke width for the lines in the visual compass view.
  • var visualCompassViewLineColor: Int - The color for the lines in the visual compass view.
  • var visualCompassViewLineInterval: Int - The interval between the lines in the visual compass view.
  • var visualCompassViewNumberOfLines: Int - The number of lines to be drawn in the visual compass view.
  • var gimbalYawViewStrokeWidth: Float - The stroke width for the lines in the gimbal yaw view.
  • var gimbalYawViewYawColor: Int - The yaw color in the gimbal yaw view.
  • var gimbalYawViewInvalidColor: Int - The invalid color in the gimbal yaw view.
  • var gimbalYawViewBlinkColor: Int - The blink color in the gimbal yaw view.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The Compass widget provides the following hooks

  1. ModelState - Provides hooks in events received by the widget from the widget model.
  • data class ProductConnected(val isConnected: Boolean) : ModelState() - Event when product is connected or disconnected.
  • data class CompassStateUpdated(val compassWidgetState: CompassWidgetState) : ModelState() - Event when the compass state is updated.

The user can subscribe to this using fun getWidgetStateUpdate(): Flowable<ModelState>

DJI UX SDK Version 5 Beta 5

Guidelines
UX SDK 5.0 Overview
Core Module
Camera Core Module
Visual Cameras Module
Flight Module
Map Module
Accessory Module
Training Module
Clone this wiki locally