The user interface (UI) is designed in the style of Material Design. The layout is sectioned into tabs on the left and on the bottom are control buttons.
There are currently 6 pages:
- OpenAuto
- Media Player
- Vehicle
- Camera
- App Launcher
- Settings
The Pages are defined further within the sidebar individually.
Within the bottom bar there are 2 control buttons and a small area for the Quick View. The 2 buttons available are: 2. Power Button (This will open a pop-up allowing you to power off or restart the device) 3. Close the application
The Quick View is an optional area for the following slider bars:
- Volume
- Brightness
- Controls (Encompasses the above, along with a dark/light theme toggle button)
The Quick View can be toggled to the preferred setting in the Layout tab of the Settings page.
When attempting to customize the UI, writing a plugin, creating a new feature, or whatever the use case is, here are some useful tidbits of information to get going.
The theming for dash is all read in from a CSS file: CSS Stylesheets.
The accent color is exposed via palette(base) and palette(alternate-base) (a slightly lighter variant of the accent color).
Dash is organized to seperate any "core" code from the GUI code. For example, the icons are placed on the main window, so you can find them in app/window.cpp. The size of those buttons is set via the arbiter. Window Icon Size