From BeamNG


used to explain : alpha_prerace\html\apps\SimpleDigSpeedo\app.js

Set class name

Set the class of the app

function SimpleDigSpeedo() {}

Init Function

This function is executed when the widget is display for the first time.

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

    this.loaded = false;

    var self = this;{self.toggleUnits();});

    //If no unit was previously selected, default to km/h
    if ((this.persistance.Unit != "MPH") && (this.persistance.Unit != "km/h")) this.persistance.Unit = "km/h";

In this example it creates two div (speedDiv and labelDiv).
JavaScript set the onclick to execute the function toggleUnits()

Update function

SimpleDigSpeedo.prototype.update = function (streams) {

    var speedMs = streams.electrics.wheelspeed;
    if (isNaN(speedMs)) speedMs = streams.electrics.airspeed;    //If no wheelspeedo present use airspeed

    var speedUnits;
    if(this.persistance.Unit == "MPH"){
        speedUnits = toInt(2.236*speedMs);
    } else {
        speedUnits = toInt(3.6*speedMs);

    this.speedDiv.html(rSet(speedUnits, 4, "0"));
    this.labelDiv.html("Speed (" + this.persistance.Unit + ")");

This function is called at every grahpicalUpdate, it allow to update the display value with the new which come from 'streams'

Other function

SimpleDigSpeedo.prototype.toggleUnits = function(){
    //Toggle between MPH and km/h, save the option to persistance system
    this.persistance.Unit = this.persistance.Unit === 'MPH' ? 'km/h' : 'MPH';;

You can add has many function you want to calculate, to draw something etc....