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.
Basic and allows changing dimensions, change colors, generate and save HTML code,
1 shows the design of our scada Mini is performed, or the required dimensions are determined animation, in this case 2 variables were changed in our tank.
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)
Linearization rectangle dimensions
With the map function which allows linearization proportionally four values in 2 different ranges such as: