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 UI Library provides UI elements that have these core functionalities, hence can be used to speed up development time. In fact, by using the default UI Library, an application can be created with no additional lines of code. It looks like:
Developers can pick and choose which parts of the UI Library they want to include, exclude and customize.
UI Library is available in the DJI Mobile SDK v4.0 and later.
UI Library 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 UI Library. 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.
Note: The image assets are required to be of the same names and pixel dimensions as the original ones.
- res/drawable - res/drawable-hdpi-v4 - res/drawable-mdpi-v4 - res/drawable-xhdpi-v4 - res/drawable-xxhdpi-v4 - res/drawable-xxxhdpi-v4
Note: The image assets are required to be of the same pixel dimensions as the original ones.
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 UI Library: