Cómo hacer un velocímetro SVG animado

UNA medidor de calibre es una herramienta que indica visualmente un valor dentro de un rango dado. En las computadoras, un “indicador de espacio en disco” utiliza un medidor de calibre para mostrar cuánto espacio en disco se usa del total disponible. Los medidores tienen zonas o regiones en toda su gama, cada una diferenciada por su propio color. En desarrollo de front-end, podemos utilizar el Etiqueta HTML5 para mostrar datos dentro de un rango específico.

En este post, haremos un Medidor de calibre SVG de forma semicircular., y animarlo. Echa un vistazo a este GIF de vista previa que muestra Cómo funcionará la versión final en Firefox:

El medidor el rango es 0-100, y muestra tres zonas iguales En amarillo, azul y rojo. Puede cambiar el rango y el número de zonas según sus necesidades..

Para fines de explicación, realizaré cálculos manuales y usaré los atributos / propiedades SVG en línea en los siguientes pasos.

Mi demostración final, sin embargo, utiliza CSS y JavaScript para el cálculo e inserción de propiedades SVG con el fin de hacerlo más flexible.

1. Dibuja un círculo

Vamos a dibujar un círculo simple en SVG. Nuevo de HTML5 La etiqueta nos permite agregar SVG directamente en el código HTML. Dentro de etiqueta, añadimos el Forma SVG como esta:

En CSS, vamos a añadir anchura y altura propiedades de la envoltura, ambas mayor o igual que el diámetro del círculo (es 300px en nuestro ejemplo). También tenemos que establecer el ancho y la altura de la #metro Elemento al 100%..

 #wrapper ancho: 400px; altura: 400px;  # metro ancho: 100%; altura: 100%;

2. Añade un contorno al círculo y elimina el relleno.

Con la ayuda del carrera y anchura del trazo En las propiedades SVG, agregamos un esquema al círculo y, mediante el uso de fill = "none" propiedad eliminamos el relleno del círculo, así.

3. cubrir solo la mitad del circulo

los trazo de trazo La propiedad SVG crea un esquema discontinuo y toma dos valores, longitud del tablero y longitud de la brecha.

Para el contorno del semicírculo, el longitud del tablero el valor debe ser igual a la semi-circunferencia del círculo, de modo que el guión cubra la mitad de la circunferencia del círculo, y la longitud de la brecha el valor debe ser igual o mayor que la circunferencia restante.

Cuando sea más, el navegador lo convertirá a la circunferencia restante, por lo tanto, utilizaremos el valor de circunferencia completa para el longitud de la brecha. De esta manera podemos evitar calcular la circunferencia restante..

Veamos los cálculos:

$circunferencia = 2 Ã ??? ?? Ã¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? π \times r$

dónde r es el radio Para un radio de 150, la circunferencia es:

$\begin{matrix} circunferencia = 2 Ã ??? ?? Ã¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? π \times 150 \\ circunferencia = 942.48 \end{matrix}$

Si lo dividimos por 2, obtenemos 471.24 para la semi-circunferencia, por lo que el valor de trazo de trazo propiedad para un contorno de semicírculo en un círculo de 150 radios es 471, 943. Este semicírculo se usará para indicar la zona de rango bajo del medidor.

Como puede ver, está al revés, así que aumentemos el SVG agregando el transformar Propiedad CSS con el valor de rotateX (180deg) al Elemento HTML.

 #meter transform: rotateX (180deg);

4. Agrega las otras zonas

los zona media (azul) tiene que cubrir la porción del semicírculo, y ⅔ de 471 es 314. Entonces, agreguemos otro círculo a nuestro SVG usando el trazo de trazo propiedad de nuevo, pero ahora con el valor de 314, 943.

  < /circle>

los zona final (rojo) tiene que cubrir la última parte del semicírculo, y ⅓ de 471 es 157, por lo que agregaremos este valor a la trazo de trazo propiedad del tercer circulo.

5. Agregue el esquema del medidor

Agreguemos un contorno gris al medidor para que se vea mejor. los longitud del tablero del contorno del círculo debe ser igual a la semi-circunferencia. Lo colocamos delante de todos los otros círculos en el código, para que sea renderizado primero por el navegador, y por lo tanto será se muestra debajo de los círculos de la región en la pantalla.

los anchura del trazo la propiedad debe ser un poco más grande que la de los otros círculos, para dar la apariencia de un contorno real.

     < /circle>

Extremos del esquema

Como el contorno no cubre los extremos del semicírculo, también agregamos 2 líneas de aproximadamente 2 píxeles a los extremos agregando otro círculo con una longitud del tablero de 2px y un longitud de la brecha de la semi-circunferencia menos 2px. Por lo tanto el valor de la trazo de trazo propiedad de este circulo es 2, 469.

Máscara

Ahora agreguemos otro círculo después de las zonas de rango bajo, promedio y alto. El nuevo círculo funcionará como una máscara para ocultar las regiones de zona innecesarias cuando se operará el medidor de calibre.

Sus propiedades serán las mismas que las del círculo de contorno, y su color de trazo también será gris. La máscara más tarde cambiará de tamaño con Javascript para revelar las zonas debajo de ella en respuesta a un control deslizante de entrada.

El código combinado hasta ahora es el siguiente.

Si queremos revelar una región debajo de la máscara, necesitamos reducir el tamaño de la máscara. longitud del tablero. Por ejemplo, cuando el valor de la trazo de trazo propiedad del círculo de la máscara es 157, 943, Los arcos se mantendrán en el siguiente estado:

Entonces, todo lo que tenemos que hacer ahora es ajustar la trazo de trazo de la máscara usando JavaScript para animación. Pero antes de hacer eso, como mencioné anteriormente, para mi demostración final usé CSS y JavaScript para calcular y agregar la mayoría de las propiedades SVG.

A continuación puede encontrar el código HTML, CSS y JavaScript que conduce al mismo resultado que el anterior..

HTML

Añadí una imagen de aguja (gauge-needle.svg), un control deslizante de rango (entrada # control deslizante) a la entrada del usuario, y una etiqueta (etiqueta # lbl) para mostrar el valor del control deslizante en el rango de 0-100.

CSS

El código CSS a continuación agrega reglas de estilo al SVG, ya que las formas SVG se pueden diseñar de la misma manera que los elementos HTML. Si quieres leer más sobre cómo diseñar SVG con CSS, mira esta publicación. Para estilizar el control deslizante, echa un vistazo a esta publicación.

 #wrapper posición: relativa; margen: auto;  # metro ancho: 100%; altura: 100%; transformar: rotateX (180deg);  .circle llenar: ninguno;  .outline, #mask stroke: # F1F1F1; ancho de trazo: 65;  .range ancho de trazo: 60;  #slider, #lbl position: absolute;  #slider cursor: puntero; izquierda: 0; margen: auto; derecha: 0; superior: 58%; ancho: 94%;  #lbl background-color: # 4B4C51; radio del borde: 2px; color blanco; font-family: 'courier new'; tamaño de letra: 15 puntos; font-weight: negrita; relleno: 4px 4px 2px 4px; derecha: -48px; superior: 57%;  #meter_needle altura: 40%; izquierda: 0; margen: auto; posición: absoluta; derecha: 0; superior: 10%; origen de la transformación: centro inferior; / * corrección de orientación * / transform: rotate (270deg);

JavaScript

En el JavaScript, primero calculamos y establecemos las dimensiones de la envoltura y todos los arcos, luego agregamos las trazo de trazo Valores a los círculos. Después de eso, vincularemos un evento personalizado al control deslizante de rango para realizar la animación..

 / * Establecer el radio para todos los círculos * / var r = 250; var circles = document.querySelectorAll ('. circle'); var total_circles = circles.length; para (var i = 0; i < total_circles; i++)  circles[i].setAttribute('r', r);  /* Set meter's wrapper dimension */ var meter_dimension = (r * 2) + 100; var wrapper = document.querySelector("#wrapper"); wrapper.style.width = meter_dimension + "px"; wrapper.style.height = meter_dimension + "px"; /* Add strokes to circles */ var cf = 2 * Math.PI * r; var semi_cf = cf / 2; var semi_cf_1by3 = semi_cf / 3; var semi_cf_2by3 = semi_cf_1by3 * 2; document.querySelector("#outline_curves") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#low") .setAttribute("stroke-dasharray", semi_cf + "," + cf); document.querySelector("#avg") .setAttribute("stroke-dasharray", semi_cf_2by3 + "," + cf); document.querySelector("#high") .setAttribute("stroke-dasharray", semi_cf_1by3 + "," + cf); document.querySelector("#outline_ends") .setAttribute("stroke-dasharray", 2 + "," + (semi_cf - 2)); document.querySelector("#mask") .setAttribute("stroke-dasharray", semi_cf + "," + cf); /* Bind range slider event*/ var slider = document.querySelector("#slider"); var lbl = document.querySelector("#lbl"); var mask = document.querySelector("#mask"); var meter_needle = document.querySelector("#meter_needle"); function range_change_event()  var percent = slider.value; var meter_value = semi_cf - ((percent * semi_cf) / 100); mask.setAttribute("stroke-dasharray", meter_value + "," + cf); meter_needle.style.transform = "rotate(" + (270 + ((percent * 180) / 100)) + "deg)"; lbl.textContent = percent + "%";  slider.addEventListener("input", range_change_event);

La costumbre `range_change_event ()` Función

El comportamiento del medidor es realizado por el range_change_event () Función personalizada que se encarga del ajuste del tamaño de la máscara y la animación de la aguja..

Toma el valor del control deslizante (entrada del usuario) que está entre 0 y 100, lo convierte en el equivalente de semicuertura (meter_value) de un valor entre 471-0 (471 es la semi-circunferencia para el radio 150), y establece que meter_value como el longitud del tablero de la mascara trazo de trazo propiedad.

los range_change_event () la función personalizada también gira la aguja después de convertir la entrada del usuario (que viene en el rango 0-100) a su grado equivalente de 0-180.

Se agregan 270 ° a la rotación de la aguja en el código anterior porque la imagen que utilicé es de una aguja vertical y tuve que girarla inicialmente 270 ° para que quedara plana a su izquierda.

Finalmente, me uní el range_change_event () función al control deslizante de rango, de modo que el medidor de calibre se pueda operar con él.

Revisar la manifestación O eche un vistazo al código fuente en nuestro Repositorio Github.