Flight Mode Widget

The flight mode widget is used to monitor the current flight mode of the aircraft. The flight modes are defined in the enum FlightMode.

The flight mode icon and text change color based on the connection status of the product. By default, it turns gray if the product is disconnected, and white if the product is connected.

Connected
Disconnected

Usage

<dji.ux.beta.core.widget.flightmode.FlightModeWidget
    android:id="@+id/widget_flight_mode"
    android:layout_width="wrap_content"
    android:layout_height="22dp" />

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.flightmode.FlightModeWidget
    android:id="@+id/widget_flight_mode"
    android:layout_width="wrap_content"
    android:layout_height="22dp"
    app:uxsdk_icon="@drawable/ic_custom_flight_mode"
    app:uxsdk_iconDimensionRatio="W,125:71"
    app:uxsdk_connectedStateTextColor="@color/green"
    app:uxsdk_connectedStateIconColor="@color/green"
    app:uxsdk_disconnectedStateTextColor="@color/red"
    app:uxsdk_disconnectedStateIconColor="@color/red"
    app:uxsdk_textSize="16sp" />

Attributes

List of the customizable XML attributes

uxsdk_textAppearance - The appearance of the flight mode text.
uxsdk_textBackground - The background of the flight mode text view.
uxsdk_textSize - The size of the flight mode text.
uxsdk_icon - The flight mode icon.
uxsdk_iconDimensionRatio - The ratio of the flight mode icon.
uxsdk_iconBackground - The background of the flight mode icon.
uxsdk_connectedStateIconColor - The color of the flight mode icon when the product is connected.
uxsdk_disconnectedStateIconColor - The color of the flight mode icon when the product is disconnected.
uxsdk_connectedStateTextColor - The color of the flight mode text when the product is connected.
uxsdk_disconnectedStateTextColor - The color of the flight mode text when the product is disconnected.

Java Example

FlightModeWidget flightModeWidget = findViewById(R.id.widget_flight_mode);
flightModeWidget.setIcon(R.drawable.ic_custom_flight_mode, "125:71");
flightModeWidget.setConnectedStateTextColor(getResources().getColor(R.color.green));
flightModeWidget.setConnectedStateIconColor(getResources().getColor(R.color.green));
flightModeWidget.setDisconnectedStateTextColor(getResources().getColor(R.color.red));
flightModeWidget.setDisconnectedStateIconColor(getResources().getColor(R.color.red));
flightModeWidget.setTextSize(16f);

Kotlin Example

val flightModeWidget: FlightModeWidget = findViewById(R.id.widget_flight_mode)
flightModeWidget.setIcon(R.drawable.ic_custom_flight_mode, "125:71")
flightModeWidget.connectedStateTextColor = resources.getColor(R.color.green)
flightModeWidget.connectedStateIconColor = resources.getColor(R.color.green)
flightModeWidget.disconnectedStateTextColor = resources.getColor(R.color.red)
flightModeWidget.disconnectedStateIconColor = resources.getColor(R.color.red)
flightModeWidget.textSize = 16f

APIs

List of the customization APIs

fun setTextAppearance(@StyleRes textAppearanceResId: Int) - Set the appearance of the flight mode text.
var icon: Drawable? - The flight mode icon.
fun setIcon(@DrawableRes resourceId: Int) - Set the resource ID for the flight mode icon. If the ratio of the image is not the default 1:1, use the setIcon method that takes a String ratio as well.
fun setIcon(drawable: Drawable?, dimensionRatio: String) - Set the flight mode icon with a custom ratio.
fun setIcon(@DrawableRes resourceId: Int, dimensionRatio: String) - Set the resource ID for the flight mode icon with a custom ratio.
var iconBackground: Drawable? - The background of the flight mode icon.
fun setIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the background of the flight mode icon.
var textBackground: Drawable? - The background of the flight mode text view.
fun setTextBackground(@DrawableRes resourceId: Int) - Set the resource ID for the background of the flight mode text view.
var textSize: Float - The size of the flight mode text.
var connectedStateIconColor: Int - The color of the flight mode icon when the product is connected.
var disconnectedStateIconColor: Int - The color of the flight mode icon when the product is disconnected.
var connectedStateTextColor: Int - The color of the flight mode text when the product is connected.
var disconnectedStateTextColor: Int - The color of the flight mode text when the product is disconnected.

Hooks

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

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 FlightModeUpdated(val flightModeText: String) : ModelState() - Event when the flight mode text is updated.

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

DJI UX SDK Version 5 Beta 5