Scenario UI apps

You can customize which UI apps will be shown in your scenarios. You can do that by adding a field named 'uilayout' in your scenario json file.

There are several ways to define the UI apps:

Using default UI layout

The game will automatically try to choose the most appropriate layout, depending on the scenario type. For example, multiseat scenarios will use a different layout than a regular scenario.

To do this, just make sure there is no field named "uilayout" in your scenario json file.

Using predefined UI layouts

You can override the default choice by editing your scenario json file, and adding a field with key "uilayout", and using the desired UI layout name as the value.

For example:

"uilayout": "singleCheckpointScenario"

You can use any of the layouts names defined in the file: settings/uiapps-layouts-default.json

Using a custom UI layout

Instead of using one of the existing presets, you can also define the whole layout from scratch, including any numbers of apps in any position of the screen you want.

Example:

"uilayout":
[
         {
            "name":"Messages",
            "domElement":"<messages></messages>",
            "css":{ "width":"500px", "height":"400px", "top":"80px", "left":"0px" },
            "noCockpit":false,
            "directive":"messages",
            "jsSource":"../../ui/modules/apps/Messages/app.js"
         },
         {
            "name":"Race Time",
            "domElement":"<race-time></race-time>",
            "css":{ "width":"150px", "height":"80px", "top":"0px", "right":"0px" },
            "noCockpit":false,
            "directive":"raceTime",
            "jsSource":"../../ui/modules/apps/RaceTime/app.js"
         },
]

The easiest way to do this is not to manually write all of that yourself, but to use the ingame UI app editor menu:

Go to freeroam mode
Customize the UI layout however you want it to look
Exit BeamNG.drive
Go to mydocuments/beamng.drive/settings/uiapps.layouts.json
Locate the "freeroam" layout, and copy its contents to your scenario json file, under the "uilayout" key.

Remember that each user can have a different screen or window resolution, so make sure to align the UI apps to their closest corner (or center), rather than disappearing when the window size is too small if the app was top-left aligned.