Skip to content

Camera Settings Indicator Widget

Siddharth Utgikar edited this page Feb 26, 2021 · 1 revision

(Updated widget in develop branch)

This widget displays the camera exposure mode. Tapping on the widget can be used to open the camera settings panel. The exposure modes are as below

Icon Description
Auto/Program Exposure Mode
Aperture Priority Mode
Shutter Priority Mode
Manual Mode
Unknown Exposure Mode

Usage

<dji.ux.beta.cameracore.widget.cameracontrols.camerasettingsindicator.CameraSettingsIndicatorWidget
     android:id="@+id/widget_camera_control_camera_settings"
     android:layout_width="100dp"
     android:layout_height="100dp"
     android:background="@drawable/uxsdk_background_black_rectangle" />

Customizations

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

Example

<dji.ux.beta.cameracore.widget.cameracontrols.camerasettingsindicator.CameraSettingsIndicatorWidget
     android:id="@+id/widget_camera_control_camera_settings"
     android:layout_width="100dp"
     android:layout_height="100dp"
     app:uxsdk_iconTint="@color/black"
     android:background="@color/white" />
Icon Description
Auto/Program Exposure Mode
Aperture Priority Mode
Shutter Priority Mode
Manual Mode
Unknown Exposure Mode

Attributes

List of the customizable XML attributes
  • uxsdk_cameraIndex - The camera index to which the widget should react.
  • uxsdk_lensType - The type of the lens the widget is reacting to.
  • uxsdk_unknownModeDrawable - The icon to be shown for unknown exposure mode.
  • uxsdk_aperturePriorityModeDrawable - The icon to be shown for aperture priority mode.
  • uxsdk_shutterPriorityModeDrawable - The icon to be shown for shutter priority mode.
  • uxsdk_programModeDrawable - The icon to be shown for program/auto mode.
  • uxsdk_manualModeDrawable - The icon to be shown for manual mode.
  • 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
  • uxsdk_onStateChange - The instance of view that should listen to the state change callback. This can be used to open the Camera Settings Panel.

Kotlin Example

var cameraSettingsIndicatorWidget = findViewById<CameraSettingsIndicatorWidget>(R.id.widget_camera_control_camera_settings)
cameraSettingsIndicatorWidget.setBackgroundColor(getResources().getColor(R.color.white))
cameraSettingsIndicatorWidget.iconTintColor = getResources().getColor(R.color.black)

Java Example

CameraSettingsIndicatorWidget cameraSettingsIndicatorWidget = findViewById(R.id.widget_camera_control_camera_settings);
cameraSettingsIndicatorWidget.setBackgroundColor(getResources().getColor(R.color.white));
cameraSettingsIndicatorWidget.setIconTintColor(getResources().getColor(R.color.black));

APIs

List of the customization APIs
  • var cameraIndex: CameraIndex - The camera index for which the widget should react.
  • var lensType: LensType - The type of the lens the widget is reacting to.
  • public void setIconByMode(@NonNull ExposureMode exposureMode, @DrawableRes int resourceId) - Set the icon based on exposure mode.
  • public void setIconByMode(@NonNull ExposureMode exposureMode, @Nullable Drawable drawable) - Set the icon based on exposure mode.
  • @Nullable public Drawable getIconByMode(@NonNull ExposureMode exposureMode) - Get the based on exposure mode.
  • 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.
  • var stateChangeCallback: OnStateChangeCallback<Any>? - The instance of view that should listen to the state change callback. This can be used to open the Camera Settings Panel.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The Camera Settings Indicator widget provides two types of 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 CameraSettingsIndicatorStateUpdated(val cameraSettingsIndicatorState: CameraSettingsIndicatorState) : ModelState() - Event when camera settings state is updated.

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

  1. 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>.

Clone this wiki locally