Idle movement gauges ran by random data for the fun of it. A hobby project of mine for no particular reason. Will share the source code below since it wasn't very complicated.
//Some experience is needed here
//I'll try to label things correctly
//Note:For laziness, CSS smoothes the needle movement
//I'll add it into the code later. should be simple
var dataSpeed = 1000;//Refresh rate
var min = -115; // Needle Min Stop Position
var max = 115; // Needle Max Stop Position
var liveData = 0; // Live and Randomized Data
var processData = Number(20);
var rotateAmount = 0; // The amount the needle is rotated
var approachSpeed = 10; // Speed Display Chases Live Data
function getliveData(max) { //This function provides random numbers for all functions
return Math.floor(Math.random() * max);
}
setInterval(function() { //Create function that runs at a set interval
var liveData = Math.round(getliveData(115)) * 1; //Ask the random number generator for something below 115
document.getElementById("meterneedle").style.rotate = (rotateAmount) - 115 + "deg"; //Rotate the needle image
processData = liveData + (processData ?? 0); //If the variable is empty or undefined, use zero
if (liveData > rotateAmount) {
rotateAmount = rotateAmount + approachSpeed;
} else if (liveData < rotateAmount) {
rotateAmount = rotateAmount - approachSpeed;
}
if (processData >= min) {
} else {
processData = -115;
}
if (processData <= max) {
} else {
processData = 115;
}
}, dataSpeed);