Difference between revisions of "ESP8266EX HTTPD"

From InCircuit
Jump to: navigation, search
Line 1: Line 1:
−
<span style="color:red;">This page is currently under construction and is daily updated with new information.</span>
 
−
 
 
=Website=
 
=Website=
  
Line 10: Line 8:
 
  <h1>Hello World!</h1>
 
  <h1>Hello World!</h1>
 
  </html>
 
  </html>
−
</pre>
+
</pre>This page will not create any requests.
  
−
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.
 
If you place a register name (within '%') inside the HTML page, a EVENT_HTTP_GET_REQUEST is created.
Line 26: Line 24:
 
The raw event is an event command (header IE) with type string, event type is HTTPD GET request.
 
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".
 
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 [[ESP8266EX_Library]].
  
 +
The [[IC_ESP|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.
 +
 +
<pre>
 +
<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>
 +
</pre>
 +
 +
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.
 
'''Important''': At the moment register names and values can only be 4 digit numbers.
 +
For details see [[ESP8266EX_Library]].
  
 
The [[IC_ESP|IC_ESP library]] provides a simple interface to handle all requests.
 
The [[IC_ESP|IC_ESP library]] provides a simple interface to handle all requests.
  
−
<!--
+
=Direct Register Access=
−
=direct register access=
+
  
−
=complex examples=
+
You can use special URLs to access the registers if you do not want to use complete web pages.
  
−
==form==
+
==Reading==
  
−
==javascript==
+
For reading a register value you use the following URL:
−
-->
+
 
 +
<pre>
 +
  /read?reg=1042
 +
</pre>
 +
 
 +
The ESP will return a HTML response containing only the register content with no additional HTML code.
 +
The corresponding [[IC_ESP|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:
 +
 
 +
<pre>
 +
  /write?reg=1042&val=4242
 +
</pre>
 +
 
 +
The ESP will return a HTML response containing only the (new) register content with no additional HTML code.
 +
The corresponding [[IC_ESP|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.
 +
 
 +
<pre>
 +
<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>
 +
</pre>
 +
 
 +
==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.
 +
 
 +
<pre>
 +
<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>
 +
</pre>
 +
 
 +
==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 we specify a function that is called on load.
 +
Within this function we set a timer using setInterval() that calls the rV() 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.
 +
 
 +
<pre>
 +
<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>
 +
</pre>
  
 
[[Category:radino]]
 
[[Category:radino]]

Revision as of 19:35, 5 March 2015

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 ESP8266EX_Library.

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 ESP8266EX_Library.

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 we specify a function that is called on load. Within this function we set a timer using setInterval() that calls the rV() 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>
Retrieved from "https://wiki.in-circuit.de/index.php5?title=ESP8266EX_HTTPD&oldid=3302"
Personal tools