information directed towards particular positions on a meter

Question

information directed towards particular positions on a meter

I am in the process of creating a dashboard skin that receives data from a game via a plugin. I have encountered a problem with the RPM gauge. The issue is that the angle from 0 to 5 on the gauge is smaller than the angle from 5 to 10. I am attempting to set the angle for 5 to a specific value. The minimum angle is -125 and the maximum angle is 125, so 0 = -125, 5 = -90, but 10 = -40. This means the angle from 0 to 5 is 35 degrees, while from 5 to 10 it is 50 degrees. I only have HTML code and CSS for the gauge needle placement.

HTML:

<div class="truck-engineRpm gauges" data-type="meter" data-min="0" data-max="25" data-min-angle="-125" data-max-angle="90"></div>

CSS:

.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;
}

There is a discrepancy in the degrees between the points on the gauge I created, as it is linear, while the gauge in question is not. When assigning a value to the gauge using JavaScript, it does not align with the data on the gauge.

I aim to develop a non-linear gauge with fixed angle settings. Currently, I only have a linear gauge with minimum/maximum data and angles.

---- Issue Resolved ----

I determined the value at which the needle was pointing (e.g., when it was on 5, the data was 350 rpm), and calculated how to display the game RPMs correctly.

JavaScript code:

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);
}

This solution may not look elegant, but if it works, it works :)

javascript html css

Answer 1

Answer №1

Allow me to demonstrate a simple concept through an example. By mapping numerical units within a specified range to corresponding numbers, we create a straightforward and effective method.

"use strict";
window.addEventListener('load', onLoaded, false);

let gaugeMap = [];

function onLoaded(evt) {
  let canvas = document.querySelector('canvas');
  canvas.style.backgroundImage = `url(${imgSrc})`;

  gaugeMap.push(new gaugeRange(0, 500, 214, 180));
  gaugeMap.push(new gaugeRange(500, 1000, 180, 130));
  gaugeMap.push(new gaugeRange(1000, 1500, 130, 64.5));
  gaugeMap.push(new gaugeRange(1500, 2000, 64.5, 9));
  gaugeMap.push(new gaugeRange(2000, 2500, 9, -34));

  document.querySelector('input').addEventListener('input', onRpmSliderChange, false);
  onRpmSliderChange.apply(document.querySelector('input'), null);
}

function onRpmSliderChange(evt) {
  let rpm = this.value;

  document.querySelector('#rpmOut').textContent = rpm;

  gaugeMap.forEach(function(range) {
    if (range.contains(rpm))
      drawNeedle(range.map(rpm));
  });
}

function drawNeedle(angleDeg) {
  const needleLen = 52;

  let canvas = document.querySelector('canvas');
  let context = canvas.getContext('2d');
  let width = canvas.width,
    height = canvas.height;
  context.clearRect(0, 0, width, height);

  context.beginPath();
  context.lineWidth = 2;
  context.strokeStyle = 'white';
  context.moveTo(width / 2, height / 2);

  let dx = Math.cos(angleDeg * 3.141 / 180.0) * needleLen;
  let dy = Math.sin(angleDeg * 3.141 / 180.0) * needleLen;

  context.lineTo(width / 2 + dx, height / 2 - dy);
  context.stroke();
  context.closePath();
}

class gaugeRange {
  constructor(rpm1, rpm2, angle1, angle2) {
    if (rpm1 <= rpm2) {
      this.rpm1 = rpm1;
      this.rpm2 = rpm2;
      this.angle1 = angle1;
      this.angle2 = angle2;
    } else {
      this.rpm2 = rpm1;
      this.rpm1 = rpm2;
      this.angle2 = angle1;
      this.angle1 = angle2;
    }
  }
  contains(rpm) {
    if (rpm >= this.rpm1 && rpm <= this.rpm2)
      return true;
  }

  map(rpm) {
    if (this.contains(rpm) == false)
      return false;
    let proportion = (rpm - this.rpm1) / (this.rpm2 - this.rpm1);
    let deltaAngle = this.angle2 - this.angle1;
    let value = (proportion * deltaAngle) + this.angle1;
    return value;
  }
}

var imgSrc = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wI ...';

<canvas width='128' height='128'></canvas><br>
<div style='display:inline-block; text-align: center'>
  <input type=range min=0 max=2500 value=0 id='rpmSlider' /><br>
  <span id='rpmOut'></span>
</div>

Answer 2

Allow me to demonstrate a simple concept through an example. By mapping numerical units within a specified range to corresponding numbers, we create a straightforward and effective method.

"use strict";
window.addEventListener('load', onLoaded, false);

let gaugeMap = [];

function onLoaded(evt) {
  let canvas = document.querySelector('canvas');
  canvas.style.backgroundImage = `url(${imgSrc})`;

  gaugeMap.push(new gaugeRange(0, 500, 214, 180));
  gaugeMap.push(new gaugeRange(500, 1000, 180, 130));
  gaugeMap.push(new gaugeRange(1000, 1500, 130, 64.5));
  gaugeMap.push(new gaugeRange(1500, 2000, 64.5, 9));
  gaugeMap.push(new gaugeRange(2000, 2500, 9, -34));

  document.querySelector('input').addEventListener('input', onRpmSliderChange, false);
  onRpmSliderChange.apply(document.querySelector('input'), null);
}

function onRpmSliderChange(evt) {
  let rpm = this.value;

  document.querySelector('#rpmOut').textContent = rpm;

  gaugeMap.forEach(function(range) {
    if (range.contains(rpm))
      drawNeedle(range.map(rpm));
  });
}

function drawNeedle(angleDeg) {
  const needleLen = 52;

  let canvas = document.querySelector('canvas');
  let context = canvas.getContext('2d');
  let width = canvas.width,
    height = canvas.height;
  context.clearRect(0, 0, width, height);

  context.beginPath();
  context.lineWidth = 2;
  context.strokeStyle = 'white';
  context.moveTo(width / 2, height / 2);

  let dx = Math.cos(angleDeg * 3.141 / 180.0) * needleLen;
  let dy = Math.sin(angleDeg * 3.141 / 180.0) * needleLen;

  context.lineTo(width / 2 + dx, height / 2 - dy);
  context.stroke();
  context.closePath();
}

class gaugeRange {
  constructor(rpm1, rpm2, angle1, angle2) {
    if (rpm1 <= rpm2) {
      this.rpm1 = rpm1;
      this.rpm2 = rpm2;
      this.angle1 = angle1;
      this.angle2 = angle2;
    } else {
      this.rpm2 = rpm1;
      this.rpm1 = rpm2;
      this.angle2 = angle1;
      this.angle1 = angle2;
    }
  }
  contains(rpm) {
    if (rpm >= this.rpm1 && rpm <= this.rpm2)
      return true;
  }

  map(rpm) {
    if (this.contains(rpm) == false)
      return false;
    let proportion = (rpm - this.rpm1) / (this.rpm2 - this.rpm1);
    let deltaAngle = this.angle2 - this.angle1;
    let value = (proportion * deltaAngle) + this.angle1;
    return value;
  }
}

var imgSrc = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wI ...';

<canvas width='128' height='128'></canvas><br>
<div style='display:inline-block; text-align: center'>
  <input type=range min=0 max=2500 value=0 id='rpmSlider' /><br>
  <span id='rpmOut'></span>
</div>

information directed towards particular positions on a meter

Answer №1

Similar questions

Error: Cannot iterate over Redux props map as it is not a function

How can I use jQuery to set up form validation for an input textfield?

Fullcalendar feature that restricts users from selecting multiple days for an event

Retrieve the element that is currently being hovered over within the same nested selector

ReactForms Deprication for NgModel

Add unique content to a div upon page reload

Next.js Static Paths Filtering

Tips for monitoring input content "live"

Revamp the Bootstrap Carousel Control by replacing the default navigation arrows with stylish arrows featuring circle backgrounds

Determine the number of distinct elements in fields using MongoDB aggregation

Breaking down an Express app into modules: incorporating a function, a class, and req.pipe

Create a box with borders and divisions using HTML

Utilize the JavaScript Email Error Box on different components

Struggling with implementing responsive mobile buttons that stack in a column? Here's the solution

Is there a way for me to figure out if a Primefaces RadioCheckbox has been selected?

Enhance the Error class in Typescript

Angular: merging multiple Subscriptions into one

Kurento's WebRTC feature is currently experiencing difficulties with recording functionality

Accessing data from a CD-ROM or DVD through a web browser

What is the best way to determine when all asynchronous tasks and callbacks have been completed so that we can proceed securely?