This tutorial is divided into 2 in which it is explained how to design a mini SCADA or graphical representation of a process in this case a tank which displays the variable level 0 to 100% was created.
The web server will be located in Module ESP8266 which publishes an HTML page which in turn designs SVG file hosted on the server.
The animation is done by modifying the Y axis and Height blue rectangle, using the SVG editor to determine the limits ranges:
Y axis (maximum – minimum)Height (maximum – minimum)
We used the web server for PC WAMPP Server for testing and debugging animations SVG file, used the insepccionar of Google chrome tool which allows modifying attributes of a hot website.
Scada view SVG from PC web browser, SVG generated in Modulo ESP8266.