Hello, wanted to see if anyone was able to help me out with getting started on beamng UI Apps Even trying to copy then edit the example app in the documentation doesn't work for me. I know the game can see the app, because it will throw errors in the console if I just make some random changes like adding a semicolon where it shouldn't be. The app will also appear in the list, but is just a blank screen. I was wondering if someone could whip me up a quick example app, with a button or two and some comments explaining how it works. I did find another example from another user, but it doesn't have buttons and it also only commented the parts I don't need(such as using guihooks and sending data back to lua, I understand how that works). I can post code here later if anyone wants to check it out, but I REALLY would like a working example to look at to understand how this all works. Thanks in advance!
I tried some of that myself and I couldn't figure it out either. I think you have to use Inkscape, Vue, Angular...??? to create graphical buttons and then export them. Which means that they're probably invisible on your side after that. Maybe contact the author of this mod. They're a genius at this stuff: https://www.beamng.com/resources/chaos-mod-ui.30357/
Hey, here's an example mod I made a while back that includes a UI app. Hope it helps! Feel free to ask any questions
I'm like 99% sure this is the example I already did look at, I'll have to check after work though. I'm pretty sure you had posted it in another thread lol I'll have a look though and see if I can maybe build off of it and get something working, appreciate the help!
Yeah, I've posted it a few times. But as I said, if you have any questions then feel free to ask, I'm happy to help
Alright well I'll have another try with this and see what I can do first, I'll come back if I have any troubles! Thank you again!
Really appreciate the help, I am able to insert my own UI elements and manipulate them (hiding etc) so I think I can get some stuff done now! Just one more thing, how do I store data for the UI OR detect when it reloads to resync any information? I've noticed even hitting ESC to open the menu will reset it.
Well if they don't know, surely someone does? There surely HAS to be a way to save data to reload the UI when you hit F5 , or to at least detect when the UI has been reloaded but no one I've asked seems to know
D:\SteamLibrary\steamapps\common\BeamNG.drive\ui\modules\apps Here are the standard apps you will also find in the game a basic UI mod consists of 1 javascript file, 1 json file and 1 picture in PNG, CSS can be also included sometimes. here is one of my examples when i tried to make one of my own UIs. i wanted to make a gforce UI that can show me the vertical G forces (not this one). So basically i experimented with the standard one but also with a mod one that was very simple and it worked. i also found a glitch in the beamng sensors lol. the file bellow u can put this in ur mod folder its the standard gforce UI, or just look how its build up its literally all you need, except you wanna do something more complicated then you need more than a json file and a javascipt file, you can implement buttons into javascript lul. i was searching for a standard Ui with buttons and i found one D:\SteamLibrary\steamapps\common\BeamNG.drive\ui\modules\apps\ESCStiffness the buttons have a template with a function bellow in the javascipt code, i only coded a lil javascipt so i dont know allot about it.
Oh sorry, I must have forgotten to respond to this. I'm not actually really sure. I know in Lua you can do something like: Code: M.onSerialize = function() return { someLocalVariable = someLocalVariable } end M.onDeserialized = function(data) someLocalVariable = data.someLocalVariable end So you could possibly use this? Unless there's a way to do this with the UI (some hook possibly), not completely sure :/
Personally to reload UI data I have something like this, might not be the best way to do it but it works. This is in JS: Code: scope.initDone = false if(!scope.initDone) { bngApi.engineLua(`extensions.myAppData.sendAppData()`); scope.initDone=true; } scope.$on('appData', function (event, data) { // set all needed data } With a lua script which to work with the previous code would be called myAppData.lua: Code: local M = {} local savedData = {} -- keep all UI data in this table local function sendAppData() guihooks.trigger("appData", savedData) end -- add getter/setter functions for savedData, serialization/deserialization, whatever M.sendAppData = sendAppData return M The initDone bool is set to true immediately to avoid calling the function multiple times. Because it's initialized to false whenever the app is reset it'll call the lua function that sends data back. The key part is to keep all UI data that must be restored in a lua table that'll be sent to the UI whenever initDone is false which happens when ESC is hit. If the data comes from lua in the first place it's easy enough to keep a copy and it'll always be up to date, if the UI itself manipulates the data it's important to update the lua saved data, basically just keep lua data in sync with the UI data to avoid reloading outdated data. I guess that data can be serialized/deserialized if it's necessary to restore it after the game is restarted.
Ah thanks for the reply folks! It seems I already came to the same conclusion; saving the data in Lua and syncing it from there and then resyncing with the init function. --- Post updated --- Just in case you don't know, I found out you can do $scope.init = function() {dataSyncFunctionHere}; I don't know if it really matters which way you do it however
