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.

More information on this project :
Blog PDAControl English

Blog PDAControl Español

Step 1: SVG Editor Online - Components and Materials Required for Testing

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,

Components and materials required for testing

1- ESP8266 01

1- Regulator 3.3v

1-Battery acid 6v

Step 2: Design Scada SVG ESP8266 Part 1

Step 3: Linearization Rectangle Dimensions

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.