Vertical Velocity Widget

The Vertical Velocity Widget is a TEXT_IMAGE_RIGHT type of Base Telemetry Widget. It shows the velocity of the drone in upward and downward direction. The icon on the right side of text displays the direction of the velocity. Following are the states of the widget.

State	Image
Disconnected
Metric Unit System
Imperial Unit System

Usage

<dji.ux.beta.core.widget.verticalvelocity.VerticalVelocityWidget
     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 and Icon Customizations provided in the Base Telemetry Widget.

XML Example

<dji.ux.beta.core.widget.verticalvelocity.VerticalVelocityWidget
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="@color/white"
     app:uxsdk_upward_velocity_icon="@drawable/ic_up"
     app:uxsdk_downward_velocity_icon="@drawable/ic_down"
     app:uxsdk_label_text_color="@color/black"
     app:uxsdk_value_text_color="@color/blue"
     app:uxsdk_unit_text_color="@color/blue"/>

Attributes

List of the customizable XML attributes

uxsdk_upward_velocity_icon - The icon for upward velocity.
uxsdk_downward_velocity_icon - The icon for downward velocity.

State	Image
Disconnected
Metric Unit System
Imperial Unit System

Kotlin Example

val verticalVelocityWidget = VerticalVelocityWidget(context)
verticalVelocityWidget.setBackgroundColor(resources.getColor(R.color.white))
verticalVelocityWidget.labelTextColor = resources.getColor(R.color.black)
verticalVelocityWidget.valueTextColor = resources.getColor(R.color.blue)
verticalVelocityWidget.unitTextColor = resources.getColor(R.color.blue)
verticalVelocityWidget.downwardVelocityIcon = resources.getDrawable(R.drawable.ic_down)
verticalVelocityWidget.upwardVelocityIcon = resources.getDrawable(R.drawable.ic_up)

Java Example

VerticalVelocityWidget verticalVelocityWidget = new VerticalVelocityWidget(this);
verticalVelocityWidget.setBackgroundColor(getResources().getColor(R.color.white));
verticalVelocityWidget.setLabelTextColor(getResources().getColor(R.color.black));
verticalVelocityWidget.setValueTextColor(getResources().getColor(R.color.blue));
verticalVelocityWidget.setUnitTextColor(getResources().getColor(R.color.blue));
verticalVelocityWidget.setDownwardVelocityIcon(getResources().getDrawable(R.drawable.ic_down));
verticalVelocityWidget.setUpwardVelocityIcon(getResources().getDrawable(R.drawable.ic_up));

APIs

List of the customization APIs

var upwardVelocityIcon: Drawable - The icon for upward velocity.
fun setUpwardVelocityIcon(@DrawableRes resourceId: Int) - Set the icon resource for upward velocity.
var downwardVelocityIcon: Drawable - The icon for downward velocity.
fun setDownwardVelocityIcon(@DrawableRes resourceId: Int) - Set the icon resource for downward velocity.

Hooks

The widget provides hooks for the users to add functionality based on the state changes in the widget. The VerticalVelocityWidget provides the following hooks

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 VerticalVelocityStateUpdated(val verticalVelocityState: VerticalVelocityState) : ModelState() - Event when the vertical velocity is updated.

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

DJI UX SDK Version 5 Beta 5