Horizontal Velocity Widget

The Horizontal Velocity Widget is a TEXT type of Base Telemetry Widget. It shows the horizontal velocity of the aircraft while flying. Following are the states of the widget.

State	Image
Disconnected
Metric Unit System
Imperial Unit System

Usage

<dji.ux.beta.core.widget.horizontalvelocity.HorizontalVelocityWidget
     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.horizontalvelocity.HorizontalVelocityWidget
     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 horizontalVelocityWidget = HorizontalVelocityWidget(context)
horizontalVelocityWidget.setBackgroundColor(resources.getColor(R.color.white))
horizontalVelocityWidget.labelTextColor = resources.getColor(R.color.black)
horizontalVelocityWidget.valueTextColor = resources.getColor(R.color.blue)
horizontalVelocityWidget.unitTextColor = resources.getColor(R.color.blue)

Java Example

HorizontalVelocityWidget horizontalVelocityWidget = new HorizontalVelocityWidget(this);
horizontalVelocityWidget.setBackgroundColor(getResources().getColor(R.color.white));
horizontalVelocityWidget.setLabelTextColor(getResources().getColor(R.color.black));
horizontalVelocityWidget.setValueTextColor(getResources().getColor(R.color.blue));
horizontalVelocityWidget.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 HorizontalVelocityWidget 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 HorizontalVelocityStateUpdated(val horizontalVelocityState: HorizontalVelocityState) : ModelState() - Event when horizontal velocity is updated.

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