Server setup #include #include boolean incoming = 0;
byte mac[] = { 0x00, 0xAA, 0xBB, 0xCC, 0xDA, 0x02 }; IPAddress ip(192,168, 0, 230); EthernetServer server(80);
void setup() { pinMode(2, OUTPUT); Ethernet.begin(mac, ip); server.begin(); Serial.begin(9600); }
Sterowanie przez dopisanie do adresu URL ciągu ’$1’ lub ’$2’ void loop() { EthernetClient client = server.available(); if (client) { while (client.connected()) { if (client.available()) { char c = client.read(); if(incoming && c == ' ') incoming = 0; if(c == '$') incoming = 1; if(incoming == 1 && c== ’1’) digitalWrite(2, HIGH); if(incoming == 1 && c== ’2’) digitalWrite(2, LOW); } //if (client.available()) } //while (client.connected()) delay(10); client.stop(); } //if (client) }
Atrybut href w html’u • Atrybut href zawiera adres internetowy powiązanej strony • The href attribute specifies the URL of the page the link goes to. • a /a ograniczają fragment interpretowany jako adres URL • w html’u nie wszystkie znaki są znakami ascii i niektóre wymagają zamiany na ascii przez poprzedzenie ich backslashem - przykładem jest kombinacja \”
client.println("Turn Off Light
"); ………. if(readString.indexOf("?lighton") >0) digitalWrite(2, HIGH); // set pin 6 high else if(readString.indexOf("?lightoff") >0) digitalWrite(2, LOW); // set pin 6 low
readString=""; //clearing string for next read
void loop() { EthernetClient client = server.available(); // Create a client connection if (client) { buttonPress = digitalRead(3); while (client.connected()) { if (client.available()) { char c = client.read(); if (dString.length() < 30) { dString += c; if (c == '\n') { …………………… client.println("HTTP/1.1 200 OK"); //send new page client.println("Content-Type: text/html"); client.println(); client.println(""); …………………… client.println("
"); client.println(""); client.println(""); dString = ""; //clearing string for next read delay(10); client.stop(); //stopping client }}}}}}
HTML components • 2 alternative radiobuttons • submit component links the ’L=0’ or ’L=1’ order to the URL address (HTTP demand) if (dString.indexOf("L=1") > 0) { digitalWrite(ledPin, HIGH); // set the LED on LEDON = true; } if (dString.indexOf("L=0") > 0) { digitalWrite(ledPin, LOW); // set the LED on LEDON = false; } ………………………………..
client.println("
"); if (LEDON == false) { client.println("LED ON
"); client.println("LED OFF
"); } else if (LEDON == true) { client.println("LED ON
"); client.println("LED OFF
"); } client.println("");
Sterowanie przez stronę z komponentami typu ’radio’ o nazwie L, których wartość 1 lub 0 jest przesyłana przez komponent ’submit’ i dołączana do żądania HTTP (URL) String dString = String(30); boolean LEDON = true; void loop() { EthernetClient client = server.available(); if (client) { while (client.connected()) { if (client.available()) { char c = client.read(); dString += c;
if (c == '\n') { if (dString.indexOf("L=1") > 0) { digitalWrite(ledPin, HIGH); // set the LED on LEDON = true; } if (dString.indexOf("L=0") > 0) { digitalWrite(ledPin, LOW); // set the LED on LEDON = false; }
client.println("HTTP/1.1 200 OK"); //send new page client.println("Content-Type: text/html"); client.println(); client.println(""); client.println("
"); if (LEDON == false) { client.println("LED ON
"); client.println("LED OFF
"); } else if (LEDON == true) { client.println("LED ON
"); client.println("LED OFF
"); } client.println("
"); client.println("
"); client.println(""); client.println(""); dString = ""; delay(10); client.stop(); //stopping client } } } } }
//if (c == '\n') //if (client.available()) //while (client.connected()) //if (client)
AJAX - Asynchronous JavaScript + XML AJAX (Asynchronous JavaScript) jest techniką dynamicznej zmiany zawartości stron internetowych tworzonych w XML’u. Strony korzystające z AJAX’a mogą być modyfikowane asynchronicznie przez wymianę niewielkich pakietów danych między klientem a serwem w tle. Oznacza to możliwość uaktualniania fragmentów stron webowych bez przeładowywania całej strony. Klasyczne strony internetowe (nie używające AJAX’a) muszą być przeładowywane w całości, jeśli zawartość ma się zmienić. AJAX jest używany przez: Google Maps, Gmail, YouTube, and Facebook.
AJAX - obiekt XMLHttpRquest Technika AJAX wykorzystuje obiekt XMLHttpRquest (do odczytu danych z serwera) oraz język skryptowy Java do wyświetlania danych. Obiekt XMLHttpRequest służy do wymiany danych z serwerem w tle i uaktualniania danych na stronach internetowych bez ładowania ponownego całej strony. Tworzenie nowego obiektu klasy XMLHttpRequest variable = new XMLHttpRequest(); Odpowiedź serwera na żądanie http jest uzależniona od parametrów obiektu XMLHttpRequest (responseText oraz responseXML): • responseText wysyła w odpowiedzi łańcuch (string), • responseXML wysyła w odpowiedzi dane XML. Przykład odpowiedzi http w postaci łańcucha: client.println("document.getElementById(\"switch_txt\")\.innerHTML = this.responseText;"); Przykład odpowiedzi http w postaci danych XML: document.getElementsByClassName("switches")[0].innerHTML = this.responseXML.getElementsByTagName('switch')[0].childNodes[0].nodeValue;
Obiekt XMLHttpRquest – zdarzenie onreadystatechange Po otrzymaniu żądania http sygnalizowanego zmianę parametru readyState obiekt XMLHttpRequest wywołuje zdarzenie onreadystatechange skojarzone z funkcją sprawdzającą zmiany na czujnikach podłączonych do serwera.
Gdy parametr readyState przyjmie wartość 4, a parametr status wartość 200 „OK” odpowiedź http jest gotowa.
Dwa sposoby wywoływania funkcji sprawdzającej stan switch’y – ręczny i automatyczny
//funkcja GetSwitchState() wywoływana po naciśnięciu przycisku buton client.println("Get Switch State");
-------------------------------------------------------------------------------------------------------------------//funkcja GetSwitchState() wywoływana automatycznie ze zdarzenia onreadystatechange client.println("function GetSwitchState() {"); client.println("nocache = \"&nocache=\"\+ Math.random() * 1000000;"); client.println("var request = new XMLHttpRequest();"); client.println("request.onreadystatechange = function() {"); void GetSwitchState(EthernetClient cl) { if (digitalRead(3)) { cl.println("Switch state: ON");} else { cl.println("Switch state: OFF");} }
/*sprawdzenie, czy żądanie HTTP zawiera łańcuch "ajax_switch ", co jest warunkiem wykonania funkcji GetSwitchState()*/ if (HTTP_req.indexOf("ajax_switch") > -1) { GetSwitchState(client);} /* funkcja GetSwitchState() jest skojarzona ze zdarzeniem onreadystatechange otrzymania żądania HTTP */ ……………………………… client.println("function GetSwitchState() {"); ……………………………. client.println("request.onreadystatechange = function() {"); …………………………………… /* żądanie HTTP request.open("GET", …… zawiera łańcuch "ajax_switch" warunkujący wykonanie funkcji GetSwitchState()*/ client.println("request.open(\"GET\", \"ajax_switch\" + nocache, true);"); } void GetSwitchState(EthernetClient cl) { if (digitalRead(3)) { cl.println("Switch state: ON");} else { cl.println("Switch state: OFF");} }
/*sprawdzenie, czy żądanie HTTP zawiera łańcuch "ajax_inputs", co jest warunkiem sterowania diodą z funkcji SetLEDs(); oraz odczytu wejść z funkcji XML_response(client); */ if (StrContains(HTTP_req, "ajax_inputs")) { SetLEDs(); XML_response(client); }
/* żądanie HTTP request.open("GET", …… odczytu wejść i sterowania wyjściem (dioda) umieszczone w funkcji skryptowej GetArduinoIO() pobieranej przy zdarzeniu onreadystatechange */ function GetArduinoIO() { request.onreadystatechange = function() ………………. request.open("GET", "ajax_inputs" + strLED1 + nocache, true); …………………………… }
void SetLEDs(void) { if (StrContains(HTTP_req, "LED1=1")) { LED_state[0] = 1; // save LED state digitalWrite(6, HIGH); } else if (StrContains(HTTP_req, "LED1=0")) { LED_state[0] = 0; // save LED state digitalWrite(6, LOW); } } void XML_response(EthernetClient cl) { ……………………………….. cl.print(""); cl.print(""); if (digitalRead(sw_arr[0])) { cl.print("ON"); } else { cl.print("OFF");} cl.println(""); cl.print(""); if (LED_state[0]) { cl.print("checked");} else { cl.print("unchecked");} cl.println(""); cl.print(""); }
