Many applications that control DJI products using the DJI Mobile SDK share similar core functionalities. They will typically:
To make an application, a developer typically has to provide this set of core functionalities before adding some unique ones.
The DJI UX SDK provides UI elements that have these core functionalities, hence can be used to speed up development time. In fact, by using the default UX SDK, an application can be created with no additional lines of code. It looks like:
Developers can pick and choose which parts of the UX SDK they want to include, exclude and customize.
UX SDK is available in the DJI Mobile SDK v4.0 and later.
UX SDK has three main UI categories:
All UI elements can simply be included in an application without extra maintenance. They are already tied to the DJI Mobile SDK, and will start updating themselves after instantiation.
A widget is the simplest component of the UX SDK. It typically represents a simple state element or gives a simple control. Some examples of widgets include:
Aircraft Battery Percentage
Video Signal Strength
Return to Home Button
Widgets can be customized by either swapping the asset, or subclassing the widget.
Swapping the asset keeps the widget's behavior and logic, but changes its look.
Your asset needs to be sized and named the same as the exising asset or it will not be displayed correctly by the framework. If UXSDK is not able to find the asset it is expecting, it will draw a small orange square around the center of where the asset will be to help with visibility.
Note: The image files are required to have the same name, size, @2x/@3x as the original files they are replacing. The framework may not draw images correctly if there are any differences.
Widgets can be subclassed to override initialize and view update methods to customize the look. For easy customization, each widget exposes the underlying data it is using as properties. Please refer to the API documentation for more details.
In Android, subclassing can completely change the behavior and the look of Widgets. The steps are:
void initView(Context var1, AttributeSet var2, int var3) and inflate/initialize the custom layout. Remember, do not call
To get updated with information changes, override methods with the name following the
onXXXChange pattern (for example, the
onBatteryPercentageChange(int percentage) in
BatteryWidget). This method will be called every time battery percentage changes. Overriding this method will give you the integer value of battery percentage. Remember, do not call
To perform actions, use methods that follow the naming pattern
A widget collection groups multiple, often related widgets together in an organized way. It controls the layout of the widgets relative to each other.
Collections can also be created and used to organize pre-existing widgets.
Widget collections are used in iOS Only. Example of widget collections include:
Status Bar Widget Collection
Panels are more complex elements with rich information and control, such as settings menus or the pre-flight checklist.
Examples of panels include:
Camera Settings Panel
Camera Exposure Settings Panel
Due to the complexity of panels, customization is not currently provided.
Sample projects are provided for the DJI UX SDK: