Ingesloten webserver met Tiva verbonden Launchpad (1 / 3 stap)

Stap 1: Webservertoepassing

Zoals u weet zijn servers grote en dure systemen. Dit zijn de dienen ons web sites, audio, video's, bestanden, enz. Vergelijken web servers launchpad is echt eenvoudig. Met launchpad serveren wij kan niet zo complex en functionele websites of bestanden. Wij schelen niet dat omdat we gewoon controle elektrische apparaten willen en meten van bepaalde hoeveelheden via het internet.

In dit verband maakte ik eenvoudige website. U kunt de screenshot van de site hierboven zien.

Zoals u site is een zeer eenvoudig zien. Het heeft gewoon een paar teksten, knoppen en geometrische trekt. Launchpad heeft een vier LEDs en twee drukknoppen voor algemene doeleinden gebruik. Op de website ik gebruikte knoppen controle LEDs en gevulde cirkels om te zien van de LED's en knoppen situaties. Text-elementen worden ook gebruikt om informatie te geven. Kunt u JavaScript code van de onderstaande site.

 <p>var led1, x1, led2, x2, led3, x3, led4, x4;<br>function GetSwitchState() { nocache = led1 + led2 + led3 + led4 + "&nocache="+ Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { if (this.responseText.indexOf("LED1ON") > -1) { document.getElementById("LED1").style.fill = "yellow"; } else { document.getElementById("LED1").style.fill = "black"; } if (this.responseText.indexOf("LED2ON") > -1) { document.getElementById("LED2").style.fill = "yellow"; } else { document.getElementById("LED2").style.fill = "black"; } if (this.responseText.indexOf("LED3ON") > -1) { document.getElementById("LED3").style.fill = "yellow"; } else { document.getElementById("LED3").style.fill = "black"; } if (this.responseText.indexOf("LED4ON") > -1) { document.getElementById("LED4").style.fill = "yellow"; } else { document.getElementById("LED4").style.fill = "black"; } if (this.responseText.indexOf("S1:ON") > -1) { document.getElementById("SW1").style.fill = "red"; document.getElementById("text1").innerHTML ="SW1:ON"; } else { document.getElementById("SW1").style.fill = "white"; document.getElementById("text1").innerHTML ="SW1:OFF"; } if (this.responseText.indexOf("S2:ON") > -1) { document.getElementById("SW2").style.fill = "red"; document.getElementById("text2").innerHTML ="SW2:ON"; } else { document.getElementById("SW2").style.fill = "white"; document.getElementById("text2").innerHTML ="SW2:OFF"; } } } } } request.open("GET", "ajax_switch" + nocache, true); request.send(null); setTimeout('GetSwitchState()', 500); } function SetLEDStates(num) { switch(num) { case 1: if(x1==1) { led1="&LED1ON"; x1=0; } else { led1="&LED1OFF"; x1=1; } break; case 2: if(x2==1) { led2="&LED2ON"; x2=0; } else { led2="&LED2OFF"; x2=1; } break; case 3: if(x3==1) { led3="&LED3ON"; x3=0; } else { led3="&LED3OFF"; x3=1; } break; case 4: if(x4==1) { led4="&LED4ON"; x4=0; } else { led4="&LED4OFF"; x4=1; } break; case 0: led1="&LED1OFF"; x1=1; led2="&LED2OFF"; x2=1; led3="&LED3OFF"; x3=1; led4="&LED4OFF"; x4=1; break; } }</p> 

Zoals u zien op de codes GetSwitchState functie maken van XMLHttpRequest verzoek en zette zich periodiek uitvoeren met de setTimeout-functie. Tijdsinterval ik koos 500ms voor deze toepassing. Als u wilt kunt u de waarde wijzigen. Wanneer gaan de gebeurtenis onload pagina zodra GetSwitchState functie uitgevoerd en het is op de... Dit is de belangrijkste operatie van codes, en ajax-techniek. Zo kunt u de website zonder altijd vernieuwen. Check out hier om te leren van gedetailleerde info over ajax.