Flight Mode Widget

The flight mode widget is used to monitor the current flight mode of the aircraft. The flight modes are defined in the enum DJIFlightMode.

The flight mode icon and text change color based on the connection status of the product. By default, it turns gray if the product is disconnected, and white if the product is connected.

• Connected
• Disconnected

Usage

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

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

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

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

Following this, make sure to change the class of the child view controller to DUXBetaFlightModeWidget. From here you can create the constraints on the container view using Flight Mode Widget's widgetSizeHint property.

Customizations

Flight Mode Widget supports customization of its icon as well as text. An example of a customized flight mode widget showing the aircraft is in attitude mode could look something like this:

To get this effect we would use the following code:

Swift Example

flightModeWidget.iconImage = UIImage.init(named: "CustomFlightModeIconImage")!
flightModeWidget.labelTextColorConnected = UIColor.red

Objective-C Example

flightModeWidget.iconImage = [UIImage imageNamed:@"CustomFlightModeIconImage"];
flightModeWidget.labelTextColorConnected = [UIColor redColor];

Full list of properties

List of the customizable properties

• @property (nonatomic, strong) UIColor *overallBackgroundColor; Get/Set the widget's background color.

• @property (nonatomic, strong) UIColor *labelTextColorConnected; Get/Set the label text color while aircraft is connected.

• @property (nonatomic, strong) UIColor *labelTextColorDisconnected; Get/Set the label text color while aircraft is disconnected.

• @property (nonatomic, strong) UIColor *labelBackgroundColor; Get/Set the label background color.

• @property (nonatomic, strong) UIColor *iconTintColorConnected; Get/Set the icon tint color while aircraft is connected.

• @property (nonatomic, strong) UIColor *iconTintColorDisconnected; Get/Set the icon tint color while aircraft is disconnected.

• @property (nonatomic, strong) UIColor *iconBackgroundColor; Get/Set the icon background color.

• @property (nonatomic, strong) UIImage *iconImage; Get/Set the icon image. For tinting to work, pass an image with UIImageRenderingModeAlwaysTemplate.

• @property (nonatomic, strong) UIFont *labelFont; Get/Set the icon font. Default point size = 70.0, scales with widget.

Hooks

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

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

• + (instancetype)productConnected:(BOOL)isConnected; - Event when product is connected or disconnected.
• + (instancetype)flightModeTextUpdate:(NSString *)flightModeText; - Event when the flight mode text is updated.