Well apparently I have some "experience" in making UI apps for this game or something, thought I'd make a general support thread for people who have questions about making apps and general HTML stuff to do with the game. I want this to stay BeamNG specific, but maybe I can do a links section or something with information on the systems BeamNG uses - jQuery, JS, CSS, HTML, etc. The MyFirstApp tutorial is pretty much complete - it shows how to get the basics of an app running. The advanced tutorial is still being worked on - it will show css, and the update and resize functions. There are also a number of file specific pages now crea Tips: Running BeamNG with the -cefdev argument will give you a window similar to Chrome's dev tools panel, enabling you to play around with the html/css and view console messages from the ingame HTML framework Wiki Links: http://wiki.beamng.com/My_First_App http://wiki.beamng.com/Advanced_Tutorial (WIP) http://wiki.beamng.com/Streams (WIP) http://wiki.beamng.com/Utility_Functions (WIP) http://wiki.beamng.com/App.json (WIP) http://wiki.beamng.com/App.js (WIP) http://wiki.beamng.com/App.css (WIP) http://wiki.beamng.com/App.png
One site I recommend is Codecademy. It has courses for HTML, CSS, jQuery, JS, PHP, Python, and Ruby. It can help give people a general idea of how to write in these languages. Codecademy
please explain how streams work, the sendGameEngine() and variations, and when update() is called so i don't have to go digging, thanks. edit: and vlua()
In your app.json you define which streams you'd like to use in the data section: Code: { [...] "data": { "streams" : ["stream1","stream2","..."] } } At the moment there are 6 streams: wheelInfo engineInfo electrics torqueCurve stats sensors To see how they are structured, just look in lua/guistreams.lua for now or in the apps using them. in your updatefunction you will get the content of the streams as following: Code: MyApp.prototype.update = function(streams){ streams.wheelInfo //<- there's your wheelinfo streams.wheelInfo[0] // <- first wheel streams.wheelInfo[0][0] // <- name of the first wheel streams.sensors.position.x // <- x-Coordinate of the position of the current vehicle } You only get access to streams you requested in the app.json. The updatemethod will be invoked on every frame. - - - Updated - - - the equivalent to vlua would be callLuaFunction(func, v), slua() would be callSystemLuaFunction(func, v) where func is the function name and v is the argument(s)
Is it possible to get, for example, a list of files (lua returns the file list) in the folder to fill combobox or etc?
yes, that would be possible with the callLuaFuncCallback(func, callback) function. That's how the gui gets the applist. What exactly do you want to archieve? maybe there's an easier way
Thanks. Want to get the waypoints file list - - - Updated - - - callLuaFuncCallback function only works with vehicle lua?
just to be clear, is there is no decent way to write your own html file like beamng.html or play.html? i have to write the html and then inject it as an app through javascript with .append() or otherwise?
Got quite a bit done on wiki today, started super basic tutorial for making apps (see first post) and lots of streams docs started, although not complete. A guy by the name of Thomatoes50 started making streams docs at the same time separately to me, we managed to merge the stuff together onto the big streams page so thanks to him for the help.
I'm thinking about adding a app.html which gets loaded in the rootElement automatically by the Appsystem. That could help bigger apps that need much predefined html If you need a similar method for calling systemwide lua, i could add that
It would be great. I think in the future it will be useful not only for me P.S. Added a short info in wiki about app.css .
jquery's .load() works very well for this, but i ran into an issue with resizing afterward. not sure if i caused the issue, but i had to hook .resize() and do my own resizing; "height: 100%" did not work properly within my css. if anyone else runs into an issue, this is what mine looks like: Code: .. initialize() .. $(".RaceTimer").load("apps/RaceTimer/app.html", function() { timer_show(); $(".RaceTimer").resize(stupidResizeFix); stupidResizeFix(); // call this manually to trigger the resize fix when the app first loads } ); .. }; function stupidResizeFix() { var table_height = $(".lapTimerTable").height(); var racetimer_height = $(".RaceTimer").height(); $("#console").height(racetimer_height - table_height); } i had a table on top and a div on bottom, setting the height of the div on bottom didn't work right, it would literally be 100% of the height of the app window and not just 100% of the remaining space. this worked though. - - - Updated - - - i can't figure out how to return vehicle data lua stuff from the game :\ Code: console.log("calling func"); callLuaFuncCallback("return v.vehicleDirectory", function(result) { console.log("hit callback"); RaceTimer.prototype.writeStatus("stuff: " + JSON.stringify(result)); }); does not work with no error or failure messages. this does not work either; Code: callLuaFuncCallback("return 1+1"... and this does work: Code: callLuaFuncCallback("1+1"... running "print(v.vehicleDirectory)" in BNGV console works fine, but not in BNGS. under what context is this callLuaFuncCallback() running? anyone see a decent way to access the `v` lua table? some examples would be nice.
Most likely, you must return a valid json object from your lua: Code: var commandString = "gameEngine:executeJS('_fCallback("+functionCallbackCounter+", ' .. encodeJson("+func+") ..')')"; So, LUA: Code: function getVDir() return "{\"dir\":\""..v.vehicleDirectory.."\"}" end app: Code: callLuaFuncCallback("getVDir()", function(arg){ console.log(arg); });
There was a bug in callLuaFuncCallback() which i fixed now. Working example (as soon as i committed the changes to you): Code: callLuaFuncCallback("v.vehicleDirectory",function(res){console.log("vehiclefolder is: "+res)}) Also i added callSystemLuaFuncCallback() to get infos from the system lua. For your resizeproblem i'd use the resizefunction provided by the Appsystem: Code: this.resize(){ // code in here will exectued right after initialization and when the app gets resized. } this isn't necessary for the lua functions, since result will be encoded to json by the luaside and decoded by the js side. If you want to get results from torquescript, its necessary though, since torquescript can't encode json. EDIT: Just run your update in the next few minutes
yeah that happened when the function returned a string ^^ appearently a single number is json but a single string isn't.
how do i make my custom app use persistance? i've tried copying the persistance related code of some of the default addons, but "persistance" is undefined for my app so i cannot access it / use it. my app does not show up under persistance.json either. is there a proper way to initialize persistance that i am not seeing? i can't seem to call the addPreset() function from the context of `this` to experiment with, like above when you say to use "this.resize()". javascript scope is not my best area.
oops sorry, i meant Code: Appname.prototype.resize(){ } also inside the appfunctions this.persistance is defined. just save in it whatever you want if you want to save call Code: this.save() look in the app NodeBeamDebug for a simple persistance-example. persistance.json is just the defaultconfiguration, it gets loaded if the internal cache is empthy to fill it with data
the problem was definitely scope. saving the value of "this" in a variable for later reference was good enough, but... i feel like "var self = this;" is a workaround, is there a better way to access persistance from inside an anonymous function? the "this" keyword will not refer to the app and "AppName.prototype.persistance.x" doesn't seem to work.
