0.4 Mb

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);
}
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("<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
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("</html></body>");
……………………
client.println("<br />");
client.println("<hr />");
client.println("</body></html>");
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("<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>");
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("</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)
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("<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() * 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 */
<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>");
}