Simulator Control Widget

Widget can be used for quick simulation of the aircraft flight. Aircraft should be connected to run the simulation. User can enter the location coordinates, satellite count and data frequency. The user has the option to save presets to reuse simulation configuration.

Simulation parameters

The following parameters are simulated

Aircraft location coordinates
Aircraft real world coordinates
GPS satellites
Data frequency
Aircraft Status (Motors On, Is Aircraft Flying)
Aircraft Attitude
Wind speed in x, y and z directions (can be simulated once the simulator is running)

Presets

User can store configurations to be used as presets.

Usage

<dji.ux.beta.training.widget.simulatorcontrol.SimulatorControlWidget
   android:id="@+id/widget_simulator"
   android:layout_width="300dp"
   android:layout_height="match_parent"/>

Customizations

The UI elements can be customized to match the style of the user's application. The customizations can be done using attributes in XML or programmatically using the APIs.

XML Example

<dji.ux.beta.training.widget.simulatorcontrol.SimulatorControlWidget
        android:id="@+id/widget_simulator"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:background="@color/gray"
        app:uxsdk_valueTextColor="@color/green"
        app:uxsdk_labelsTextColor="@color/black"
        app:uxsdk_widgetTitleTextColor="@color/black"
        app:uxsdk_headerTextColor="@color/blue"
        app:uxsdk_widgetTitleBackground="@drawable/uxsdk_selector_button_background"
        app:uxsdk_inputBackground="@drawable/uxsdk_background_rounded_edit_text" />

Attributes

List of the customizable XML attributes

uxsdk_simulatorActiveDrawable - The drawable used when simulator is running
uxsdk_simulatorInactiveDrawable - The drawable used when simulator is not running
uxsdk_widgetTitleTextAppearance - The appearance of the text in widget's title
uxsdk_widgetTitleTextSize - The size of the text in widget's title
uxsdk_widgetTitleTextColor - The color of the text in widget's title
uxsdk_widgetTitleBackground - The background of the text in widget's title
uxsdk_headerTextAppearance - The appearance of the text in section headers
uxsdk_headerTextSize - The size of the text in section headers
uxsdk_headerTextColor - The color of the text in section headers
uxsdk_headerBackground - The background of the text in section headers
uxsdk_labelsTextAppearance - The appearance of the text in label in each row
uxsdk_labelsTextSize - The size of the text in label in each row
uxsdk_labelsTextColor - The color of the text in label in each row
uxsdk_labelsBackground - The background of the text in label in each row
uxsdk_valueTextAppearance - The appearance of the text in value field in each row
uxsdk_valueTextSize - The size of the text in value field in each row
uxsdk_valueTextColor - The color of the text in value field in each row
uxsdk_valueTextBackground - The background of the text in value field in each row
uxsdk_inputTextAppearance - The appearance of the text in input field in each row
uxsdk_inputTextSize - The size of the text in input field in each row
uxsdk_inputTextColor - The color of the text in input field in each row
uxsdk_inputBackground - The background of the text in input field in each row
uxsdk_buttonTextAppearance - The appearance of the text on the buttons
uxsdk_buttonTextSize - The size of the text on the buttons
uxsdk_buttonTextColor - The color of the text on the buttons
uxsdk_buttonBackground - The background of the buttons

Java Example

SimulatorControlWidget simulatorControlWidget = findViewById(R.id.widget_simulator);
simulatorControlWidget.setBackgroundColor(getResources().getColor(R.color.gray));
simulatorControlWidget.setValueTextColor(getResources().getColor(R.color.green));
simulatorControlWidget.setLabelTextColor(getResources().getColor(R.color.black));
simulatorControlWidget.setTitleTextColor(getResources().getColor(R.color.black));
simulatorControlWidget.setTitleBackground(getResources().getDrawable(R.drawable.uxsdk_selector_button_background));
simulatorControlWidget.setInputBackground(getResources().getDrawable(R.drawable.uxsdk_background_rounded_edit_text));

Kotlin Example

val simulatorControlWidget: SimulatorControlWidget = findViewById(R.id.widget_simulator)
simulatorControlWidget.backgroundColor = resources.getColor(R.color.gray)
simulatorControlWidget.valueTextColor = resources.getColor(R.color.green)
simulatorControlWidget.labelTextColor = resources.getColor(R.color.black)
simulatorControlWidget.titleTextColor = resources.getColor(R.color.black)
simulatorControlWidget.titleBackground = resources.getDrawable(R.drawable.uxsdk_selector_button_background)
simulatorControlWidget.inputBackground = resources.getDrawable(R.drawable.uxsdk_background_rounded_edit_text)

APIs

List of the customization APIs

var worldPositionSectionVisible: Boolean - Visibility of the world position section.
var attitudeSectionVisible: Boolean - Visibility of the attitude section.
var aircraftStatusSectionVisible: Boolean - Visibility of the aircraft status section.
var windSectionVisible: Boolean - Visibility of the wind section.
var simulatorActiveIcon: Drawable? - Icon when simulator is active.
fun setSimulatorActiveIcon(@DrawableRes resourceId: Int) - set icon for when simulator is active.
var simulatorInactiveIcon: Drawable? - Icon when simulator is inactive.
fun setSimulatorInactiveIcon(@DrawableRes resourceId: Int) set icon for when simulator is inactive.
var titleBackground: Drawable? - Background to the widget title.
fun setTitleBackground(@DrawableRes resourceId: Int) - Set background to the widget title.
var titleTextColors: ColorStateList? - Color state list for widget title text.
var titleTextColor: Int - Color of the widget title text.
var titleTextSize: Float - Size of the widget title text.
fun setTitleTextAppearance(@StyleRes textAppearance: Int) - Set the text appearance of the widget title text.
var valueBackground: Drawable? - Background for the value fields.
fun setValueBackground(@DrawableRes resourceId: Int) - Set background to the value fields.
var valueTextColors: ColorStateList? - Color state list for the value fields.
var valueTextColor: Int - Color of the value fields text.
var valueTextSize: Float - Size of the value fields text.
fun setValueTextAppearance(@StyleRes textAppearance: Int) - Set the text appearance of the value fields text.
var labelBackground: Drawable? - Background for the label fields.
fun setLabelBackground(@DrawableRes resourceId: Int) - Set background to the label fields.
var labelTextColors: ColorStateList? - Color state list for the label fields.
var labelTextColor: Int - Color of the label fields text.
var labelTextSize: Float - Size of the label fields text.
fun setLabelTextAppearance(@StyleRes textAppearance: Int) - Set the text appearance of the label fields text.
var inputBackground: Drawable? - Background to the input fields text.
fun setInputBackground(@DrawableRes resourceId: Int) - Set background to the input fields text.
var inputTextColors: ColorStateList? - Color state list for the input fields text.
var inputTextColor: Int - Color of the input fields text.
var inputTextSize: Float - Size of the input fields text.
fun setInputTextAppearance(@StyleRes textAppearance: Int) - Set the text appearance of the input fields text.
var headerBackground: Drawable? - Background to the header fields text.
fun setHeaderBackground(@DrawableRes resourceId: Int) - Set background to the header fields text.
var headerTextColors: ColorStateList? - Color state list for the header fields text.
var headerTextColor: Int - Color of the header fields text.
var headerTextSize: Float - Size of the header fields text.
fun setHeaderTextAppearance(@StyleRes textAppearance: Int) - Set the text appearance of the header fields text.
var buttonBackground: Drawable? - Background to the buttons.
fun setButtonBackground(@DrawableRes resourceId: Int) - Set background to the buttons.
var buttonTextColors: ColorStateList? - Color state list for the buttons.
var buttonTextColor: Int - Color of the buttons.
var buttonTextSize: Float - Size of the buttons.
fun setButtonTextAppearance(@StyleRes textAppearance: Int) - Set the text appearance of the buttons.

Hooks

The widget provides hooks for users to add functionality based on state changes in the widget. The Remote Controller Signal widget provides two types of hooks

SimulatorControlWidgetState - Provides hooks in events received by the widget from the widget model.
- data class ProductConnected(val isConnected: Boolean) : SimulatorControlWidgetState() - Event when product is connected or disconnected.
- data class SimulatorStateUpdated(val simulatorState: SimulatorState) : SimulatorControlWidgetState() - Event when simulator state is updated.
- data class SimulatorActiveUpdated(val isActive: Boolean) : SimulatorControlWidgetState() - Event when simulator toggles between active and inactive state.
- data class SimulatorWindDataUpdated(val windData: SimulatorWindData) : SimulatorControlWidgetState() - Event when simulator wind data is updated.

The user can subscribe to this using fun getWidgetStateUpdate(): Flowable<SimulatorControlWidgetState>

SimulatorControlWidgetUIUpdate - Provides hooks in events related to user interaction with the widget.
- data class VisibilityToggled(val isVisible: Boolean) : SimulatorControlWidgetUIUpdate() - Event when the visibility of the simulator control widget is toggled.
- object LoadPresetTap : SimulatorControlWidgetUIUpdate() - Event when the load preset button is tapped.
- object SavePresetTap : SimulatorControlWidgetUIUpdate() - Event when the save preset button is tapped.
- data class SimulatorSwitchTap(val isChecked: Boolean) : SimulatorControlWidgetUIUpdate() - Event when the user taps the toggle to switch between simulator active and inactive state.
- data class SimulatorWindChangeTap(@IntRange(from = 0, to = 2) val windDirection: Int, val isPositive: Boolean) : SimulatorControlWidgetUIUpdate() - Update when simulator wind variation buttons are tapped. Wind direction can be deternmined as 0 - X, 1 - Y and 2 - Z.