Skip to content

Distance Home Widget

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

The Distance Home Widget is a TEXT type of Base Telemetry Widget. It shows the distance between the current location of the aircraft and its home location. Following are the states of the widget.

State Image
Disconnected
Metric Unit System
Imperial Unit System

Usage

<dji.ux.beta.core.widget.distancehome.DistanceHomeWidget
     android:background="@color/black"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"/>

Customizations

The UI elements can be customized to match the style of the user's application. The widget supports all the Text Customizations provided in the Base Telemetry Widget.

XML Example

<dji.ux.beta.core.widget.distancehome.DistanceHomeWidget
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="@color/white"
     app:uxsdk_label_text_color="@color/black"
     app:uxsdk_value_text_color="@color/blue"
     app:uxsdk_unit_text_color="@color/blue"/>
State Image
Disconnected
Metric Unit System
Imperial Unit System

Kotlin Example

val distanceHomeWidget = DistanceHomeWidget(context)
distanceHomeWidget.setBackgroundColor(resources.getColor(R.color.white))
distanceHomeWidget.labelTextColor = resources.getColor(R.color.black)
distanceHomeWidget.valueTextColor = resources.getColor(R.color.blue)
distanceHomeWidget.unitTextColor = resources.getColor(R.color.blue)

Java Example

DistanceHomeWidget distanceHomeWidget = new DistanceHomeWidget(this);
distanceHomeWidget.setBackgroundColor(getResources().getColor(R.color.white));
distanceHomeWidget.setLabelTextColor(getResources().getColor(R.color.black));
distanceHomeWidget.setValueTextColor(getResources().getColor(R.color.blue));
distanceHomeWidget.setUnitTextColor(getResources().getColor(R.color.blue));

Hooks

The widget provides hooks for the users to add functionality based on the state changes in the widget. The DistanceHomeWidget 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 DistanceHomeStateUpdated(val distanceHomeState: DistanceHomeState) : ModelState() - Event when distance to home state is updated.

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

Clone this wiki locally