Focus Exposure Switch Widget

(Updated widget in develop branch)

This widget displays the current Control Mode and can be used to switch the Control Mode between focus and exposure.

When in focus mode the FPV Interaction Widget will help change the focus point
When in exposure mode the FPV Interaction Widget will help change exposure/metering.

If the aircraft camera does not support changing focus point the widget will be hidden and the default control mode will be Exposure/Metering. Tapping the widget will toggle between focus mode and exposure mode.

There are three states of the widget based on Control Mode.

Auto Focus Mode - Widget state when Focus Mode is Auto and Control Mode is Auto Focus.
Manual Focus Mode - Widget state when Focus Mode is Manual and Control Mode is Manual Focus.
Exposure/Metering Mode - Widget state when Control Mode is Exposure/Metering.

Usage

<dji.ux.beta.cameracore.widget.focusexposureswitch.FocusExposureSwitchWidget
       android:id="@+id/widget_focus_exposure_switch"
       android:layout_width="50dp"
       android:layout_height="50dp"/>

Customizations

The widget can be customized by the user to serve their purpose and theme.

Example

<dji.ux.beta.cameracore.widget.focusexposureswitch.FocusExposureSwitchWidget
       android:id="@+id/widget_focus_exposure_switch"
       android:layout_width="50dp"
       android:layout_height="50dp"
       android:background="@color/white"
       app:uxsdk_meteringDrawable="@drawable/ic_exposure"
       app:uxsdk_autoFocusDrawable="@drawable/ic_auto_focus"
       app:uxsdk_manualFocusDrawable="@drawable/ic_manual_focus"/>

Auto Focus	Manual Focus	Exposure / Metering

Attributes

List of the customizable XML attributes

uxsdk_cameraIndex - The camera index to which the widget should react.
uxsdk_lensType - The type of lens to which the widget should react.
uxsdk_manualFocusDrawable - The drawable to indicate when the control mode is manual focus.
uxsdk_autoFocusDrawable - The drawable to indicate when the control mode is auto focus.
uxsdk_meteringDrawable - The drawable to indicate when the control mode is metering/exposure mode.
uxsdk_manualFocusIconColor - The color for manual focus icon.
uxsdk_autoFocusIconColor - The color for auto focus icon.
uxsdk_meteringIconColor - The color for metering icon.
uxsdk_iconBackground - The drawable used for the background of the widget icon.
uxsdk_connectedStateIconColor - The color of icon when product is connected.
uxsdk_disconnectedStateIconColor - The color of icon when product is disconnected.

Kotlin Example

var focusExposureSwitchWidget: FocusExposureSwitchWidget = findViewById<FocusExposureSwitchWidget>(R.id.widget_focus_exposure_switch)
focusExposureSwitchWidget.setBackgroundColor(getResources().getColor(R.color.white))
focusExposureSwitchWidget.autoFocusIcon = resources.getDrawable(R.drawable.auto_focus_icon)
focusExposureSwitchWidget.manualFocusIcon = resources.getDrawable(R.drawable.manual_focus_icon)
focusExposureSwitchWidget.meteringIcon = resources.getDrawable(R.drawable.metering_icon)

Java Example

FocusExposureSwitchWidget focusExposureSwitchWidget = findViewById(R.id.widget_focus_exposure_switch);
focusExposureSwitchWidget.setBackgroundColor(getResources().getColor(R.color.white));
focusExposureSwitchWidget.setAutoFocusIcon(getResources().getDrawable(R.drawable.auto_focus_icon));
focusExposureSwitchWidget.setManualFocusIcon(getResources().getDrawable(R.drawable.manual_focus_icon));
focusExposureSwitchWidget.setMeteringIcon(getResources().getDrawable(R.drawable.metering_icon));

APIs

List of the customization APIs

var cameraIndex: CameraIndex - The camera index to which the widget should react.
var lensType: LensType - The type of lens to which widget should react.
var manualFocusIcon: Drawable? - The icon when control mode is Manual Focus.
public void setManualFocusIcon(@DrawableRes int resourceId) - Set the icon when control mode is Manual Focus.
var autoFocusIcon: Drawable? - The icon when control mode is Auto Focus.
public void setAutoFocusIcon(@DrawableRes int resourceId) - Set the icon when control mode is Auto Focus.
var meteringIcon: Drawable? - The icon when control mode is Exposure/Metering.
public void setMeteringIcon(@Nullable Drawable drawable) - Set the icon when control mode is Exposure/Metering.
var manualFocusIconTintColor: Int? - The color for the Manual Focus icon.
var autoFocusIconTintColor: Int? - The color for the Auto Focus icon.
var meteringIconTintColor: Int? - The color for the Exposure/Metering icon.
var iconBackground: Drawable? - Background of the icon.
fun setIconBackground(@DrawableRes resourceId: Int) - Set the background of the icon.
var connectedStateIconColor: Int - Color tint for icon when product is connected.
var disconnectedStateIconColor: Int - Color tint for icon when product is disconnected.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The Focus Exposure Switch widget provides two types of 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 FocusExposureSwitchUpdated(val focusExposureSwitchState: FocusExposureSwitchState) : ModelState() - Event when focus exposure switch state is updated.

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

UIState - Provides hooks in events related to user interaction with the widget.
- object WidgetClicked : UIState() - Event when widget is clicked.

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

DJI UX SDK Version 5 Beta 5