This demo shows how to use the mux to get data from a device attached to the serial port into a dynamically updating web page.

NOTE: This works with Release 3 Alpha 2 and newer firmware versions.

What you need:
- An xPico WiFi with updated firmware and eval board
- A computer with Tera Term to connect to the serial port of the xPico WiFi

1) On the xPico Wi-Fi web configuration utility, go to the Filesystem tab and create the http directory
2) Change into the http directory and upload the data.html file
3) Change Line configuration to "Mux"
4) On your computer, open Tera Term and run the included macro: muxDemo.ttl (to run a macro in Tera Term, go to Control->Macro)
5) With your browser navigate to http://ip.of.xpico.wifi/data.html


You will now see data from Tera Term being dynamically updated on your web browser.

muxDemo.ttl:

Code:
; TeraTerm macro to do Mux demo

do

; Setup instance 1 to listen to /mux_http
send '1h' #13
wait 'K'

; Have Mux notify us when there is a connection
send 'W1r' #13
wait 'K'
wait '1r'
; Read data from http post
send '1rb~80' #13
mpause 10
; Send response
send '1sb~' #13
random val 100
int2str valstr val
wait 'K'
send valstr 
send '~' #13
wait 'K'
mpause 10
; End connection and loop
send '1e' #13
wait 'K'

loop
data.html:
Code:
<html>

<body onload="setTimeout(updateData(),1000);">
The data from the device is: <div id="devicedata"></div>

<script>	
	var xmlhttp = new XMLHttpRequest();
	var timeout;
	
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			document.getElementById("devicedata").innerHTML = xmlhttp.responseText;
			clearTimeout(timeout);
			timeout = setTimeout(function(){updateData();}, 250);
		}
	};
	
	function updateData() {	
		xmlhttp.open("POST", "/mux_http", true);
		xmlhttp.send("action=getData");
	}
	
		
</script>

</body>

</html>
Attached Files