Indicadores analógicos en pantallas ILI9341
He retomado algunos proyectos que había dejado en pausa, entre ellos está el de dibujar indicadores analógicos. Por falta de tiempo y de aplicarme escribir para dar con un código que pudiese generalizarse a otras librerías. Quizás falte algo de optimización, pero eso ya lo dejo a los expertos.
Traté de elaborar un sketch lo mas simple posible, que permitiese manipular casi todos los elementos del gauge:
Marcas externas: número total, largo, color
Linea segmentada indicadora: número de segmentos, largo de cada segmento, color
Gauge: posición relativa, ángulo de inicio lateral
Orientación: horizontal (fija, para la versión vertical hay que hacer algunos ajustes, versión aun en el papel)
El color de fondo de las lineas segmentadas puede modificarse desde la tabla de definición de colores
#define Personal tft.color565(60, 60, 60)
Librería y hardware
Las librerias base son
#include "Adafruit_GFX.h"
#include "Adafruit_ILI9341.h"
Uso de las funciones
Las funciones de dibujo del indicador analógico de linea segmentada son dos. La primera dibuja los marcadores externos del gauge y la segunda dibuja el indicador móvil.
Marcas externas
//(número de marcas indicadoras, x, y, color, radio max, largo de las marcas, grados bajo horizontal)
// GaugeH(10, 85, 150, WHITE, 65, 4, 40); 1
Linea segmentada del indicador principal
// GaugeH1(medida_1, 85, 150, RED, 65, 50, 15, 40);
// (variable, x, y, color dial, radio max, número de marcas en el gauge, espesor del gauge, grados bajo horizontal)
Creo que el sketch puede extenderse a otras librerías, con algunos ajustes en las instrucciones para dibujo de lineas.
Observaciones
- Los valores que deben coincidir entre la función de las marcas externas y la función que dibuja la linea segmentada del gauge son:
x, y = centro de la circunferencia base del indicador analógico,
radio máximo de la circunferencia
grados bajo la horizontal
Los demás parámetros dependerán del gusto del diseñador
- Recomiendo colocar la función que dibuja las marcas externas en la zona del sketch que se carga solo una vez. La función de dibujo del indicador segmentado debe colocarse en la zona del sketch que se repite indefinidamente.
Recomiendo usar funciones cíclicas en lugar del void loop, así es posible llamar por vez funciones con su propio ciclo de trabajo.
void Principal()
{
//instrucciones que se ejecutan solo una vez
tft.setRotation(1);
tft.fillScreen(BLACK);
// (número de marcas indicadoras, x, y, color, radio max, largo de las marcas, grados bajo horizontal)
// GaugeH(10, 85, 150, WHITE, 65, 4, 40); //Marcas del gauge 1
GaugeH(10, 85, 150, WHITE, 65, 4, 40); //Marcas del gauge 1
GaugeH(6, 245, 100, WHITE, 35, 2, 0); //Marcas del gauge 2
GaugeH(6, 245, 230, WHITE, 50, 2, -40); //Marcas del gauge 3
//instrucciones que se ejecutan solo una vez
//instrucciones que se ejecutan repetidamente
while(1)
{
medida_1 = analogRead(0);
medida_2 = analogRead(1);
medida_3 = analogRead(2);
tft.setTextSize(4);
tft.setTextColor(RED,BLACK);
sprintf(TX,"%04d",medida_1);
tft.setCursor(40, 30); tft.print(TX);
GaugeH1(medida_1, 85, 150, RED, 65, 50, 15, 40); //gauge 1
// GaugeH1(medida_1, 85, 150, RED, 65, 50, 15, 40); //gauge 1
// (variable, x, y, color dial, radio max, número de marcas en el gauge, espesor del gauge, grados bajo horizontal)
tft.setTextSize(4);
tft.setTextColor(GREEN,BLACK);
sprintf(TX,"%04d",medida_2);
tft.setCursor(200, 15); tft.print(TX);
GaugeH1(medida_2, 245, 100, GREEN, 35, 30, 10, 0); //gauge 2
// (variable, x, y, color dial, radio max, número de marcas en el gauge, espesor del gauge, grados bajo horizontal)
tft.setTextSize(4);
tft.setTextColor(YELLOW,BLACK);
sprintf(TX,"%04d",medida_3);
tft.setCursor(200, 130); tft.print(TX);
GaugeH1(medida_3, 245, 230, YELLOW, 50, 15, 15, -40); //gauge 3
// (variable, x, y, color dial, radio max, número de marcas en el gauge, espesor del gauge, grados bajo horizontal)
}
//instrucciones que se ejecutan repetidamente
}
Ejemplo de uso
PD: la clave para dibujar los indicadores analógicos son las funciones trigonométricas seno y coseno, no es dificil usarlas, solo hay que imaginarse como debería verse la linea segmentada y hacer uno que otro cálculo en papel.
Respecto a "los grados bajo la horizontal", ajusté las funciones para que se puedan dibujar incluso grados por encima de la horizontal, así que mas bien debería ser: "grados respecto a la horizontal".