HTTP y Flyport

Fuentes: - OpenPicus Web Controlled Simulator & Tweet, Nimbits and ThingSpeak messages - OP-AN-0009 Webserver with Wi-Fi Parameter Configuration - Webserver example 1. HTML SEND DATA from browser <form> <input name="enteredText" type="text" maxlength="20" > <input type="submit" value="Reset TempSimu to"> </form> 2. PROCESAMIENTO DEL HTTP REQUEST EN EL SERVIDOR HTTP_IO_RESULT HTTPExecuteGet(void) { BYTE *ptr; BYTE filename[20]; // Load the file name // Make sure BYTE filename[] above is large enough for your longest name MPFSGetFilename(curHTTP.file, filename, 20); // If it's the index.htm updater file else if(!memcmppgm2ram(filename, "index.htm", 0)) { // Determine which LED to toggle ptr = HTTPGetROMArg(curHTTP.data, (ROM BYTE *)"enteredText"); simuStartValue = (float)atof((char *)ptr); } return HTTP_IO_DONE; }

AJAX 1. PETICIN JAVASCRIPT EN EL BROWSER execute newAjaxcommand every 500ms. newAjaxcommand is launching the updateStatus javascript function that reads the status.xml url setTimeout("newAJAXCommand('status.xml', updateStatus, true)",500); newAJAXCommand ('status.xml', updateStatus, true, 500); // Initiates a new AJAX command // url: the url to access // container: the document ID to fill, or a function to call with response XML (optional) // repeat: true to repeat this call indefinitely (optional) // data: an URL encoded string to be submitted as POST data (optional) 2. RESPUESTA XML DESDE EL SERVIDOR (FLYPORT) Status.xml <response> <led0>~led(0)~</led0> <led1>~led(1)~</led1> <led2>~led(2)~</led2> <btn0>~btn(0)~</btn0> <btn1>~btn(1)~</btn1> <pot0>~pot(0)~</pot0> <pot1>~pot(1)~</pot1> </response> Status.xml inserts Dynamic Variable Callback that has functions associated void HTTPPrint_pot(WORD num) { BYTE AN0String[8]; WORD ADval; switch(num) { case 0: ADval = ADCVal(1);//(WORD)ADC1BUF0; uitoa(ADval, (BYTE*)AN0String); break; case 1: ADval = ADCVal(2);//(WORD)ADC1BUF1; uitoa(ADval, (BYTE*)AN0String); break; } TCPPutString(sktHTTP, AN0String); } void HTTPPrint_btn(WORD num) { ROM BYTE HTML_UP_ARROW[] = "up"; ROM BYTE HTML_DOWN_ARROW[] = "dn"; // Determine which button switch(num) { case 0: num = IOGet(i1);

break; case 1: num = IOGet(i2); break; } // Print the output TCPPutROMString(sktHTTP, (num?HTML_UP_ARROW:HTML_DOWN_ARROW)); return; } 3. PROCESAMIENTO DEL XML RECIBIDO EN EL BROWSER Parses the xml Response from status.xml and updates the status box function updateStatus(xmlData) { if(!xmlData) {return;} // Check if a timeout occurred // Loop over all the LEDs for(i = 0; i < 5; i++) document.getElementById('led' + i).style.color = (getXMLValue(xmlData, 'led' + i) == '1') ? '#ff8b00' : '#777'; // Loop over all the buttons, referst to html //</span></p> //<p>Buttons:<br /> //<span id="btn0">?</span> &nbsp; //<span id="btn1">?</span> &nbsp; for(i = 0; i < 5; i++) document.getElementById('btn' + i).innerHTML = (getXMLValue(xmlData, 'btn' + i) == 'up') ? '&Lambda;' : 'V'; // Update the POT value for(i = 0; i < 2; i++) document.getElementById('pot'+i).innerHTML = getXMLValue(xmlData, 'pot'+i); // Update for bargraph; refers to following html //<p>Analog in 1: <span id="pot0" style="font-weight:normal">?</span> //<div style=" width:204px; height:13px; background-color:#92b7d3;"> //<div id ="bar1" style="width:90px; height:13px; background-color:#12365e; border-right:1px white solid;"></div> //<div style="margin-top:-15px; color:white; padding-left:4px;"><b>Analog IN1</b></div> //</div></p> for(i = 1; i < 3; i++) { var wd=0; wd= (getXMLValue(xmlData, 'pot'+(i-1)))/5; document.getElementById('bar'+i).style.width=wd+"px"; // Uses function getXMLValue(xmlData, field) in mchp.js that parses the xmlResponse returned by an XMLHTTPRequest object. // Where xmlData: the xmlData returned and field: the field to search for } 1. PETICIN JAVASCRIPT EN EL BROWSER Click on the LEDS calls via ajax a server script called leds.cgi with parameter led=<value> <span style="float:right;font-size:9px;font-weight:normal;padding-top:8px;text-indent:0px">(click to toggle)</span> <p>LEDs:<br /><span class="leds"> <a id="led0" onclick="newAJAXCommand('leds.cgi?led=0');">&bull;</a> <a id="led1" onclick="newAJAXCommand('leds.cgi?led=1');">&bull;</a> <a id="led2" onclick="newAJAXCommand('leds.cgi?led=2');">&bull;</a> <a id="led3" onclick="newAJAXCommand('leds.cgi?led=3');">&bull;</a> <a id="led4" onclick="newAJAXCommand('leds.cgi?led=4');">&bull;</a> </span></p> 2. PROCESAMIENTO DEL HTTP REQUEST EN EL SERVIDOR

It generates an HTTPExecuteGet callback that checks if the name of the file is leds.cgi and then gets the led argument and process according to it. HTTP_IO_RESULT HTTPExecuteGet(void) { BYTE *ptr; BYTE filename[20]; // Load the file name // Make sure BYTE filename[] above is large enough for your longest name MPFSGetFilename(curHTTP.file, filename, 20); // If it's the LED updater file if(!memcmppgm2ram(filename, "leds.cgi", 8)) { // Determine which LED to toggle ptr = HTTPGetROMArg(curHTTP.data, (ROM BYTE *)"led"); // Toggle the specified LED switch(*ptr) { case '0': IOPut(o1,toggle); break; case '1': IOPut(o2,toggle); break; } } return HTTP_IO_DONE; } 3. RESPUESTA XML DESDE EL SERVIDOR (FLYPORT) Leds.cgi Success! ~led(0)~ Leds.cgi (and status.xml) inserts Dynamic Variable Callback that has function associated void HTTPPrint_led(WORD num) { // Determine which LED switch(num) { case 0: num = IOGet(o1); break; case 1: num = IOGet(o2); break; } // Print the output TCPPut(sktHTTP, (num?'1':'0')); return; }