Skip to content

Battery Widget

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

The battery widget is used to monitor the state of the Aircraft's battery or batteries. It has multiple appearances based on the type of product connected as well as the status of the battery.

Battery states are as follows:

  • NORMAL - The battery is operating correctly and is safe to fly
  • WARNING_LEVEL_1 - The battery level is below the threshold for returning home
  • WARNING_LEVEL_2 - The battery level is below the threshold for landing immediately
  • OVERHEATING - The battery temperature is above a safe threshold
  • ERROR - The battery has an issue
  • UNKNOWN - The state of the battery is not known (or is currently being loaded)

Unknown State / Initialization / Disconnect

Normal

Low Battery / Error / Warning Level 1 / Warning Level 2

Overheating

Normal

Low Battery / Error / Warning Level 1 / Warning Level 2

Overheating

Usage

<dji.ux.beta.core.widget.battery.BatteryWidget
  android:id="@+id/widget_battery"
  android:layout_width="75dp"
  android:layout_height="33dp" />

Customization

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.battery.BatteryWidget
        android:id="@+id/widget_battery"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:uxsdk_voltageVisibility="false"
        app:uxsdk_percentTextColorNormal="@color/custom_green"
        app:uxsdk_voltageTextColorNormal="@color/custom_green"
        app:uxsdk_percentTextColorOverheating="@color/custom_yellow"
        app:uxsdk_voltageTextColorOverheating="@color/custom_yellow"
        app:uxsdk_percentTextColorError="@color/custom_red"
        app:uxsdk_voltageTextColorError="@color/custom_red"
        app:uxsdk_percentTextColorWarningLevel1="@color/custom_red"
        app:uxsdk_percentTextColorWarningLevel2="@color/custom_red"
        app:uxsdk_voltageTextColorWarningLevel1="@color/custom_red"
        app:uxsdk_voltageTextColorWarningLevel2="@color/custom_red"
        app:uxsdk_dualIconNormal="@drawable/ic_dual_battery"
        app:uxsdk_dualIconOverheating="@drawable/ic_dual_battery_warning"
        app:uxsdk_dualIconWarningLevel1="@drawable/ic_dual_battery_error"
        app:uxsdk_dualIconWarningLevel2="@drawable/ic_dual_battery_error"
        app:uxsdk_dualIconError="@drawable/ic_dual_battery_error"
        app:uxsdk_dualIconUnknown="@drawable/ic_dual_battery_disconnected"
        app:uxsdk_singleIconNormal="@drawable/ic_battery_full"
        app:uxsdk_singleIconOverheating="@drawable/ic_battery_warning"
        app:uxsdk_singleIconWarningLevel1="@drawable/ic_battery_error"
        app:uxsdk_singleIconWarningLevel2="@drawable/ic_battery_error"
        app:uxsdk_singleIconError="@drawable/ic_battery_error"
        app:uxsdk_singleIconUnknown="@drawable/ic_battery_disconnected"/>

Attributes

List of the customizable XML attributes
  • uxsdk_voltageVisibility - The visibility flag whether to show cell voltages in dual battery mode
  • uxsdk_singlePercentTextSize - The icon for the single battery the given state
  • uxsdk_dualPercentTextSize - The size for the dual battery percent text
  • uxsdk_dualVoltageTextSize - The size for the dual battery voltage text
  • uxsdk_singlePercentAppearance - The appearance to apply to the percent text in single battery mode
  • uxsdk_dualPercentAppearance - The appearance to apply to the percent text in dual battery mode
  • uxsdk_dualVoltageAppearance - The appearance to apply to the voltage text in dual battery mode
  • uxsdk_percentTextColorNormal - The color of the percent text view when the battery is in the NORMAL state
  • uxsdk_percentTextColorError - The color of the percent text view when the battery is in the ERROR state
  • uxsdk_percentTextColorWarningLevel1 - The color of the percent text view when the battery is in the WARNING_LEVEL_1 state
  • uxsdk_percentTextColorWarningLevel2 - The color of the percent text view when the battery is in the WARNING_LEVEL_2 state
  • uxsdk_percentTextColorOverheating - The color of the percent text view when the battery is in the OVERHEATING state
  • uxsdk_percentTextColorUnknown - The color of the percent text view when the battery is in the UNKNOWN state
  • uxsdk_voltageTextColorNormal - The color of the voltage text view when the battery is in the NORMAL state
  • uxsdk_voltageTextColorError - The color of the voltage text view when the battery is in the ERROR state
  • uxsdk_voltageTextColorWarningLevel1 - The color of the voltage text view when the battery is in the WARNING_LEVEL_1 state
  • uxsdk_voltageTextColorWarningLevel2 - The color of the voltage text view when the battery is in the WARNING_LEVEL_2 state
  • uxsdk_voltageTextColorOverheating - The color of the voltage text view when the battery is in the OVERHEATING state
  • uxsdk_voltageTextColorUnknown - The color of the voltage text view when the battery is in the UNKNOWN state
  • uxsdk_voltageBackgroundNormal - The background drawable resource of the voltage text view when the battery is in the NORMAL state
  • uxsdk_voltageBackgroundError - The background drawable resource of the voltage text view when the battery is in the ERROR state
  • uxsdk_voltageBackgroundWarningLevel1 - The background drawable resource of the voltage text view when the battery is in the WARNING_LEVEL_1 state
  • uxsdk_voltageBackgroundWarningLevel2 - The background drawable resource of the voltage text view when the battery is in the WARNING_LEVEL_2 state
  • uxsdk_voltageBackgroundOverheating - The background drawable resource of the voltage text view when the battery is in the OVERHEATING state
  • uxsdk_voltageBackgroundUnknown - The background drawable resource of the voltage text view when the battery is in the UNKNOWN state
  • uxsdk_singleIconNormal - The single battery icon drawable when in the NORMAL state
  • uxsdk_singleIconError - The single battery icon drawable when in the ERROR state
  • uxsdk_singleIconWarningLevel1 - The single battery icon drawable when in the WARNING_LEVEL_1 state
  • uxsdk_singleIconWarningLevel2 - The single battery icon drawable when in the WARNING_LEVEL_2 state
  • uxsdk_singleIconOverheating - The single battery icon drawable when in the OVERHEATING state
  • uxsdk_singleIconUnknown - The single battery icon drawable when in the UNKNOWN state
  • uxsdk_singleIconDimensionRatio - The string containing the dimension ratio of the single battery icon
  • uxsdk_dualIconNormal - The dual battery icon drawable when in the NORMAL state
  • uxsdk_dualIconError - The dual battery icon drawable when in the ERROR state
  • uxsdk_dualIconWarningLevel1 - The dual battery icon drawable when in the WARNING_LEVEL_1 state
  • uxsdk_dualIconWarningLevel2 - The dual battery icon drawable when in the WARNING_LEVEL_2 state
  • uxsdk_dualIconOverheating - The dual battery icon drawable when in the OVERHEATING state
  • uxsdk_dualIconUnknown - The dual battery icon drawable when in the UNKNOWN state
  • uxsdk_dualIconDimensionRatio- The string containing the dimension ratio of the dual battery icon

Java Example

BatteryWidget batteryWidget = findViewById(R.id.widget_battery);
batteryWidget.setVoltageVisibility(false);
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.NORMAL, getResources().getColor(R.color.custom_green));
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.UNKNOWN, getResources().getColor(R.color.custom_green));
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.OVERHEATING, getResources().getColor(R.color.custom_yellow));
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, getResources().getColor(R.color.custom_redz));
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, getResources().getColor(R.color.custom_red));
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.ERROR, getResources().getColor(R.color.custom_red));
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.NORMAL, getResources().getColor(R.color.custom_green));
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.UNKNOWN, getResources().getColor(R.color.custom_green));
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.OVERHEATING, getResources().getColor(R.color.custom_yellow));
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, getResources().getColor(R.color.custom_red));
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, getResources().getColor(R.color.custom_red));
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.ERROR, getResources().getColor(R.color.custom_red));
        batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.NORMAL, getResources().getDrawable(R.drawable.background_battery_voltage_bg_normal));
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.UNKNOWN, getResources().getDrawable(R.drawable.background_battery_voltage_bg_normal));
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.OVERHEATING, getResources().getDrawable(R.drawable.background_battery_voltage_bg_overheating));
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, getResources().getDrawable(R.drawable.background_battery_voltage_bg_danger));
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, getResources().getDrawable(R.drawable.background_battery_voltage_bg_danger));
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.ERROR, getResources().getDrawable(R.drawable.background_battery_voltage_bg_danger));
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.UNKNOWN, getResources().getDrawable(R.drawable.ic_topbar_battery_single_nor));
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.OVERHEATING, getResources().getDrawable(R.drawable.ic_topbar_battery_single_overheating));
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, getResources().getDrawable(R.drawable.ic_topbar_battery_single_warning));
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, getResources().getDrawable(R.drawable.ic_topbar_battery_single_error));
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.ERROR, getResources().getDrawable(R.drawable.ic_topbar_battery_single_error));
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.UNKNOWN, getResources().getDrawable(R.drawable.ic_topbar_battery_double_nor));
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.OVERHEATING, getResources().getDrawable(R.drawable.ic_topbar_battery_double_overheating));
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, getResources().getDrawable(R.drawable.ic_topbar_battery_double_error));
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, getResources().getDrawable(R.drawable.ic_topbar_battery_double_error));
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.ERROR, getResources().getDrawable(R.drawable.ic_topbar_battery_double_error));

Kotlin Example

val batteryWidget:BatteryWidget = findViewById<View>(R.id.widget_battery)
batteryWidget.voltageVisibility = false
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.NORMAL, resources.getColor(R.color.battery_healthy))
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.UNKNOWN, resources.getColor(R.color.battery_healthy))
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.OVERHEATING, resources.getColor(R.color.battery_overheating))
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, resources.getColor(R.color.battery_danger))
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, resources.getColor(R.color.battery_danger))
batteryWidget.setPercentTextColor(BatteryWidgetModel.BatteryStatus.ERROR, resources.getColor(R.color.battery_danger))
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.NORMAL, resources.getColor(R.color.battery_healthy))
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.UNKNOWN, resources.getColor(R.color.battery_healthy))
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.OVERHEATING, resources.getColor(R.color.battery_overheating))
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, resources.getColor(R.color.battery_danger))
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, resources.getColor(R.color.battery_danger))
batteryWidget.setVoltageTextColor(BatteryWidgetModel.BatteryStatus.ERROR, resources.getColor(R.color.battery_danger))
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.NORMAL, resources.getDrawable(R.drawable.background_battery_voltage_bg_normal))
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.UNKNOWN, resources.getDrawable(R.drawable.background_battery_voltage_bg_normal))
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.OVERHEATING, resources.getDrawable(R.drawable.background_battery_voltage_bg_overheating))
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, resources.getDrawable(R.drawable.background_battery_voltage_bg_danger))
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, resources.getDrawable(R.drawable.background_battery_voltage_bg_danger))
batteryWidget.setDualBatteryVoltageBackground(BatteryWidgetModel.BatteryStatus.ERROR, resources.getDrawable(R.drawable.background_battery_voltage_bg_danger))
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.UNKNOWN, resources.getDrawable(R.drawable.ic_topbar_battery_single_nor))
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.OVERHEATING, resources.getDrawable(R.drawable.ic_topbar_battery_single_overheating))
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, resources.getDrawable(R.drawable.ic_topbar_battery_single_warning))
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, resources.getDrawable(R.drawable.ic_topbar_battery_single_error))
batteryWidget.setSingleIcon(BatteryWidgetModel.BatteryStatus.ERROR, resources.getDrawable(R.drawable.ic_topbar_battery_single_error))
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.UNKNOWN, resources.getDrawable(R.drawable.ic_topbar_battery_double_nor))
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.OVERHEATING, resources.getDrawable(R.drawable.ic_topbar_battery_double_overheating))
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_1, resources.getDrawable(R.drawable.ic_topbar_battery_double_error))
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.WARNING_LEVEL_2, resources.getDrawable(R.drawable.ic_topbar_battery_double_error))
batteryWidget.setDualIcon(BatteryWidgetModel.BatteryStatus.ERROR, resources.getDrawable(R.drawable.ic_topbar_battery_double_error))

APIs

List of the customization APIs
  • var voltageVisibility: Boolean - The visibility for dual battery voltage view
  • var singleBatteryPercentageTextSize: Float - The text size of single battery percentage
  • var singleBatteryPercentageBackground: Drawable? - The background of single battery percentage
  • var dualBatteryPercentageTextSize: Float - The text size of the dual battery percentage
  • var dualBatteryVoltageTextSize: Float - The text size of the dual battery voltage
  • var dualBatteryPercentageBackground: Drawable? - The background of dual battery percentage
  • fun setSingleIcon(batteryStatus: BatteryStatus, @DrawableRes resource: Int) - Set the icon for single battery based on status
  • fun setSingleIcon(batteryStatus: BatteryStatus, @DrawableRes resource: Int, ratio: String) - Set the icon for single battery and ratio based on status
  • fun setSingleIcon(batteryStatus: BatteryStatus, drawable: Drawable) - Set the icon for single battery based on status
  • fun setSingleIcon(batteryStatus: BatteryStatus, drawable: Drawable, ratio: String) - Set the icon for single battery and ratio based on status
  • fun getSingleIcon(batteryStatus: BatteryStatus) - Get the icon for single battery based on status
  • fun setDoubleIcon(batteryStatus: BatteryStatus, @DrawableRes resource: Int) - Set the icon for double battery based on status
  • fun setDoubleIcon(batteryStatus: BatteryStatus, @DrawableRes resource: Int, ratio: String) - Set the icon for double battery and ratio based on status
  • fun setDoubleIcon(batteryStatus: BatteryStatus, drawable: Drawable) - Set the icon for double battery based on status
  • fun setDoubleIcon(batteryStatus: BatteryStatus, drawable: Drawable, ratio: String) - Set the icon for double battery and ratio based on status
  • fun getDoubleIcon(batteryStatus: BatteryStatus) - Get the icon for double battery based on status
  • fun getPercentTextColor(batteryStatus: BatteryStatus): Int? - Get current color of the percent text view for the given state
  • fun setPercentTextColor(batteryStatus: BatteryStatus, @ColorInt color: Int) - Set the current color of percent textview based on state
  • fun setSinglePercentTextAppearance(@StyleRes textAppearance: Int) - Set the single battery percent text appearance
  • fun setDualPercentTextAppearance(@StyleRes textAppearance: Int) - Set the dual battery percent text appearance
  • fun getVoltageTextColor(batteryStatus: BatteryStatus): Int? - Get current color of the voltage text view for the given state
  • fun setVoltageTextColor(batteryStatus: BatteryStatus, @ColorInt color: Int) - Set the current color of voltage textview based on state
  • fun setDualVoltageTextAppearance(@StyleRes textAppearance: Int) - Set the dual battery voltage text appearance
  • fun setDualBatteryVoltageBackground(batteryStatus: BatteryStatus, @DrawableRes resourceId: Int) - Set the background of dual battery voltage levels based on state
  • fun setDualBatteryVoltageBackground(batteryStatus: BatteryStatus, drawable: Drawable?) - Set the background of dual battery voltage levels based on state
  • fun getDualBatteryVoltageBackground(batteryStatus: BatteryStatus): Drawable? - Get the background of the dual battery voltage levels based on state
  • fun setSingleBatteryPercentageBackground(@DrawableRes resourceId: Int) - Set the background of the single battery percentage
  • fun setDualBatteryPercentageBackground(@DrawableRes resourceId: Int) - Set the background of the dual battery percentage

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The battery 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() - The event when product is connected or disconnected.
  • data class BatteryStateUpdated(val batteryState: BatteryState) : ModelState() - The event when the BatteryState 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