VPS Widget

The VPS Widget is a TEXT_IMAGE_RIGHT type of Base Telemetry Widget. It shows the status of the vision positioning system as well as the height of the aircraft as received from the vision positioning system if available.

The icon shows if the vision positioning system is enabled or disabled and the value text shows the height if available.

State	Image
Disconnected or Disabled
Metric Unit System
Imperial Unit System

Usage

<dji.ux.beta.core.widget.vps.VPSWidget
     android:layout_width="wrap_content"
     android:layout_height="150dp" />

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.vps.VPSWidget
     android:layout_width="wrap_content"
     android:layout_height="150dp"
     android:background="@color/white"
     app:uxsdk_vpsEnabledIcon="@drawable/ic_vision_sensor_active"
     app:uxsdk_vpsDisabledIcon="@drawable/ic_vision_sensor_inactive"
     app:uxsdk_label_text_color="@color/black"
     app:uxsdk_value_text_color="@color/blue"
     app:uxsdk_normal_text_color="@color/blue"
     app:uxsdk_unit_text_color="@color/blue"/>

State	Image
Disconnected or Disabled
Metric Unit System
Imperial Unit System

Attributes

List of the customizable XML attributes

• uxsdk_vpsEnabledIcon - The icon for vision sensors enabled state.
• uxsdk_vpsDisabledIcon - The icon for vision sensors disabled state.

Kotlin Example

val vpsWidget: VPSWidget = findViewById(R.id.widget_vps)
vpsWidget.setBackgroundColor(resources.getColor(R.color.white))
vpsWidget.labelTextColor = resources.getColor(R.color.black)
vpsWidget.valueTextColor = resources.getColor(R.color.blue)
vpsWidget.unitTextColor = resources.getColor(R.color.blue)
vpsWidget.setVPSEnabledIcon(resources.getDrawable(R.drawable.ic_vision_sensor_active))
vpsWidget.setVPSDisabledIcon(resources.getDrawable(R.drawable.ic_vision_sensor_inactive))

Java Example

VPSWidget vpsWidget = findViewById(R.id.widget_vps);
vpsWidget.setBackgroundColor(getResources().getColor(R.color.white));
vpsWidget.setLabelTextColor(getResources().getColor(R.color.black));
vpsWidget.setValueTextColor(getResources().getColor(R.color.blue));
vpsWidget.setUnitTextColor(getResources().getColor(R.color.blue));
vpsWidget.setVPSEnabledIcon(getResources().getDrawable(R.drawable.ic_vision_sensor_active));
vpsWidget.setVPSDisabledIcon(getResources().getDrawable(R.drawable.ic_vision_sensor_inactive));

APIs

List of the customization APIs

• vpsEnabledIcon - The icon for vision sensors enabled state.
• fun setVPSEnabledIcon(@DrawableRes resourceId: Int) - The drawable resource for vision sensors enabled icon.
• vpsDisabledIcon - The icon for vision sensors disabled state.
• fun setVPSDisabledIcon(@DrawableRes resourceId: Int) - The drawable resource for vision sensors disabled icon.

Hooks

The widget provides hooks for the users to add functionality based on the state changes in the widget. The VPSWidget 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 VPSStateUpdated(val vpsState: VPSState) : ModelState() - Event when the vision sensors or height is updated.

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