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.

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

Depuration

Scada view SVG from PC web browser, SVG generated in Modulo ESP8266.