Scada Creating SVG for Web Server in ESP8266

by Jhon_Control in Circuits > Arduino

6116 Views, 13 Favorites, 0 Comments

Scada Creating SVG for Web Server in ESP8266

20160424_192416.jpg

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

​SVG Editor Online - Components and Materials Required for Testing

3.JPG
Parametros.JPG

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

Design Scada SVG ESP8266 Part 1

Creation Scada SVG for WebServer in ESP8266 Part 1  : PDA_Control

​Linearization Rectangle Dimensions

Linealizacion.JPG
SVG File.JPG

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.

Design Scada SVG ESP8266 Part 2

Creation Scada SVG for WebServer in ESP8266 Part 2 : PDA_Control

More Information on This Project :

20160424_193042.jpg
esp8266 Web server scada plc oled.jpg