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.

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.

Depuration

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

 
 
PCB schematic Testing
Download:

You may also like...

1 Response

  1. November 19, 2016

    […] to create the SVG directly into the HTML which would require upgrading the entire website. How to create Scada SVG from zero….. OLED DISPLAY 128 X 64 + -ESP8266 – 01 It has also built an OLED display 128 x 64 […]

Leave a Reply