Skip to content

User Account Login Widget

Jump to bottom
siddutgikar edited this page May 12, 2020 · 2 revisions

The widget will display the current DJI account login state. It can be used to sign into the DJI account or sign out of it. The UserAccountState has the four following states:

  • Not logged in

  • Logged in but not authorized to unlock FlyZones

  • Logged in but token is out of date

  • Logged in and authorized to unlock FlyZones

Usage

<dji.ux.beta.core.widget.useraccount.UserAccountLoginWidget
        android:id="@+id/widget_user_login"
        android:layout_width="200dp"
        android:layout_height="50dp"/>

The user can tap the widget to log in into their DJI account. The following interface is presented to complete this.

Tapping the widget while in logged in state will log out the user.

Customizations

The widget offers lot of customizations based on how elaborate its use is. User can decide to show/hide parts of the widget based on UserAccountState.

XML Example

<dji.ux.beta.core.widget.useraccount.UserAccountLoginWidget
        android:id="@+id/widget_user_login"
        android:layout_width="200dp"
        android:layout_height="35dp"
        app:uxsdk_userIconAuthorized="@drawable/ic_person_green"
        app:uxsdk_messageTextEnabled="false"/>

 <dji.ux.beta.core.widget.useraccount.UserAccountLoginWidget
        android:id="@+id/widget_user_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:uxsdk_userIconAuthorized="@drawable/ic_person_green"
        app:uxsdk_messageTextEnabled="false"
        app:uxsdk_stateTextEnabled="false"/>

Attributes

List of the customizable XML attributes

  • uxsdk_messageTextAppearance - Set widget message text appearance

  • uxsdk_messageTextSize - Set widget message text size

  • uxsdk_messageTextColorAuthorized - Set widget message text color when user is authorized

  • uxsdk_messageTextColorNotAuthorized - Set widget message text color when user is not authorized

  • uxsdk_messageTextColorTokenOutOfDate - Set widget message text color when user token is out of date

  • uxsdk_messageTextColorNotLoggedIn - Set widget message text color when user is not logged in

  • uxsdk_messageTextBackground - Set widget message text background

  • uxsdk_messageTextEnabled - Set widget message text enabled. If disabled it will hide message text

  • uxsdk_stateTextAppearance - Set widget state text appearance

  • uxsdk_stateTextSize - Set widget state text size

  • uxsdk_stateTextColorAuthorized - Set widget state text color when user is authorized

  • uxsdk_stateTextColorNotAuthorized - Set widget state text color when user is not authorized

  • uxsdk_stateTextColorTokenOutOfDate - Set widget state text color when user token is out of date

  • uxsdk_stateTextColorNotLoggedIn - Set widget state text color when user is not logged in

  • uxsdk_stateTextBackground - Set widget state text background

  • uxsdk_stateTextEnabled - Set widget state text enabled. If disabled it will hide state text

  • uxsdk_userIconAuthorized - Set user icon when user is authorized

  • uxsdk_userIconNotAuthorized - Set user icon when user is not authorized

  • uxsdk_userIconTokenOutOfDate - Set user icon when user token is out of date

  • uxsdk_userIconNotLoggedIn - Set user icon when user is not logged in

  • uxsdk_userIconBackground - Set user icon background

  • uxsdk_userIconEnabled - Set user icon enabled. If disabled it will hide the user icon

  • uxsdk_actionIconAuthorized - Set action icon when user is authorized

  • uxsdk_actionIconNotAuthorized - Set action icon when user is not authorized

  • uxsdk_actionIconTokenOutOfDate - Set action icon when user token is out of date

  • uxsdk_actionIconNotLoggedIn - Set action icon when user is not logged in

  • uxsdk_actionIconBackground - Set action icon background

  • uxsdk_actionIconEnabled - Set action icon enabled. If disabled it will hide the action icon

Java Example

UserAccountLoginWidget userAccountLoginWidget = findViewById(R.id.widget_user_login);
userAccountLoginWidget.setUserIcon(UserAccountState.NOT_LOGGED_IN, getResources().getDrawable(R.drawable.ic_user_out));
userAccountLoginWidget.setUserIcon(UserAccountState.NOT_AUTHORIZED, getResources().getDrawable(R.drawable.ic_user));
userAccountLoginWidget.setUserIcon(UserAccountState.AUTHORIZED, getResources().getDrawable(R.drawable.ic_user));
userAccountLoginWidget.setUserIcon(UserAccountState.TOKEN_OUT_OF_DATE, getResources().getDrawable(R.drawable.ic_user));
userAccountLoginWidget.setActionIcon(UserAccountState.NOT_LOGGED_IN, getResources().getDrawable(R.drawable.ic_log_in));
userAccountLoginWidget.setActionIcon(UserAccountState.NOT_AUTHORIZED, getResources().getDrawable(R.drawable.ic_log_out));
userAccountLoginWidget.setActionIcon(UserAccountState.AUTHORIZED, getResources().getDrawable(R.drawable.ic_log_out));
userAccountLoginWidget.setActionIcon(UserAccountState.TOKEN_OUT_OF_DATE, getResources().getDrawable(R.drawable.ic_log_out));
userAccountLoginWidget.setWidgetMessageTextColor(UserAccountState.NOT_LOGGED_IN, Color.parseColor("#B2DFDB"));
userAccountLoginWidget.setWidgetMessageTextColor(UserAccountState.NOT_AUTHORIZED, Color.parseColor("#FFE0B2"));
userAccountLoginWidget.setWidgetMessageTextColor(UserAccountState.TOKEN_OUT_OF_DATE, Color.parseColor("#FFE0B2"));
userAccountLoginWidget.setWidgetMessageTextColor(UserAccountState.AUTHORIZED, Color.parseColor("#C8E6C9"));
userAccountLoginWidget.setWidgetStateTextColor(UserAccountState.NOT_LOGGED_IN, Color.parseColor("#FFCCBC"));
userAccountLoginWidget.setWidgetStateTextColor(UserAccountState.NOT_AUTHORIZED, Color.parseColor("#F5F5F5"));
userAccountLoginWidget.setWidgetStateTextColor(UserAccountState.TOKEN_OUT_OF_DATE, Color.parseColor("#F5F5F5"));
userAccountLoginWidget.setWidgetStateTextColor(UserAccountState.AUTHORIZED, Color.parseColor("#81C784"));
userAccountLoginWidget.setWidgetStateTextSize(12);
userAccountLoginWidget.setWidgetMessageTextSize(9);


APIs

List of the customization APIs

  • public void setWidgetStateTextColor(@NonNull UserAccountState userAccountState, @Nullable ColorStateList colorStateList) - Set widget state text color list based on UserAccountState

  • @Nullable public ColorStateList getWidgetStateTextColors(@NonNull UserAccountState userAccountState) - Get color state list of wiget state text based on UserAccountState

  • public void setWidgetStateTextColor(@NonNull UserAccountState userAccountState, @ColorInt int color) - Set widget state text color based on UserAccountState

  • @ColorInt public int getWidgetStateTextColor(@NonNull UserAccountState userAccountState) - Get current text color of wiget state text based on UserAccountState

  • public void setWidgetStateTextAppearance(@StyleRes int textAppearance) - Set widget state text appearance

  • public void setWidgetStateBackground(@DrawableRes int resourceId) - Set widget state text background resource

  • public void setWidgetStateBackground(@Nullable Drawable drawable) - Set widget state text background

  • @Nullable public Drawable getWidgetStateBackground() - Get current widget state text background

  • public void setWidgetStateTextSize(@Dimension float textSize) - Set widget state text size

  • @Dimension public float getWidgetStateTextSize() - Get current widget state text size

  • public void setWidgetMessageTextColor(@NonNull UserAccountState userAccountState, @Nullable ColorStateList colorStateList) - Set widget message text color list based on UserAccountState

  • @Nullable public ColorStateList getWidgetMessageTextColors(@NonNull UserAccountState userAccountState) - Get color state list of wiget message text based on UserAccountState

  • public void setWidgetMessageTextColor(@NonNull UserAccountState userAccountState, @ColorInt int color) - Set widget message text color based on UserAccountState

  • @ColorInt public int getWidgetMessageTextColor(@NonNull UserAccountState userAccountState) - Get current text color of wiget message text based on UserAccountState

  • public void setWidgetMessageTextAppearance(@StyleRes int textAppearance) - Set widget message text appearance

  • public void setWidgetMessageBackground(@DrawableRes int resourceId) - Set widget message text background resource

  • public void setWidgetMessageBackground(@Nullable Drawable drawable) - Set widget message text background

  • @Nullable public Drawable getWidgetMessageBackground() - Get current widget message text background

  • public void setWidgetMessageTextSize(@Dimension float textSize) - Set widget message text size

  • @Dimension public float getWidgetMessageTextSize() - Get current widget message text size

  • public void setActionIcon(@NonNull UserAccountState userAccountState, @DrawableRes int resourceId) - Set action icon based on UserAccountState

  • public void setActionIcon(@NonNull UserAccountState userAccountState, @Nullable Drawable drawable) - Set action icon based on UserAccountState

  • public Drawable getActionIcon(@NonNull UserAccountState userAccountState) - Get action icon based on UserAccountState

  • public void setActionIconBackground(@DrawableRes int resourceId) - Set action icon background resource

  • public void setActionIconBackground(@Nullable Drawable drawable) - Set action icon background

  • public Drawable getActionIconBackground() - Get current action icon background

  • public void setUserIcon(@NonNull UserAccountState userAccountState, @DrawableRes int resourceId) - Set user icon based on UserAccountState

  • public void setUserIcon(@NonNull UserAccountState userAccountState, @Nullable Drawable drawable) - Set user icon based on UserAccountState

  • public Drawable getUserIcon(@NonNull UserAccountState userAccountState) - Get user icon based on UserAccountState

  • public void setUserIconBackground(@DrawableRes int resourceId) - Set user icon background resource

  • public void setUserIconBackground(@Nullable Drawable drawable) - Set user icon background

  • public Drawable getUserIconBackground() - Get current user icon background

  • public void setActionIconEnabled(boolean isEnabled) - Set action icon enabled/disabled. Disabling will make the icon invisible

  • public boolean isActionIconEnabled() - Check if action icon is enabled

  • public void setUserIconEnabled(boolean isEnabled) - Set user icon enabled/disabled. Disabling will make the icon invisible

  • public boolean isUserIconEnabled() - Check if user icon is enabled

  • public void setMessageTextEnabled(boolean isEnabled) - Set widget message text enabled/disabled. Disabling will make the text invisible

  • public boolean isMessageTextEnabled() - Check if widget message text is enabled

  • public void setWidgetStateTextEnabled(boolean isEnabled) - Set widget state text enabled/disabled. Disabling will make the text invisible

  • public boolean isWidgetStateTextEnabled() - Check if widget state text is enabled

DJI UX SDK Version 5 Beta 5

Guidelines
UX SDK 5.0 Overview
Core Module
Camera Core Module
Visual Cameras Module
Flight Module
Map Module
Accessory Module
Training Module
Clone this wiki locally