Focus Mode Widget

(Updated widget in develop branch)

Focus Mode Widget will display the current focus mode. There are three types of Focus Modes based on the product. The widget will display the combination of modes supported by the product. The currently active focus mode will be highlighted in green color. Tapping the widget will toggle between focus modes.

Auto Focus Continuous - Camera will continuously adjust focus based on target
Auto Focus - Camera will set focus to target automatically
Manual Focus - Camera focus can be manually adjusted

Usage

<dji.ux.beta.cameracore.widget.focusmode.FocusModeWidget
        android:id="@+id/widget_focus_mode"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

Customizations

The widget can be customized by the user to serve their purpose and theme. The customizations can be done using attributes in XML or programmatically using the APIs.

XML Example

<dji.ux.beta.cameracore.widget.focusmode.FocusModeWidget
        android:id="@+id/widget_focus_mode"
        android:background="@color/white"
        app:uxsdk_activeModeTextColor="@color/blue"
        app:uxsdk_inactiveModeTextColor="@color/black"
        android:layout_width="50dp"
        android:layout_height="50dp"/>

Attributes

List of the customizable XML attributes

uxsdk_activeModeTextColor - The color of the text for the mode currently active.
uxsdk_inactiveModeTextColor - The color of the text for the mode currently inactive.
uxsdk_disconnectedStateTextColor - The color of the text when product is disconnected.
uxsdk_widgetTitleTextSize - The size of the text.
uxsdk_widgetTitleBackground - The background of text.
uxsdk_cameraIndex - The camera index to which the widget should react.
uxsdk_lensType - The type of lens to which the widget should react.

Kotlin Example

val focusModeWidget: FocusModeWidget = findViewById(R.id.widget_focus_mode)
focusModeWidget.setBackgroundColor(resources.getColor(R.color.white))
focusModeWidget.setActiveModeTextColor(resources.getColor(R.color.blue))
focusModeWidget.setInactiveModeTextColor(resources.getColor(R.color.black))

Java Example

FocusModeWidget focusModeWidget = findViewById(R.id.widget_focus_mode);
focusModeWidget.setBackgroundColor(getResources().getColor(R.color.white));
focusModeWidget.setActiveModeTextColor(getResources().getColor(R.color.blue));
focusModeWidget.setInactiveModeTextColor(getResources().getColor(R.color.black));

APIs

List of the customization APIs

var lensType: LensType - Type of lens to which the widget should react.
var cameraIndex: CameraIndex - The camera index to which the widget should react.
@ColorInt var activeModeTextColor - The color of the text for the mode currently active.
@ColorInt var inactiveModeTextColor - The color of the text for the mode currently inactive.
@ColorInt var disconnectedStateTextColor - The color of the text when product is disconnected.
var titleBackground: Drawable? - The current background of the text.
void setTitleBackground(@DrawableRes int resourceId) - Set the background of the text.
@get:Dimension var titleTextSize: Float - The current size of the widget text.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The Focus Mode 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 FocusModeStateUpdated(val focusModeState: FocusModeState) : ModelState() - Event when focus mode 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