UI App Help

I am trying to create a UI app that would show you the current G-Forces that your car is experiencing, eventually making the app act like the performance test app, but I am having issues getting it to work.

App.js

HTML:

function gForcesList() {}

gForcesList.prototype.initialize = function(){
    this.gDiv = $('<div></div>').appendTo(this.rootElement).addClass('gDiv');
    this.labelDiv = $('<div></div>').appendTo(this.rootElement).addClass('labelDiv');

};

gForcesList.prototype.update = function (streams) {
    //convert to G
    var gForces = {};
    $.each(streams.sensors, function(index, val) {
        gForces[index] = val / 9.81;
    });

    this.gDiv.html(rSet(gForces, 4, "0"));
    this.labelDiv.html("G-Forces");
};

In game, this is what shows up

The gForces variable,

HTML:

    var gForces = {};
    $.each(streams.sensors, function(index, val) {
        gForces[index] = val / 9.81;
    });

comes directly from the "gForcesDebug" app.

I am sure this is painfully obvious to people who are more experienced with UI app making, but I can not figure it out.

Thanks for your help.

 

The gForces variable is a object. If you just try to show it it will be converted to a string which looks like this: "[object]".
the last 4 chars of it is "ect]", which is what's shown in the app.
What exactly do you want to show in the app?

 

Before I did anything else, I wanted to have it display the number that is being visualized in gForcesDebug.* How can I get the variable that the gForceDebug is using?

*(a spedometer for G-Forces)

 

the current gForce is accesible with
gForces.gx and gForces.gy
if you want applied smoothing, so it doesn't look as jerky, you can use
gForces.gx2 and gForces.gy2

 

Thank you, this helped me very much. Is there anything that I have to do with the implementation to get it to act like I want it to? How many Javascript functions are implemented, is "setInterval" implemented? Do you have any idea why

HTML:

var previous = 1;

shows up as NaN?

 

The gui is basically a browser rendered ingame so every function a normal browser has could be used. But the updatemethod gets called by the game every frame, so there's no need for a own interval to redraw things (if that's what you needed it for).
For the other problem: do you have some code for me i could test?

 

This is my app
http://www.beamng.com/attachment.php?attachmentid=44421&d=1413590153

I am debating whether I want to use an "if (pRevious > gForcesRound+2)" statement, logging at intervals of 1-2 seconds, or a combination of both.

Is there any part of a stream that allows me to call the time in game or the time since you started the level?

Have you implemented rotation G-Forces?

 

I don't think rotational gforces exist actually.

I looked into your app and it has some problems:

Code:

gForcesList.prototype.setup = function(){
	var pRevious = 1;
};

You define a local variable here, so as soon as you leave this function it won't exist anymore.
just define it as

Code:

gForcesList.prototype.setup = function(){
	this.pRevious = 1;
};

that way it will be accessible inthe whole app without polluting the global scope.

You should define

Code:

function appendToTableG (gdata) { [...] }

as

Code:

gForcesList.prototype.appendToTableG = function (gdata) { [...] }

so its part of your app and doesn't pollute the global scope.

Code:

$('#gtable tr:first')

you shouldn't use id's, this can lead to problems if someone else uses the same id or someone spawns your app twice. Just save a reference to it in the setupmethod like

Code:

this.tbody = this.tableG.find('tbody')

and use that.

Code:

	var gForcesFull = ((gForces.gx+gForces.gy+gForces.gz));

You may want to use the pythagorean theorem to correctly calculate the combined force.

Code:

	var pRevious = (Math.abs(gForcesRound));

here you redefine the pRevious variable. Even if the other definition worked, it would be overridden here.

I hope that helps

 

Thank you, this will be very helpful.

I can't seem to remember where I got the concept from.