Video Signal Widget

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

<dji.ux.beta.core.widget.videosignal.VideoSignalWidget
     android:id="@+id/widget_video_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.videosignal.VideoSignalWidget
        android:id="@+id/widget_video_signal"
        android:layout_width="38dp"
        android:layout_height="22dp"
        android:background="@color/uxsdk_white"
        app:uxsdk_videoIcon="@drawable/ic_custom_video"
        app:uxsdk_videoSignalIcon="@drawable/custom_level_list"
        app:uxsdk_connectedStateIconColor="@color/uxsdk_black"
        app:uxsdk_disconnectedStateIconColor="@color/uxsdk_red_material_A700_67_percent"/>

Attributes

List of the customizable XML attributes

uxsdk_connectionStateIconColor - The color used for the video icon in the connected state.
uxsdk_disconnectedStateIconColor - The color used for the video icon in the disconnected state.
uxsdk_frequencyBandTextAppearance - Text apperance of the frequency band text.
uxsdk_frequencyBandTextSize - Text size of the frequency band text.
uxsdk_frequencyBandTextColor - Text color of the frequency band text.
uxsdk_frequencyBandBackgroundDrawable - Background of the frequency band text.
uxsdk_videoIcon - The drawable used as the video icon.
uxsdk_videoSignalIcon - 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

VideoSignalWidget videoSignalWidget = findViewById(R.id.widget_video_signal);
videoSignalWidget.setVideoIcon(R.drawable.ic_custom_video);
videoSignalWidget.setVideoSignalIcon(R.drawable.custom_level_list);
videoSignalWidget.setConnectedStateIconColor(getResources().getColor(R.color.black));
videoSignalWidget.setDisconnectedStateIconColor(getResources().getColor(R.color.uxsdk_red_material_A700_67_percent));

Kotlin Example

val videoSignalWidget: VideoSignalWidget = findViewById(R.id.widget_video_signal)
videoSignalWidget.videoIcon = resources.getDrawable(R.drawable.ic_custom_video)
videoSignalWidget.videoSignalIcon = resources.getDrawable(R.drawable.custom_level_list)
videoSignalWidget.connectedStateIconColor = resources.getColor(R.color.black)
videoSignalWidget.disconnectedStateIconColor = resources.getColor(R.color.uxsdk_red_material_A700_67_percent)

APIs

List of the customization APIs

var connectedStateIconColor: Int - Color for the video icon in the connected state.
var disconnectedStateIconColor: Int - Color for the video icon in the disconnected state.
var videoIcon: Drawable - Drawable resource for the video icon.
fun setVideoIcon(@DrawableRes resourceId: Int) - Set the resource ID for the video icon.
var videoIconBackground: Drawable - Drawable resource for the video icon background.
fun setVideoIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the video icon background.
var videoSignalIcon: Drawable - Drawable resource for the video signal icon.
fun setVideoSignalIcon(@DrawableRes resourceId: Int) - Set the resource ID for the video signal icon.
var videoSignalIconBackground: Drawable - Drawable resource for the video signal icon's background.
fun setVideoSignalIconBackground(@DrawableRes resourceId: Int) - Set the resource ID for the video signal icon's background.
var textColor: Int - Color of the frequency band text.
var textSize: Float - Size of the frequency band text.
var textBackground: Drawable - Background of the frequency band text.
fun setTextAppearance(@StyleRes textAppearance: Int) - Set the appearance of the frequency band text.

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

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 VideoSignalQualityUpdated(val signalValue: Int) : ModelState() - Event when signal quality is updated.
- data class LightbridgeFrequencyBandUpdated(val frequencyBandType: LightbridgeFrequencyBand) : ModelState() - Event when Lightbridge frequency band type is updated.
- data class WiFiFrequencyBandUpdated(val frequencyBandType: WiFiFrequencyBand) : ModelState() - Event when WiFi frequency band type is updated.
- data class OcuSyncFrequencyBandUpdated(val frequencyBandType: OcuSyncFrequencyBand) : ModelState() - Event when OcuSync frequency band type is updated.