Remote Controller Signal Widget

The remote controller signal widget shows the strength of the signal between the remote controller and the aircraft for all types of RCs. By default, an icon with 5 vertical bars represents the current signal strength between the RC and the aircraft.

The RC 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.

Usage

<dji.ux.beta.core.widget.remotecontrollersignal.RemoteControllerSignalWidget
     android:id="@+id/widget_remote_controller_signal"
     android:layout_width="38dp"
     android:layout_height="22dp"/>

The ideal dimension ratio for this widget is 19:11.

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.remotecontrollersignal.RemoteControllerSignalWidget
     android:id="@+id/widget_remote_controller_signal"
     android:layout_width="38dp"
     android:layout_height="22dp"
     app:uxsdk_rcIcon="@drawable/ic_custom_rc_icon"
     app:uxsdk_rcSignalIcon="@drawable/ic_custom_signal_strength_level_list"
     app:uxsdk_disconnectedStateIconColor="@color/blue"/>

Attributes

List of the customizable XML attributes

uxsdk_connectionStateIconColor - The color used for the RC display icon in the connected state.
uxsdk_disconnectedStateIconColor - The color used for the RC display icon in the disconnected state.
uxsdk_rcIcon - The drawable used as the RC display icon.
uxsdk_rcSignalIcon - The drawable used to display the signal strength, ideally a level-list drawable like the following.

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:maxLevel="0" android:drawable="@drawable/ic_custom_signal_level_0" />
    <item android:maxLevel="20" android:drawable="@drawable/ic_custom_signal_level_1" />
    <item android:maxLevel="40" android:drawable="@drawable/ic_custom_signal_level_2" />
    <item android:maxLevel="60" android:drawable="@drawable/ic_custom_signal_level_3" />
    <item android:maxLevel="80" android:drawable="@drawable/ic_custom_signal_level_4" />
    <item android:maxLevel="100" android:drawable="@drawable/ic_custom_signal_level_5" />
</level-list>

Java Example

RemoteControllerSignalWidget remoteControllerSignalWidget = findViewById(R.id.widget_remote_controller_signal);
remoteControllerSignalWidget.setRCIcon(R.drawable.ic_custom_rc_icon);
remoteControllerSignalWidget.setRCIconBackground(customBackgroundDrawable);
remoteControllerSignalWidget.setRCSignalIcon(customLevelListSignalStrengthDrawable);
remoteControllerSignalWidget.setRCSignalIconBackground(R.drawable.custom_background);
remoteControllerSignalWidget.setDisconnectedStateIconColor(getResources().getColor(R.color.blue));

Kotlin Example

val remoteControllerSignalWidget: RemoteControllerSignalWidget = findViewById(R.id.widget_remote_controller_signal)
remoteControllerSignalWidget.rcIcon = resources.getDrawable(R.drawable.ic_custom_rc_icon)
remoteControllerSignalWidget.rcIconBackground = customBackgroundDrawable
remoteControllerSignalWidget.rcSignalIconBackground = customBackgroundDrawable
remoteControllerSignalWidget.rcSignalIcon = customLevelListSignalStrengthDrawable
remoteControllerSignalWidget.disconnectedStateIconColor = resources.getColor(R.color.blue)

APIs

List of the customization APIs

var rcIcon: Drawable - Drawable resource for the RC icon.
fun setRCIcon(@DrawableRes resourceId: Int) - Set the resource ID for the RC icon.
var rcIconBackground: Drawable - Drawable resource for the RC icon's background.
fun setRCIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the RC icon's background.
var rcSignalIcon: Drawable - Drawable resource for the RC signal icon.
fun setRCSignalIcon(@DrawableRes resourceId: Int) - Set the resource ID for the RC signal icon.
var rcSignalIconBackground: Drawable - Drawable resource for the RC signal icon's background.
fun setRCSignalIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the RC signal icon's background.
var connectedStateIconColor: Int - Color for the RC icon in the connected state.
var disconnectedStateIconColor: Int - Color for the RC icon in the disconnected state.

Hooks

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

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 SignalQualityUpdated(val signalValue: Int) : ModelState() - Event when signal quality is updated.

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

DJI UX SDK Version 5 Beta 5