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ą (zestaw metod) 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 if (c == '\n' ) client.println("http/ OK"); if (dstring.indexof("ajax_inputs") > 0) client.println("content-type: text/xml"); client.println("connection: keep-alive"); client.println(); SetPIN_OUTs(); XML_response(client); else client.println("content-type: text/html"); client.println("connection: keep-alive"); client.println(); webfile = SD.open("index6.htm"); if (webfile) while (webfile.available()) client.write(webfile.read()); webfile.close(); Serial.println(dString); dstring = ""; break;

16 void SetPIN_OUTs(void) // Dioda LED (pin 6) if (dstring.indexof("pin_out_1=1") > 0) Pin_Out_state[0] = 1; // zapis stanu diody LED digitalwrite(led6pin, HIGH); else if (dstring.indexof("pin_out_1=0") > 0) Pin_Out_state[0] = 0; digitalwrite(led6pin, LOW);

17 void XML_response(EthernetClient cl) int digi_val; int count; int sw_arr[] = Button2Pin, Button3Pin ; cl.print("<?xml version = \"1.0\"?>"); cl.print("<inputs>"); for (count = 0; count < 2; count++) digi_val = digitalread(sw_arr[count]); cl.print("<switch>"); if (digi_val) cl.print("on"); else cl.print("off"); cl.println("</switch>"); cl.print("<pin_out>"); if (Pin_Out_state[0]) cl.print("checked"); else cl.print("unchecked"); cl.println("</pin_out>"); cl.print("</inputs>");

18 function GetGPIO() nocache = "&nocache=" + Math.random() * ; var request = new XMLHttpRequest(); request.onreadystatechange = function() if (this.readystate == 4) if (this.status == 200) if (this.responsexml!= null) var num_an = this.responsexml.getelementsbytagname('switch').length; for (count = 0; count < num_an; count++) document.getelementsbyclassname("switch")[count].innerhtml = this.responsexml.getelementsbytagname('switch')[count].childnodes[0].nodevalue; if (this.responsexml.getelementsbytagname('pin_out')[0].childnodes[0].nodevalue === "checked") document.pin_out_form.pin_out_1.checked = true; else document.pin_out_form.pin_out_1.checked = false; request.open("get", "ajax_inputs" + strpinout1 + strpinout2 + nocache, true); request.send(null); settimeout('getgpio()', 1000);

19 <body onload="getgpio()"> <div id="container"> <h1>gpio</h1> <div class="io_box"> <h2>inputs</h2> <p>button (D2): <span class="switch">...</span></p> <p>button (D3): <span class="switch">...</span></p> </div> <div class="io_box"> <h2>outputs</h2> <form id="check_pin_outs" name="pin_out_form"> <input type="checkbox" name="pin_out_1" value="0" onclick="getcheck()" />LED (D6)<br /><br /> <input type="checkbox" name="pin_out_2" value="0" onclick="getcheck()" />LED (D7)<br /><br /> </div> </form> </div> </body>

20 <style> div#container width: 1250px; position: relative; margin: 0 auto 0 auto; text-align: left;.io_box float: left; margin: 20px 20px 20px 20px; border: 1px solid black; padding: 5px 5px 5px 5px; width: 185px; h1 text-align: center; font-size: 120%; color: blue; margin: px 0; h2 text-align: center; font-size: 85%; color: red; margin: 5px 0 5px 0; </style>

21 function GetCheck() if (PIN_OUT_form.PIN_OUT_1.checked) strpinout1 = "&PIN_OUT_1=1"; else strpinout1 = "&PIN_OUT_1=0"; if (PIN_OUT_form.PIN_OUT_2.checked) strpinout2 = "&PIN_OUT_2=1"; else strpinout2 = "&PIN_OUT_2=0";

22 Tagi HTML w projektach stron dla mikrokontrolera <head> nagłówek strony </head> <head> <meta charset="utf-8"> polskie znaki </head> <body> treść strony </body> <p>podział na akapity </p> <h1>nagłówek h1 akapitu </h1> <h2>nagłówek h2 akapitu </h2> <span> podział liniowy - uchwyt do tekstu wyświetlanego w miejsce kropek </span> <form> część skryptu zawierającą elementy interaktywne np. checkbox </form> <div> podział blokowy tj. na bloki rozpoczynające się od nowej linii </div> <div id="container"> container ułatwia wyrównanie bloków <script> elementy strony stworzone przez klienta </script>

23 Klasy w HTML Atrybut class umożliwia definiowanie jednakowych stylów dla elementów tej samej klasy <!DOCTYPE html> <html> <head> <style> div.cities background-color: black; color: white; margin: 20px 0 20px 0; padding: 20px; </style></head> <body> <div class="cities"> <h2>london</h2> <p>london is the capital of England. It is the most populous city in the United Kingdom</p> </div> <div class="cities"> <h2>paris</h2> <p>paris is the capital and most populous city of France.</p> </div> <div class="cities"> <h2>tokyo</h2> <p>tokyo is the capital of Japan, the center of the Greater Tokyo Area,</p> </div> </body> </html>

24 Bootstrap grid system Klasy kolumn we frameworku Boostrap odpowiadają za ich wyświetlanie kolumn na różnych rozdzielczościach ekranu. Klasa.col-xs-* wyświetlanie kolumn obok siebie zawsze. Klasa.col-sm-* wyświetlanie kolumn obok siebie w rozdzielczości wyższej lub równej 544px, poniżej będą się wyświetlały pod sobą. Klasa.col-md-* wyświetlanie kolumn obok siebie w rozdzielczości wyższej lub równej 768px, poniżej będą się wyświetlały pod sobą. Klasa.col-lg-* wyświetlanie kolumn obok siebie w rozdzielczości wyższej lub równej 992px, poniżej będą się wyświetlały pod sobą. Klasa.col-xl-* wyświetlanie kolumn obok siebie w rozdzielczości wyższej lub równej 1200px, poniżej będą się wyświetlały pod sobą. Grid Classes The Bootstrap grid system has four classes: xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops)

25

26

27

28

29