Skip to content

FPV Interaction Widget

Jump to bottom
siddutgikar edited this page Jul 31, 2020 · 3 revisions

The FPV Interaction Widget allows the user to interact with the FPV Widget. To pair an instance of FPV Interaction Widget with an instance of FPV Widget, use the onStateChange method of FPVWidget.

When this widget is tapped, an icon will appear and the camera will either focus or perform spot metering at the tapped area, depending on the current ControlMode.

Icon Description
Spot Metering
Center Metering
Auto Focus
Manual Focus

When the widget is long pressed then dragged, the gimbal controls will appear and the aircraft's gimbal will move. The speed at which the gimbal moves is based on the drag distance.

Usage

<dji.ux.beta.cameracore.widget.fpvinteraction.FPVInteractionWidget
        android:id="@+id/widget_fpv_interaction"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

APIs

  • public void adjustAspectRatio(@IntRange(from = 1) int width, @IntRange(from = 1) int height) - Adjust the width and height of the interaction area. This should be called whenever the size of the video feed changes. The interaction area will be centered within the view.

Customizations

Each of the images displayed can be customized to match the style of the user's application.

XML Example

<dji.ux.beta.cameracore.widget.fpvinteraction.FPVInteractionWidget
    android:id="@+id/widget_fpv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:uxsdk_manualFocusIcon="@drawable/ic_center_focus_weak_white_24dp"
    app:uxsdk_autoFocusIcon="@drawable/ic_center_focus_strong_white_24dp"
    app:uxsdk_centerMeterIcon="@drawable/ic_crop_free_white_24dp"
    app:uxsdk_spotMeterIcon="@drawable/ic_control_point_white_24dp"
    app:uxsdk_gimbalPointIcon="@drawable/ic_brightness_1_white_24dp"
    app:uxsdk_gimbalMoveIcon="@drawable/ic_crop_square_white_24dp"
    app:uxsdk_gimbalArrowIcon="@drawable/ic_chevron_right_white_24dp" />

Java Example

FPVInteractionWidget fpvInteractionWidget = findViewById(R.id.widget_fpv_interaction);
fpvInteractionWidget.setManualFocusIcon(R.drawable.ic_center_focus_weak_white_24dp);
fpvInteractionWidget.setAutoFocusIcon(R.drawable.ic_center_focus_strong_white_24dp);
fpvInteractionWidget.setCenterMeterIcon(R.drawable.ic_crop_free_white_24dp);
fpvInteractionWidget.setSpotMeterIcon(R.drawable.ic_control_point_white_24dp);
fpvInteractionWidget.setGimbalPointIcon(R.drawable.ic_brightness_1_white_24dp);
fpvInteractionWidget.setGimbalMoveIcon(R.drawable.ic_crop_square_white_24dp);
fpvInteractionWidget.setGimbalArrowIcon(R.drawable.ic_chevron_right_white_24dp);
Icon Description
Spot Metering
Center Metering
Auto Focus
Manual Focus
Gimbal Control

Attributes

List of the customizable XML attributes
  • uxsdk_cameraIndex - The index of camera to which the widget should react.
  • uxsdk_gimbalIndex - The index of gimbal to which the widget should react.
  • uxsdk_manualFocusIcon - The drawable resource for the manual focus icon.
  • uxsdk_autoFocusIcon - The drawable resource for the auto focus icon.
  • uxsdk_autoFocusContinuousIcon - The drawable resource for the auto focus continuous icon.
  • uxsdk_focusTargetDuration - The duration in milliseconds that the focus target will stay on the screen before disappearing. This is the amount of time after the animation completes, if any.
  • uxsdk_centerMeterIcon - The drawable resource for the center meter icon.
  • uxsdk_spotMeterIcon - The drawable resource for the spot meter icon.
  • uxsdk_centerMeterScaleX - The scaleX of the center meter icon compared to the spot meter icon. For example, if center meter icon is twice as wide as the spot meter icon, the scaleX would be 2.
  • uxsdk_centerMeterScaleY - The scaleY of the center meter icon compared to the spot meter icon. For example, if center meter icon is twice as tall as the spot meter icon, the scaleY would be 2.
  • uxsdk_gimbalPointIcon - The drawable resource for the icon that represents the point at which the gimbal started.
  • uxsdk_gimbalMoveIcon - The drawable resource for the icon that represents the point towards which the gimbal is moving.
  • uxsdk_gimbalArrowIcon - The drawable resource for the icon that represents the direction the gimbal is moving.
  • uxsdk_gimbalVelocityFactor - The velocity factor of the gimbal control view. The distance between the original point and the current touch location is divided by this number to calculate the speed of the gimbal. Therefore a higher velocity factor will result in a lower gimbal rotation speed. The default is 16.
  • uxsdk_vibrationEnabled - Whether the device will vibrate when the gimbal control view appears.
  • uxsdk_vibrationDuration - The duration of the vibration in milliseconds when the gimbal control view appears.
  • uxsdk_touchFocusEnabled - Whether Touch to Focus is enabled. Enabled by default.
  • uxsdk_spotMeteringEnabled - Whether spot metering is enabled. Enabled by default.
  • uxsdk_gimbalControlEnabled - Whether gimbal control is enabled. Enabled by default.
  • uxsdk_interactionEnabled - Whether interaction is enabled. Enabled by default.

APIs

List of the customization APIs
  • public void setCameraIndex(@NonNull CameraIndex cameraIndex) - Set the index of camera to which the widget should react.
  • @NonNull public CameraIndex getCameraIndex() - Get the index of the camera to which the widget is reacting.
  • public void setGimbalIndex(@Nullable GimbalIndex gimbalIndex) - Set the index of gimbal to which the widget should react.
  • @Nullable public GimbalIndex getGimbalIndex() - Get the index of the gimbal to which the widget is reacting.
  • public void setManualFocusIcon(@DrawableRes int resourceId) - Set the resource ID for the manual focus icon.
  • public void setManualFocusIcon(@Nullable Drawable icon) - Set the drawable resource for the manual focus icon.
  • @Nullable public Drawable getManualFocusIcon() - Get the drawable resource for the manual focus icon.
  • public void setAutoFocusIcon(@DrawableRes int resourceId) - Set the resource ID for the auto focus icon.
  • public void setAutoFocusIcon(@Nullable Drawable icon) - Set the drawable resource for the auto focus icon.
  • @Nullable public Drawable getAutoFocusIcon() - Get the drawable resource for the auto focus icon.
  • public void setAutoFocusContinuousIcon(@DrawableRes int resourceId) - Set the resource ID for the auto focus continuous icon.
  • public void setAutoFocusContinuousIcon(@Nullable Drawable icon) - Set the drawable resource for the auto focus continuous icon.
  • @Nullable public Drawable getAutoFocusContinuousIcon() - Get the drawable resource for the auto focus continuous icon.
  • public void setAutoFocusAnimator(@AnimatorRes int animatorId) - Sets the animator for the auto focus and auto focus continuous icons.
  • public long getFocusTargetDuration() - Gets the duration in milliseconds that the focus target will stay on the screen before disappearing. This is the amount of time after the animation completes, if any.
  • public void setFocusTargetDuration(long duration) - Sets the duration in milliseconds that the focus target will stay on the screen before disappearing. This is the amount of time after the animation completes, if any.
  • @Nullable public Drawable getCenterMeterIcon() - Get the drawable resource for the center meter icon.
  • public void setCenterMeterIcon(@DrawableRes int resourceId) - Set the resource ID for the center meter icon.
  • public void setCenterMeterIcon(@Nullable Drawable centerMeterIcon) - Set the drawable resource for the center meter icon.
  • @Nullable public Drawable getSpotMeterIcon() - Get the drawable resource for the spot meter icon.
  • public void setSpotMeterIcon(@DrawableRes int resourceId) - Set the resource ID for the spot meter icon.
  • public void setSpotMeterIcon(@Nullable Drawable spotMeterIcon) - Set the drawable resource for the spot meter icon.
  • public float getCenterMeterScaleX() - Gets the scaleX of the center meter icon compared to the spot meter icon. For example, if center meter icon is twice as wide as the spot meter icon, the scaleX would be 2.
  • public void setCenterMeterScaleX(float centerMeterScaleX) - Sets the scaleX of the center meter icon compared to the spot meter icon. For example, if center meter icon is twice as wide as the spot meter icon, the scaleX would be 2.
  • public float getCenterMeterScaleY() - Gets the scaleY of the center meter icon compared to the spot meter icon. For example, if center meter icon is twice as tall as the spot meter icon, the scaleY would be 2.
  • public void setCenterMeterScaleY(float centerMeterScaleY) - Sets the scaleY of the center meter icon compared to the spot meter icon. For example, if center meter icon is twice as tall as the spot meter icon, the scaleY would be 2.
  • @Nullable public Drawable getGimbalPointIcon() - Get the drawable resource for the icon that represents the point at which the gimbal started.
  • public void setGimbalPointIcon(@DrawableRes int resourceId) - Set the resource ID for the icon that represents the point at which the gimbal started.
  • public void setGimbalPointIcon(@Nullable Drawable gimbalPointIcon) - Set the drawable resource for the icon that represents the point at which the gimbal started.
  • @Nullable public Drawable getGimbalMoveIcon() - Get the drawable resource for the icon that represents the point towards which the gimbal is moving.
  • public void setGimbalMoveIcon(@DrawableRes int resourceId) - Set the resource ID for the icon that represents the point towards which the gimbal is moving.
  • public void setGimbalMoveIcon(@Nullable Drawable gimbalMoveIcon) - Set the drawable resource for the icon that represents the point towards which the gimbal is moving.
  • @Nullable public Drawable getGimbalArrowIcon() - Get the drawable resource for the icon that represents the direction the gimbal is moving.
  • public void setGimbalArrowIcon(@DrawableRes int resourceId) - Set the resource ID for the icon that represents the direction the gimbal is moving.
  • public void setGimbalArrowIcon(@Nullable Drawable gimbalArrowIcon) - Set the drawable resource for the icon that represents the direction the gimbal is moving.
  • public float getGimbalVelocityFactor() - Gets the velocity factor of the gimbal control view. The distance between the original point and the current touch location is divided by this number to calculate the speed of the gimbal. Therefore a higher velocity factor will result in a lower gimbal rotation speed. The default is 16.
  • public void setGimbalVelocityFactor(@FloatRange(from = 1) float velocityFactor) - Sets the velocity factor of the gimbal control view. The distance between the original point and the current touch location is divided by this number to calculate the speed of the gimbal. Therefore a higher velocity factor will result in a lower gimbal rotation speed. The default is 16.
  • public boolean isVibrationEnabled() - Get whether the device will vibrate when the gimbal control view appears.
  • public void setVibrationEnabled(boolean vibrationEnabled) - Set whether the device will vibrate when the gimbal control view appears.
  • public int getVibrationDuration() - Get the duration of the vibration in milliseconds when the gimbal control view appears.
  • public void setVibrationDuration(@IntRange(from = 0) int vibrationDuration) - Set the duration of the vibration in milliseconds when the gimbal control view appears.
  • public boolean isInteractionEnabled() - Get whether interaction is enabled.
  • public void setInteractionEnabled(boolean isInteractionEnabled) - Set whether interaction is enabled.
  • public boolean isTouchFocusEnabled() - Method to check if Touch to Focus is enabled.
  • public void setTouchFocusEnabled(boolean isTouchFocusEnabled) - Enable or disable Touch to Focus by this method. Enabled by default.
  • public boolean isSpotMeteringEnabled() - Method to check if spot metering using touch is enabled.
  • public void setSpotMeteringEnabled(boolean isSpotMeteringEnabled) - Enable or disable spot metering by this method. Enabled by default.
  • public boolean isGimbalControlEnabled() - Method to check if gimbal control using touch is enabled.
  • public void setGimbalControlEnabled(boolean isGimbalControlEnabled) - Enable or disable gimbal control by this method. Enabled by default.

DJI UX SDK Version 5 Beta 5

Guidelines
UX SDK 5.0 Overview
Core Module
Camera Core Module
Visual Cameras Module
Flight Module
Map Module
Accessory Module
Training Module
Clone this wiki locally