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.
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.
Depuracion
Vista de Scada SVG desde navegador web de PC, SVG generado en Modulo ESP8266
Pruebas
Esquematico de PCB de Pruebas
Descargas:
