Scada creating SVG for Web Server in ESP8266

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.

SVG Editor Online

Online SVG editor used a design is made, in this case a basic design used figures

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:

var_entrada = Potentiometer

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

This function will return the variable (var output) that will alos linear reference ranges.

Animation code in Arduino IDE

Map function is used 2 times:

1 Linearized (y-axis) min max 98 317, equivalent to 0 and 100% will wonder why the min is greater than the maximum, this is due to displacement requires the rectangle.

2 Linearize (Height) min 0 max 220, equivalent to 0 and 100%.

to determine the ranges of 2 variables videos there is the method of animation is indicated.

3 Conversion Int to Strings

These integer values must be converted to Strings and must concatenate the design SVG.

Note: Full Down Code.

-Creation Scada SVG for WebServer in ESP8266 Part 1

Depuration

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.

-Creation Scada SVG for WebServer in ESP8266 Part 2