System Status Widget

This widget shows the system status of the aircraft. The color of the text changes depending on the severity of the status. There is no widget background by default, but if one is added using setSystemStatusBackgroundDrawable, then the background also blinks when the incoming message is urgent.

This widget receives the system status as an object of the WarningStatusItem class which contains the message to be displayed, and the warning level and urgency of the message. The default colors for the warning levels are as follows -

WarningLevel.OFFLINE
WarningLevel.GOOD
WarningLevel.WARNING
WarningLevel.ERROR

The text scrolls in a marquee if the text is too long to fit inside the widget. Additionally, if the message is "Height Limited Zone" or "Special Unlock", the maximum flight altitude is appended to the end of the message.

Usage

<dji.ux.beta.core.widget.systemstatus.SystemStatusWidget
    android:id="@+id/widget_system_status"
    android:layout_width="238dp"
    android:layout_height="33dp"/>

The ideal dimension ratio for this widget is 238:33.

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.systemstatus.SystemStatusWidget
    android:id="@+id/widget_system_status"
    android:layout_width="357dp"
    android:layout_height="50dp"
    app:uxsdk_systemStatusMessageTextAppearance="@style/CustomTheme"
    app:uxsdk_systemStatusMessageTextSize="24sp"
    app:uxsdk_systemStatusMessageOfflineTextColor="@color/white"
    app:uxsdk_systemStatusMessageGoodTextColor="@color/white"
    app:uxsdk_systemStatusMessageWarningTextColor="@color/white"
    app:uxsdk_systemStatusMessageErrorTextColor="@color/white"
    app:uxsdk_systemStatusOfflineBackgroundDrawable="@drawable/custom_offline_background"
    app:uxsdk_systemStatusGoodBackgroundDrawable="@drawable/custom_good_background"
    app:uxsdk_systemStatusWarningBackgroundDrawable="@drawable/custom_warning_background"
    app:uxsdk_systemStatusErrorBackgroundDrawable="@drawable/custom_error_background" />

The customization shown above with white text and a gradient background can also be achieved by setting the defaultMode to GRADIENT.

Attributes

List of the customizable XML attributes

uxsdk_systemStatusMessageTextAppearance - The text appearance of the system status message text view.
uxsdk_systemStatusMessageTextSize - The text size of the system status message text view.
uxsdk_systemStatusMessageErrorTextColor - The text color of the system status message text view for WarningLevel.ERROR.
uxsdk_systemStatusMessageWarningTextColor - The text color of the system status message text view for WarningLevel.WARNING.
uxsdk_systemStatusMessageGoodTextColor - The text color of the system status message text view for WarningLevel.GOOD.
uxsdk_systemStatusMessageOfflineTextColor - The text color of the system status message text view for WarningLevel.OFFLINE.
uxsdk_systemStatusErrorBackgroundDrawable - The background image of the system status background for WarningLevel.ERROR.
uxsdk_systemStatusWarningBackgroundDrawable - The background image of the system status background for WarningLevel.WARNING.
uxsdk_systemStatusGoodBackgroundDrawable - The background image of the system status background for WarningLevel.GOOD.
uxsdk_systemStatusOfflineBackgroundDrawable - The background image of the system status background for WarningLevel.OFFLINE.
uxsdk_defaultMode - The default mode for the text colors and image backgrounds. Choose color for colored text with no background or gradient for white text with a gradient background.
uxsdk_onStateChange - The ID of the System Status List Widget that should react when this widget is tapped.

Java Example

SystemStatusWidget systemStatusWidget = findViewById(R.id.widget_system_status);
        systemStatusWidget.setSystemStatusMessageTextAppearance(R.style.CustomTheme);
        systemStatusWidget.setSystemStatusMessageTextSize(24f);
        systemStatusWidget.setSystemStatusMessageTextColor(WarningStatusItem.WarningLevel.ERROR, getResources().getColor(R.color.white));
        systemStatusWidget.setSystemStatusMessageTextColor(WarningStatusItem.WarningLevel.WARNING, getResources().getColor(R.color.white));
        systemStatusWidget.setSystemStatusMessageTextColor(WarningStatusItem.WarningLevel.GOOD, getResources().getColor(R.color.white));
        systemStatusWidget.setSystemStatusMessageTextColor(WarningStatusItem.WarningLevel.OFFLINE, getResources().getColor(R.color.white));
        systemStatusWidget.setSystemStatusBackgroundDrawable(WarningStatusItem.WarningLevel.ERROR, getResources().getDrawable(R.drawable.custom_error_background));
        systemStatusWidget.setSystemStatusBackgroundDrawable(WarningStatusItem.WarningLevel.WARNING, getResources().getDrawable(R.drawable.custom_warning_background));
        systemStatusWidget.setSystemStatusBackgroundDrawable(WarningStatusItem.WarningLevel.GOOD, getResources().getDrawable(R.drawable.custom_good_background));
        systemStatusWidget.setSystemStatusBackgroundDrawable(WarningStatusItem.WarningLevel.OFFLINE, getResources().getDrawable(R.drawable.custom_offline_background));

Kotlin Example

val systemStatusWidget: SystemStatusWidget = findViewById(R.id.widget_system_status)
        systemStatusWidget.setSystemStatusMessageTextAppearance(R.style.CustomTheme)
        systemStatusWidget.systemStatusMessageTextSize = 24f;
        systemStatusWidget.setSystemStatusMessageTextColor(WarningStatusItem.WarningLevel.ERROR, resources.getColor(R.color.white))
        systemStatusWidget.setSystemStatusMessageTextColor(WarningStatusItem.WarningLevel.WARNING, resources.getColor(R.color.white))
        systemStatusWidget.setSystemStatusMessageTextColor(WarningStatusItem.WarningLevel.GOOD, resources.getColor(R.color.white))
        systemStatusWidget.setSystemStatusMessageTextColor(WarningStatusItem.WarningLevel.OFFLINE, resources.getColor(R.color.white))
        systemStatusWidget.setSystemStatusBackgroundDrawable(WarningStatusItem.WarningLevel.ERROR, resources.getDrawable(R.drawable.custom_error_background))
        systemStatusWidget.setSystemStatusBackgroundDrawable(WarningStatusItem.WarningLevel.WARNING, resources.getDrawable(R.drawable.custom_warning_background))
        systemStatusWidget.setSystemStatusBackgroundDrawable(WarningStatusItem.WarningLevel.GOOD, resources.getDrawable(R.drawable.custom_good_background))
        systemStatusWidget.setSystemStatusBackgroundDrawable(WarningStatusItem.WarningLevel.OFFLINE, resources.getDrawable(R.drawable.custom_offline_background))

APIs

List of the customization APIs

var systemStatusMessageTextSize: Float - The text size of the system status message text view.
var defaultMode: DefaultMode - The default mode for the text colors and image backgrounds. Choose COLOR for colored text with no background or GRADIENT for white text with a gradient background.
var stateChangeCallback: OnStateChangeCallback<Any>? - The interface to react to the tapping of the widget.
fun setSystemStatusMessageTextAppearance(@StyleRes textAppearance: Int) - Set text appearance of the system status message text view.
fun setSystemStatusMessageTextColor(level: WarningLevel, @ColorInt color: Int) - Set the text color of the system status message for the given warning level.
fun setSystemStatusMessageTextColor(@ColorInt color: Int) - Set the text color of the system status message for all warning levels.
fun getSystemStatusMessageTextColor(level: WarningLevel): Int - Get the text color of the system status message for the given warning level.
fun setSystemStatusBackgroundDrawable(level: WarningLevel, background: Drawable?) - Set the background drawable of the system status message for the given warning level.
fun setSystemStatusBackgroundDrawable(background: Drawable?) - Set the background drawable of the system status message for all warning levels.
fun getSystemStatusBackgroundDrawable(level: WarningLevel): Drawable? - Get the background drawable of the system status message for the given warning level.

Hooks

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

SystemStatusWidgetState - Provides hooks in events received by the widget from the widget model.

data class ProductConnected(val isConnected: Boolean) : SystemStatusWidgetState() - Event when product is connected or disconnected.
data class SystemStatusUpdated(val status: WarningStatusItem) : SystemStatusWidgetState() - Event when system status is updated.

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

DJI UX SDK Version 5 Beta 5