ESP8266EX HTTPD

From InCircuit
Jump to: navigation, search

How to write webpages for the radino WiFi.

Contents

Website

A small HTTP server is running inside the ESP8266EX chip. The website is stored as a single HTML page inside the flash of the ESP8266EX chip.

A simple webpage can look like this:

 <html>
 <h1>Hello World!</h1>
 </html>
This page will not create any requests.

Registers

For data communication with the ATMega32U4 you can place "registers" inside the website. Registers are defined by names between two "%" signs. The following code defines the register 1000:

  %1000%

Important: At the moment register names and values can only be 32 bit numbers.

For reading and writing registers see the sections below.

If you need the symbol "%" somewhere in your webpage you can write "%%" and a single "%" will be displayed without being interpreted as part of a register definition.

Reading Registers

If you place a register name (within '%') inside the HTML page, a EVENT_HTTP_GET_REQUEST is created. In the following example uses the register 1042.

 <html>
 <span>%1042%</span>
 </html>

The event created by the ESP when the website is visited will be of type EVENT_HTTP_GET_REQUEST for register 1042. The raw event is an event command (header IE) with type string, event type is HTTP GET request. The register will be a 4 byte bytearray containing "1042". You can use the register multiple times inside a webpage. A HTTP GET request is generated for each occurrence.

Important: At the moment register names and values can only be 32 bit numbers. For details see IC ESP8266EX interface.

The IC_ESP library provides a simple interface to handle all requests.

Writing Registers

A simple way to write a register is to use HTML forms. You have to use HTML GET requests. The form must contain the variable reg with the name of the register and variable val with the actual value.

<html>
<p>Current Value: <span id="v1042">%1042%</span></p>      
<form method="GET">
<input type="hidden" name="reg" value="1042"/>
<input type="text" name="val" value="%1042%"/>
<button type="submit">Set</button>
</form>
</html>

When the website is visited the ESP will create two HTTP GEt requests (EVENT_HTTP_GET_REQUEST) for register 1042. One for the span element and one for the form input field. The created events are the same like above.

When submitting the form three evens will be created. The first one is a HTTP SET request (EVENT_HTTP_SET_REQUEST) for register 1042, followed by two HTTP GET requests for register 1042.

The raw event is an event command (header IE) with type string and event type EVENT_HTTP_SET_REQUEST. The register will be a 4 byte bytearray containing "1042".

Important: At the moment register names and values can only be 32 bit numbers. For details see IC ESP8266EX interface.

The IC_ESP library provides a simple interface to handle all requests.

Direct Register Access

You can use special URLs to access the registers if you do not want to use complete web pages.

Reading

For reading a register value you use the following URL:

  /read?reg=1042

The ESP will return a HTML response containing only the register content with no additional HTML code. The corresponding IC_ESP library HTTP GET request (EVENT_HTTP_GET_REQUEST) for register 1042 is the same as when using forms.

Writing

For writing a register value you use the following URL:

  /write?reg=1042&val=4242

The ESP will return a HTML response containing only the (new) register content with no additional HTML code. The corresponding IC_ESP library HTTP SET request (EVENT_HTTP_SET_REQUEST) for register 1042 is the same as when using forms.

Access using JavaScript

In conjunction with forms, JavaScript can be used to read and write register values. The general idea is that you define a function that is called when a form button is clicked. JavaScript uses HTTP requests to directly access the registers as described above. The advantage is that you can read and write multiple registers with one HTML form.

Reading Register

The form reads register 1042. Its value is written to the span element with id v1042. When the Read button is clicked, the rV() function is called. The first parameter is the register name, the second the id of the span element. The id is used to update the span element once we read the new register value.

Function rV() creates a HTTP request using the direct register access. It will issue a HTTP get request with the following url:

/read?reg=1042

The response of the direct register access is just the value without any further HTML code. In case of a successful request the response is directly written to the content of the span element.

<html>
<head>
<script type="text/javascript">
//Params: ElementID //Returns: Element
function eID(ele) {return document.getElementById(ele);}
//Params: ElementID //Returns: Element.value
function vID(ele) {return eID(ele).value;}
//Read a register on the Arduino and set some elements content accordingly
//Params: Register, elementID for Updated Value
function rV(reg,tgt) {
var e = eID(tgt);
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","read?reg="+reg,true);
xmlhttp.onreadystatechange =
        function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        e.innerHTML=xmlhttp.responseText;
                }
        };
xmlhttp.timeout=5000;
xmlhttp.send();
}
</script>
</head>
<body>
<form onSubmit="rV('1042', 'v1042');return false;">
<label>Value: </label><span id="v1042">%1042%</span><button type="submit">Read</button>
</form>
</body>
</html>

Writing Register

Writing registers is similar. The form writes and reads register 1042. Its value is written to the span element with id v1042. When the Write button is clicked, the wV() function is called. The first parameter is the register name, the second one is the new register value, the third one is the id of the span element. The id is used to update the span element once we read the new register value.

Function wV() creates a HTTP request using the direct register access. It will issue a HTTP get request with the following url:

/write?reg=1042&val=<new value>

The response of the direct register access is just the new value without any further HTML code. In case of a successful request the response is directly written to the content of the span element.

<html>
<head>
<script type="text/javascript">
                      
//Params: ElementID //Returns: Element
function eID(ele) {return document.getElementById(ele);}
//Params: ElementID //Returns: Element.value
function vID(ele) {return eID(ele).value;}

//Write to a register on the arduino and set some elements content accordingly
//Params: Register, new value, elementID for Updated Value
function wV(reg,val,tgt) {
var e = eID(tgt);
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","write?reg="+reg+"&val="+val,true);
xmlhttp.onreadystatechange =
        function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        e.innerHTML=xmlhttp.responseText;
                }
        };
xmlhttp.timeout=5000;
xmlhttp.send();
}
</script>
</head>
<body>
<form onSubmit="wV('1042',vID('i1042'),'v1042');return false;">
<label>Value: </label><span id="v1042">%1042%</span>
<input id="i1042" type="text" value="%1042%"/>
<button type="submit">Write</button>
</form>
</body>
</html>

Automatic Refresh

If your Arduino reads for example sensor data, this data can be display on a web page and updated continuously. A simple way to achieve this is to use the setInterval() function.

The following example differs only slightly from the previous read register one. In the body element of the page we specify a function that is called on load. Within this function we set a timer using setInterval() that calls the rV() function for register 1042 every 2 seconds. Similar to clicking the Read button a direct register read access is used to read the current register value.

<html>
<head>
<script type="text/javascript">
//Params: ElementID //Returns: Element
function eID(ele) {return document.getElementById(ele);}
//Params: ElementID //Returns: Element.value
function vID(ele) {return eID(ele).value;}
//Read a register on the Arduino and set some elements content accordingly
//Params: Register, elementID for Updated Value
function rV(reg,tgt) {
var e = eID(tgt);
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","read?reg="+reg,true);
xmlhttp.onreadystatechange =
        function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        e.innerHTML=xmlhttp.responseText;
                }
        };
xmlhttp.timeout=5000;
xmlhttp.send();
}

function onBodyLoad() {
setInterval("rV('1042', 'v1042')", 2000);
}

</script>
</head>
<body onload="onBodyLoad()">
<form onSubmit="rV('1042', 'v1042');return false;">
<label>Value: </label><span id="v1042">%1042%</span><button type="submit">Read</button>
</form>
</body>
</html>
Personal tools