Hi, I hope this is the correct place to ask for help.
I writing a JS class to create a simple horizontal temperature meter inside a HTML canvas tag. I’m having trouble figuring out how to code the update function to update the pointer position and value. I realize I need to remove the initial value and line and then updated the new line position and value. So here is where I’m hitting a wall. Not sure how to achieve that. I was hoping someone would guide me in the right direction.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Canvas Rectangle Example</title>
</head>
<style>
canvas {
/* border: 1px red solid; */
}
</style>
<body>
<script>
class VariableRectangle {
constructor(canvas, width, height, pointerLabel, leftLabel, rightLabel) {
this.canvas = canvas;
this.context = this.canvas.getContext('2d');
this.x = 50;
this.y = 30;
this.width = width;
this.height = height;
this.canvas.width = this.width + 100;
this.canvas.height =this.height + 45;
this.pointerLabel = pointerLabel;
this.leftLabel = leftLabel;
this.rightLabel = rightLabel;
this.context.strokeStyle = "black";
this.context.lineWidth = 1;
this.realPoiterPos;
this.numDivisions;
this.CalcPointerPos();
this.drawRectangle();
this.drawVerticalDivisions();
this.drawPointerLine();
this.drawLabels();
}
drawRectangle() {
this.context.strokeRect(this.x, this.y, this.width, this.height);
}
CalcPointerPos(){
const leftLabelVal = parseFloat(this.leftLabel);
const rightLabelVal = parseFloat(this.rightLabel);
this.numDivisions = (rightLabelVal - leftLabelVal) / 0.1;
const positionVal = parseFloat(this.pointerLabel);
// console.log(positionVal);
this.realPoiterPos = (positionVal - leftLabelVal) / 0.1;
// this.segmentWidth = this.width / this.numDivisions;
this.segmentWidth = this.width / this.numDivisions;
console.log(this.realPoiterPos);
console.log(this.numDivisions);
}
drawVerticalDivisions() {
for (let i = 1; i < this.numDivisions; i++) {
const xPos = this.x + (i * this.segmentWidth);
const startY = this.y;
const endY = this.y + this.height;
this.context.setLineDash([1,2])
this.context.strokeStyle = "grey";
this.context.beginPath();
this.context.moveTo(xPos, startY-2);
this.context.lineTo(xPos, endY+4);
this.context.stroke();
}
}
drawPointerLine() {
const pointerX = this.x + (this.realPoiterPos * this.segmentWidth);
this.context.beginPath();
this.context.lineWidth = 3;
this.context.setLineDash([1,0])
this.context.moveTo(pointerX, this.y -5);
this.context.lineTo(pointerX, this.y+this.height+5);
this.context.strokeStyle = "teal";
this.context.stroke();
}
drawLabels() {
const leftLabelX = this.x-25;
const leftLabelY = this.y + (this.height / 2);
const rightLabelX = this.x + this.width+25;
const rightLabelY = leftLabelY;
const pointerLabelX = this.x + (this.realPoiterPos * this.segmentWidth);
const pointerLabelY = this.y - 15;
this.context.font = "18px Calibri";
this.context.textAlign = "center";
this.context.textBaseline = "middle";
this.context.fillStyle = 'blue';
this.context.fillText(this.leftLabel+ "°", leftLabelX, leftLabelY);
this.context.fillText(this.rightLabel+ "°", rightLabelX, rightLabelY);
this.context.font = "14px Calibri";
this.context.fillStyle = 'green';
this.context.fillText(this.pointerLabel+ "°", pointerLabelX, pointerLabelY);
}
updatePointer(label){
this.pointerLabel = label;
this.CalcPointerPos();
// this.CalcPointerPos();
// this.drawRectangle();
// this.drawVerticalDivisions();
this.drawPointerLine();
this.drawLabels();
}
}
</script>
<canvas id="myCanvas"></canvas>
<!-- <script src="VariableRectangle2.js"></script> -->
<script>
const canvas = document.getElementById("myCanvas");
const variableRect = new VariableRectangle(canvas, 200, 35, "27.8", "26.5", "28.0");
</script>
<script>
variableRect.updatePointer("27.1");
</script>
</body>
</html>