Tutorials for UI App creation? Or am I just wickedly inept

Kinda as the post title says, I'm currently interested in creating a custom UI app for Beam.NG, basically creating a custom Tachometer/speedo, but struggling to find any resources or tutorials available online to properly explain or show how UI creation works. I have checked the official Beam.NG drive guide for it, but it doesn't at all explain where or how to start writing scripts or importing elements for said UI creation, so if anyone has tips/tricks/knows of any good tutorials for how to begin, I would be super grateful!!

Sorry to take up forum space!!

 

Best way is to reverse engineer a vanilla ui-app, imo. No joke! They are written in Java-Script with the help of HTML+CSS. You can find them in the game installation path: BeamNG.drive/ui/modules/apps. Unfortunately I haven't found any good tutorials for that, too.
Happy hacking!

 

Awesome! Thanks for pointing me in the right direction man!! Kinda sucks there aren't any tutorials or good demos of how to make UI apps, cause these could be super helpful and cool with more community creations!!

 

This is how I figured it out, having a basic understanding of HTML+CSS and AngularJS helps a ton but looking at existing apps is a must to understand how to get the app to interact with the game. Also CEF Devtools (CTRL+U) is extremely powerful when making or reversing UI apps.

Quick example for OP, this is part of what I use for a custom drift scoring UI app. To send data to the UI you use guihooks.trigger on the lua side:

Code:

guihooks.trigger("beamlrCurrentDrift", 123.45)

Make sure to add this to the top of your script so you can access the guihooks script:

Code:

local guihooks = require('guihooks')

Then from the JS file of your app this function would receive any data passed from a guihooks.trigger call with a matching string as the first parameter:

Code:

scope.$on('beamlrCurrentDrift', function (event, data) {
          scope.cscore = data
})

The data can be individual variables or tables. Quick tip if using arrays (tables with number value keys) lua arrays begin at index 1 while in JS they begin at index 0, so array indices are shifted by -1 once they get to the JS script. This doesn't affect string keys for tables, only regular arrays. It also doesn't affect any part of an array that's after a certain gap in values so if your indices in lua are 1,2,4,5,6 in JS they would be 0,1,4,5,6.

Anyway, in reverse to execute lua functions (or send data to the game) from your UI app you use something like this in JS:

In HTML you would add ng-click="myClick()" to some element you want to make clickable like a div, image or button.