Announcement

Collapse
No announcement yet.

Dynamically update data on web page using the Mux

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Dynamically update data on web page using the Mux

    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
    Last edited by mariano; 06-22-2015, 07:59 PM. Reason: remove window.onload as it's already being called on body onload
Working...
X