Introduction: Creacion De Scada SVG Para WebServer En ESP8266

Picture of 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.

Mas informacion Sobre Este Proyecto :
Blog PDAControl English

Blog PDAControl Español

Step 1: Editor SVG Online

Picture of 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,

Step 2: Diseño SVG Scada Parte 1

Step 3: Linealizacion De Dimensiones De Rectangulo

Picture of Linealizacion De Dimensiones De Rectangulo

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.

Step 4: Diseño SVG Scada Parte 2

Step 5: Mas Informacion Sobre Este Proyecto :

Picture of Mas Informacion Sobre Este Proyecto :

Comments

About This Instructable

500views

6favorites

Bio: Programador de PLC y procesos Industriales amante de la electronica en general
More by PDAControl:Enviar Correo Electronico Con ESP8266 (Google Docs) Google  Script App +Google Spreadsheets + GmailESP8266 01 + Reloj Tiny  RTC Ds1307 + Memoria Eeprom 24c32  Prueba  ESP8266 + DS18B20 Onewire + Google Speadsheets (Google Docs)
Add instructable to: