Difference between revisions of "ESP8266EX HTTPD"

From InCircuit
Jump to: navigation, search
Line 4: Line 4:
 
|-
 
|-
 
|[[radino software]]
 
|[[radino software]]
How to setup the Arduino IDE.
 
 
|colspan=3 | [[radino WiFi software]]
 
|colspan=3 | [[radino WiFi software]]
Overview about software running on Radion WiFi
+
[[radino WiFi software#First_Steps|First Steps]] | [[radino WiFi software#Howto|Howto]] | [[radino WiFi software#FAQ|FAQ]]
 
|-
 
|-
 
|
 
|
 
|[[IC ESP]]
 
|[[IC ESP]]
library implementing the ESP8266EX Library
 
 
|[[ESP8266EX HTTPD]]
 
|[[ESP8266EX HTTPD]]
'''how to write webpages'''
 
 
|[[IC ESP8266EX interface]]
 
|[[IC ESP8266EX interface]]
In-Circuit ESP8266EX (lowlevel) interface
 
 
|-
 
|-
 
|}
 
|}
 +
 +
How to write webpages for the radino WiFi.
  
 
=Website=
 
=Website=

Revision as of 09:25, 24 March 2015

radino Library
radino software radino WiFi software

First Steps | Howto | FAQ

IC ESP ESP8266EX HTTPD IC ESP8266EX interface

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.

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 a EVENT_HTTP_GET_REQUEST for register 1042. The raw event is an event command (header IE) with type string, event type is HTTPD GET request. The register will be a 4 byte bytearray containing "1042". Important: At the moment register names and values can only be 4 digit 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 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 EVENT_HTTP_SET_REQUEST for register 1042, followed by two EVENT_HTTP_GET_REQUEST for register 1042.

The last event is an event command (header IE) with type string, event type is HTTPD SET request. The register will be a 4 byte bytearray containing "1042". Important: At the moment register names and values can only be 4 digit 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 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 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