2023-01-08
Creando un gauge con Javascript.
En esta entrada vamos a crear un medidor circular "gauge" para poder incrustar en nuestra página web.
El código.
El primer paso es definir que proiedades vamos a tener en el medidor.
// Propieades. gauge.prototype.min = 0; gauge.prototype.max = 100; gauge.prototype.value = 0; gauge.prototype.idCanvas = null; gauge.prototype.bgColor = "#000000"; gauge.prototype.ofColor = "#CCCCCC"; gauge.prototype.onColor = "#00FF00"; gauge.prototype.txColor = "#FFFFFF";
min y max serán los valores máximos y mínimos que puede tomar el medidor. value será el valor que tendrá nuestro gauge.
idCanvas será el identificador que le demos a nuestro canvas dentro del html.
bgColor, ofColor, onColor y txColor serán los colores de fondo, apagado, encendido y texto del control. El color de apagado recorre todo el control mientras que el de encendido se corresponde con el del valor.
Una vez definidos los parámetros crearemos dos constructores, uno sin parámetros y otro con tres:
// Construstor.
function gauge() {
}
// Constructor con parametros.
function gauge(_can, _min, _max) {
this.idCanvas = _can;
this.min = _min;
this.max = _max;
}
Los parámetros serán el identificador del canvas y los valores mínimo y máximo que podra tomar el valor.
Para mapear el valor del gauge entre el máximo y mínimo crearemos una función map que haga dicha función. Esta función es igual a la función map de Arduino.
// La función para mapear un valor dentro del ángulo.
gauge.prototype.map = function (x, in_min, in_max, out_min, out_max) {
return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
Para los que no estamos acostumbrados a la programación de objetos en javascript
cabe mencionar que para crear un método de un objeto se usa:
objeto.prototype.funcion = function (parametros).
Por último necesitamos una función para que dibuje el control, su código es el siguiente y está explicado su funcionamiento en los comentarios:
// La función para dibujar el gauge.
gauge.prototype.draw = function(_valor) {
// Obtenemos el canvas a través del id.
var canvas = document.getElementById(this.idCanvas);
// Obtenemos el contexto.
var ctx = canvas.getContext("2d");
// Guardamos el valor en el objeto.
this.value = _valor;
// Obtenemos el ancho y el alto del canvas.
var w = canvas.width;
var h = canvas.height;
// Obtenemos el centro del control.
var cx = w / 2 ;
var cy = h / 2 ;
// El grosor de la línea del control será del 20%.
var grosor = w * 20/100;
// Rellenamos el fondo.
ctx.fillStyle = this.bgColor;
ctx.fillRect(0, 0, w, h);
// Iniciamos el dibujo de la línea que hace de control apagado, esta linea
// ocupa desde el grado 135 hasta el grado 45 y se dibuja haciendo un arco.
// Es una línea por lo que tenemos que modificar su grosor para que se vea
// gorda.
ctx.beginPath();
ctx.lineCap = "butt";
ctx.lineWidth = grosor;
ctx.strokeStyle = this.ofColor;
ctx.arc(cx, cy, cx-grosor,
(Math.PI/180)*(90+45),
(Math.PI/180)*45 );
ctx.stroke();
// Dibujamos la línea que representa el valor, es igual que el paso anterior
// pero en este solo dibujaremos el arco correspondiente a valor, para ello
// se usa la función map.
ctx.beginPath();
ctx.lineWidth = grosor;
ctx.strokeStyle = this.onColor;
ctx.arc( cx, cy,
cx-grosor,
(Math.PI/180)*(90+45),
(Math.PI/180)*(90+45+this.map(this.value, this.min, this.max, 0, 360-90))
);
ctx.stroke();
// Por último escribimos el texto con el valor del medidor en el centro
// del canvas.
ctx.beginPath();
ctx.font = "12px Arial";
ctx.fillStyle = this.txColor;
var txt = this.value;
ctx.fillText(txt,
(canvas.width - ctx.measureText(txt).width)/2,
(canvas.height+6)/2 );
}
Ya tenemos nuestro gauge completo ahora tan solo lo hemos de usar dentro de nuestro html. Para ello en la sección script al principio de la página debemos crear una variable usando el constructor con el nombre del id del canvas y su valor máximo y minimo.
var g1 = new gauge("canvas1", 0, 100);
Si queremos podemos cambiar los colores del control a nuestro antojo:
g1.setColors("#282833","#F7F7FE","#43B4F8","#F7F7FE");
Ya tan solo queda crear el canvas dentro del html, dandole unas dimensiones y llamando a la función draw con un valor dentro.
<canvas id="canvas1" width="120px" height="120px"><script>g1.draw(10);</script></canvas>
Y listo ya tenemos nuestro control gauge funcionando. Tan solo una última recomendación, sería aconsejable poner el codido de nuestro gauge en un fichero .js y luego enlazar usando script.
<script src="gauge.js"></script>
Demo
En esta demo he creado cuatro controles gauge y les he asignado colores diferentes, además de que he jugado con timer para hacer que cada segundo cambien con un valor aleatorio.