FPV Widget

The FPVWidget shows the video feed from the camera.

In addition, the following overlays are available:

Image	Description
	A text view which displays the camera name on top of the video feed.
	A text view which displays the camera side (port or starboard) on top of the video feed when applicable.
	The grid line overlay which will show the DUXBetaFPVGridLineView on top of the video feed.
	The center point overlay which will show the DUXBetaFPVCenterPointView on top of the video feed.

Usage

To add the widget to an existing view controller in code, use the convenience method:

- (void)installInViewController:(nullable UIViewController *)viewController

this adds the widget as a subview of the viewController passed as an argument. Then, add constraints to the widget using its widgetSizeHint property to determine width, height and aspect ratio constraints.

To create the widget from a storyboard, use the object library to drag a container view controller into the desired view controller like so:

Make sure to change the child view controller class name to DUXBetaFPVWidget. From here you can create the constraints on the container view using widgetSizeHint property.

To speed up the performance of the stream decoding, the enableHardwareDecoding set to true/YES by default. We recommend having the hardware decoding enabled for primary FPV and disabled for secondary FPV, it enables better testing.

When using it as a secondary FPV, the ideal dimension ratio for this widget is 23:10.

Customizations

Each of the overlays can be enabled or disabled, and can be customized to match the style of the user's application.

Swift Example

fpvWidget.cameraDetailsVerticalAlignment = 0.2
fpvWidget.cameraDetailsHorizontalAlignment = 0.0
fpvWidget.isCameraNameVisible = true
fpvWidget.cameraNameFont = UIFont.systemFont(ofSize: 11)
fpvWidget.cameraNameTextColor = UIColor.green
fpvWidget.isCameraSideVisible = true
fpvWidget.cameraSideFont = UIFont.systemFont(ofSize: 11)
fpvWidget.cameraSideTextColor = UIColor.green
fpvWidget.isGridViewVisible = true
fpvWidget.gridView.lineWidth = 1.0
fpvWidget.gridView.lineColor = UIColor.green
fpvWidget.isCenterViewVisible = true
fpvWidget.centerView.imageType = .Square
fpvWidget.centerView.colorType = .Green
fpvWidget.gridView.gridViewType = .ParallelDiagonal

Objective-C Example

fpvWidget.cameraDetailsVerticalAlignment = 0.2;
fpvWidget.cameraDetailsHorizontalAlignment = 0.0;
fpvWidget.isCameraNameVisible = YES;
fpvWidget.cameraNameFont = [UIFont systemFontOfSize:11];
fpvWidget.cameraNameTextColor = [UIColor greenColor];
fpvWidget.isCameraSideVisible = YES;
fpvWidget.cameraSideFont = [UIFont systemFontOfSize:11];
fpvWidget.cameraSideTextColor = [UIColor greenColor];
fpvWidget.isGridViewVisible = YES;
fpvWidget.gridView.lineWidth = 1.0;
fpvWidget.gridView.lineColor = [UIColor greenColor];
fpvWidget.isCenterViewVisible = YES;
fpvWidget.centerView.imageType = DUXBetaFPVCenterViewTypeSquare;
fpvWidget.centerView.colorType = DUXBetaFPVCenterViewColorGreen;
fpvWidget.gridView.gridViewType = DUXBetaFPVGridViewTypeParallelDiagonal;

Full list of methods and properties

DUXBetaFPVWidget APIs

List of the FPV customization APIs

• @objc public var cameraDetailsVerticalAlignment: CGFloat - Specifies the vertical offset of the camera name and side values as a proportion of the height of the fpv widget, 0.2 by default.
• @objc public var cameraDetailsHorizontalAlignment: CGFloat - Specifies the horizontal offset of the camera name and side values as a proportion of the width of the fpv widget, 0.0 by default.
• @objc public var isCameraNameVisible: Bool - Controls the visibility of the displayed camera name value, true by default.
• @objc public var cameraNameFont: UIFont - The font used to display the camera name value.
• @objc public var cameraNameTextColor: UIColor - The text color used to display the camera name value.
• @objc public var cameraNameBackgroundColor: UIColor - The background color of the displayed camera name value.
• @objc public var isCameraSideVisible: Bool - Controls the visibility of the displayed camera side value, true by default.
• @objc public var cameraSideFont: UIFont - The font used to display the camera side value.
• @objc public var cameraSideTextColor: UIColor - The text color used to display the camera side value.
• @objc public var cameraSideBackgroundColor: UIColor - The background color of the displayed camera side value.
• @objc public var isGridViewVisible: Bool - Controls the visibility of the grid line view, true by default.
• @objc public var isCenterViewVisible: Bool - Controls the visibility of the center point view, true by default.
• @objc public var centerViewHeightPercentage: CGFloat - Specifies the height of the center point as a proportion of the height of the fpv widget, 0.1 by default.
• @objc public var centerViewWidthPercentage: CGFloat - Specifies the width of the center point as a proportion of the width of the fpv widget, 0.1 by default.
• @objc public var enableHardwareDecode: Bool - Controls if the stream decoding is done using the software decoder or the hardware decoder of the device, the hardware decoder is used by default.

DUXBetaFPVCenterPointView APIs

List of the center view point customization APIs

• @objc public var imageType: FPVCenterViewType - The image view type enum value that is stored into DefaultGlobalPreferences. Choose from .Standard, .Cross, .NarrowCross, .Frame, .FrameAndCross, .Square, .SqareAndCross, .Unknown, with FPVCenterViewType.Unknown by default.
• @objc public var colorType: FPVCenterViewColorType - The color view type enum value that is stored into DefaultGlobalPreferences. Choose from .White, .Yellow, .Red, .Green, .Blue, .Black, .Unknown with FPVCenterViewColorType.Unknown by default.
• @objc public var color: UIColor - The color of the center view image.

DUXBetaFPVGridLineView APIs

List of the grid line view customization APIs

• @objc public var gridViewType: FPVGridViewType - The grid view type enum value that is read and stored into the DefaultGlobalPreferences. Choose from 3 options: .Unknown, .Parallel, .ParallelDiagonal, with FPVGridViewType.Unknown by default.
• @objc public var rowCount: Int- The number of rows displayed by the grid view with a default value 3.
• @objc public var columnCount: Int- The number of columns displayed by the grid view with a default value 3.
• @objc public var lineWidth: CGFloat - The line thickness used for drawing the lines with a default value 0.5.
• @objc public var lineColor: UIColor - The line color used for drawing the lines with a default value 95% grayscale with 100% alpha.
• @objc public var isShadowVisible: Bool - The line shadow's visibility, true by default.
• @objc public var shadowBlur: CGFloat - The line shadow's blur value, be default 1.0.
• @objc public var shadowColor: UIColor - The line shadow's color value, be default is transparent with a 40% alpha.
• @objc public var shadowOffset: CGSize - The line shadow's offset as a translation in the rendering context, by default is (0.0, 0.0) size.

Hooks

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

The FPV widget provides two types of hooks:

1. FPVWidgetModelState - Provides hooks in events received by the widget from the widget model.

• @objc public static func productConnected(_ isConnected: Bool) - Event sent when product is connected or disconnected.
• @objc public static func cameraNameUpdated(_ cameraName: String) - Event sent when camera name is updated.
• @objc public static func cameraSideUpdated(_ cameraSide: String) - Event sent when camera side is updated.
• @objc public static func encodeTypeUpdated(_ encodeType: H264EncoderType) - Event sent when encoding type is updated.
• @objc public static func decodingDidSucceedWithTimestamp(_ timestamp: UInt32) - Event sent when decoding is successful with a given timestamp.
• @objc public static func decodingDidFail() -> DUXBetaFPVWidgetModelState - Event sent when decoding failed.
• @objc public static func physicalSourceUpdated(_ physicalSource: DJIVideoFeedPhysicalSource) - Event when the physical source is updated.

2. FPVWidgetUIState - Provides hooks in events related to user interaction with the widget.

• @objc public static func gridFrameUpdated(_ gridFrame: CGRect) - Event sent when the grid line view frame is updated.
• @objc public static func contentFrameUpdated(_ contentFrame: CGRect) - Event sent when the FPV content view frame is updated.