Creacion de Scada SVG para WebServer en ESP8266

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.

Editor SVG Online

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,

1 Se realiza el diseño de nuestro Mini scada, se determinan las dimensiones o la animacion requerida, en este caso se modificaran 2 variables en nuestro tanque.

La animación se realiza modificando el Eje Y (Y) y la Altura (Height) del rectangulo azul, mediante el editor SVG permite determinar los rangos limites:

Eje Y (maximo - minimo)

Altura (maximo - minimo)

Linealizacion de dimensiones de rectangulo

Con la funcion map la cual permite linealizar proporcionalmente 4 valores en 2 rangos diferentes ejemplo:

var_entrada = Potenciometro

map (var_entrada, min_var_entrada , max_var_entrada, min_var_salida, max _var_salida)

Esta funcion retornara la variable (var salida) que sera linear referente alos rangos.

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.

Nota: Codigo Completo Abajo.

-Creacion de Scada SVG para WebServer en ESP8266 Parte 1

Depuracion
Se ha utilizado el servidor web para PC Wampp Server para las pruebas y depuracion de las animaciones del Archivo SVG, utilizado la herramienta insepccionar de Google chrome la cual permite modificar atributos de una pagina web en caliente.

-Creacion de Scada SVG para WebServer en ESP8266 Parte 2