Hello, I'm trying to make an app that tracks and shows driven distance for all spawned cars individually. So far I've managed to frankenstein together some lua/js from the information available here: https://www.beamng.com/threads/get-value-of-lua-in-javascript.58882/ https://www.beamng.com/threads/general-ui-app-making-support-thread.8621/ https://www.beamng.com/threads/send-a-value-from-lua-to-javascript.42757/ https://www.beamng.com/threads/solved-adding-an-odometer-via-lua.27918/ https://www.beamng.com/threads/satsuma-odometer.40501/ The lua is working but I have trouble getting lua values into the app.js. I've tried a couple of methods from above but had no luck. Is there a simple way of getting the "distanceTotalkm " from lua into the app? Current files so far: Spoiler: outdated, see below separatedistancecounter.lua Code: local M = {} local distancem = 0 local distanceTotalm = 0 local distanceTotalkm = 0 local function printDistance() print("Totalm: " .. distanceTotalm) print("Totalkm: " .. distanceTotalkm) end local function updateGFX(dt) distancem = electrics.values.wheelspeed * dt distanceTotalm = distancem + distanceTotalm end local function getVar() --return distanceTotalm print("returning: " .. distanceTotalm) end M.printDistance = printDistance M.updateGFX = updateGFX M.getVar = getVar return M app.js (removed the different methods that I've tried) Code: angular.module('beamng.apps').directive('distanceDisplay', ['bngApi', function (bngApi) { return { template: '<div>' + ' <input type="button" ng-click="startTracking()" value="Reset"></input><br>' + '<span style="font-size:1.3em; text-align:center; text-transform: capitalize;" > Total Metres: {{progress }}</span><br>' + '<span style="font-size:1.3em; text-align:center; text-transform: capitalize;" > Status: {{status}}</span>' + '</div>', replace: true, restrict: 'EA', link: function (scope, element, attrs) { 'use strict'; scope.progress = 0; scope.status = "Testing"; scope.startTracking = function(){ bngApi.activeObjectLua('extensions.separatedistancecounter.printDistance()'); bngApi.activeObjectLua('extensions.separatedistancecounter.getVar()'); }; } }; }])
Got it working while trying things, anayzing and using some code of @Dummiesman Beam Regenerator app. This got me thinking how to update the numbers in the app as updateGFX(dt) might be overkill? I was thinking every second, is that better/more efficient in lua, js or no difference? I'm using scope.$on('streamsUpdate' atm, my plan is to make a leaderboard ui app that shows and sorts all cars and their total distance. Anyway here is the code so far. It tracks the metres of each vehicle individually (Not sure how clean and proper this all is as I'm a lua dummy): Spoiler: code Lua: Code: local M = {} local distancem = 0 local distanceTotalm = 0 local distanceTotalkm = 0 local state = {} local function onInit() print('onInit') print("Totalm: " .. distanceTotalm) state.progress = distanceTotalm guihooks.trigger('sendState', state) end local function updateGFX(dt) distancem = electrics.values.wheelspeed * dt distanceTotalm = distancem + distanceTotalm end local function getVar() state.progress = distanceTotalm guihooks.trigger('sendState', state) --return distanceTotalm end local function resetTracking() distanceTotalm = 0 --guihooks.trigger('sendState', state) end M.onInit = onInit M.updateGFX = updateGFX M.getVar = getVar M.resetTracking = resetTracking return M Js: Code: angular.module('beamng.apps').directive('distanceDisplay', ['bngApi', function (bngApi) { return { template: '<div>' + ' <input type="button" ng-click="resetTracking()" value="Reset Distance"></input>' + ' <input type="button" ng-click="displayDistance()" value="Update Value"></input><br>' + '<span style="font-size:1.3em; text-align:center; text-transform: capitalize;" > Total Metres: {{progress}}</span><br>' + '</div>', replace: true, restrict: 'EA', link: function (scope, element, attrs) { 'use strict'; var state; scope.progress = 0; scope.resetTracking = function(){ bngApi.activeObjectLua('extensions.separatedistancecounter.resetTracking()'); }; scope.displayDistance = function(){ bngApi.activeObjectLua('extensions.separatedistancecounter.getVar()'); }; scope.$on('sendState', function (event, data) { state = data; scope.progress = Math.trunc(data.progress); scope.$apply(); }); scope.$on('VehicleFocusChanged', function (event, data) { bngApi.activeObjectLua('extensions.separatedistancecounter.getVar()'); }); scope.$on('streamsUpdate', function (event, streams) { scope.$evalAsync(function () { bngApi.activeObjectLua('extensions.separatedistancecounter.getVar()'); }); }); } }; }])
More progress which I'm posting here if anyone searches for similar things. So far I have driven distance & estimate (km/mi) as well as fuel economy (l/100km & mpg). Spoiler: Code Lua: Code: local M = {} local distancem = 0 local distanceTotalm = 0 local distanceTotalkm = 0 local state = {} local function onInit() distanceTotalm = 0 --print('onInit') --print("Totalm: " .. distanceTotalm) state.progress = distanceTotalm guihooks.trigger('sendState', state) end local function onReset() distanceTotalm = 0 --print('onReset') --print("Totalm: " .. distanceTotalm) state.progress = distanceTotalm guihooks.trigger('sendState', state) end local function updateGFX(dt) distancem = electrics.values.wheelspeed * dt distanceTotalm = distancem + distanceTotalm end local function getVar() state.fuelPercent = electrics.values['fuel'] state.fuelCap = electrics.values['fuelCapacity'] state.fuelVol = electrics.values['fuelVolume'] state.progress = distanceTotalm guihooks.trigger('sendState', state) --return distanceTotalm end M.onInit = onInit M.onReset = onReset M.updateGFX = updateGFX M.getVar = getVar return M JS: Code: angular.module('beamng.apps').directive('distanceDisplay', ['bngApi', function (bngApi) { return { templateUrl: "modules/apps/separatedistancecounter/endurance.html", replace: true, restrict: 'EA', link: function (scope, element, attrs) { 'use strict'; scope.$on('$destroy', function () { StreamsManager.remove(streamsList); }); var state; scope.progress = 0; scope.progress2 = 0; scope.progressEst = 0; scope.progress2Est = 0; scope.fuelPercent = 0; scope.fuelCap = 0; scope.fuelVol = 0; scope.fuelLperKM = 0; scope.fuelMperG = 0; scope.$on('sendState', function (event, data) { state = data; scope.progress = Math.round((data.progress / 1000) * 100) / 100; scope.progress2 = Math.round((data.progress / 1609.3440057765) * 100) / 100; scope.progressEst = Math.round(((scope.fuelVol / scope.fuelLperKM) * 100) * 10) / 10; scope.progressEst2 = Math.round((scope.progressEst / 1.6093440057765) * 10) / 10; scope.fuelPercent = Math.round((data.fuelPercent * 100) * 10) / 10; scope.fuelCap = data.fuelCap; scope.fuelVol = Math.round(data.fuelVol * 100) / 100; scope.fuelLperKM = Math.round((((scope.fuelCap - scope.fuelVol) / scope.progress) * 100) * 10) / 10; scope.fuelMperG = Math.round((235.214583 / scope.fuelLperKM) * 10) / 10; scope.$apply(); }); scope.$on('streamsUpdate', function (event, streams) { scope.$evalAsync(function () { bngApi.activeObjectLua('extensions.separatedistancecounter.getVar()'); }); }); } }; }])
Yay more progress, even managed to fit an rpm meter inside it. After many failed attempts making an app, this feels like a success ^^ also I've just uploaded the file so it'll be in the repository soon.
Thanks, I plan on adding more information, electric car support maybe and make sections hideable with buttons. Btw, here's a comparison video with the trip counter app demonstrating the individual tracking:
