Remaining Flight Time Widget

The widget shows the remaining flight time graphically. Data displayed includes

1. Battery charge remaining in percentage
2. Battery required for the drone to return home
3. Battery required for the drone to land
4. Remaining flight time
5. Serious low battery threshold level
6. Low battery threshold level

When the product is disconnected the widget is hidden.

When aircraft is connected but not flying the flight time text is not available.

The graphical representation of the widget demonstrates the reduction in the battery level.

Usage

<dji.ux.beta.core.widget.remainingflighttime.RemainingFlightTimeWidget
        android:id="@+id/widget_remaining_flight_time"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintHeight_percent="0.04" />

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.remainingflighttime.RemainingFlightTimeWidget
        android:id="@+id/widget_remaining_flight_time"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintHeight_percent="0.04"
        app:layout_constraintStart_toStartOf="parent"
        app:uxsdk_batteryChargeRemainingColor="@color/custom_yellow"
        app:uxsdk_batteryRequiredToGoHomeColor="@color/custom_orange"
        app:uxsdk_batteryRequiredToLandColor="@color/custom_red"
        app:uxsdk_homeLetterBackgroundColor="@color/custom_blue"
        app:uxsdk_homeLetterColor="@color/white"
        app:uxsdk_lowBatteryThresholdColor="@color/custom_dark_green"
        app:uxsdk_seriousLowBatteryThresholdColor="@color/custom_light_green"/>

Attributes

List of the customizable XML attributes

• uxsdk_batteryChargeRemainingColor - The color representing battery charge remaining.
• uxsdk_batteryRequiredToGoHomeColor - The color representing battery required to go home.
• uxsdk_batteryRequiredToLandColor - The color representing battery required to land.
• uxsdk_lowBatteryThresholdColor - The color of the dot representing the threshold of low battery.
• uxsdk_seriousLowBatteryThresholdColor - The color of the dot representing the threshold of serious low battery.
• uxsdk_flightTimeBackgroundColor - The color of the background of the flight time text.
• uxsdk_flightTimeTextColor - The color of the flight time text.
• uxsdk_homeLetterBackgroundColor - The color of the background of the home letter.
• uxsdk_homeLetterColor - The color of the home letter.

Java Example

RemainingFlightTimeWidget remainingFlightTimeWidget = findViewById(R.id.widget_remaining_flight_time);
remainingFlightTimeWidget.setBatteryChargeRemainingColor(getResources().getColor(R.color.custom_yellow));
remainingFlightTimeWidget.setBatteryToReturnHomeColor(getResources().getColor(R.color.custom_orange));
remainingFlightTimeWidget.setBatteryRequiredToLandColor(getResources().getColor(R.color.custom_red));
remainingFlightTimeWidget.setLowBatteryThresholdDotColor(getResources().getColor(R.color.custom_dark_green));
remainingFlightTimeWidget.setSeriousLowBatteryThresholdDotColor(getResources().getColor(R.color.custom_light_green));
remainingFlightTimeWidget.setHomeLetterBackgroundColor(getResources().getColor(R.color.custom_blue));
remainingFlightTimeWidget.setHomeLetterColor(getResources().getColor(R.color.white));

Kotlin Example

val remainingFlightTimeWidget: RemainingFlightTimeWidget = findViewById(R.id.widget_remaining_flight_time)
remainingFlightTimeWidget.batteryChargeRemainingColor = resources.getColor(R.color.custom_yellow)
remainingFlightTimeWidget.batteryToReturnHomeColor = resources.getColor(R.color.custom_orange)
remainingFlightTimeWidget.batteryRequiredToLandColor = resources.getColor(R.color.custom_red)
remainingFlightTimeWidget.lowBatteryThresholdDotColor = resources.getColor(R.color.custom_dark_green)
remainingFlightTimeWidget.seriousLowBatteryThresholdDotColor = resources.getColor(R.color.custom_light_green)
remainingFlightTimeWidget.homeLetterBackgroundColor = resources.getColor(R.color.custom_blue)
remainingFlightTimeWidget.homeLetterColor = resources.getColor(R.color.white)

APIs

List of the customization APIs

• var batteryChargeRemainingColor: Int - The color representing battery charge remaining.
• var batteryToReturnHomeColor: Int - The color representing battery required to return home.
• var batteryRequiredToLandColor: Int - The color representing battery required to land.
• var seriousLowBatteryThresholdDotColor: Int - The color of the dot representing the threshold of serious low battery.
• var lowBatteryThresholdDotColor: Int - The color of the dot representing the threshold of low battery.
• var flightTimeTextColor: Int - The color of the flight time text.
• var flightTimeBackgroundColor: Int - The color of the background of the flight time text.
• var homeLetterColor: Int - The color of the home point letter.
• var homeLetterBackgroundColor: Int - The color of the background of the home point letter.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The remaining flight time 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() - Event when product is connected or disconnected.
   • data class AircraftFlyingUpdated(val isAircraftFlying: Boolean) : ModelState() - Event when aircraft toggles between flying and not flying state.
   • data class FlightTimeDataUpdated(val remainingFlightTimeData: RemainingFlightTimeData) : ModelState() - Event when remaining flight time data is updated.

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