sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-11-25 06:53:00 +00:00
Code Issues Releases Wiki Activity

Flip text to the other side of the guage

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-05-09 21:38:42 +01:00
parent d0be3f3729
commit 439547b438
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
1 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
client_src/js/Guage.mjs
View file

@ -20,7 +20,7 @@ class Guage {
render() { render() {
let guage_size = { let guage_size = {
x: this.canvas.width * 0.1, x: this.canvas.width * 0.6,
y: this.canvas.height * 0.05, y: this.canvas.height * 0.05,
width: this.canvas.width * 0.3, width: this.canvas.width * 0.3,
height: this.canvas.height * 0.9 height: this.canvas.height * 0.9
@ -53,7 +53,10 @@ class Guage {
gradient.addColorStop(parseFloat(point), gradient_spec[point]); gradient.addColorStop(parseFloat(point), gradient_spec[point]);
this.context.fillStyle = gradient; this.context.fillStyle = gradient;
this.context.fillRect(guage_size.x, guage_size.y, guage_size.width, guage_size.height); this.context.fillRect(
guage_size.x, guage_size.y,
guage_size.width, guage_size.height
);
this.context.restore(); this.context.restore();
} }
@ -69,15 +72,16 @@ class Guage {
for (let point in this.spec) { for (let point in this.spec) {
let value = 1 - (parseFloat(point) / this.max); let value = 1 - (parseFloat(point) / this.max);
let draw_x = guage_size.x + guage_size.width + 3; let text_width = this.context.measureText(point).width;
let draw_x = guage_size.x - 5 - text_width;
let draw_y = guage_size.y + (value * guage_size.height); let draw_y = guage_size.y + (value * guage_size.height);
// console.log(`Writing '${point}' to (${draw_x}, ${draw_y})`); // console.log(`Writing '${point}' to (${draw_x}, ${draw_y})`);
this.context.fillText(point, draw_x, draw_y); this.context.fillText(point, draw_x, draw_y);
this.context.beginPath(); this.context.beginPath();
this.context.moveTo(guage_size.x, draw_y); this.context.moveTo(guage_size.x + guage_size.width, draw_y);
this.context.lineTo(draw_x, draw_y); this.context.lineTo(draw_x + text_width, draw_y);
this.context.stroke(); this.context.stroke();
} }