Skip to content

eMMC Status List Item Widget

Siddharth Utgikar edited this page Dec 22, 2020 · 2 revisions

eMMC Status List Item Widget is a LABEL_BUTTON type of widget. The widget will display the remaining capacity of the embeded or internal storage and its operation state which is denoted by SDCardOperationState.

Following are examples of the widget states:

Disconnected

Not Supported

CurrentEMMCState: Normal

CurrentEMMCState: Full

It also provides an option to format the internal storage. Tapping on the format button will show the format confirmation dialogs.

Format confirmation dialog

Format success dialog

Format error dialog

Usage

<dji.ux.beta.core.panel.listitem.emmcstatus.EMMCStatusListItemWidget
     android:id="@+id/emmc_status_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 LABEL_BUTTON supports.

XML Example

<dji.ux.beta.core.panel.listitem.emmcstatus.EMMCStatusListItemWidget
     android:id="@+id/emmc_status_list_item"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@color/uxsdk_gray_58"
     app:uxsdk_list_item_dialog_theme="@style/UXSDKDialogCustomTheme"
     app:uxsdk_list_item_button_text_color="@color/uxsdk_red"
     app:uxsdk_list_item_warning_color="@color/uxsdk_yellow"
     app:uxsdk_list_item_normal_color="@color/uxsdk_green_material_800"
     app:uxsdk_list_item_title_text_color="@color/black"/>

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_format_confirmation_dialog_icon - The drawable used for the format confirmation dialog.
  • uxsdk_format_success_dialog_icon - The drawable used for the format success dialog.
  • uxsdk_format_error_dialog_icon - The drawable used for the format error dialog.

Java Example

EMMCStatusListItemWidget eMMCItem = findViewById(R.id.emmc_status_list_item);
eMMCItem.setBackgroundColor(getResources().getColor(R.color.uxsdk_gray_58));
eMMCItem.setListItemTitleTextColor(getResources().getColor(R.color.uxsdk_black));
eMMCItem.setListItemButtonTextColor(getResources().getColor(R.color.uxsdk_red));
eMMCItem.setWarningValueColor(getResources().getColor(R.color.uxsdk_yellow));
eMMCItem.setNormalValueColor(getResources().getColor(R.color.uxsdk_green_material_800));

Kotlin Example

val eMMCItem: EMMCStatusListItemWidget = EMMCStatusListItemWidget(context)
eMMCItem.setBackgroundColor(resources.getColor(R.color.uxsdk_gray_58))
eMMCItem.listItemTitleTextColor = resources.getColor(R.color.uxsdk_black)
eMMCItem.listItemButtonTextColor = resources.getColor(R.color.uxsdk_red)
eMMCItem.warningValueColor = resources.getColor(R.color.uxsdk_yellow)
eMMCItem.normalValueColor = resources.getColor(R.color.uxsdk_green_material_800)

APIs

List of the customization APIs
  • @StyleRes var dialogTheme: Int - The style resource for all the format dialogs.
  • var formatConfirmationDialogIcon: Drawable? - The drawable used for the format confirmation dialog.
  • var formatSuccessDialogIcon: Drawable? - The drawable used for the format success dialog.
  • var formatErrorDialogIcon: Drawable? - The drawable used for the format error dialog.

Hooks

The widget provides hooks for the users to add functionality based on the state changes in the widget. The EMMCStatusListItemWidget 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 EMMCStateUpdated(val eMMCState: EMMCStatusListItemWidgetModel.EMMCState) : ModelState() - Event when the internal storage state is updated. The eMMC state provides the current OperationState and the remaining capacity of the internal storage.

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

  1. UIState - Provides hooks in events related to user interaction with the widget.
    • object ButtonClicked : UIState() - Event when the button is clicked.
    • 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 DialogType and can be used as a dialog identifier. Its types are

  • FormatConfirmation - Dialog shown for confirming format action.
  • FormatSuccess - Dialog shown when format action is successful.
  • FormatError - Dialog shown when format action fails.

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

Clone this wiki locally