Travel Mode List Item Widget

Travel Mode List Item Widget is a BUTTON type of widget. It provides a button to toggle the drone in and out of Travel Mode for easy transportation. This is currently used only for the DJI Inspire series drones.

Following are examples of the widget states:

Disconnected

Inactive

Active

The users will be presented with instructions in a confirmation dialog when they try to put the drone in travel mode.

Usage

<dji.ux.beta.core.panel.listitem.travelmode.TravelModeListItemWidget
     android:id="@+id/travel_mode_list_item"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"/>

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 BUTTON supports.

XML Example

<dji.ux.beta.core.panel.listitem.travelmode.TravelModeListItemWidget
     android:id="@+id/travel_mode_list_item"
     android:background="@color/uxsdk_gray_58"
     app:uxsdk_list_item_title_text_color="@color/black"
     app:uxsdk_list_item_button_background="@drawable/button_background_selector"
     app:uxsdk_list_item_button_text_color="@color/black"
     app:uxsdk_travel_mode_inactive_icon= "@drawable/ic_temp_inactive"
     app:uxsdk_travel_mode_active_icon= "@drawable/ic_temp_active"
     app:uxsdk_enter_travel_mode_button_string= "Fold"
     app:uxsdk_exit_travel_mode_button_string= "Unfold"
     app:uxsdk_list_item_dialog_theme="@style/UXSDKDialogCustomTheme"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"/>

The dialogs can be customized by using a custom theme.

<style name="UXSDKDialogCustomTheme" parent="Theme.AppCompat.Dialog.Alert">
   <item name="colorAccent">@color/uxsdk_red</item>
   <item name="android:background">@color/uxsdk_gray_58</item>
</style>

Attributes

List of the customizable XML attributes

• uxsdk_list_item_dialog_theme - The style resource for theming the dialogs.
• uxsdk_travel_mode_active_icon - The icon shown when the drone is in travel mode.
• uxsdk_travel_mode_inactive_icon - The icon shown when the drone is not in travel mode.
• uxsdk_enter_travel_mode_button_string - The action string shown on the button for entering travel mode.
• uxsdk_exit_travel_mode_button_string - The action string shown on the button for exiting travel mode.

Java Example

TravelModeListItemWidget travelModeListItemWidget = findViewById(R.id.travel_mode_list_item);
travelModeListItemWidget.setBackgroundColor(getResources().getColor(R.color.uxsdk_gray_58));
travelModeListItemWidget.setListItemTitleTextColor(getResources().getColor(R.color.black));
travelModeListItemWidget.setListItemButtonTextColor(getResources().getColor(R.color.black));
travelModeListItemWidget.setTravelModeActiveIcon(getResources().getDrawable(R.drawable.ic_temp_active));
travelModeListItemWidget.setTravelModeInactiveIcon(getResources().getDrawable(R.drawable.ic_temp_inactive));
travelModeListItemWidget.setEnterTravelModeButtonString("Fold");
travelModeListItemWidget.setExitTravelModeButtonString("Unfold");
travelModeListItemWidget.setDialogTheme(R.style.UXSDKDialogCustomTheme);
travelModeListItemWidget.setListItemButtonBackground(getResources().getDrawable(R.drawable.button_background_selector));

Kotlin Example

val travelModeListItemWidget: TravelModeListItemWidget = findViewById(R.id.travel_mode_list_item)
travelModeListItemWidget.setBackgroundColor(resources.getColor(R.color.uxsdk_gray_58))
travelModeListItemWidget.listItemTitleTextColor = resources.getColor(R.color.black)
travelModeListItemWidget.listItemButtonTextColor = resources.getColor(R.color.black)
travelModeListItemWidget.travelModeActiveIcon = resources.getDrawable(R.drawable.ic_temp_active)
travelModeListItemWidget.travelModeInactiveIcon = resources.getDrawable(R.drawable.ic_temp_inactive)
travelModeListItemWidget.enterTravelModeButtonString = "Fold"
travelModeListItemWidget.exitTravelModeButtonString = "Unfold"
travelModeListItemWidget.dialogTheme = R.style.UXSDKDialogCustomTheme
travelModeListItemWidget.listItemButtonBackground = resources.getDrawable(R.drawable.button_background_selector)

APIs

List of the customization APIs

• @StyleRes var dialogTheme: Int - The style resource for all the dialogs.
• var travelModeActiveIcon: Drawable? - The icon shown when the drone is in travel mode.
• var travelModeInactiveIcon: Drawable? - The icon shown when the drone is not in travel mode.
• var exitTravelModeButtonString: String - The action string shown on the button for entering travel mode.
• var enterTravelModeButtonString: String - The action string shown on the button for exiting travel mode.

Hooks

The widget provides hooks for the users to add functionality based on the state changes in the widget. The TravelModeListItemWidget 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 the product is connected or disconnected.
   • data class TravelModeStateUpdated(val travelModeState: TravelModeState) : ModelState() - Event when the travel mode state is updated.

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

2. UIState - Provides hooks in events related to user interaction with the widget.
   • object ButtonClicked : UIState() - Event when the button is tapped for editing.
   • data class DialogDisplayed(val info: Any?) : UIState() - Event when a dialog is displayed.
   • data class DialogActionConfirmed(val info: Any?) : UIState() - Event when the positive button on the dialog is clicked.
   • data class DialogActionCanceled(val info: Any?) : UIState() - Event when the negative button on the dialog is clicked.
   • data class DialogDismissed(val info: Any?) : UIState() - Event when a dialog is dismissed.

The info param is an instance of TravelModeItemDialogState and can be used as a dialog identifier. Its types are

• EnterTravelModeConfirmation - Dialog shown for advising user about entering travel mode.
• EnterTravelModeSuccess - Dialog shown when entering travel mode is successfull.
• EnterTravelModeError - Dialog shown when entering travel mode fails.
• ExitTravelModeError - Dialog shown when exiting travel mode fails.

The user can subscribe to this using fun getUIStateUpdates(): Flowable<UIState>.