HTML & CSS non linear gauge

[mgysgtdev]

hi,

i am working on a RPM gauge that uses html, javascript and css. the gauge gets it data from a game plugin. the data it recieves is the true rpm. so if the rpm needle is at 5 the data it recieves is 500 (example). now is my problem that i have a rpm gauge that isn't linear. so the distance from 0 to 5 (on the gauge) is smaller than 5 - 10, 10 - 15, 15 -20. 20 to 25 is smaller aswell, but bigger than 0 - 5.
the code i have in the html file is linear. it has a data-min and data-max with its angles.
(example ->) if the rpm data is 500 the needle is on 700 cause of this non linear gauge.
is there a code to set angles to a fixed data variable?
let's say i know rpm 500 is at angle -90 but the needle with this data points at an angle of -70.

the code i have in html is:
[CODE lang="HTML" title="HTML"]<div class="truck-engineRpm gauges" data-type="meter" data-min="0" data-max="2500" data-min-angle="-125" data-max-angle="125"></div>[/CODE]

and the code i have in css is:
[CODE lang="CSS" title="CSS"].dashboard {
z-index: 0;
background-image: url("images/background.jpg");
opacity: 0.1;
filter: grayscale(100%);
}
.game-connected.yes .dashboard {
opacity: 1;
filter: grayscale(0%);
}

.truck-engineRpm {
z-index: 1;
visibility: visible;
position: absolute;
left: 1816px;
top: 391px;
width: 40px;
height: 391px;
background-image: url("images/needle.png");
transform: rotate(-125deg);
transform-origin: 50% 322px;
transition: 300ms linear;
}[/CODE]
the dashboard part is just the background. it has nothing to do with the gauge (the dashboard jpg only has the gauge on it) and the engineRpm is the the needle.

i have no code in javascript.

 

[LTomy]

Hello mgysgtdev,

I am not sure to understand what the problem is, but the following JS code should set the rotation of the gauge with the class 'truck-engineRpm' to the value of the variable 'rotation':

var rotation = 90;
var gauge = document.getElementsByClassName("truck-engineRpm")[0];

gauge.style.rotation = rotation;

 

[mgysgtdev]

hi LTomy.
the problem is that the gauge i have isn't evenly spaced. so when using the html code i have here only works if the numbers are evenly spcaed. on the picture in the post it shows that the distance from 0 to 5 is smaller than the others. so when the gauge recieves data from the game it isn't pointed to correctly.

 

[LTomy]

Simply tweak the angle (Transform the real angle into the angle for the gauge). The following function should return the angle the gauge must have depending on the real angle:

function tweakAngle(angle)
{
    if(angle < 50.0)
        return (angle / 50.0) * 35.0;
    else
        return angle - 15;
}

 

[mgysgtdev]

[CODE title="Javascript"] var Rpm = data.truck.engineRpm;
var RpmCalc = data.truck.engineRpm
var RpmRange1 = data.truck.engineRpm;
var RpmRange2 = data.truck.engineRpm - 500;
var RpmRange3 = data.truck.engineRpm - 1000;
var RpmRange4 = data.truck.engineRpm - 1442;
var RpmRange5 = data.truck.engineRpm - 1500;
var RpmRange6 = data.truck.engineRpm - 2000;
if (Rpm >= 0 && Rpm <= 500) {
data.engineRpm = RpmCalc - (0.3 * RpmRange1);
} else if (Rpm > 500 && Rpm <= 1000) {
data.engineRpm = RpmCalc - (0.01 * RpmRange2 + 150);
} else if (Rpm > 1000 && Rpm <= 1442) {
data.engineRpm = RpmCalc + (0.35 * RpmRange3 - 155);
} else if (Rpm > 1442 && Rpm <= 1500) {
data.engineRpm = RpmCalc + (0.38 * RpmRange4);
} else if (Rpm > 1500 && Rpm <= 2000) {
data.engineRpm = RpmCalc + (0.08 * RpmRange5 + 22);
} else if (Rpm > 2000 && Rpm <= 2500) {
data.engineRpm = RpmCalc - (0.124 * RpmRange6 - 62);
}[/CODE]

used my math knowlage instead. calculated the difference between the recieved data and the data it should be. then calculate the new data with the values