Take Off Widget

A button that performs actions related to takeoff and landing. There are three possible states for the widget: ready to take off, ready to land, and landing in progress. Clicking the button in the ready to take off state will open the takeoff confirmation dialog, and clicking the button in the ready to land state will open the landing confirmation dialog.

Take Off Widget states

Image	State	Description	Dialog shown when tapped
	Ready to Take Off	The aircraft is not flying. Tapping will show a dialog to confirm takeoff
	Ready to Land	The aircraft is flying. Tapping will show a dialog to confirm landing
	Landing In Progress	The aircraft is landing	N/A
	Forced Landing In Progress	The aircraft is landing and it cannot be canceled	N/A
Hidden	Disconnected	The aircraft is disconnected	N/A
Hidden	Return To Home In Progress	The aircraft is returning home. Use the Return Home Widget to allow the user to cancel this action.	N/A

The checkbox in the takeoff dialog will only appear when a precision takeoff is possible, and if it is checked when the slider is dragged to the right edge, the aircraft will start a precision takeoff.

When landing confirmation is required at a height of 0.3 meters above the ground, the widget will show a landing confirmation dialog.

Additionally, this widget will show a dialog if landing is in progress, but it is currently unsafe to land. The dialog will prompt the user whether or not they want to cancel landing.

When the slider is dragged to the right edge of the dialog, the action described in the dialog is done and the dialog is dismissed. If the cancel button is pressed, no action is done and the dialog is dismissed.

Usage

If creating the take off widget through code it can be added using the convenience method:

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

this adds the widget as a subview of the viewController passed as an argument. Then you need to 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 DUXBetaTakeOffWidget. From here you can create the constraints on the container view using widgetSizeHint property.

The ideal dimension ratio for this widget is 1:1.

Customizations

The UI elements can be customized to match the style of the user's application. The customizations can be done using the public API designed in this widget.

The code for this customization is the following:

Swift Example

widget.takeOffActionImage = UIImage.duxbeta_image(withAssetNamed: "ic_flight_takeoff_white")

Objective-C Example

widget.takeOffActionImage = [UIImage duxbeta_imageWithAssetNamed:@"ic_flight_takeoff_white"];

The code for this customization is the following:

Swift Example

widget.takeOffAlertImage = UIImage.duxbeta_image(withAssetNamed: "ic_flight_takeoff_black")
widget.alertAppearance.titleColor =  UIColor.duxbeta_black()
widget.alertAppearance.titleFont = UIFont.boldSystemFont(ofSize: 15.0)
widget.alertAppearance.messageColor =  UIColor.duxbeta_black()
widget.alertAppearance.checkboxTextColor =  UIColor.duxbeta_black()
widget.alertAppearance.checkboxTintColor =  UIColor.duxbeta_black()
widget.alertAppearance.slideMessageTextColor =  UIColor.duxbeta_black()
widget.alertAppearance.separatorColor =  UIColor.duxbeta_black()
widget.alertAppearance.backgroundColor =  UIColor.duxbeta_white()
widget.alertAppearance.slideOnTintColor =  UIColor.duxbeta_blue()
widget.alertAppearance.slideOffTintColor =  UIColor.duxbeta_gray()
widget.alertAppearance.slideIconTintColor =  UIColor.duxbeta_pink()
widget.alertAppearance.slideMessageTextColor =  UIColor.duxbeta_pink()
widget.alertCancelActionAppearance.actionColor =  UIColor.duxbeta_black()
widget.alertAppearance.slideIconImage = UIImage.duxbeta_image(withAssetNamed: "ic_chevron_right_pink")

Objective-C Example

widget.takeOffAlertImage = [UIImage duxbeta_imageWithAssetNamed:@"ic_flight_takeoff_black"];
widget.alertAppearance.titleColor = [UIColor duxbeta_blackColor];
widget.alertAppearance.titleFont = [UIFont boldSystemFontOfSize:15.0];
widget.alertAppearance.messageColor = [UIColor duxbeta_blackColor];
widget.alertAppearance.checkboxTextColor = [UIColor duxbeta_blackColor];
widget.alertAppearance.checkboxTintColor = [UIColor duxbeta_blackColor];
widget.alertAppearance.slideMessageTextColor = [UIColor duxbeta_blackColor];
widget.alertAppearance.separatorColor = [UIColor duxbeta_blackColor];
widget.alertAppearance.backgroundColor = [UIColor duxbeta_whiteColor];
widget.alertAppearance.slideOnTintColor = [UIColor duxbeta_blueColor];
widget.alertAppearance.slideOffTintColor = [UIColor duxbeta_grayColor];
widget.alertAppearance.slideIconTintColor = [UIColor duxbeta_pinkColor];
widget.alertAppearance.slideMessageTextColor = [UIColor duxbeta_pinkColor];
widget.alertAppearance.slideIconImage = [UIImage duxbeta_imageWithAssetNamed:@"ic_chevron_right_pink"];
widget.alertCancelActionAppearance.actionColor = [UIColor duxbeta_blackColor];

Full list of properties

DUXBetaTakeOffWidget APIs

List of the customizable attributes

• takeOffActionImage = UIImage.duxbeta_image(withAssetNamed: "TakeOff") - The image for the take off action.
• landActionImage = UIImage.duxbeta_image(withAssetNamed: "Land") - The image for the land action.
• cancelLandActionImage = UIImage.duxbeta_image(withAssetNamed: "Stop") - The image for the cancel landing action.
• backgroundColor = UIColor.duxbeta_clear() - The background color of the control.
• takeOffActionTintColor = UIColor.duxbeta_white() - The image tint color for the take off action.
• landActionTintColor = UIColor.duxbeta_white() - The image tint color for the land action.
• cancelLandActionTintColor = UIColor.duxbeta_clear() - The image tint color for the cancel landing action.
• takeOffAlertImage = UIImage.duxbeta_image(withAssetNamed: "TakeOff") - The image for the take off alert.
• landingAlertImage = UIImage.duxbeta_image(withAssetNamed: "Land") - The image for the land alert.
• landingConfirmationAlertImage = UIImage.duxbeta_image(withAssetNamed: "Land") - The image for the landing confirmation alert.
• unsafeToLandAlertImage = UIImage.duxbeta_image(withAssetNamed: "Land") - The image for the unsafe to land alert.
• takeOffAlertTintColor = UIColor.duxbeta_clear() - The image tint color for the take off alert.
• landingAlertTintColor = UIColor.duxbeta_clear() - The image tint color for the land alert.
• landingConfirmationAlertTintColor = UIColor.duxbeta_clear() - The image tint color for the landing confirmation alert.
• unsafeToLandAlertTintColor = UIColor.duxbeta_clear() - The image tint color for the unsafe to land alert.
• alertAppearance = DUXBetaAlertView.DUXBetaAlertViewAppearance() - The customization instance that controls the appearance of the alert.
• alertCancelActionAppearance = DUXBetaAlertAction.DUXBetaAlertActionAppearance() - The customization instance that controls the appearance of the dialog cancel action.
• enabledAlpha : CGFloat - The alpha of the image when the widget is enabled, by default 1.
• disabledAlpha : CGFloat - The alpha of the image when the widget is disabled, by default 0.38.
• widgetSizeHint : DUXBetaWidgetSizeHint - The standard widgetSizeHint indicating the minimum size for this widget and preferred aspect ratio.

DUXBetaSlideAlertView APIs

List of the customizable attributes

• verticalSpacing: CGFloat = 10.0 - The vertical spacing between the checkbox details and the slider view.
• checkboxSpacing: CGFloat = 10.0 - The horizontal spacing between the checkbox buttons and the checkbox details label.
• isCheckboxVisible = true - The visibility of the checkbox button and details label.
• checkboxSelectedImage = UIImage.duxbeta_image(withAssetNamed: "CheckboxSelected") - The image displayed by the checkbox button when selected.
• checkboxUnselectedImage = UIImage.duxbeta_image(withAssetNamed: "Checkbox") - The image displayed by the checkbox button when not selected.
• checkboxTintColor = UIColor.duxbeta_alertActionBlue() - The tint color of the image displayed by the checkbox button when selected.
• checkboxText = "Precisely record takeoff point" - The text displayed in the checkbox label.
• checkboxTextColor = UIColor.duxbeta_white() - The color of text displayed in the checkbox label.
• checkboxTextFont = UIFont.systemFont(ofSize: 17.0) - The font of the text displayed in the checkbox label.
• checkboxTextBackgroundColor = UIColor.duxbeta_clear() - The background color of the checkbox label.
• slideIconImage = UIImage.duxbeta_image(withAssetNamed: "Slider") - The image used for the slider thumb icon.
• slideIconTintColor = UIColor.duxbeta_white() - The image tint color used for the slider thumb icon for the normal state.
• slideIconSelectedTintColor = UIColor.duxbeta_slideIconSelected() - The image tint color used for the slider thumb icon for the selected state.
• slideOnImage = UIImage.duxbeta_image(withAssetNamed: "SlideOn") - The image for the on state of the slide control.
• slideOnTintColor = UIColor.duxbeta_success() - The image tint color for the on state of the slide control.
• slideOffImage = UIImage.duxbeta_image(withAssetNamed: "SlideOff") - The image for the off state of the slide control.
• slideOffTintColor = UIColor.duxbeta_yellow() - The image tint color for the off state of the slide control.
• slideMessageText = "Slide to Take Off" - The text displayed into the label positioned in the slide off area.
• slideMessageFont = UIFont.systemFont(ofSize: 15.0) - The font for text displayed into the label positioned in the slide off area.
• slideMessageTextColor = UIColor.duxbeta_slideText() - The text color displayed into the label positioned in the slide off area.
• slideMessageImage = UIImage.duxbeta_image(withAssetNamed: "SliderChevron") - The image displayed in the slide off area.
• slideMessageTintColor = UIColor.duxbeta_slideText() - The tint color of the image displayed in the slide off area.
• separatorColor = UIColor.duxbeta_slideSeparator() - The color of the line separator displayed below the slide view.
• onCheckboxChanged: ((Bool) -> ())? - The callback invoked when the checkbox selection state changes.
• slideAppearance = DUXBetaSlideAlertViewAppearance() - The appearance structure that encloses all the customization properties for the sliding alert.

See Alerts wiki page for all the customizable properties exposed by an alert.

DUXBetaSlideView APIs

List of the customizable attributes

• slideIconImage = UIImage.duxbeta_image(withAssetNamed: "Slider") - The image used for the slider thumb icon.
• slideIconTintColor = UIColor.white - The image tint color used for the slider thumb icon for the normal state, by default white.
• slideIconSelectedTintColor = UIColor.white - The image tint color used for the slider thumb icon for the selected state, by default white.
• slideOnImage = UIImage.duxbeta_image(withAssetNamed: "SlideOn") - The image for the on state of the slide.
• slideOnTintColor = UIColor.duxbeta_success() - The image tint color for the on state of the slide, by default green.
• slideOffImage = UIImage.duxbeta_image(withAssetNamed: "SlideOff") - The image for the off state of the slide.
• slideOffTintColor = UIColor.duxbeta_slideIconSelected() - The image tint color for the off state of the slide.
• slideMessageText = "Slide to Take Off" - The text displayed into the label positioned in the slide off area.
• slideMessageFont = UIFont.systemFont(ofSize: 12.0) - The font for text displayed into the label positioned in the slide off area.
• slideMessageTextColor = UIColor.black - The text color displayed into the label positioned in the slide off area.
• slideMessageImage = UIImage.duxbeta_image(withAssetNamed: "SliderChevron") - The image displayed in the slide off area.
• slideMessageTintColor = UIColor.gray - The tint color of the image displayed in the slide off area.
• onSlideStarted: (() -> ())? - The callback invoked when the sliding action starts.
• onSlideCompleted: ((Bool) -> ())? - The callback invoked when the sliding action completes.

Hooks

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

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

• @objc public static func productConnected(_ isConnected: Bool) - Sends a boolean value as an NSNumber when product connection state changes.
• @objc public static func takeOffWidgetStateUpdated(_ state: DUXBetaTakeOffWidgetState) - Sends a NSNumber value when widget state is updated.
• @objc public static func takeOffStartedSucceeded() - Sends true as an NSNumber value when take off started successfully.
• @objc public static func takeOffStartedFailed(_ error: Error) - Sends an NSError as an object when take off has not started due to an error.
• @objc public static func precisionTakeOffStartedSucceeded() - Sends true as an NSNumber value when precision take off started successfully.
• @objc public static func precisionTakeOffStartFailed(_ error: Error) - Sends an NSError as an object when precision take off has not started due to an error.
• @objc public static func landingStartSucceeded() - Sends true as an NSNumber value when landing started successfully.
• @objc public static func landingStartFailed(_ error: Error) - Sends an NSError as an object when landing has not started due to an error.
• @objc public static func landingConfirmSucceeded() - Sends true as an NSNumber value when landing confirm started successfully.
• @objc public static func landingConfirmFailed(_ error: Error) - Sends an NSError as an object when landing confirm has not started due to an error.
• @objc public static func landingCancelSucceeded() - Sends true as an NSNumber value when landing cancellation started successfully.
• @objc public static func landingCanceledError(_ error: Error) - Sends an NSError as an object when landing cancellation has not started due to an error.

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

• @objc public static func widgetTapped() - Sends true as an NSNumber when the widget is tapped.

• @objc public static func dialogDisplayed(_ dialogType: DUXBetaTakeOffWidgetDialogType) - Sends dialogType as an NSNumber when dialog is shown.

• @objc public static func dialogActionConfirmed(_ dialogType: DUXBetaTakeOffWidgetDialogType) - Sends dialogType as an NSNumber when dialog OK/Confirmed button is pressed.

• @objc public static func dialogActionCancelled(_ dialogType: DUXBetaTakeOffWidgetDialogType) - Sends dialogType as an NSNumber when dialog's Cancel button is pressed.

• @objc public static func dialogDismissed(_ dialogType: DUXBetaTakeOffWidgetDialogType) - Sends dialogType as an NSNumber when dialog is is dismissed from the screen.

• @objc public static func dialogCheckChanged(_ checked: Bool) - Sends boolean value as an NSNumber when the precision checkbox changes state.