FPV Widget

The FPVWidget shows the video feed from the camera. The size of the FPVWidget will automatically adjust to match the current aspect ratio or resolution of the camera.

In addition, the following overlays are available:

Overlay Name	Image	Description
Camera Name		A text view which displays the camera name on top of the video feed.
Camera Side		A text view which displays the camera side (port or starboard) on top of the video feed when applicable.
Grid Lines		The grid line overlay which will show the GridLineView on top of the video feed.
Center Point		The center point overlay which will show the CenterPointView on top of the video feed.

When the product is disconnected, the video feed is switched to grayscale.

Usage

<dji.ux.beta.core.widget.fpv.FPVWidget
        android:id="@+id/widget_fpv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

Customizations

The UI elements can be customized to match the style of the user's application. The customizations can be done using attributes in XML or programmatically using the APIs.

XML Example

<dji.ux.beta.core.widget.fpv.FPVWidget
    android:id="@+id/widget_fpv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:uxsdk_sourceCameraNameVisibility="true"
    app:uxsdk_cameraNameTextColor="@color/dark_green"
    app:uxsdk_cameraNameBackgroundDrawable="@color/transparent"
    app:uxsdk_sourceCameraSideVisibility="true"
    app:uxsdk_cameraSideTextColor="@color/dark_green"
    app:uxsdk_cameraSideBackgroundDrawable="@color/transparent"
    app:uxsdk_centerPointEnabled="true"
    app:uxsdk_centerPointType="square"
    app:uxsdk_centerPointColor="@color/dark_green"
    app:uxsdk_gridLinesEnabled="true"
    app:uxsdk_gridLineType="parallel"
    app:uxsdk_gridLineColor="@color/dark_green" />

Attributes

List of the customizable XML attributes

uxsdk_videoSource - Set the video source. Choose from three options: "auto", "primary", "secondary". By default, the video source is set to "auto" if it is not specified.
uxsdk_sourceCameraNameVisibility - Shows or hides the video feed source's camera name on the video feed.
uxsdk_sourceCameraSideVisibility - Shows or hides the side (starboard / port) of the camera on the video feed. Only works on aircraft that support multiple gimbals.
uxsdk_cameraNameTextAppearance - Set text appearance of the camera name text view.
uxsdk_cameraNameTextSize - Set the text size of the camera name text view.
uxsdk_cameraNameTextColor - Set the text color for the camera name text view.
uxsdk_cameraNameBackgroundDrawable - Set the background for the camera name text view.
uxsdk_cameraSideTextAppearance - Set text appearance of the camera side text view.
uxsdk_cameraSideTextSize - Set the text size of the camera side text view.
uxsdk_cameraSideTextColor - Set the text color for the camera side text view.
uxsdk_cameraSideBackgroundDrawable - Set the background for the camera side text view.
uxsdk_cameraDetailsVerticalAlignment - Set the vertical alignment of the camera name and side.
uxsdk_cameraDetailsHorizontalAlignment - Set the horizontal alignment of the camera name and side.
uxsdk_gridLineType - Set the type of grid line. Choose from three options: "none", "parallel", "parallelDiagonal".
uxsdk_gridLineColor - Set the color of the grid lines.
uxsdk_gridLineWidth - Set the width of the grid lines.
uxsdk_gridLineNumber - Set the number of lines drawn both horizontally and vertically on the screen, including the two border lines.
uxsdk_gridLinesEnabled - Set whether the grid lines are enabled.
uxsdk_centerPointType - Set the type of center point. Choose from eight options: "none", "standard", "cross", "narrowCross", "frame", "frameAndCross", "square", "squareAndCross".
uxsdk_centerPointColor - Set the color of the center point.
uxsdk_centerPointEnabled - Set whether the center point is enabled.
uxsdk_onStateChange - The ID of the FPV Interaction Widget that should react when this widget changes state.

Java Example

FPVWidget fpvWidget = findViewById(R.id.widget_fpv);
fpvWidget.setCameraSourceNameVisible(true);
fpvWidget.setCameraNameTextColor(getResources().getColor(R.color.dark_green));
fpvWidget.setCameraNameTextBackground(new ColorDrawable(getResources().getColor(R.color.transparent)));
fpvWidget.setCameraSourceNameVisible(true);
fpvWidget.setCameraSideTextColor(getResources().getColor(R.color.dark_green));
fpvWidget.setCameraSideTextBackground(new ColorDrawable(getResources().getColor(R.color.transparent)));
fpvWidget.setCenterPointEnabled(true);
fpvWidget.getCenterPointView().setType(CenterPointView.CenterPointType.SQUARE);
fpvWidget.getCenterPointView().setColor(getResources().getColor(R.color.dark_green));
fpvWidget.setGridLinesEnabled(true);
fpvWidget.getGridLineView().setType(GridLineView.GridLineType.PARALLEL);
fpvWidget.getGridLineView().setLineColor(getResources().getColor(R.color.dark_green));

Kotlin Example

val fpvWidget: FPVWidget = findViewById(R.id.widget_fpv)
fpvWidget.isCameraSourceNameVisible = true
fpvWidget.cameraNameTextColor = resources.getColor(R.color.dark_green)
fpvWidget.cameraNameTextBackground = ColorDrawable(resources.getColor(R.color.transparent))
fpvWidget.isCameraSourceNameVisible = true
fpvWidget.cameraSideTextColor = resources.getColor(R.color.dark_green)
fpvWidget.cameraSideTextBackground = ColorDrawable(resources.getColor(R.color.transparent))
fpvWidget.isCenterPointEnabled = true
fpvWidget.centerPointView.type = CenterPointView.CenterPointType.SQUARE
fpvWidget.centerPointView.color = resources.getColor(R.color.dark_green)
fpvWidget.isGridLinesEnabled = true
fpvWidget.gridLineView.type = GridLineView.GridLineType.PARALLEL
fpvWidget.gridLineView.lineColor = resources.getColor(R.color.dark_green)

FPVWidget APIs

List of the fpv customization APIs

var videoSource: SettingDefinitions.VideoSource? - The video source. Choose from three options: AUTO, PRIMARY, SECONDARY. By default, the video source is set to AUTO if it is not specified.
val cameraName: Flowable<String> - The name of the current camera.
var isCameraSourceNameVisible: Boolean - Whether the video feed source's camera name is visible on the video feed.
var isCameraSourceSideVisible: Boolean - Whether the video feed source's camera side is visible on the video feed.
var cameraNameTextColors: ColorStateList? - The text color state list of the camera name text view.
var cameraNameTextColor: Int - The text color of the camera name text view.
var cameraNameTextSize: Float - The text size of the camera name text view.
var cameraNameTextBackground: Drawable? - The background for the camera name text view.
var cameraSideTextColors: ColorStateList? - The text color state list of the camera side text view.
var cameraSideTextColor: Int - The text color of the camera side text view.
var cameraSideTextSize: Float - The text size of the camera side text view.
var cameraSideTextBackground: Drawable? - The background of the camera side text view.
var cameraDetailsVerticalAlignment: Float - The vertical alignment of the camera name and side text views.
var cameraDetailsHorizontalAlignment: Float - The horizontal alignment of the camera name and side text views.
val gridLineView: GridLineView - The GridLineView shown in this widget. See "GridLineView APIs" section below for the full list of customizations.
val centerPointView: CenterPointView - The CenterPointView shown in this widget. See "CenterPointView APIs" section below for the full list of customizations.
var isGridLinesEnabled: Boolean - Whether the grid lines are enabled.
var isCenterPointEnabled: Boolean - Whether the center point is enabled.
var stateChangeCallback: FPVStateChangeCallback? - Callback for when the camera state is updated. This can be used to link the widget to an FPVInteractionWidget.
fun setCameraNameTextAppearance(@StyleRes textAppearance: Int) - Set the text appearance of the camera name text view.
fun setCameraSideTextAppearance(@StyleRes textAppearance: Int) - Set the text appearance of the camera side text view.

GridLineView APIs

List of the grid line customization APIs

var type: GridLineType - The type of grid line. Choose from three options: NONE, PARALLEL, PARALLEL_DIAGONAL.
var lineColor: Int - The color of the grid lines.
var lineWidth: Float - The width of the grid lines.
var numberOfLines: Int - The number of lines drawn both horizontally and vertically on the screen, including the two border lines.

CenterPointView APIs

List of the center point customization APIs

var type: CenterPointType - The type of center point. Choose from eight options: NONE, STANDARD, CROSS, NARROW_CROSS, FRAME, FRAME_AND_CROSS, SQUARE, SQUARE_AND_CROSS.
var color: Int - The color of the center point.
@JvmStatic fun setImageForType(type: CenterPointType, @DrawableRes drawableId: Int) - Sets a new drawable to display when the center point is set to the given type.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The FPV widget 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 product is connected or disconnected.
data class OrientationUpdated(val orientation: SettingsDefinitions.Orientation) : ModelState() - Event when the camera orientation changes.
data class VideoFeedSourceUpdated(val videoFeed: DJICodecManager.VideoSource) : ModelState() - Event when the video source is updated.
data class FPVSizeUpdated(val width: Int, val height: Int) : ModelState() - Event when the FPV size is updated.
data class CameraNameUpdated(val cameraName: String) : ModelState() - Event when the camera name is updated.
data class CameraSideUpdated(val cameraSide: CameraSide) : ModelState() - Event when the camera side is updated.
data class VideoFeedUpdated(val videoBuffer: ByteArray?, val size: Int) : ModelState() - Event when the video feed is updated.