Server setup. #include <SPI.h> #include <Ethernet.h> boolean incoming = 0;

Transkrypt

1

2

3

4 Server setup #include <SPI.h> #include <Ethernet.h> 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);

5 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)

6 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("<a href=\"/?lighton\"\">turn On Light</a>"); client.println("<a href=\"/?lightoff\"\">turn Off Light</a><br />");. 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

7 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/ OK"); //send new page client.println("content-type: text/html"); client.println(); client.println("</html></body>"); client.println("<br />"); client.println("<hr />"); client.println("</body></html>"); dstring = ""; //clearing string for next read delay(10); client.stop(); //stopping client

8 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("<form method=get name=med><br>"); if (LEDON == false) client.println("<input type='radio' name='l' value='1'>led ON<br>"); client.println("<input type='radio' name='l' value='0' checked>led OFF<br>"); else if (LEDON == true) client.println("<input type='radio' name='l' value='1' checked>led ON<br>"); client.println("<input type='radio' name='l' value='0'>led OFF<br>"); client.println("<input type=submit value=submit></form>");

9 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;

10 client.println("http/ OK"); //send new page client.println("content-type: text/html"); client.println(); client.println("</html></body>"); client.println("<form method=get name=mled><br>"); if (LEDON == false) client.println("<input type='radio' name='l' value='1'>led ON<br>"); client.println("<input type='radio' name='l' value='0' checked>led OFF<br>"); else if (LEDON == true) client.println("<input type='radio' name='l' value='1' checked>led ON<br>"); client.println("<input type='radio' name='l' value='0'>led OFF<br>"); client.println("<input type=submit value=submit></form><br>"); client.println("<br />"); client.println("<hr />"); client.println("</body></html>"); dstring = ""; delay(10); client.stop(); //stopping client //if (c == '\n') //if (client.available()) //while (client.connected()) //if (client)

11 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.

12 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;

13 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.

14 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("<button type=\"button\"\onclick=\"getswitchstate()\">get Switch State</button>"); //funkcja GetSwitchState() wywoływana automatycznie ze zdarzenia onreadystatechange client.println("function GetSwitchState() "); client.println("nocache = \"&nocache=\"\+ Math.random() * ;"); 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");

15 /*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");

16 /*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 */ <script> function GetArduinoIO() request.onreadystatechange = function(). request.open("get", "ajax_inputs" + strled1 + nocache, true); </script> 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("<inputs>"); cl.print("<switch>"); if (digitalread(sw_arr[0])) cl.print("on"); else cl.print("off"); cl.println("</switch>"); cl.print("<led>"); if (LED_state[0]) cl.print("checked"); else cl.print("unchecked"); cl.println("</led>"); cl.print("</inputs>");

17