Connection Widget

The connection widget will display the connection status of the app with the product.

The connection widget has two states

• Connected
• Disconnected

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 DUXBetaConnectionWidget. 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

Connection widget supports customization of the icon image, icon background color and icon tint color, in order for the user interface to match the style of the user's application.

Swift Example

widget.backgroundColor = UIColor.red
widget.connectedTintColor = UIColor.green
widget.disconnectedTintColor = UIColor.yellow
widget.connectedImage = UIImage(named: "Connected.png")!
widget.disconnectedImage = UIImage(named: "Disconnected.png")!

Objective-C Example

widget.backgroundColor = [UIColor redColor];
widget.connectedTintColor = [UIColor greenColor];
widget.disconnectedTintColor = [UIColor yellowColor];
widget.connectedImage = [UIImage imageNamed:@"Connected.png"];
widget.disconnectedImage = [UIImage imageNamed:@"Disconnected.png"];

Full list of properties

List of the customizable properties

• @property (nonatomic, strong) UIImage *connectedImage - The icon for the connected product state.
• @property (nonatomic, strong) UIImage *disconnectedImage - The icon for the disconnected product state.
• @property (nonatomic, strong) UIColor *backgroundColor - The background of the connection state icon.
• @property (nonatomic, strong) UIColor *connectedTintColor - The tint color for the connected product state
• @property (nonatomic, strong) UIColor *disconnectedTintColor - The tint color for the disconnected state.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The Connection widget provides the following hook ConnectionWidgetState:

+ (instancetype)productConnected:(BOOL)isConnected - Method called when the product is connected or disconnected.