Skip to content

AirSense Widget

Jump to bottom
Siddharth Utgikar edited this page Dec 22, 2020 · 2 revisions

Widget that displays an icon representing whether there are any aircraft nearby and how likely a collision is. The icon is shown in different colors representing the current AirSenseWarningLevel. The widget will be hidden on devices that do not have DJI AirSense installed. The icon is gray when no airplanes are nearby, and adds the text "N/A" when no product is connected.

When the warning level is at AirSenseWarningLevel.LEVEL_0 or above, a warning dialog will appear. This warning dialog contains a warning message, an option to never show the dialog again, and a link to an additional dialog with AirSense Terms and Conditions for the user to agree to.

When the warning level is at AirSenseWarningLevel.LEVEL_2 or above, a WarningMessage is sent to suggest that the user should descend immediately. To react to all WarningMessages sent by all widgets including the AirSenseWidget, listen to MessagingKeys.SEND_WARNING_MESSAGE.

AirSenseStatus states

Image State Description
DISCONNECTED There is no product connected.
NO_AIRPLANES_NEARBY A product that has DJI AirSense is connected and no airplanes are nearby.
WARNING_LEVEL_0 A product that has DJI AirSense is connected and the system detects an airplane but the DJI aircraft is either far away from the airplane or is in the opposite direction of the airplane's heading.
WARNING_LEVEL_1 A product that has DJI AirSense is connected and the system detects an airplane. The probability that it will pass through the location of the DJI aircraft is considered low.
WARNING_LEVEL_2 A product that has DJI AirSense is connected and the system detects an airplane. The probability that it will pass through the location of the DJI aircraft is considered medium.
WARNING_LEVEL_3 A product that has DJI AirSense is connected and the system detects an airplane. The probability that it will pass through the location of the DJI aircraft is considered high.
WARNING_LEVEL_4 A product that has DJI AirSense is connected and the system detects an airplane. The probability that it will pass through the location of the DJI aircraft is very high.

Usage

<dji.ux.beta.core.widget.airsense.AirSenseWidget
    android:id="@+id/widget_air_sense"
    android:layout_width="22dp"
    android:layout_height="wrap_content" />

The ideal dimension ratio for this widget is 37:32.

Customizations

The UI elements can be customized to match the style of the user's application. The customizations can be done using attributes in XML or programmatically using the APIs.

XML Example

<dji.ux.beta.core.widget.airsense.AirSenseWidget
    android:id="@+id/widget_air_sense"
    android:layout_width="22dp"
    android:layout_height="wrap_content"
    app:uxsdk_airSenseConnectedStateIcon="@drawable/ic_airplanemode_active_white_24dp"
    app:uxsdk_airSenseDisconnectedStateIcon="@drawable/ic_airplanemode_inactive_white_24dp"
    app:uxsdk_airSenseIconDisconnectedTint="@color/red"
    app:uxsdk_airSenseIconNoAirplanesNearbyTint="@color/orange"
    app:uxsdk_airSenseIconWarningLevel0Tint="@color/yellow"
    app:uxsdk_airSenseIconWarningLevel1Tint="@color/green"
    app:uxsdk_airSenseIconWarningLevel2Tint="@color/blue"
    app:uxsdk_airSenseIconWarningLevel3Tint="@color/purple"
    app:uxsdk_airSenseIconWarningLevel4Tint="@color/pink"
    app:uxsdk_warningDialogTheme="@style/AirSenseTheme"
    app:uxsdk_checkBoxTextColor="@color/white"
    app:uxsdk_termsLinkTextColor="@color/pink" />

Attributes

List of the customizable XML attributes
  • uxsdk_airSenseConnectedStateIcon - The icon that is displayed when a product is connected.
  • uxsdk_airSenseDisconnectedStateIcon - The icon that is displayed when no product is connected.
  • uxsdk_airSenseIconBackground - The background of the AirSense icon.
  • uxsdk_airSenseIconDisconnectedTint - The tint color of the AirSense icon when the AirSenseStatus is DISCONNECTED.
  • uxsdk_airSenseIconNoAirplanesNearbyTint - The tint color of the AirSense icon when the AirSenseStatus is NO_AIRPLANES_NEARBY.
  • uxsdk_airSenseIconWarningLevel0Tint - The tint color of the AirSense icon when the AirSenseStatus is WARNING_LEVEL_0.
  • uxsdk_airSenseIconWarningLevel1Tint - The tint color of the AirSense icon when the AirSenseStatus is WARNING_LEVEL_1.
  • uxsdk_airSenseIconWarningLevel2Tint - The tint color of the AirSense icon when the AirSenseStatus is WARNING_LEVEL_2.
  • uxsdk_airSenseIconWarningLevel3Tint - The tint color of the AirSense icon when the AirSenseStatus is WARNING_LEVEL_3.
  • uxsdk_airSenseIconWarningLevel4Tint - The tint color of the AirSense icon when the AirSenseStatus is WARNING_LEVEL_4.
  • uxsdk_linkTextSize - The text size of the link to the terms and conditions dialog.
  • uxsdk_linkTextColor - The text color of the link to the terms and conditions dialog.
  • uxsdk_linkTextBackground - The background of the link to the terms and conditions dialog.
  • uxsdk_linkTextAppearance - The text appearance of the link to the terms and conditions dialog.
  • uxsdk_checkBoxTextSize - The text size of the checkbox that indicates a user's preference to never show the dialog again.
  • uxsdk_checkBoxTextColor - The text color of the checkbox that indicates a user's preference to never show the dialog again.
  • uxsdk_checkBoxTextBackground - The background of the checkbox that indicates a user's preference to never show the dialog again.
  • uxsdk_checkBoxTextAppearance - The text appearance of the checkbox that indicates a user's preference to never show the dialog again.
  • uxsdk_warningDialogTheme - The theme of the warning dialog.
  • uxsdk_termsDialogTheme - The theme of the terms and conditions dialog.

Java Example

AirSenseWidget airSenseWidget = findViewById(R.id.widget_air_sense);
airSenseWidget.setAirSenseConnectedStateIcon(getResources().getDrawable(R.drawable.ic_airplanemode_active_white_24dp));
airSenseWidget.setAirSenseDisconnectedStateIcon(getResources().getDrawable(R.drawable.ic_airplanemode_inactive_white_24dp));
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.DISCONNECTED, getResources().getColor(R.color.red));
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.NO_AIRPLANES_NEARBY, getResources().getColor(R.color.orange));
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_0, getResources().getColor(R.color.yellow));
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_1, getResources().getColor(R.color.green));
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_2, getResources().getColor(R.color.blue));
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_3, getResources().getColor(R.color.purple));
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_4, getResources().getColor(R.color.pink));
airSenseWidget.setWarningDialogTheme(R.style.AirSenseTheme);
airSenseWidget.setCheckBoxTextColor(getResources().getColor(R.color.white));
airSenseWidget.setTermsLinkTextColor(getResources().getColor(R.color.pink));

Kotlin Example

val airSenseWidget: AirSenseWidget = findViewById(R.id.widget_air_sense)
airSenseWidget.airSenseConnectedStateIcon = resources.getDrawable(R.drawable.ic_airplanemode_active_white_24dp))
airSenseWidget.airSenseDisconnectedStateIcon = resources.getDrawable(R.drawable.ic_airplanemode_inactive_white_24dp))
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.DISCONNECTED, resources.getColor(R.color.red))
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.NO_AIRPLANES_NEARBY, resources.getColor(R.color.orange))
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_0, resources.getColor(R.color.yellow))
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_1, resources.getColor(R.color.green))
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_2, resources.getColor(R.color.blue))
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_3, resources.getColor(R.color.purple))
airSenseWidget.setAirSenseIconTintColor(AirSenseWidgetModel.AirSenseStatus.WARNING_LEVEL_4, resources.getColor(R.color.pink))
airSenseWidget.warningDialogTheme = R.style.AirSenseTheme
airSenseWidget.checkBoxTextColor = resources.getColor(R.color.white)
airSenseWidget.termsLinkTextColor = resources.getColor(R.color.pink)

The checkbox and button colors of the warning dialog can be customized using a custom theme. Use colorAccent to customize the color of the "OK" button and the checked checkbox, and use android:textColorSecondary to customize the color of the unchecked checkbox.

styles.xml

<style name="AirSenseTheme" parent="Theme.AppCompat.Dialog.Alert">
    <item name="colorAccent">@color/pink</item>
    <item name="android:textColorSecondary">@color/white</item>
</style>

APIs

List of the customization APIs
  • var airSenseConnectedStateIcon: Drawable? - The icon that is displayed when a product is connected.
  • fun setAirSenseConnectedStateIcon(@DrawableRes resourceId: Int) - Set the icon that is displayed when a product is connected.
  • var airSenseDisconnectedStateIcon: Drawable? - The icon that is displayed when no product is connected.
  • fun setAirSenseDisconnectedStateIcon(@DrawableRes resourceId: Int) - Set the icon that is displayed when no product is connected.
  • var airSenseIconBackground: Drawable? - The background of the AirSense icon.
  • fun setAirSenseIconBackground(@DrawableRes resourceId: Int) - Set the background of the AirSense icon.
  • fun setAirSenseIconTintColor(status: AirSenseWidgetModel.AirSenseStatus, @ColorInt color: Int) - Set the tint color of the AirSenseIcon when the AirSenseStatus is the given value.
  • fun getAirSenseIconTintColor(status: AirSenseWidgetModel.AirSenseStatus): Int - Get the tint color of the AirSenseIcon when the AirSenseStatus is the given value.
  • var warningDialogTheme: Int - The theme of the warning dialog.
  • var termsDialogTheme: Int - The theme of the terms and conditions dialog.
  • var termsLinkTextAppearance: Int - The text appearance of the link to the terms and conditions dialog.
  • var termsLinkTextColor: Int - The text color of the link to the terms and conditions dialog.
  • var termsLinkTextBackground: Drawable? - The background of the link to the terms and conditions dialog.
  • fun setTermsLinkTextBackground(@DrawableRes resourceId: Int) - Set the background of the link to the terms and conditions dialog.
  • var termsLinkTextSize: Float - The text size of the link to the terms and conditions dialog.
  • var checkBoxTextAppearance: Int - The text appearance of the checkbox that indicates a user's preference to never show the dialog again.
  • var checkBoxTextColor: ColorStateList? - The text color of the checkbox that indicates a user's preference to never show the dialog again.
  • fun setCheckBoxTextColor(@ColorInt color: Int) - Set the text color of the checkbox that indicates a user's preference to never show the dialog again.
  • var checkBoxTextBackground: Drawable? - The background of the checkbox that indicates a user's preference to never show the dialog again.
  • fun setCheckBoxBackground(@DrawableRes resourceId: Int) - Set the background of the checkbox that indicates a user's preference to never show the dialog again.
  • var checkBoxTextSize: Float - The text size of the checkbox that indicates a user's preference to never show the dialog again.

Hooks

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

  1. ModelState - Provides hooks in events received by the widget from the widget model.
  • data class ProductConnected(val isConnected: Boolean) : ModelState() - Event when product is connected or disconnected.
  • data class AirSenseWarningLevelUpdated(val airSenseWarningLevel: AirSenseWarningLevel) : ModelState() - Event when the AirSense warning level is updated.
  • data class AirSenseStateUpdated(val airSenseState: AirSenseWidgetModel.AirSenseState) : ModelState() - Event when the AirSense status is updated.

The user can subscribe to this using fun getWidgetStateUpdate(): Flowable<ModelState>.

  1. UIState - Provides hooks in events related to user interaction with the widget.
  • object WarningDialogDismissed : UIState() - Event when the warning dialog is dismissed.
  • object TermsLinkClicked : UIState() - Event when the link to the terms and conditions dialog is tapped.
  • object TermsDialogDismissed : UIState() - Event when the terms and conditions dialog is dismissed.
  • data class NeverShowAgainCheckChanged(val isChecked: Boolean) : UIState() - Event when the "Don't show again" checkbox is tapped.

The user can subscribe to this using fun getUIStateUpdates(): Flowable<UIState>

DJI UX SDK Version 5 Beta 5

Guidelines
UX SDK 5.0 Overview
Core Module
Camera Core Module
Visual Cameras Module
Flight Module
Map Module
Accessory Module
Training Module
Clone this wiki locally