Compass Widget

The compass widget aggregates the attitude and location data received from the aircraft into one widget. This includes the following:

Image	Description
	Position within the widget represents position of the aircraft relative to the pilot. Rotation represents the yaw of the aircraft.
	True north relative to the pilot and the aircraft.
	The aircraft's last recorded home location.
	The pilot's position, determined by the location of the pilot's mobile device and the location of the RC.
	Yaw of the gimbal.
	Concentric circles represent distance of the aircraft from the pilot, with each circle representing 100 meters. If the aircraft is farther than 400 meters, the aircraft icon will shrink and more rings will be added.
	Height of the blue background represents the pitch of the aircraft. Rotation of the blue background represents the roll of the aircraft.
	Yaw of the gimbal relative to the aircraft yaw. If the yaw is greater than 190 degrees, a red indicator will appear, and if the yaw is greater than 270 degrees the red indicator will blink.

The center of the compass can be set to the pilot's location or the home location.

Usage

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

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

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

If creating the widget through 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 be DUXBetaCompassWidget. From here you can create the constraints on the container view using the Compass Widget's widgetSizeHint property.

Customizations

The UI elements can be customized to match the style of the user's application.

The compass widget user interface implementation is handled completely by the DUXBetaCompassLayer class, that is a subclass of CAShapeLayer which manages all other drawing layers. So all the customization code goes through this implementation. The above customization can be achieved by applying these changes:

Swift

compass.compassLayer.northImage = UIImage(named: "CustomNorth")
compass.compassLayer.notchImage = UIImage(named: "CustomNotch")
compass.compassLayer.aircraftImage = UIImage(named: "CustomAircraftSymbol")
compass.compassLayer.gimbalYawImage = UIImage(named: "CustomGimbalYaw")
compass.compassLayer.homeImage = UIImage(named: "CustomHome")

compass.compassLayer.yawColor = UIColor(red: 10.0, green: 238.0, blue: 139.0, alpha: 1.0)
compass.compassLayer.invalidColor = UIColor(red: 231.0, green: 0.0, blue: 0.0, alpha: 1.0)
compass.compassLayer.blinkColor = UIColor(red: 231.0, green: 0.0, blue: 0.0, alpha: 0.2)

Objective C

compass.compassLayer.northImage = [UIImage imageNamed:@"CustomNorth"];
compass.compassLayer.notchImage = [UIImage imageNamed:@"CustomNotch"];
compass.compassLayer.aircraftImage = [UIImage imageNamed:@"CustomAircraftSymbol"];
compass.compassLayer.gimbalYawImage = [UIImage imageNamed:@"CustomGimbalYaw"];
compass.compassLayer.homeImage = [UIImage imageNamed:@"CustomHome"];

compass.compassLayer.yawColor = [UIColor colorWithRed:10.0 green:238.0 blue:139.0 alpha:1.0];
compass.compassLayer.blinkColor = [UIColor colorWithRed:231.0 green:0.0 blue:0.0 alpha:0.2];
compass.compassLayer.invalidColor = [UIColor colorWithRed:231.0 green:0.0 blue:0.0 alpha:1.0];

Full list of properties

List of the customizable properties

• UIColor *compassBackgroundColor - The background color of the compass widget.
• UIColor *horizonColor - The background color used to display the attitude of the aircraft.
• UIColor *boundsColor - The color of the border layer background.
• UIColor *lineColor - The color for the crosshair lines.
• UIImage *notchImage - The color for the notch image icon.
• UIImage *aircraftImage - The color for the aircraft image icon.
• UIImage *gimbalYawImage - The color for the gimbal's yaw image icon.
• UIImage *northImage - The color for the north image icon.
• UIImage *homeImage - The color for the home image icon.
• UIImage *rcImage - The color for the remote control image icon.
• UIColor *notchBackgoundColor - The background color for the notch image icon.
• UIColor *aircraftBackgoundColor - The background color for the aircraft image icon.
• UIColor *gimbalYawBackgoundColor - The background color for the gimbal's yaw image icon.
• UIColor *northBackgoundColor - The background color for the north image icon.
• UIColor *homeBackgoundColor - The background color for the home image icon.
• UIColor *rcBackgoundColor - The background color for the remote control image icon.
• UIColor *yawColor - The color for a normal yaw value.
• UIColor *blinkColor - The color used when the blink animation is visible.
• UIColor *invalidColor - The color for an invalid yaw color.
• CGSize designSize - The size of the compass widget, by default {87, 87}.
• @property (nonatomic) CGFloat innerMargin - The margin of the compass, by default 6.
• @property (nonatomic) CGFloat maskMargin - The margin of the layer whose alpha channel is used to mask the layer’s content.
• @property (nonatomic) CGFloat radiusSize - The distance in meters represented by the radius of the compass, by default 400.
• @property (nonatomic) CGFloat ringsInterDistance - The interval distance in meters between lines, by default 100.
• @property (nonatomic) CGSize notchSize - The aspect ratio of the notch icon image, by default {7, 7}
• @property (nonatomic) CGSize aircraftSize - The aspect ratio of the aircraft icon image, by default {14, 22}
• @property (nonatomic) CGSize gimbalYawSize - The aspect ratio of the gimbal's yaw image, by default {54, 65}
• @property (nonatomic) CGSize northIconSize - The aspect ratio of the north icon image, by default {10, 10}
• @property (nonatomic) CGSize homeIconSize - The aspect ratio of the home icon image, by default {12, 12}
• @property (nonatomic) CGSize rcIconSize - The aspect ratio of the remote control image, by default {10, 10}

Hooks

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

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

• + (instancetype)productConnected:(BOOL)isConnected - Event when product is connected or disconnected.
• + (instancetype)compassStateUpdated:(DUXBetaCompassState *)state - Event when the compass state is updated.