Este tutorial se ha divido en 2 en las cuales se explicara como diseñar un mini SCADA o representación grafica de un proceso en este caso se creara un tanque el cual visualizara la variable nivel 0 a 100%.
El servidor web estara Ubicado en Modulo ESP8266 el cual publica una pagina HTML que a su vez diseña archivo SVG alojado en el servidor.
Mas informacion Sobre Este Proyecto :
Blog PDAControl English
Utilizado un editor SVG Online se realiza el diseño, en este caso un diseño basico utilizado las figuras basicas y permite cambio de dimensiones,cambio colores, generar y guardar el codigo HTML,
Codigo de Animacion en Arduino IDE
Se utiliza la funcion map 2 veces :
1 linealizar (Eje y) min 317 max 98 , equivalente a 0 y 100% se preguntaran porque el min es mayor al maximo, esto se debe al desplazamiento que requiere el rectangulo.
2 linealizar (Altura) min 0 max 220 , equivalente a 0 y 100%. para determinar los rangos de las 2 variables ver videos hay se indicara el metodo de animacion.
3 Conversion Int a Strings Estos valores enteros se deben convertir a Strings y se deben concatenar al diseño SVG.