prezentacja programu powerpointcastor.am.gdynia.pl/~dorra/pliki/ethernet 2.pdf · sterowanie przez...

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)

}

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

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 \”

void loop()

{

EthernetClient client = server.available(); // Create a client connection

if (client)

{

buttonPress = digitalRead(3);


{


{


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

}}}}}}

if (dString.indexOf("L=1") > 0)

{

digitalWrite(ledPin, HIGH); // set the LED on

LEDON = true;

}


{

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>");

HTML components

• 2 alternative radiobuttons

• submit component links the ’L=0’ or ’L=1’ order to the URL address (HTTP demand)

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)

{


{


{


dString += c;

if (c == '\n')

{


{

digitalWrite(ledPin, HIGH); // set the LED on

LEDON = true;

}


{

digitalWrite(ledPin, LOW); // set the LED on

LEDON = false;

}

client.println("HTTP/1.1 200 OK"); //send new page


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ą (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.

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");}

}

if (c == '\n' )

{

client.println("HTTP/1.1 200 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("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;

}

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

}

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>");

}

<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 />

</form>

</div>

</div>

</body>

function GetCheck()

{

if (PIN_OUT_form.PIN_OUT_1.checked)

{

strPinOut1 = "&PIN_OUT_1=1";

}

else

{


}

if (PIN_OUT_form.PIN_OUT_2.checked)

{


}

else

{


}

}

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>

Klasy w HTMLAtrybut 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>


<h2>Paris</h2>

<p>Paris is the capital and most populous city of France.</p> </div>


<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,</p>

</div>

</body> </html>

https://www.w3schools.com/html/html_classes.asp

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,


• Klasa .col-lg-* wyświetlanie kolumn obok siebie w rozdzielczości wyższej lub równej 992px,


• Klasa .col-xl-* wyświetlanie kolumn obok siebie w rozdzielczości wyższej lub równej 1200px,


Grid Classes

The Bootstrap grid system has four classes:

• xs (for phones)

• sm (for tablets)

• md (for desktops)

• lg (for larger desktops)

prezentacja programu powerpointcastor.am.gdynia.pl/~dorra/pliki/ethernet 2.pdf · sterowanie przez...

Documents