UI Customization
As far as we know the UI of the DJI Goggles V1/V2 are defined by 4 main pieces, and modifying them you could have a fully customized UI or theme.
The view core is managed by libtp1801_gui.so, at the moment we don't have too much information about it, but this document will be updated with the new findings.
For now, we could say that it the binary where all the view controllers and models related to that views are defined.
The views are defined on XML and each of the view is always starting with the tag <msdialog> containing one of the following tags rootwindow, mainwindow, childwindow or popupwindow. The views can be found on gui/xml/
The views mostly contains a set of nested elements to define the structure and data contained on the view, how it looks it specified by classed defined on the Theme (check below to know more).
The available menu to set up and customize the Goggles are usually based on childview that are presented after selecting few different options across the navigation, like channel or settings option menu.
It seems there are 3 main menu types:
- To open a full screen feature like AV-IN, Playback
<menuitem widget.menubutton.data = "Av-In"
widget.title.text="AV-IN"
widget.value.text=">"
widget.up.image.name=""
widget.up.selimage.name=""
widget.down.image.name=""
widget.down.selimage.name=""
/>
- To change setting directly without the need of any other UI
<menuitem
widget.menubutton.data="Max Power"
widget.title.text="msg_setting_uav_max_power"
widget.value.text="N/A"
/>
- Open another (sub-)menu view
<menuitem
childwindow="switch_glass_mode_win"
widget.menubutton.data="switch glass"
widget.title.text="msg_setting_goggle_product_mode_button"
widget.value.text=""
/>
As you may notice already the main difference between the 2 first menu items and the last one is the childwindow property which define the name of the XML view to open.
For the menu items the most important piece may be the widget.menubutton.data. You can define a menu item with all the other items, including childwindow but if the .data property is empty or wrong it won't load. It seems libtp1801_gui.sotry to execute the menu item finding the model information using this .data property, if it matches within the implementation model/property/value it can complete the load view, if not it fails on it.
You can load load some extra views by guessing some .data keys, there is some kind of pattern across the menu items, usually the key is part of the childwindow key and some times from the widget.title.text, it is mostly try and error for now.
Last but not least, even if you know the right .data key property, it may NOT work where you have defined the item may not know about this specific view. It seems not all data properties are available on all the views.
The system views are styled using a set of classes, as it happens on CSS. Those classes define the how the view will look, from the size to the colors. The file containing all this is styles is theme.xml on gui/xml/themes/default/.
The resources image used by UI are hosted on gui/images. Replacing the image will make the system to load a new one. Probably you can even add new images and change the routes on the views so you don't even need to replace them.
