Skip to content

Video Signal Widget

Cristina Suciu edited this page Dec 23, 2020 · 2 revisions

The video signal widget shows the strength of the video signal between the aircraft and the app through the RC. By default, an icon with 5 vertical bars represents the current signal strength between the app/RC and the aircraft.

The video icon also changes color based on the connectivity status of the product. By default, it turns gray if the product is disconnected, and turns white if the product is connected.

The widget also displays the frequency band when available from the drone.

Usage

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

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

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 DUXBetaVideoSignalWidget. From here you can create the constraints on the container view using the Video Signal Widget's widgetSizeHint property.

Customizations

The Video Signal Widget supports customization of its icon, bars levels and text. An example of a customized video signal widget could look something like this:

To get this effect we would use the following code:

Swift

videoSignalWidget.setBarsImage(UIImage.init(named: "customSignal0")!, for: DUXBetaVideoSignalStrength.level0)
videoSignalWidget.setBarsImage(UIImage.init(named: "customSignal1")!, for: DUXBetaVideoSignalStrength.level1)
videoSignalWidget.setBarsImage(UIImage.init(named: "customSignal2")!, for: DUXBetaVideoSignalStrength.level2)
videoSignalWidget.setBarsImage(UIImage.init(named: "customSignal3")!, for: DUXBetaVideoSignalStrength.level3)
videoSignalWidget.setBarsImage(UIImage.init(named: "customSignal4")!, for: DUXBetaVideoSignalStrength.level4)
videoSignalWidget.setBarsImage(UIImage.init(named: "customSignal5")!, for: DUXBetaVideoSignalStrength.level5)
videoSignalWidget.setIconImage(UIImage.init(named: "customVideoIcon")!, for: DUXBetaAirLinkType.ocuSync)
videoSignalWidget.barsBackgroundColor = UIColor.white
videoSignalWidget.iconBackgroundColor = UIColor.white
videoSignalWidget.frequencyBandTextColor = UIColor.black
videoSignalWidget.frequencyBandFont = UIFont.systemFont(ofSize: 25.0)

Objective C

[videoSignalWidget setBarsImage:[UIImage imageNamed:@"customSignal0"] forVideoSignalStrength:DUXBetaVideoSignalStrengthLevel0];
[videoSignalWidget setBarsImage:[UIImage imageNamed:@"customSignal1"] forVideoSignalStrength:DUXBetaVideoSignalStrengthLevel1];
[videoSignalWidget setBarsImage:[UIImage imageNamed:@"customSignal2"] forVideoSignalStrength:DUXBetaVideoSignalStrengthLevel2];
[videoSignalWidget setBarsImage:[UIImage imageNamed:@"customSignal3"] forVideoSignalStrength:DUXBetaVideoSignalStrengthLevel3];
[videoSignalWidget setBarsImage:[UIImage imageNamed:@"customSignal4"] forVideoSignalStrength:DUXBetaVideoSignalStrengthLevel4];
[videoSignalWidget setBarsImage:[UIImage imageNamed:@"customSignal5"] forVideoSignalStrength:DUXBetaVideoSignalStrengthLevel5];
[videoSignalWidget setIconImage:[UIImage imageNamed:@"customVideoIcon"] forAirLinkType:DUXBetaAirLinkTypeOcuSync];
videoSignalWidget.barsBackgroundColor = [UIColor whiteColor];
videoSignalWidget.iconBackgroundColor = [UIColor whiteColor];
videoSignalWidget.frequencyBandTextColor = [UIColor blackColor];
videoSignalWidget.frequencyBandFont = [UIFont systemFontOfSize:25.0];

The widget can be customized by the user to serve their purpose and theme with the following methods and properties:

Full list of methods and properties

List of customization methods and properties
  • @property (nonatomic, strong) UIColor *frequencyBandTextColor; - The color of the text indicating which band the connection is using (2.4GHz, 5.8GHz etc.).

  • @property (nonatomic, strong) UIFont *frequencyBandFont; - The font of the text indicating which band the connection is using (2.4GHz, 5.8GHz etc.) Default point size = 30.

  • @property (nonatomic, strong) UIColor *frequencyBandBackgroundColor; - The background color of the label indicating which band the connection is using (2.4GHz, 5.8GHz etc.).

  • @property (nonatomic, strong) UIColor *barsBackgroundColor; - The background color of the signal indicator image view.

  • @property (nonatomic, strong) UIColor *iconBackgroundColor; - The background color of the icon image view.

  • @property (nonatomic, strong) UIColor *widgetBackgroundColor; - The background color of the entire widget.

  • @property (nonatomic, strong) UIColor *iconTintColorConnected; - The color of the icon when product is connected.

  • @property (nonatomic, strong) UIColor *iconTintColorDisconnected; - The color of the icon when product is disconnected.

  • - (void)setBarsImage:(UIImage *)image forVideoSignalStrength:(DUXBetaVideoSignalStrength)level; - Set the signal image(bars) to be displayed for the video signal strength level.

  • - (UIImage *)imageForSignalStrength:(DUXBetaVideoSignalStrength)level; - Get the signal image for the video signal strength level.

  • - (void)setIconImage:(UIImage *)image forAirLinkType:(DUXBetaAirLinkType)airLinkType; - Update the icon image to be displayed for the air link transmission type. By default, the all icons are the same (HD).

  • - (UIImage *)imageForAirLinkType:(DUXBetaAirLinkType)airLinkType; - Get the icon image for corresponding air link transmission type.

Hooks

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

  1. VideoSignalModelState - Provides hooks in events received by the widget from the widget model.
  • + (instancetype)productConnected:(BOOL)isConnected; - Event when product is connected or disconnected.
  • + (instancetype)videoSignalQualityUpdate:(DUXBetaVideoSignalStrength)videoSignalQuality; - Event when signal quality is updated.
  • + (instancetype)lightbridgeFrequencyBandUpdate:(DJILightbridgeFrequencyBand)frequencyBand; - Event when Lightbridge frequency band type is updated.
  • + (instancetype)wifiFrequencyBandUpdate:(DJIWiFiFrequencyBand)frequencyBand; - Event when WiFi frequency band type is updated.
  • + (instancetype)ocusyncFrequencyBandUpdate:(DJIOcuSyncFrequencyBand)frequencyBand; - Event when OcuSync frequency band type is updated.
Clone this wiki locally