HTML 5 Help Required! UI App not working...

so I am working on a third app and it just isn't working! Sigh, I have it in a folder called Horsepower and this is my file code... and the game doesn't appear in-game.

I am just trying to make a speedometer based power indicator.

app.css =

Code:

.app .Horsepower{
    text-align:center;
    color: RGBA(0,0,0,0.5);
}
.app .Horsepower .powerDiv
{
    font-size:35px;
    height:53px;
}


.app .Horsepower .labelDiv
{
    font-size:10px;
    color: black;
    height:13px;
    cursor: pointer;
}


.app .Horsepower .labelDiv:hover
{
    background: RGBA(128,128,128,0.5);
}

app.js =

Code:

function Horsepower() {}


Horsepower.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;
    this.labelDiv.click(function(){self.toggleUnits();});
    
    //If no unit was previously selected, default to HP
    if ((this.persistance.Unit != "HP") && (this.persistance.Unit != "KW")) this.persistance.Unit = "HP";
};


Horsepower.prototype.toggleUnits = function(){
    //Toggle between Imperial and Metric, save the option to persistance system
    this.persistance.Unit = this.persistance.Unit === 'Imperial' ? 'Metric' : 'Imperial';
    this.save();
};


Horsepower.prototype.update = function (streams) {


    var str = "<br> Power: " streams.engineInfo[4]*streams.engineInfo[9];
    
    var str;
    if(this.persistance.Unit == "KW"){
    str += "<br> Power: " + (streams.engineInfo[4]*streams.engineInfo[9]*Math.PI/30000).toFixed(2) + " KW" ;
    } else {
    str += "<br> Power: " + ((streams.engineInfo[4]*streams.engineInfo[9]*Math.PI/30000)*0.7457).toFixed(2) + " HP" ;
    }
    
    this.powerDiv.html(rSet(powerUnits, 4, "0"));
    this.labelDiv.html("Power (" + this.persistance.Unit + ")");
};

app.json=

Code:

{    "info": {
        "name" : "Horsepower",
        "author": "Slayersen",
        "version": "0.1",
        "description": "Displays Horsepower/Kilowatts."
    },


     "appearance": {
      "background" : "opaque-simple",
      "resize" : false,
      "size" : {
       "initial" : [100,66]
      }
     },


    "data": {
        "streams" : ["electrics"]
    }
}

 

There are a couple of issues that my linter picks up:

• Missing a "+" when you make your string the first time
• str is defined twice
• powerUnits is not defined

You also haven't renamed your speedDiv thing at the top to powerDiv as you used later in the code. And you didn't request the engineInfo stream in your json when you try to use it in your app. And you are using rSet wrong - it is designed to add padding to values and is cutting your HP value off. And your toggleUnits function is still setup to toggle through "Imperial" and "Metric" whereas the rest of your app is set up for "HP" and "KW."

Code:

.app .Horsepower{
    text-align:center;
    color: RGBA(0,0,0,0.5);
}
.app .Horsepower .powerDiv
{
    font-size:15px;
    height:53px;
}


.app .Horsepower .labelDiv
{
    font-size:10px;
    color: black;
    height:13px;
    cursor: pointer;
}


.app .Horsepower .labelDiv:hover
{
    background: RGBA(128,128,128,0.5);
}

Code:

function Horsepower() {}


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


    this.loaded = false;


    var self = this;
    this.labelDiv.click(function(){self.toggleUnits();});

    //If no unit was previously selected, default to HP
    if ((this.persistance.Unit != "HP") && (this.persistance.Unit != "KW")) this.persistance.Unit = "HP";
};


Horsepower.prototype.toggleUnits = function(){
    //Toggle between HP and KW, save the option to persistance system
    this.persistance.Unit = this.persistance.Unit === 'HP' ? 'KW' : 'HP';
    this.save();
};


Horsepower.prototype.update = function (streams) {

    var str;
    if(this.persistance.Unit == "KW"){
        str = "<br> Power: " + (streams.engineInfo[4]*streams.engineInfo[9]*Math.PI/30000).toFixed(2) + " KW" ;
    } else {
        str = "<br> Power: " + ((streams.engineInfo[4]*streams.engineInfo[9]*Math.PI/30000)*0.7457).toFixed(2) + " HP" ;
    }

    this.powerDiv.html(str);
    this.labelDiv.html("Power (" + this.persistance.Unit + ")");
};

Code:

{    "info": {
        "name" : "Horsepower",
        "author": "Slayersen",
        "version": "0.1",
        "description": "Displays Horsepower/Kilowatts."
    },


     "appearance": {
      "background" : "opaque-simple",
      "resize" : false,
      "size" : {
       "initial" : [100,66]
      }
     },


    "data": {
        "streams" : ["electrics","engineInfo"]
    }
}

So, a few issues. I went through and made it actually display, its up to you to now get the rest of it how you want.

 

Okay so i improved the presentation a bit... however it thinks a kw is smaller than 1 hp and 1 hp is like 2.46x 1 actual horsepower unit when comparing to the torque curve app.