Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore DL-2023-02

DL-2023-02

Published by mirnauka61, 2023-06-14 02:46:43

Description: DL-2023-02

Search

Read the Text Version

????? 13. ARDUINO AJAX ???-?????? ? SD-KAPTA ???-?????? Arduino Ethernet Shield, ?? ??????? ????????? ???-???????? ?? SD-?????. ???-???????? ?????????? ?????? ????????????? ? ?????????? Ajax ??? ?????????? ??????? ?????????????. SD- ? ?????????? ?????? ????? ??????????? ???-????????, ??????????? ?? — ?????, ??????? ?? ?????????????? ??? ??????????? ????????? ?????? Arduino ??? ???-????????, ???????????? ????-?????, ???? ?????? ?????? Arduino. ? ???? ????? ??????????? ?????? ???????????? ???? Arduino ?? ???-????????, ??????????? ?? SD-?????. ? ???? ??????? ????????????? ????????? ? ???????? 3 Arduino. 5V 3? ARDUINO Ri UNO 10k GND ??? ? ???-???????? ??? (????? Arduino) ? ???-???????? ??? ???? ????? ??????????? ???????????? ????? ?????????? ????? 4 (???-?????? SD-????? Arduino) ? ????? 8 (??????????- ???? ?????????? ????????? ????????????? ? ??????? Ajax) ????? ???????????. ????? ?? ???? ???????? ? ??? ???????????, ??? ??? ???????? ?????? ????? ??- ? ??????? ??? ??, ??? ? ????? 8 ????? ???????????, ?? ? ?????????? ?????????? ??????? ?????????. ???-????????, ????????? ?? HTML ? JavaScript (??? ?????????? Ajax), ??????- ?? ????:

<!DOCTYPE html> <html> <head> <title>Arduino SD Card Web Page using Ajax</title> <seript> GetSwitchStateO function < = + Math.random() * 1000000; . nocache var request = new XMLHttpRequestO; request.onreadystatechange = function() { if (this.readyState == 4) < if (this.status == 200) { if (this.responseText != null) { document.getElementById( ).innerHTML = this.responseText; Ajax</h1> } > > > request.open( , ? nocache, true); request .send(null); , 1000); setTimeout( > </script> </head> <body onload= > <h1>Arduino Switch State from SO Card Web Page using >Switch requested...</p> <p id= state: Not </body> </html> ??? ???-???????? ??????????? ?? ????? micro SD ??? index.htm — ??? ? ?????- ?????? Arduino ??? ??? ?? HTML/JavaScript, ??????? ??? ??????? ? ????? 8 (??- ???????????? ?????? ????????? ????????????? ? ?????????????? Ajax) , ?? ? ??- ???????? ?????????? ? ??????? ?????????. ?????????? ? ???????? ???-???????? ?????????? ????. <!DOCTYPE html> <html> <head> <title>Arduino SD Card Web Page using Ajax</title> <script> function GetSwitchStateO { = \"&nocache=\" + Math.random() * 1000000; nocache var request = new XMLHttpRequestO; request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { document.getElementById(\"switch_txt\").innerHTML = this.responseText; } } } } request.open(\"GET\", \"ajax_switch\" + nocache, true);

request.send(null); f, 1000) ; setTimeout(fGetSwitchState() } </script> </head> <body onload=\"GetSwitchState()\"> <hl>Arduino Switch State from SD Card Web Page using Ajax</hl> <p id=\"switch_txt\">Switch state: Not requested...</p> </body> </html> ????? Arduino ??? ???? ????? ??????????? ??????? ????. ??? ????? ?????????, ????? ???????? SD ? ????? index.htm. ????????? ???? HTML/JavaScript ??? ?? ????? micro /* ?th_websrv_SD_Aj ax Program: Description: Arduino web server that serves up a web page Hardware: that displays the status of a switch connected Software: to pin 3 of the Arduino. References: The web page is stored on the SD card. Date: Modified: The web page contains JavaScript code that uses Author: Ajax to request the state of the switch every second. Arduino Uno and official Arduino Ethernet shield. Should work with other Arduinos and compatible Ethernet shields. FAT16 SD card formatted 2Gb micro Push button switch interfaced to pin 3 of the Arduino Developed using Arduino 1.0.5 software Should be compatible with Arduino 1.0 + SD card contains web page called index.htm - Webserver example by David A. Mellis and modified by Tom Igoe - SD card examples by David A. Mellis and Tom Igoe - Ethernet library documentation: http://arduino.cc/en/Reference/Ethernet - SD Card library documentation: http://arduino.cc/en/Reference/SD 25 March 2013 17 June 2013 - removed the use of the String class http://startingelectronics.org W.A. Smith, */ #include <SPI.h> #include <Ethernet.h> #include <SD.h> // size of buffer used to capture HTTP requests #define REQ_BUF_SZ 40 // MAC address from Ethernet shield sticker under board byte mac[] ={ OxDE, OxAD, OxBE, OxEF, OxFE, OxED }; 168, 0, 20); // IP address, IPAddress ip(192, depending may need to change // on network

EthernetServer server(80); // create a server at port 80 File webFile; char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string char req_index =0; // index into HTTP_req buffer void setup() { // disable pinMode(10, Ethernet chip digitalWrite(10, OUTPUT); HIGH); Serial.begin(9600); // for debugging // initialize SD card Serial.println(\"Initializing SD card...\"); if (!SD.begin(4)) { Serial.println(\"ERROR - SD card initialization failed!\"); failed return; // init file!\"); } to Arduino Serial.println(\"SUCCESS - SD card initialized.\"); // check for index.htm file { if (!SD.exists(\"index.htm\")) find - Can't index Serial.println(\"ERROR find index.htm file return; // can't } Serial.println(\"SUCCESS - Found index.htm file.\"); pinMode(3, INPUT); // switch is attached pin 3 Ethernet.begin(mac, ip); // initialize Ethernet device server.begin(); } // start to listen for clients void loop() { EthernetClient client = server.available(); // try to get client if (client) { // got client? boolean currentLinelsBlank = true; while (client.connected()) { if (client.available()) { // client data available to read char ? = client.read(); // read 1 byte (character) from client // buffer first part of HTTP request in HTTP_req array (string) // leave last element in array as 0 to null terminate // string (REQ_BUF_SZ - 1) if (req_index < (REQ_BUF_SZ -1)) { HTTP_req[req_index] = c; // save HTTP request character req_index++; } // last line of client request is blank and ends with \\n // respond to client only after last line received if (c == fn\\ f && currentLinelsBlank) { // send a standard http response header client.println(\"HTTP/1.1 200 OK\"); client.println(\"Content-Type: text/html\"); client.println(\"Connection: keep-alive\"); client.println(); // Ajax request if (StrContains(HTTP_req, \"ajax_switch\")) { // read switch state and send appropriate paragraph text GetSwitchState(client);

} else { // web page request // send web page webFile = SD.open(\"index.htm\"); // open web page file if (webFile) { while(webFile.available()) { client.write(webFile.read()); // send web page // to client } webFile.close() ; } } // display received HTTP request on serial port Serial.println(HTTP_req); // reset buffer index and all buffer elements to 0 req_index = 0; StrClear(HTTP_req, REQ_BUF_SZ); break; } // every line of text received from the client ends with \\r\\n if (c == '\\n') { // last character on line of received text // starting new line with next character read currentLinelsBlank = true; } else if (c != f\\rf) { // a text character was received from client currentLinelsBlank = false; } } // end if (client.available()) } // end while (client.connected()) delay(1); // give the web browser time to receive the data client.stop(); // close the connection } // end if (client) } // send the state of the switch to the web browser void GetSwitchState(EthernetClient { cl) { if (digitalRead(3)) state: cl.println(\"Switch state: ON\"); } else { cl.println(\"Switch OFF\"); } } // sets every element of str to 0 (clears array) void StrClear(char *str, char length) { i = 0; i < length; for (int i++) { str[i] = 0; } } // searches for the string sfind in the string str // returns 1 if string found found string not char // returns 0 if = 0; *str, char StrContains(char = 0; *sfind) { char found char index

char len; len = strlen(str); if (strlen(sfind) > len) { return 0; } while (index < len) { if (str[index] == sfindffound]) { { found++; if (strlen(sfind) == found) return 1; } } else { found = 0; } index++; } return 0; } ???? ????? ???????? ??? ??, ??? ? ????? ?? ????? 8 (?????????????? ?????? ????????? ????????????? ? ??????? Ajax) , ?? ??????????? ????, ??? ?????? ??- ?????? ???????? ???????? ???-???????? ?? ???? Arduino ???-???????? ????????- ???? ?? ????? index.htm ?? SD-?????. ????????? ?? ?????????? Ajax, ???-???????? (??? ???????? ? ???-????????) ?????????? ??? ?? ?????? ?? ?????? ?????????????, ??? ? ????? ? ????? 8 ????? ???????????. ?? ?? ???? ?? ???????????? Ajax, ?? Arduino ???????? ?? ??????? ???? index.htm ? SD-????? ? ???????? ?????, ???????????? ????????? ?????????- ????, ? ????? ????????? ??????? ??? ???-???????? ? ?????????? ?????? ?— ??- ????????? ?? ????, ??????? ?? ????????????? ??? ????????. ????? 14. ????? ARDUINO ? XML ?????????????? AJAX ? ?? ???-??????? ARDUINO ???-?????? Arduino ???????? ???-???????? (?????????? ?? SD-?????), ?? ????- ??? ???????????? ????????? ???? ????????? ?????????????? ? ??????????? ?????. ????????? ???? ?????????????? ? ??????????? ????? ??????????? ?? ???- ???????? ? ??????? Ajax. XML-????, ?????????? ??????? ?????????????? ? ?????- ????? ????????, ???????????? ?? Arduino ? ???-???????. ? ???? ??????? ????????? ??? ?? ????? ?? ???-???????? (? ?????????? ?????? ???????), ??? ? ? ????? 9 ????? ??????????? — ?????????? ????? ? ???????????- ?? ? ?????????????? AJAX, ?? ?????????? ???????????: ? ??????? ?????????????? ? ?????????? ???????? ???????????? ? ????? XML, a ?? ? ???? ????? HTML. ? JavaScript responseXML ???????????? ?????? responseText ??? ????????? ???- ????? ?? Arduino ?? XML-?????. ? ???????? ?? ????? XML (??????? ?????? Arduino) ??????????? ? ?????? HTML ?? ???-???????? ?????? ?????? ????? ??????. ? ???-???????? ???????? ?? ????? micro SD Ethernet Shield.

?????? ? XML ???????????? ????????????? Ajax ? ?????? XML ??????????? ? ???, ??? ??????- ??? ???????? ????? ???? ????? ????????? ? ??????? JavaScript ?? ???-????????, ?????? ???? ????? ?????? ??? JavaScript ??? ?????????? ???????? ?? ?????????? ?????. XML-???? ?????????? ????, ????? ??? HTML ??? XHTML. ???? ????? ????????? ??????- ???, ??????? ?????????????? ??? ??? XML-????. ????? ??????? ???????? ???????: ?????? ????????????? ???, ??????? ???????? ??? ????????? ???? ?????. ? ???? ???????? ???????? ????????? XML-?????, ????????????? ? ???? <?xml version = \"1.0\" ?> <inputs> <buttonlX/buttonl> <button2X/button2> <analoglX/analogl> </inputs> ??? inputs ? ??? ?????? ????, ???????????? ? ???, ???????? ???????, ??????- ?????? ????????? ??????? ?????????????. ??????????? ???? XML ????? ????? ???? ???????: <?xml version = \"1.0\" ?> <inputs> <buttonX/button> <buttonX/button> <analogX/analog> </inputs> ???? ???? ?????????? ??? ?????? ? ?????????? ???, ??????? ????? ????????- ?????? ??? ???????? ?????? ????????? ?????? ??? ??????????? ????????. ?????- ????? ??? ?????? ????? <button> ??? <analog>, ???????? ????????? ???????????- ??? ?????? ??? ?????????? ??????. ??????? ????? ????? ????? ??????? ??????????? ? ???, ??? ? ?????? ????????- ???? ?????????? ????? ??? ???? ?????, ????? ??? ?? ?????? ???? ???????????? ??? ????????????? ???? ?????. XML-???? Arduino ? ???? ??????? Arduino ??????? ???? XML ? ????????? ?????? ?????????????? ? ?? ?????????? ???? ????? ??????. ???? XML ???????????? ???-???????? ? ????? Aj ax-?????? ??????. ?? ??????????? ???? ??????? ?????? XML-?????, ????????????? ? Arduino. <?xml version = ?> <inputs> <button1>0N</button1> <button2>OFF</button2> <analog1>394</analog1> </inputs>

??? ???????? Ajax ? XML ???? ?? ??????? ?? ?????? ?????? ????? ???????????, ?? ?????? ?? ????? ??- ??????? ??? ????????. Arduino ????? ???????? ??????? ???????? ?? ???-????????, ?????? ????????? ?????????: 1. ?????? ???-???????? ??? ??????, ???-??????? ???????????? ??? ??????? ? ???-??????? Arduino ?? IP-??????, ?????????? ? ?????? Arduino. File Edit View New Tbb - Mozilla Firefox H^ Tools ? New Tab History Bookmarks |+ 10.0.0.20 ? ? | tQj ??? ?????????? ???-??????? ?????????? HTTP-??????: GET / HTTP/1.1 Host: 10.0.0.20 User-Agent: Mozilla/5.0 (Xll; Ubuntu; Linux i686; rv:19.0) Gecko/20100101 Firefox/19.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Connection: keep-alive 2. ???????? ???-???????? ???????? ????????????? ?????? ? ???????? HTTP- ???-?????? ??????? ???-????????: Arduino ??????????, ?? ??????? ????/1.1 200 ?? Content-Type: text/html Connection: keep-alive <!D0CTYPE htnl> <html> <head> <title>Arduino SD Card Web Page using A]ax with XML</title> <scnpt> GetArduinoInputs() function { = * Math.random() * l000000; nocache var request = new XMLHttpRequest(); request.onreadystatechange = function() { == '•.) { if (this.readyState == 200) { if (this.status if (this.responseXML != null) { XML file // extract XML data iron (containing switch states ^nd analog value) .nodeValue; document.getElementById( ).innerHTML = )[0] .childNodes[0] .nodeValue; this.responseXML .nodeValue; . getEleir.entsByTagName( = document.getElementById( ).innerHTML = this.responseXML .getElefr.entsByTagName( )[0] .childNodes[0] )[0] .childNodes[0] document,getElement8yId( ).innerHTML this.responseXML.getElerr.ents8yTagName(

} > > > request.open( , + nocache, true); request.send( . ??0); null); setTimeout( } </script> </head> <body onloori= Inputs from SD > Web Page using Ajax with XMl</h1> >...</span></p> <h1>Arduino Card > >..,</span></p> id- .. <p>Button 1 (pin 7): <span id- . </span></p> <p>Button 2 (pin 8): <span <p>Analog (A2): --spon id= </body> </htnl> Arduino ????????? ???-???????? ? SD-????? ? ?????????? ?? ? ???-???????. ????? ????????? ???-???????? ??? ????? ???????????? ? ???-????????. ???-???????? ???????? JavaScript, ??????? ???????????? ??? ????? ???????? Ajax. ???????? ????????, ??? ??? ??????????? ? ????????? HTTP ??? ???-???????? HTML - text/html. 3. Aj ax-?????? ?? ???-???????? ?????????? ?????? Ajax ?? Arduino (? ??????- ??? JavaScript ?????? ?????? ???????). ???? ?????????? GET /ajax_inputs&nocache=299105.2747379479 HTTP/1.1 i686; Host: 10.0.0.20 User-Agent: Mozilla/5.0 (Xll; Ubuntu; Linux rv:19.0) Gecko/20100101 Firefox/19.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip 4. Arduino ???????? ?? ?????? Ajax ??????? ?????? XML-?????, Arduino ???????? HTTP-??????????, ?? ??????? ???- ???? XML-????, ?????????? ??????? ???????? ?? Arduino. ????/1.1 200 ?? Content-Type: text/xml Connection: keep-alive <?xml version = ?> <inputs> <button1>ON</button1> <button2>OFF</button2> <analog1>394</analog1> </inputs> ???????? ????????, ??? ??? ??????????? ? ????????? HTTP ?????? text/xml. 5. ??????????? ?????? ???????, JavaScript ?? ???-???????? ????????? ??? ???????? Arduino ?? XML- ????? ? ?????????? ?? ?? ???-????????.

????? Arduino ? ???-???????? Arduino ????????? ?? SD-????? ????????? ???-????????: <!DOCTYPE htrnl> <html> <head> <title>Arduino SO Card Web Page using Ajax with XML</title> GetArduinoInput$() <script> function < = * Math.random() * l000000: nocache var request = new XMLHttpRequest(); request.onreadystatechange - function() < == 4) { if (this.readyState == 200) { if (this.status if (this.responseXML ! = null) { XML file // extract XML data from (containing switch states and analog value) document.getElementById( ).innerHTML = this.responseXML.getElefnents8yTagNanie( = )[0] .childNodes[0] .nodeValue; document.getElementById( ).innerHTWl = this.responseXML.getEle(nentsByTagNawe( )(0J.childNodes[0].nodevalue; document.get£lement6yld( ).innerHTML t s8yTagName( this.respon seXML.ge t E1emen )[0].ch ildNodes[0].nodeValue; > > } } request.open( , + nocache, true); request. send( null); setTimeout( , 1000); > </script> </head> <body onload= > <hl>Arduino Inputs from SD Card Web Page using Ajax with XMl</h1> <p>Button 1 (pin 7): <span id= >...</span></p> <p>Button 2 (pin 8): <span id= >..,</span></p> <p>Analog (A2): <span id= >...</span></p> </body> </html> ?? ????, ??? ?? ?? ???-????????, ??????? ???? ?????????? Arduino ? ????? 9 ????? ???????????, ?? ?? ?????????? ??????????? (?????? ????????? ??????). ??????? ??????? JavaScript ?? ???-???????? ???? ????????????? ? GetArduinoInputs(). ??????? ??-???????? ?????????? ?????? Ajax ?????? ???????. ?????? ?? ??- ???????? ajax_inputs ? ???????? GET. ? Arduino, responseText: ????????? ???? XML ???????????? ??????? ??????? ?????? ???????- ??, ???????? ?? responseXML ?????? ?????? if (this.responseXML != null) { ?????? ??????????? ?? ??????????? XML, ??? ??????? ????. HTML ??????? ??? ??????????? ???? ??????? ??????, ?? ?????? ??? ??????? HTML ????????, ????????????? ? Arduino. ?????? ????? ???????? ???????? HTML, ???-

??? ???????? ????? ?????????? ?????????????. ????? ??????? JavaScript ????????? ??????????? ???????? ?? XML-????? ? ???- ??????? ????????? ??? ????????. ??? ?????? ????? ?? (...) ? ?????? ?????? ????????? ?? Arduino. ?????- ??????? ?????????? ????????? ??? ??? ????????? ??????? ????????? ??? ?? ?????? (????? ??????? ??? ??? ????????? \"inputl\"): document.getElementByld(\"inputl\").innerHTML = ?????????? XML-?????? ?? ??????????? XML-????? ? ??????? ????????? ?????? XML-?????? ??????????? ????: this.responseXML.getElementsByTagName(f buttonlf) [0] .childNodes[0] .nodeValue; ? ???? ???? ???????????? this.responseXML ?????? this.responseText, ??? ? ?????????? ????????. ?????? ? ??????? ???? ? XML ????? ???????? ?????? ? ??????? ??? ????? this.responseXML.getElementsByTagName(? buttonlT) , ?? ??????? JavaScript. ???? ?? ????????? ? ?????? ???? ????? ??????????? ? ??????? «?????? ? XML» ??? ????? ? ?? ??????? ??????? XML-?????, ?? ???????, ???? ???? ? ??????????? ?? ?? ???????. ???? ???????????? ??? ??? ????? ??????, ?? ?????? ? ??????? ???????? ???? ?????? ????? ???? ?? ???????? ????????? ???????: this.responseXML.getElementsByTagName(fbuttonf)[0].childNodes[0].nodeValue; this.responseXML.getElementsByTagName(fbuttonf)[1].childNodes[0].nodeValue; ??? ???????, ???? ???? ????????? ??????, ??????? ?? ?? ?????? ??????????? ????????? ???????? ?????????? ????. ????? ? ????? ?????? ? JavaScript ? ????- ??? ?????. ? ??????? ??? ???? ????? ???????? ?????? ????? ????????? ? ??? ???????, ???????: ????????? ? ????. ?????? ? ????? XML ????? ???????? ? ????? ?????????? this.responseXML.getElementsByTagName(f buttonf) .length ????? ??????? /* e th_websrv_SD_A j ax_XML Program: Description: Arduino web server that serves up a web page and Hardware: that displays the status of two switches one analog input. The web page is stored on the SD card. code The web page contains JavaScript that uses of the switches Ajax and XML to get the states and value of the analog input. Arduino Uno and official Arduino Ethernet shield. Should work with other Arduinos and compatible Ethernet shields. FAT16. SD card formatted 2Gb micro Push button switches interfaced to pin 7 and 8 to A2 of the Arduino. Potentiometer interfaced

analog input. Developed Software: using Arduino 1.0.5 software References: Should be compatible with Arduino 1.0 + Date: Modified: SD card contains web page called index.htm Author: - Webserver example by David A. Mellis and modified by Tom Igoe - SD card examples by David A. Mellis and Tom Igoe - Ethernet library documentation: http://arduino.cc/en/Reference/Ethernet - SD Card library documentation: http://arduino.cc/en/Reference/SD 27 March 2013 17 June 2013 - removed the use of the String class http://startingelectronics.org W.A. Smith, */ #include <SPI.h> #include <Ethernet.h> #include <SD.h> // size of buffer used to capture HTTP requests #define REQ_BUF_SZ 50 // MAC address from Ethernet shield sticker under board byte mac[] ={ OxDE, OxAD, OxBE, OxEF, OxFE, OxED }; 168, 0, 20); IPAddress ip(192, // IP address, may need to change // // depending on network // EthernetServer server(80); create a server at port 80 File webFile; the web page file on the SD card char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string char req_index =0; // index into HTTP_req buffer void setup() { // disable pinMode(10, Ethernet chip digitalWrite(10, OUTPUT); HIGH); Serial.begin(9600); // for debugging // initialize SD card Serial.println(\"Initializing SD card...\"); if (!SD.begin(4)) { Serial.println(\"ERROR - SD card initialization failed!\"); failed return; // init file!\"); } to Arduino to Arduino Serial.println(\"SUCCESS - SD card initialized.\"); // check for index.htm file { if (!SD.exists(\"index.htm\")) find - Can't index Serial.println(\"ERROR find index.htm file return; // can't } Serial.println(\"SUCCESS - Found index.htm file.\"); pinMode(7, INPUT); // switch is attached pin 7 attached pin 8 pinMode(8, INPUT); // switch is Ethernet.begin(mac, ip); // initialize Ethernet device

server .begin () ; // start to listen for clients } void loop() { EthernetClient client = server.available(); // try to get client if (client) { // got client? boolean currentLinelsBlank = true; while (client.connected()) { if (client.available()) { // client data available to read char ? = client.read(); // read 1 byte (character) from client // buffer first part of HTTP request in HTTP_req array (string) // leave last element in array as 0 to null terminate // string (REQ_BUF_SZ - 1) if (req_index < (REQ_BUF_SZ -1)) { HTTP_req[req_index] = c; // save HTTP request character req_index++; } // last line of client request is blank and ends with \\n // respond to client only after last line received if (c == f\\nf && currentLinelsBlank) { // send a standard http response header client.println(\"HTTP/1.1 200 OK\"); // remainder of header follows below, depending on if // web page or XML page is requested // Ajax request - send XML file if (StrContains(HTTP_req, \"ajax_inputs\")) { // send rest of HTTP header client.println(\"Content-Type: text/xml\"); client.println(\"Connection: keep-alive\"); client.println(); // send XML file containing input states XML_response(client); } else { // web page request // send rest of HTTP header client.println(\"Content-Type: text/html\"); client.println(\"Connection: keep-alive\"); client.println(); // send web page // open web page file webFile = SD.open(\"index.htm\"); if (webFile) { while(webFile.available()) { client.write(webFile.read()); // send web page // to client } webFile.close() ; } } // display received HTTP request on serial port Serial.print(HTTP_req); // reset buffer index and all buffer elements to 0 req_index = 0; StrClear(HTTP_req, REQ_BUF_SZ); break; } // every line of text received from the client ends with r\\ \\n if (c == 'n\\ ') { // last character on line of received text

// starting new line with next character read currentLinelsBlank = true; } else if (c != fr\\ f) { // a text character was received from client currentLinelsBlank = false; } } // end if (client.available()) } // end while (client.connected()) delay(1); // give the web browser time to receive the data client.stop(); // close the connection } // end if (client) } // send the XML file with switch statuses and analog value void XML_response(EthernetClient cl) { int analog_val; cl.print(\"<?xml version = \"\\ 1.0\\\" ?>\") ; cl.print(\"<inputs>\"); { cl.print(\"<buttonl>\"); ; if (digitalRead(7)) { cl.print(\"ON\"); ; } pin A2 analogRead(2); else { cl.print(\"OFF\") } cl.print(\"</buttonl>\"); cl.print(\"<button2>\"); if (digitalRead(8)) cl.print(\"ON\"); } else { cl.print(\"OFF\") } cl.print(\"</button2>\"); // read analog analog_val = cl.print(\"<analogl>\"); cl.print(analog_val); cl.print(\"</analogl>\"); cl.print(\"</inputs>\"); // sets every element of str to 0 (clears array) void StrClear(char *str, char length) { i = 0; i < length; for (int i++) { str[i] = 0; } } // searches for the string sfind in the string str // returns 1 if string found found // returns 0 if string not char char StrContains(char = 0; *str, *sfind) { = 0; char found char index char len;

len = strlen(str); if (strlen(sfind) > len) { return 0; } while (index < len) { if (str[index] == sfindffound]) { { found++; if (strlen(sfind) == found) return 1; } } else { found = 0; } index++; } return 0; } ???? ????? ? ???????? ???????? ???????????????? ??????? ?????? ?? ???????- ??? ????? ????? ?????. ???????? XML-????? ??????? XML_response () ????????? ? ???????? ? ???????? XML-????? ? ??? ???- ???????? ???????. ? ???? ????????????? ? ?????????? ???????? ??????????? XML ? ???????????? ? ???-???????. HTTP-????? ????????? ????? HTTP ?????? ?????????? ??????? ??????? ???? ??? HTML- ???????? ? XML-????? (?????/html ??? ?????/xml), ?? ??? ???????? ? ?????? ??? ???????? ????? ??????????? ???? ? ?????? ????????? HTTP. ??? ? ? ?????????? ????? ????? ???????????, ???-???????? ??????????? ?? SD- ????? ??? index.htm ? ????????????, ????? ??????? ?????????? ? ???-??????? Arduino. ?????? ?????? ?????????? ????????? ????????????? ? ????????????, ??? ???????? ?? ??????- ???????? ?? ????? 9 ????? ????? ???????????. ?????????? ???? index.htm ?? ????? micro SD ? ???????? ??? ? ?????? ??? ??????????? ????? micro SD ?? ????? Ethernet Shield. ???? index.htm ????? ??- ?? . ????????? ??????????? ???? ????? ? Arduino ? ???????????? ? Arduino ????? Ethernet Shield ? ??????? ???-????????. ?? ?? ??????? ???????????? ??????? ????? ???? ?????? ??????????? ? ?????? 9 ???????????, ?????? ?? ?????? ? ??? ???? ??????? ?????????? ????????, ??????- ?????? ? Arduino, ??? ????????????? ?? ???-????????. ???-???????? ???-???????? ????? ??????????? ?????? ? ???????? ? ???? ? ?????? index.htm:

<!DOCTYPE html> <html> <head> <title>Arduino SD Card Web Page using Ajax with XML</title> <script> GetArduinoInputs() function { = \"&nocache=\" + Math.random() * 1000000; nocache var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseXML != null) { // extract XML data from XML file // (containing switch states and analog value) document.getElementById(\"inputl\").innerHTML = this.responseXML.getElementsByTagName(fbuttonlf)[0].childNodes[0].nodeValue; = document.getElementById(\"input2\").innerHTML this.responseXML.getElementsByTagName(fbutton2f)[0].childNodes[0].nodeValue; = document.getElementById(\"input3\").innerHTML this.responseXML.getElementsByTagName(f analoglf) [0] .childNodes[0] .nodeValue; } XML</hl> } } } request.open(\"GET\", \"ajax_inputs\" + nocache, true); request.send(null); setTimeout('GetArduinoInputs() f, 1000); } </script> </head> <body onload=\"GetArduinoInputs()\"> <hl>Arduino Inputs from SD Card Web Page using Ajax with <p>Button 1 (pin 7) : <span id=\"inputl\">. . .</spanX/p> <p>Button 2 (pin 8) : <span id=\"input2\">. . .</spanX/p> <p>Analog (A2) : <span id=\"input3\">. . .</spanX/p> </body> </html> ???? ????????: 28 ????? 2013 ?. ????? 15. ????????? ARDUINO, ???-??????? ???????? ???????????? ?????????? ????????? ????????? ???????????? ??? ??????????? ??????????? ???????? ? ??- ????? ???? ?? ?????????? ????????? Arduino ?? ???-????????3. ????????? ?????- ?????? ? ??????? Ajax. 3 https://www.youtube.com/watch?v=ttH5Kal3FjM

????????? ??????? ?? JavaScript ? ?????????? HTML5. ????????? ???????????? ??? ????????? (??????????????????) ? ?????? ????????????? ??? ??????????? ?????????? ??????????? ???????? ?????? ?? ????????? Arduino. ???????? ?????- ?????? ?????? 200 ??. ????? Arduino ? ???-???????? ????????? ????????? ??????? ???????? ?????????4. ??? JavaScript ?? ????? ?? gauge.min.js ????????????? ???-???????? ? ???? ????? ???????????. ????. ????? Arduino ??????? /* ? th_websrv_SD_A j ax_gauge Program: Description: Arduino web server web page displays Arduino Hardware: analog value on a dial gauge. on the Software: The web page is stored SD card. References: value Ajax is used to update the analog on the Date: Modified: web page. Author: Arduino Uno and official Arduino Ethernet shield. Should work with other Arduinos and compatible Ethernet shields. FAT16. SD card formatted 2Gb micro Potentiometer interfaced to A2 analog input. Developed using Arduino 1.0.5 software Should be compatible with Arduino 1.0 + SD card contains web page called index.htm - Webserver example by David A. Mellis and modified by Tom Igoe - SD card examples by David A. Mellis and Tom Igoe - Ethernet library documentation: http://arduino.cc/en/Reference/Ethernet - SD Card library documentation: http://arduino.cc/en/Reference/SD - Gauge from: https://github.com/Mikhus/canv-gauge 27 March 2013 19 June 2013 W.A. Smith, http://startingelectronics.org */ #include <SPI.h> #include <Ethernet.h> #include <SD.h> // size of buffer used to capture HTTP requests #define REQ_BUF_SZ 50 // MAC address from Ethernet shield sticker under board byte mac[] ={ OxDE, OxAD, OxBE, OxEF, OxFE, OxED }; 168, 0, 20); IPAddress ip(192, // IP address, may need to change // // depending on network 80 // SD card EthernetServer server(80); create a server at port File webFile; the web page file on the 4 ftp://homelab.homelinuxserver.org/pub/arhiv/2023-02-al.zip

char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string char req_index =0; // index into HTTP_req buffer void setup() { // disable pinMode(10, Ethernet chip digitalWrite(10, OUTPUT); HIGH); Serial.begin(9600); // for debugging // initialize SD card Serial.println(\"Initializing SD card...\"); if (!SD.begin(4)) { Serial.println(\"ERROR - SD card initialization failed!\"); failed file!\"); return; // init } Serial.println(\"SUCCESS - SD card initialized.\"); // check for index.htm file { if (!SD.exists(\"index.htm\")) find - Can't index Serial.println(\"ERROR find index.htm file return; // can't } Serial.println(\"SUCCESS - Found index.htm file.\"); Ethernet.begin(mac, ip); // initialize Ethernet device server.begin(); } // start to listen for clients void loop() { EthernetClient client = server.available(); // try to get client if (client) { // got client? boolean currentLinelsBlank = true; while (client.connected()) { if (client.available()) { // client data available to read char ? = client.read(); // read 1 byte (character) from client // buffer first part of HTTP request in HTTP_req array (string) // leave last element in array as 0 to null terminate // string (REQ_BUF_SZ - 1) if (req_index < (REQ_BUF_SZ -1)) { HTTP_req[req_index] = c; // save HTTP request character req_index++; } // last line of client request is blank and ends with n\\ // respond to client only after last line received if (c == f\\nf && currentLinelsBlank) { // send a standard http response header client.println(\"HTTP/1.1 200 OK\"); // remainder of header follows below, depending on if // web page or XML page is requested // Ajax request - send XML file if (StrContains(HTTP_req, \"ajax_inputs\")) { // send rest of HTTP header client.println(\"Content-Type: text/xml\"); client.println(\"Connection: keep-alive\"); client.println(); // send XML file containing input states XML_response(client);

} else { // web page request // send rest of HTTP header client.println(\"Content-Type: text/html\"); client.println(\"Connection: keep-alive\"); client.println(); // send web page // open web page file webFile = SD.open(\"index.htm\"); if (webFile) { while(webFile.available()) { client.write(webFile.read()); // send web page // to client } webFile.close() ; } } // display received HTTP request on serial port Serial.print(HTTP_req); // reset buffer index and all buffer elements to 0 req_index = 0; StrClear(HTTP_req, REQ_BUF_SZ); break; } // every line of text received from the client ends with r\\ \\n if (c == 'n\\ ') { // last character on line of received text // starting new line with next character read currentLinelsBlank = true; } else if (c != f\\rf) { // a text character was received from client currentLinelsBlank = false; } } // end if (client.available()) } // end while (client.connected()) delay(1); // give the web browser time to receive the data client.stop(); // close the connection } // end if (client) } // send the XML file containing analog value cl) void XML_response(EthernetClient { int analog_val; cl.print(\"<?xml version = \"\\ 1.0\"\\ ?>\"); cl.print(\"<inputs>\"); // read analog pin A2 analog_val = analogRead(2); cl.print(\"<analog>\"); cl.print(analog_val); ; cl.print(\"</analog>\") cl.print(\"</inputs>\"); } // sets every element of str to 0 (clears array) void StrClear(char *str, char length) { for (int i = 0; i < length; i++) { str[i] = 0; }

} // searches for the string sfind in the string str // returns 1 if string found found string not char // returns 0 if = 0; *str, char StrContains(char = 0; *sfind) { char found char index char len; len = strlen(str); if (strlen(sfind) > len) { return 0; } while (index < len) { if (str[index] == sfind[found]) { { found++; if (strlen(sfind) == found) return 1; } } else { found = 0; } index++; } return 0; } ???? ????? ???????????? ????? ?????? ?????????? ?????? ?????? ?? ?????????? ????? ????? ????? (????? 14). ????? ?????????? ???? ?????????? ???????? ? ???????? ?2 Arduino ? ???- ???????, ??????? ????? ?????????? ?? ????? ?? ???-????????. ?????????? ?????- ??? ??????????? ?? ???-???????? ? ??????? Ajax, ? ???????? ???????????? ??? ????? ????? XML ?? Arduino. ???-????????, ??????????? ?? ???-??????? Arduino, ???????? ?? ????? micro SD ? ????? Arduino Ethernet Shield. ???-???????? ??? ????? ??????? ???????? ????. <!DOCTYPE html> <html> <head> <title>Arduino Ajax Dial</title> <scnpt> var data_val = 0; eval(function(p,a,c,k,e, r){e=function(?){return(c<a? :e(parseInt(c/a))) + ((c=c%a)>35?Stnng.f romCharCode(c-»-29) :c.1 function GetArduinoInputs() { - ? Math.random() * 1000000; nocache var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) { if (this.responseXML != null) { document.getElementById( ).innerHTML = this.responseXML.getElementsByTagName( )[0].childNodes[0].nodeValue; )[0].childNodes[0].nodeValue; data_val = this.responseXML.getElementsByTagName( > } > >

request.open( , + nocache, true); , 200); data-max-value= request.send(null) ; setTimeout( } > </scnpt> </head> Ajax Dial</h1> <body onload^ (A2): <span id= >...</span></p> <h1>Arduino id= data-n.ajor-ticks = <p>Analog data-type= data-onready= data-min-value= <canvas > </canvas> </body> </html> ???-???????? — ??? ???????????????? ?????? ???-????????, ?????????????? ? ?????????? ????? ????? ???????????. ????????? ????????? ?????????? ????????? ??? ???-???????? ????? ??????? ???? ????? ? ????????? ?????? script HTML-???? ???-????????. ???????????? ????????? ? ??????? ???? canvas HTML5 ? ???? HTML. ?????????? ?????????? ?????????? ???????? ?? Arduino ??????????? ??? ??, ??? ? ? ?????????? ????? ????? ????? ???????????, ? ???????????? ? ??????? ???-???????? ??? ??, ??? ? ??? ? ?????????? ????? ????? ???????????. ?????????? ? ???????? ????? ??????????? ? ?????????? JavaScript data_val, ????? ?????? ???????????? ???. ???????? ? data_val ?????????? ?????????? ??????? ?????? JavaScript ? ???????? data-onready ???? canvas: setlnterval(function(){Gauge.Collection.get(fan_gauge_lf) .setValue(data_val) ;},200) ; 200 ? ??????????? ???? ?????? ????????? ??????? ????????? ?????? 200 ?? (200 ???????????). ???????????? ?????? ??????????? ?????? 200 ??, ? ?????? Ajax ??? ??????????? ???????? ????? ?????????? ?? 200 ??. ?????????? ?????? ????? ??? Ajax-?????????? ??????????? ? ???? ?????? ???? JavaScript ? ???-????????: setTimeout(fGetArduinoInputs() !, 200) ; ??? ??????? ?????????? ????? ??????? ???????? ? ??????????? ??? ????????? ?????????? ????. ???? ???? ?????-???? ????????, ???????? ??? ???????? ?? ????? ?????? 1000, ?????????? ???????? ??????????? ???????. ?????? ?????? ?????????? ????????????, ??? ???????? ?? ?????????????? ????? ? ????? 9 ?????????? ????? ??????????? — ???????? ??????, ?? ?????, ????????????, ??? ?? ????? ??????????????. ?????????? ???-???????? (index.htm) ?? ????? micro SD ? ???????? ?? ? ???? ???? ??? ????? Arduino Ethernet Shield. ???????? ??? ???-???????? ? ?????? ? ?????? (?????? 4 ????).

????????? ??????????? ???? ????? ?? ???-?????? Arduino. ????? 16. ????/????? ???-??????? ?? SD-KAPTE ? ???? ????? ????? ??????? ???, ? ??? ?? ???????? ?? ??? ???. HTML, ???????????? JavaScript, CSS, HTTP, Ajax ? SD-????? ??? ???????? ???- ????????, ??????? ?????????? ?????????? ? ???????? ????? Arduino ? ????????? ????????? ????????? ????????. ???-????????, ?? ??????? ???????????? ?????? ???????? ???-?????? Arduino ?????????? ??????? ???????? ? ????????? ???? ??????????????. ???-???????? ??- ??????? ????????? ???????? ???????????? — ????? ???????????? ????? ????????? ? ??????? ???????, ? ????? ???????????? — ? ??????? ??????. ????? ? ???-??????? Arduino ?????????? ????? ?????? ??????????5 (???- ????????), ?? ?????? (??????????), ?????????? ? ??????? ?????? ??????????, ?. ?. ??? ????????? ????? ????????? ?? ?????? ??????????, ?????? ??? ??????- ??? ?????????? ? ?????? ??????????, ?????? ????? ????? ????????????? ???????- ??? ?? ?????? ??????????. ??? ???? ????? ??????????? ???????? ????: ?????????????? ????? ARDUINO 5V UNO &. ETHERNET ?2 SHIELD ?? ?4 ?5 2 -?. SW1 3 5 -O O- ^ SW2 -o o _CJi sw3 -O O Rl R2 R3 ci 6 -c Ik 72 ?> ? ?7?? T?F Q *4 GND 5 https://v7ww.youtube.com/watch?v=4ZQlbqQ60tU ? ????? A3 ??? ????????? ? ???????? ??????????, ?4 ??? ????????? ????? ???????? ? GND, a A5 ??? ????????? ????? ???????? ? +5V - ?? ?????????????? ????? (??. ????) ?? ????????.

????? ????, ??? ???-??????? ???????? ? ???????? ???-???????? ? ???-??????? Arduino, JavaScript ?? ???-???????? ????? ?????? ??????? ?????????? Ajax- ?????? ?????? ? Arduino. ???-????????, ??????? ????????? ?? ???-??????? Arduino, ???????? ????: Arduino Aj ax I/O Analog Inputs Switch Inputs LEDs Using LEDs Using ?? used by Lthernet DO: used by serial RX Checkboxes Buttons shield LED 3 is ON LED 1 (D6) (D8) 1)1: used by serial TX ? LED 2 (D7) LED 4 is OFF Al used by Lthernet shield (D9) Switch 1 (D2): OFF A2: 655 Switch 2 (D3): OFF A3: 510 ?: used by Lthernet A4:0 shield A5: 1023 1)10 to 1)13 used by Switch 3 (D5): OFF Lthernet shield Arduino ????? ???????? ?? ?????? ?????? Ajax, ????????? XML-???? ??????? ? ???-???????. ???? XML ???????? ???????? ??????? ?????????? ?????? Arduino (?? ?2 ?? ?5) ?? 5) ? , ????????? ???? ????????? (????????????? ????????? 2, 3 ? ????????? ??????? ???????????: <?xml version = ?> <inputs> <analog>655</analog> <analog>510</analog> <analog>0</analog> <analog>1023</analog> <switch>OFF</switch> <switch>OFF</switch> <switch>OFF</switch> <LED>checked</LED> <LED>unchecked</LED> <LED>on</LED> <LED>off</LED> </inputs> ????? ????????? ?????????? ? ???-???????? ????? ????????? ??????, ???????? ????????? (???????? JavaScript ?????? ?????????? ??? ????????? ???- ???????) ?? ????????? ???????? Ajax. To ?? ????? ??????????, ???? ????????? ???????? ??? ???? ???? ?? ?????? ???????????? ??? ????????? ??? ?????????? ??????????. ???????? ??? ??? ?????? Arduino, ??? ? ???-???????? ??????? ?????, ????? ?????????? ??. ???????????? ????????? ??? ????? ?? ??????: ?? ftp://homelab.homelinuxserver.org/pub/arhiv/2023-02-a2.zip ????? ????? ????????? ???? ??????, ??????? ?????????? ???-???????? (index.htm) ????? ??- ?????? ???? ?? ????? micro SD. ???????? ????? micro SD ? ???? ??? Ethernet Shield. ????? Ethernet Shield ?????? ???? ?????????? ? Arduino, ?????????? ? ????? ???? ? ???????? ?? USB ??? ???????? ????????? ????? .

????????? ??????? ?????, ??????? ??????. ???? ?? ?????? ?? ??????????? ? ??????? ?????????, ??? ????? ?????? ????????????? ????????? ???????, ????? ?????????? ???. ?????? ????? ????? ???? ????????? ? ???????? ??? ??????? ?????? ????? ????????, ???? ?? ?? ?????? ?????????? ?? ? ?????????????? ??? ?????????????. ????? Arduino (eth_websrv_SD_Ajax_in_out) ?? ?????? ???? ? ????????? Arduino. ????????? ? IP-??????, ?????????? ? ??????, ? ??????? ???-???????? — ?? ??- ?????? ??????? ??????????? ???-????????, ? ?????????? ???????? ? ???????? ??????????? ???????????? ?????? ???????. ??? ???????? ?????? ????? Arduino ? ???-???????? ? ???????? ???????????? ????? ???????????????? ?????? ???? ?? ?????????? ???????? ? ???? ???????????, ????????? ?? ???????- ??? ??????. ????? ???????????? ????? ???????????????? ?????? ????????, ? ??- ????? ???????????? Ajax ? XML (????? 14 ? ????? 15). ?????????? ? ???????? ????? ?????????? ????? (?????????? ????????) ? ???????? ????? (????????? ???????- ???????) ????????????? ? ??????????? ??? ??, ??? ??????? ? ????? 14 ????? ??- ?????????, ?? ??????????? ????, ??? ??? ?????????? ???????? ????????? ? ???? ? ????????? ?. ??? <analog>, ?????????????? ????????? ? ????? <switch> — ?. ?? ?????????? ?????????? ????? ????? ??? ??????? ?????. ????? JavaScript ?? ???-???????? ???????? XML-???? ?? Arduino, ?? ????????- for ??? ??- ?? ???? ???? for ??? ?????????? ?????????? ???????? ? ?????? ???? ???????? ????????? ??????????????. ?????????? ???????? ??? JavaScript ??? ?????????? ?? XML-????? ??????? ??- ?? : var num_an = this.responseXML.getElementsByTagName('analog1).length; for (count = 0; count < num_an; count++) { document.getElementsByClassName(\"analog\")[count].innerHTML = this.responseXML.getElementsByTagName('analog1)[count].childNodes[0].nodeValue; } ?????? ?????? ???????????? ???? ???? ???????? ?????????? ????????? XML- ?????, ??????????? ? ???? <analog>, ? ????????? ?? ? ?????????? num_an, ????- ???- ??? ????? ???????????? ? ????? for ??? ????????? ??????????? ?????????? ??????? ????????. ? ????? for ????????? ??? ???????? ?????? span HTML, ??????? ????? analog: document.getElementsByClassName(\"analog\")[count].innerHTML ??????? ???????? ?????? ??????? span ? ????????? HTML: ???????? <?>?2 : <span class=\"analog\">. . .</spanX/p> <p>A3: <span class=\"analog\">. . .</spanX/p> <p>A4 class=\"analog\">. . .</spanX/p> <p>A5: : <span class=\"analog\">. . .</spanX/p> <span ????? ??? ?????? ???? ???????? ?????? ?????????? ?? XML-????? ??

???????: this.responseXML.getElementsByTagName('analog1)[count].childNodes[0].nodeValue; ????? ???????, ??????????? ???? ??? ?????? ???? JavaScript, ?????????? ???- ???, ???????? ?????? ?????????? ???????? ?? XML-????? ? ??? ???????, ? ????- ??? ??? ?????????? ? ?????, ? ????????? ??? ???????? ? ?????? span ? ??? ??- ????? , ? ??????? ??? ?????????? ? HTML. ???????? ?????????????? ???????? ????? ?? ???????, ?? ?????? HTML span ? ?????? ?????? switches ????? ???????? ?? XML-????? ? ??????????? ? ???? ????? switch ? ??? ???????, ? ??????? ??? ??????????. ?????????? Arduino ???????????, ????? ?????????? ????????, ? ????? ?????????. ??? ??- ? ????? ??- ???????? ???????????? ??????? ??? ????? XML-????? ?? Ajax-??????, 1 ????? ??????????? ?????? ???????. ? ?????? Arduino ????????? ?????? ?????? ????????? ??????????? (????????? ??? «???????????» ?????????? ? 0 ??? «????????????» ??????????): boolean LED_state[4] = {0}; // stores the states of the LEDs ???? ?????? ???????????????? ?????? — ??? ?????????? ?????????. ?????? ???- ?????????? ? LED4, ?.?. ???? ??????? ????????????? ??????? ?? LED1 ?? ? ?. LEDl, LED_state[l] LED2 LED_state[0] ?????? ????????? ?????? ????????? ?. ?????????? ? ?????????????? ??????? ? ???? JavaScript ????????? ?????? ???? ??????????, ??? ????????? ????????- ?? ??????????? ? ???????????? ?? 1 ??????????? XML-????? ??? ?????????? ????- ??? ???????, ??, ?. ?. ??? ??????? ??? ??? ??????????? ? ??????????? ?? ??- ??????? ??????????. // LED 1 LED f) [0] .childNodes[0] .nodeValue if (this.responseXML.getElementsByTagName(f === \"checked\") { document.LED_form.LEDl.checked = true; } else { = false; document.LED_form.LEDl.checked } ? ??????????? ???? ????, ???? ?????? ???????? (?. ?. ??? ?????????? 1) ?? XML-????? ? ???? <LED> ???????? ???????, ??????????????? ?????? ???????????- ???? ? ??????? ???? ?????? JavaScript: document.LED_form.LEDl.checked = true; ? ????????? ?????? ?????? ????. ??? ???????????, ??? ?????? ???????, ??????? ???????????? ? ???-??????? ?????? Arduino, ?????????? ?????????? ????????? ???????????, ??? ??? ???????? ????????? ??????????? ?????? ???????. ????? ???????????? ????????????? ??? ??????? ??????, ????????? ?????? Ajax HTTP GET. ???- ????? ???????? ??? ?????????? ? ????????? ?? ????????? ???????? ??????? JavaScript GetCheck() ??????????? ?????? ???, ????? ??????????

???. ???? ?????? ??? ?????????? 1 ??????????, ?? ??????????????? ???????? ??? 1: ?????? ?????????? strLEDl = \"&LED1=1\"; ???? ?????? ????, ?????? ??????????????? ????????? ???????: strLEDl = \"&LED1=0\"; ??? ????????? ?????? ??????? GetArduinoIO(), ??????? ?????????? ?????? ??- ? ?????, ?????? strLEDl ??? ?? ????? ??????. ??? ?????? ?????? ????? ???????? ?????? GET: request.open(\"GET\", \"ajax_inputs\" + strLEDl + strLED2 + strLED3 + strLED4 + nocache, true); ??? ????????? ?????? ??????????? ????? ???????, ???? ?????? ??? ?????? ?? ???? ? ?????? ??????, ??????? ??? ?? ????? ???????? GET. ??? ?????? ????? ?????????? ??????? ?? ????????? ??????????? ????? ?????- ????? ???????: strLEDl = \"\"; strLED2 = \"\"; strLED3 = \"\"; strLED4 = \"\"; ????? Arduino ???????? ?????? Ajax GET, ??????? SetLEDs() ? ?????? Arduino ????????? ?, ???? ????????? ????????? ?????????? ? ?????????? ??????? GET, ????????? ???????, ???????? ??? ????????? ??????????????? ?????????, ? ????? ????????? ?????????? ? ?????? LED_state[]. ?????????? ? ??????? ?????? ??????, ??????????? ????????????, ???????? ??? ??, ??? ??????, ?? ???????- ??? ?????? ????- ???? ????, ?????? ????? ???? ??????????? ??????? JavaScript, ??? ??????????? ??? ??????? ??????. ????? ?? ??????? ???????????, ????? ???????? ????????? ???????????, ??????- ?? ??? ?????????. ???????? «checked», ??????? ??????? ????????? ?????????? ? ??????????: ?????? ?? ????? ?????? ?????? ??????????? var LED3_state = 0; var LED4_state = 0; ?????????? ????????? ?????? ??????????, ????? ??? ????????? ??????? ?????? ???? ????????, ??????? ?? ????????? ??????, ???????????? ? ???????? GET, ??? ????????? ??? ?????????? ??????????. ????? Arduino ?????????? ????????? ??????????? ? XML-?????, ??????? ?????- «????????» ???? ??????, ?? ????????? ??? «?????????» ????? ?????? <LED> ???- ??? «????????» ??? «?? ????????», ??? ??? ???????? ??? ???????. CSS CSS, ???????????? ? ???? ???????, ???????? ?????? ????? ??????? ??? ?????- ??? ?????? ? ???? ??????????? ???? ? ????? ??????. ?? ????? ????????? ??????? ?? ??????, ????? ????1 ? ??????. ???? ?????? ???? ???????? ????????? ?? ????

?????? ???????????? ???? ????? ?????. CSS ? ???? ????? ??????????? ?? ????? ??????????? ?????, ?? ????? ???????? ? ????????? ?????? ????? ???????????, ??? ?? ?????????? ?????? CSS. ????? 17. ?????? ? ????? HTML ? ??????? CSS ? JAVASCRIPT ? ???? ????? ???????????? ??? ???????? ?????? ? ????????? HTML (?????) ? ??????? CSS ? JavaScript, ????? ????????? ????? CSS ? ????????? ? ????????? ?????????? ? ??????? JavaScript. ????????????, ??? ????????? ?? ???? HTML, ????????? ????????????? ? ????? ???????. ?????? ?? ??????????? ???? ???????? ????? ??????????? ? ????????? ? ???? ????? HTML (????????, index.htm) . ????? ???? ????? ????????? ? Arduino, ???? ??? ??????????, ?????? ??????? ? ????? 4 ????? ???????????. ? ???????? ???????????? ?????? ?????? ????? ??????? ? ?????????? ? ???- ???????? ??? ????????????? Arduino. ?????? ? ????????? HTML ?????? ? ????????? HTML ????????? ??? ????, ????? ? ??? ????? ???? ?????- ???????? ??????? ???? ????? CSS ? ????? ?? ????? ?????? ? ???? ????????? ? JavaScript, ????? ???????? ?? ??? ?????????????? ???. ?????????? ??? ???????? ?????? ??????? ??? ?????? ?? ???????? HTML ? CSS: 1. ???????? ???? ?? ??????? HTML ?? ????? ??? HTML, ????????, ? ??? ?????? ?? HTML-??? ?????? - <?> 2. ????????? ?????????????, ????????, <? id=ffred_textn>HeKOTopbrii ?????</?> 3. ????????? ?????</?> ?????, ????????, <? class=ffred_textn>HeKOTopbrii ?????????? ??? ??????? ????????????? ??????? ????? ????? ?????????????? ? ???????? HTML. ?????? ?? ?????????? ?????? ??????? ?? ????????????????? ???????. ?????? ?? ????? ???????? HTML ???? ????? ??? ??? ????????????????? ? ????? 12 ????? ??????????? ? ??????- ??????? ? ????? 16 (?????????? ?????). <!DOCTYPE html> <html> <head> <title>Arduino SD Card Web Page</title> <style type=\"text/ess\"> P{ arial, verdana, sans-serif; font-family: 12pt; #6B6BD7; font-size: color: } </style> </head> <body> SD Card Page with CSS</hl> web <hl>Arduino to the Arduino page with CSS styling.</p> <p>Welcome </body>

</html> ? ??????????? ???? HTML-???? ? CSS ????? CSS ??????????? ? ??????? ?????? ???-????????. ??? ???????? ????? ????????? ? ?????? ?? ????? ??? HTML- ???????? ?: ?{ anal, verdana, sans-serif; font-family: 12 p t; #6B6BD7; font-size: color: > ????? ????? ????????? ? ?????? ????????? HTML ????? ?? ???????, ???????? ?? ????? ?? ????? HTML, ????????, hi, h2, h3, div, span, b ? ?. ?. ???? ????? ???????????? ??? ????????? ????? ?? ????????? ??? HTML-????????? ?? ????????. ??? ????? ?? ????????? ????? ??????????????, ???????? HTML- ???????? ????????????? ??? ??? ??????. ?????? ?? ?????????????? ????????????? ????????????? ????? ????? ???????????? ?????? ???? ??? ?? ???-????????. ????????????? ??? ?????????????? ?????????? ?????????, ??????? HTML ? CSS. ?????? ???????????? ??? ????-?? ????? ????, ??????? ?????????? ?????? ???? ??? ?? ????????. ????????????? ?????????????? ????? ????????? JavaScript ???????? ?????? ? ???????? ? ?????????????? ??????????? ????????- ?????? . ? ???? ??????? ???? ???????? ????????????? ??????????????: <!DOCTYPE html> <html> <head> <title>Arduino SD Card Web Page</title> <style type=\"text/ess\"> hi { font-family: arial, verdana, sans-serif; font-size: 16pt; color: blue; } P{ arial, verdana, sans-serif; font-family: font-size: 12pt; color: #6B6BD7; } #green_small { 9pt; font-size: green; color: } </style> </head> <body> <hl>Arduino SD Card Page with CSS</hl> <p>Welcome to the Arduino web page with CSS styling.</p> <p id=\"green_small\">This is a second paragraph.</p> <p>This is a third paragraph.</p> </body> </html>

??????????? ???? ??? ???????? ??????? ????????? ????? ?? ???-???????? ??? ???????? ? ????????: Arduino SD Card Page with CSS Welcome to the Arduino web page with CSS styling. This is a second paragraph This is a third paragraph. ??? ????? ?? ??????????? ???? ????????, ????? ?? ??????? HTML ????????? ?? ????? ??? ?????? ??? ??????????????, ?????? # ???????????? ? ????? CSS: #{ font-size: 9pt; color: green; } ????? ???? ????? ??????????? ? ???????? HTML ? ???? ???????????????: <? id=ffgreen_smalln>This is a second paragraph.</p> ????????? ??? ?????????????, ??? ?????? ???????????? ???????? ?? ???- ???????? — ????? ???????????? ?????? ??????????????, ?? ?????? ?? ??? ?????? ????? ?????????? ???. ????? ???????? ????????, ??? ????????????? ?????????????? ????? ? ?? ????- ??????- ?????, ??????? ??????????? ?? ???? ???????. ?????? ??????, ?? ??????? ????????, ????????????? ? ?????????????? ????? ?????? ?? ?????????. ?????? ?? ?????? ????? ???????? ??? ??, ??? ?????????????, ?? ??????????? ????, ??? ??? ???- ?????? ?????????? ?? ???????????? ????? ???? ?? ???-????????. ????? ????? (.) ? ????? ????????? ????? ?????? ?????? CSS, ????? ????????, ??? ?? ? ??????, ? HTML. ?? ? ???????? ID ??? ? ????????? ??????? ????????, ??? ????????? ????? CSS ? ????????? HTML, ??????? ????? ???????. <!DOCTYPE html> <html> <head> <title>Arduino SD Card Web Page</title> <style type=\"text/ess\"> verdana, hi { verdana, font-family: arial, sans-serif; sans-serif; font-size: 16pt; color: blue; } P{ font-family: arial, 12pt; font-size: #6B6BD7; color: } .red_big { font-size: 14pt; color: red;

} </style> </head> <body> <hl>Arduino SD Card Page with <span class=\"red_big\">CSS</spanX/hl> <p>Welcome to the <span class=\"red_big\">Arduino</span> web page with <span class=\"red_big\">CSS styling</span>.</p> <p>This is a second paragraph.</p> <p class=\"red_big\">This is a third paragraph.</p> </body> </html> ??????????? ???? ???????? ??????? ????????? ???-????????: Arduino SD Card Page with CSS Welcome to the Arduino web page with CSS styling. This is a second paragraph. This is a third paragraph. ???????? ????????, ??? ????? ?????? ??? ???????? ??? ? HTML-???? span, ??? ????????? HTML, ??????? ???- ? ? HTML-???? ? (????????). ?????, ??????????? ? ???- ?? ???????, ?????????????? ????? ?? ?????????. ????? CSS, ??????????? ? ????????? HTML ? ?????? ?????? red_big, ????? ????????, ??? ???? ?????, ????????? ?????, ????? ?? ????????? ? ??????: .red_big { 14pt; red; font-size: color: } ?????????? ??????? ??????? ???? ? ??? ?? ????? CSS ????? ????????? ? ?????????? ????????? HTML. ???- ????? HTML ????? ????? ??????????? ????? ?????????, ????????, ?????? ????? ?????? ???????? div. ???? ????????????? ??????: <!DOCTYPE html> <html> <head> <title>Arduino SD Card Web Page</title> <style type=\"text/ess\"> verdana, hi, p { font-family: arial, sans-serif; color: cyan; } hi { font-size: 16pt; } P{ 12pt; font-size: } div p { italic; font-style: letter-spacing: 5px; }

</style> </head> <body> <hl>Arduino SD Card Page with CSS</hl> <p>Welcome to the Arduino web page with CSS styling.</p> <divXp>This is a second paragraph.</pX/div> <p>This is a third paragraph.</p> <divXp>This is a fourth paragraph.</pX/div> </body> </html> ???? ? ????? CSS ???? ????? ????? HTML, ????? ??????????????? ??? ????? ????? ???????, ??????????? ???????, ?? ????????? ??????????? ? ??????? ?? ?????????. ????? CSS ??????????? ??? ? ???? hi, ??? ? ? ???? ? ? ?????????? ????????? ??????? ??? ?????, ? ????? ??????? ????: ????????? ?, ? { font-family: anal, verdana, sans-serif; color: cyan; } ? ??????????? ???? HTML-???? ? ????????? CSS ??????? ???? hi ? ?????? ???- ???????? ????????. ???? ? ????? CSS ???? ????? ????? HTML, ????? ??????????????? ??? ????? ???????, ?? ??????????? ???????, ?? ????? ??????????? ? ????????? ?? ???? ?? ????????? ???? ? ?????. ? ??????????? ???? HTML-???? ? ????????? CSS ????? CSS ??????????? ? ??????? ??????, ??????? ??????????? ? ???????? div HTML. ????? ??????? ?????: div p { italic; 5px; font-style: letter-spacing: } ??????????? ???? ????? ?????? ????? ???????? ? ????????? ????? ?????? ?? 5 ???????? ? ?????? ??????, ??????? ??????????? ?????? HTML-???????. ?????? ? ????????? HTML ? JavaScript ????????????? HTML ? ????? ??????? ????????? JavaScript ???????? ?????? ? ??????? ???? ????? HTML, ????? ???????? ?? ??? ?????????????? ???. ???? ?? ??????? ?? ?????? ?????? ????? ???????????, ?? ??? ?????? ??????? ? ????????? HTML ? ??????? JavaScript. ?????? ? HTML-????????? ? ???????????????? ? JavaScript ? ????????? ??????? ???????? , ??? ???????? ?????? ? ???????? HTML ? ?????? ID ?? JavaScript: <!DOCTYPE html> <html> <head> 6 : //www. you tube. com/watch? v=0f CuaWuPH5Y https

<title>Arduino SD Card Web Page</title> <script> var btn_count = 0; function ButtonCount() { btn_count++; document.getElementByld(\"btn_clicks\").innerHTML = btn_count; } to Count</button> times.</p> </script> </head> <body> <hl>Arduino SD Card Page with JavaScript</hl> <button type=\"button\" onclick=\"ButtonCount()\">Click <p>The button has been clicked <span id=\"btn_clicks\">0</span> </body> </html> ??????? JavaScript ButtonCount() ??????????? ?????? ???, ????? ?????????? ??????. ??????? ????????? 1? ?????????? btn_count ?????? ???, ????? ??????? ???????????. ???????? HTML-??? span ? ??????????????? btn_clicks, ????????? ???: JavaScript ????????? document. getElementByld (\"btn_clicks\") . innerHTML = btn_count; ?????????? ??????? ? span ? ???? ?????? HTML: <p>The button has been clicked <span id=nbtn_clicksff>0</span> times.</p> ??????? ???????? btn_count ????? ??????????? ? span HTML. ??????? ???????, ??? ?????? ???? ?? ???????? ????? ???????????? ??????????- ??? ? ?????? btn_clicks. ?????? ? ????????? HTML ? ??????? ??????? ? JavaScript ????????? ? ????? ??? ??? ?????????? HTML ? ?? ?????? ??????7: <!DOCTYPE html> <html> <head> <title>Arduino SD Card Web Page</title> <script> var btn_count = 0; var btn_count_0 = 0; 0; var num_classes = function ButtonCount() { btn_count++; = document.getElementsByClassName(\"btn_clicks\")[0].innerHTML btn_count; document.getElementsByClassName(\"btn_clicks\")[1].innerHTML = ; btn_count_0 btn_count_0++ ; // get the number of btn_clicks classes on the page document.getElementByld(\"btn_classes\").innerHTML = document.getElementsByClassName(\"btn_clicks\").length; 7 https://www.youtube.com/watch?v=9ko_kHKYrf4

} </script> </head> <body> <hl>Arduino SD Card Page with JavaScript</hl> <button type=\"button\" onclick=\"ButtonCount()\">Click to Count</button> <p>The button has been clicked <span class=\"btn_clicks\">0</span> times.</p> times.</p> <pX)r counting from 0 clicked <span class=\"btn_clicks\">?</span> <p>Number of \"btn_clicks\" classes on page: <span id=\"btn_classes\"X/spanX/p> </body> </html> ??? HTML-???? span ????? ???? ? ?? ?? ??? ?????? (btn_clicks) ? ???????? ? ???? JavaScript, ??? ???????? ?????: document .getElementsByClassName (ffbtn_clicksn) [0] . innerHTML = btn_count; ; document. getElementsByClassName (\"btn_clicks\") [ 1 ] . innerHTML = btn_count_0 ?????????? ????? HTML ?? ????????, ???????????? ??? ??? ??????, ????? ????- ???? ? ??????? ????? ????: document. getElementsByClassName (ffbtn_clicksn) . length ; ??? ????????????? ? ??????? ???? ? ???? ?????? ?????? ????? ???????? ?????? ? ?????. ?????? ???? HTML ? ?????????? ?????? ?????? ???????? ?? ???????? ? ??? ???????, ? ????. ??????? ??? ??????????? ????? 18. CSS ??? ????????????????, ???????? ? ?????????? ????? 16 ????? ??????????? ?????????? CSS ??? ???????????????? HTML- ????????? div, ?????????? ??????? ? ???????? ?????? Arduino. CSS ????? ????- ???? ? ????????? ???????? div. ? ???? ????? ??????????? ??????????? ????????- ????? CSS ??? ????????????????, ????????? ???????? ? ??????????, ??? ??? ???? ? ????? 16. ????????? ??????? ???-???????? ??????? ?? ?????? ?????? ?????? ???????? ?? div. ???????? div ????????????? ??? ?????? txt_block, ?????? ??????????? ????? CSS. <!DOCTYPE html> <html> <head> <title>Arduino CSS Position, Size and Space</title> example.</p> </head> <style> { red; lpx solid .txt_block border: } </style> <body> <hl>Arduino CSS Example K/hl> <div class=\"txt_block\"> of text for this <p>A paragraph

</div> </body> </html> ????? ??????? div ???????, ?????? div ???????? ???????? ??????? ????? ????- ??? 1 ??????? ? ?????????????? ?????????? ????? CSS: border: lpx solid red; ??? ?????????? ????????? ????? ? ???-????????: - Arduino CSS Position, Size and Space - Mozilla Fi - ?*? v File Edit View History Bookmarks Tools Help ? Arduino CSS Position, | |Sizeand ... + ? file:///home/user/Deskto ? ? IOT DuoD'Qj ^J ? Arduino CSS Example 1 ? paragraph of text for this example. ?????? ?????? ??????? div ??????? — ???????? ???? ??? ????, ????????, ????- ???? div ?? ???????: background-color: green; ??? ????? ?? ??????????? ????, div ???????????? ?? ???? ???-????????. ???? div ?????? ???-???????? ???????, ?????? ????? ????????? ?????? ???????? ? ??- ??????? ??????? ??????? ???????????? ? ????? ??????. ?????? div ?????? ???????? div ????? ????????, ???????? ? ???? ????? ?????? ? ?????? ???? ??????? CSS. ??????? HTML/CSS ????????? ? div. <!DOCTYPE html> <html> <head> <title>Arduino CSS Position, Size and Space</title> example.</p> </head> <style> .txt_block { solid red; lpx border: 140px; width: height: 120px; } </style> <body> <hl>Arduino CSS Example 2</hl> <div class=\"txt_block\"> of text for this <p>A paragraph

</div> ???? ???????? ??????? ? ???-???????? ?????????: </body> </html> ??????????? - Arduino CSS Position, Size and Space - Mozilla Fi - File Edit View History Bookmarks lools Help ^ G Arduino CSS Position, f )Size and ...* ? I <* file:///home/user/Deskto ? o' (0t DuckDiQj Arduino CSS Example 2 A paragraph of iext for this example. ?????? ???????? div ?????? ?????????? 140 ???????? ? ?????? ? 120 ???????? ?? ???????? ???????. ? ??????. ? CSS ?????????? div ??????? ?????? ??????????? ????? ?? div, ??? ??? ????? ????? ?????? div ? ?????? ??????? ???? ???????? ??????. <!DOCTYPE html> <html> <head> <title>Arduino CSS Position, Size and Space</title> example.</p> </head> <style> .txt_block { solid red; lpx border: 140px; width: height: 120px; padding-left: lOpx; } </style> <body> <hl>Arduino CSS Example 3</hl> <div class=\"txt_block\"> of text for this <p>A paragraph </div> </body> </html> ? ??????????? ???? ???????? CSS ?????? ? 10 ???????? ??????????? ????????? ???????:

padding-left: ??? ; ????????? ?????????? ???????? ????? ??????? ?? ???? ???????????: - Arduino CSS Position, Size and Space - Mozilla Fi - ?*? - File Edit View History Bookmarks Tools Help 0# J ? Arduino CSS Position, | |Size and ... + ? ! ??. file:///home/user/Deskto ? ? 1 lf>* DuckD'Qj Arduino CSS Example 3 A paragraph of text for this example. ' j— — ??????? ????? ???? ????????? ?? ???? ???????? div. Padding ??????? ???- ????????? ????????? ????? ????? div ? ?????????? ?????? div. ??????? ??? ?????? ??????? ????? ??????? ? CSS ???????: padding-top: 5px; padding-right: ???; padding-bottom: 7px ; padding-left: ??? ; ???? ??????? ????? ???????? ????? ???????? ????????. padding: 5px ??? 7?? ???; ??? ???????? ???????? ? ?????????????? ?????????? ???? ?????? ??????? ???- div ????? ???????? ????? ??????? ?????? ??????????? ? ???????? ??? ??????? ???????????? ????????, ??????? ?????? ? ???????? ?? ??????? ???????. ????????? ??????? ??????? ???????, ??????????? ???? ?????? ???? ? div ? ????????? ???????: padding: top right bottom left; ?????????? div ??????? ?????? ?? ????????? ?????? div, ????????????????? ??? ??, ??? ? ?????? div, ????????? ?? ?? ??? ?????? ??? ??????? div. <!DOCTYPE html> <html> <head> <title>Arduino CSS Position, Size and Space</title> </head> <style>

.txt_block { red; lpx solid border: 4</hl> width: 140px; text for this of text height: 120px; padding-left: lOpx; } </style> <body> <hl>Arduino CSS Example <div class=\"txt_block\"> of example.</p> <p>A paragraph </div> <div class=\"txt_block\"> paragraph for this example.</p> <p>A second </div> </body> </html> ??????????? ???? ???????? ??????? ????????? ???-????????: - Arduino CSS Position, Size and Space - Mozilla Fi File Edit View History Bookmarks Tools Help Q ? Arduino I ISize CSS Position, and ... + ? [ r> file:///home/user/Deskto ? ? I '(>? DuckD'.Qj Arduino CSS Example 4 A paragraph of text for this example. A second paragraph of text for this example. ???????????????? div ?????????? ????????? ????????? ??????? ???????????????? HTML-????????? ?? ???-???????? ? ??????? CSS. ????? ?? ?????????? ???? ?????. ????? ??????????? ??? ????? div ????? ???? ? ??????, ?? ????? ???????????? ????????? ????? CSS, ??? ???????? ? ????????? ???????? ????????. <!DOCTYPE html> <html> <head> <title>Arduino CSS Position, Size and Space</title> { </head> <style> block .txt

border: lpx solid red; width: 140px; 5</hl> height: 120px; text for this of text padding-left: lOpx; float: left; } </style> <body> <hl>Arduino CSS Example <div class=\"txt_block\"> of example.</p> <p>A paragraph </div> <div class=\"txt_block\"> paragraph for this example.</p> <p>A second </div> </body> </html> ??? ?????????? ?????????? ????? CSS ??? ???????? div ?????? ???????????? ? ????, ????? ?? ???-????????. ??? ???????? ??? ?????? div ??????????? ????? ????? ?? ????????, ? ?????? div ??????????? ?? ???????? ????? ? ?????? div. float: left; ??????????? ???? ???????? ??????? ????????? ???-????????: - Arduino CSS Position, Size and Space - Mozilla Fi - + File Edit View History Bookmarks Tools Help ? Arduino CSS Position, I ISize and ...+ ? ? file:///home/user/Deskto ? ? ((>? DuckD'Qj Q Arduino CSS Example 5 A paragraph of A second text for this paragraph of text example. for this example. ?????????? ????? div ????? ???????? ???????????? ????? ?????????? div, ??, ???????, ??????? ???? ? ????????? ? 20 ???????? ?????? ?? ????????? div, ??? ???????? ????????. <!DOCTYPE html> <html> <head> <title>Arduino CSS Position, Size and Space</title> </head> <style> .txt_block { red; lpx solid border:

width: 140px; height: 120px; padding-left: lOpx; float: left; margin-right: 20px; } </style> <body> <hl>Arduino CSS Example 6</hl> <div class=\"txt_block\"> of text for this example.</p> <p>A paragraph of text </div> <div class=\"txt_block\"> paragraph for this example.</p> <p>A second </div> </body> </html> ??????????? ???? ???????? ??????? ????????? ???-????????. - Arduino CSS Position, Size and Space - Mozilla Fi File Edit View History Bookmarks Tools Help Q G Arduino CSS Position, | |Size and ...+ I.-. file:///home/user/Deskto ? O' |Qt DuckD'Qj Arduino CSS Example 6 A paragraph of A second text for this paragraph of text example. for this example. ??? ???? ???????????? ??? ?? ??????, ??? ? ??? ??????????, ?? ??????????? ??? ????, ???? ???????? ???????????? ????? ????? div ? ??????? ???????? div. margin-right: 20??; ???? ????? ????????? ????????????? ? ?????? ??????? div ??? ??????? ??????- ?? HTML: margin-top: 5px; margin-right: ???; margin-bottom: 7??; margin-left: lOpx; ? ????? ????? ???????????? ???????? ?????? ??? ???????? ?????: margin: 5?? ??? 7?? ???; ??? ????????? ? ???????? HTML ?? ??????? ???????, ??????? ??????: margin: top right bottom left;

rk rk rk CSS — ??? ??????? ????, ? ???? ??? ????? ?????, ??? ????? ???????, ?? ????? ???? ???? ????? ?????, ??????????? CSS. ???????- ??????? ???? ?? ?????? ?????? ?????? ? CSS ??? ??????, ??? ??????? ???-?? ??? ??? ?????? ???????????? ??????? ???-??????? Arduino, ?????????? ????? ?? CSS ??? ??????? ?????????????? ?????????? ? ?????????.

??????? ???????? ????????? ??????????? ??????? ? ?????, ??? ????? ???? ??????. ?? ?????? ???? ????? ??????? ???????: ??????????? ???????? ?? 37 ??????, ??? ?? ???????? ???, ??? ?? ?????????????? ???, ??? ?? ????????????? ?????. ????? ??????????? ?????, ??? ?? ????????? ??? ?????????? ??????? ?? 32 ?????. ?????????? ?????? ? ???????????. ?????? ????? ?? 250 ?? ? ??????????? ??????. ???????, ?? ?? ?????? ??? ?????????? ?????. ?? ????????? ????? ??? ???????? ????? ?? ?????????????? ????? ? ????????? ????? ??????????, ??????????? ? ??- ????? ??? ??????????? ??????, ???????? ????? ??? ?????? ? ???????? ??????? ??? ?????????? ????? ?? ?????. ????????? ????? ?????? ?????????? ? ???????????, ????? ????? ??????? ????- ??. ???????? ????? ???????? ????? ????????? ? ????????????? ?????. ?? ?? ??- ?? ???????? ???? ?????? ???? ?????. ? ???? ?? ????? ?????????????? ????? ? ??????? ?? ??????. ??? ??????? ????- ??? ????????? ? ????????????? ????. ????????? ??????. ???? ?? ??? ? ??????? ???? ? ????? ?????? ??? ?? - ??? ??? ???? ????? ??????. ?????? ????????? ?? ????????? ???????? ?????????? ????? ? ????? ??? ?? ?????? ?????????????.

????? ???? ???? ??? ????? ?????? ? ???????????. ?????? ???? ?????? ????? ?????? ? ??????????? ????????? ???????? ??? ??????. ????? ?????? ???????????- ?? ?? ?????????, ????????? ???? ????????? ?? ?????. ????? ???????????? ? ???????? ???????? ????????? ????? ??? ???????. ? ??? ??????? ?? ??????? ???????? ? ???? ????? ??? ???????????. ???????????? ????- ??? ??????? ????????? ??? ??????????? ?????, ??? ???????????? ? ??????. ???- ???? ??????? ? ???????? ? ????? ??????? ???, ??? ????? ?? ?????. ?????? 10 ????? ??????? ??????? ? ???????????? ???????? ?????, ?????? ??????? ????? ? ?????.

??????. ????? ????. ?? ?????? ?????????? ??? ?????? ?????? ? ???????? ?????. ???????, ??? ???????? ????? ???????? ? ???????? ?????. ??? ????? ????? ??????????? ?????????, ?????? ???- ???????. ??? 15 ?????? ??? ??? ?? ????. ?? ??? 30 ????? ??????? ??????? ???????. ?? ?? ???? ? ????? ??????????? ?????????. ??????? ? ????? ?????? ? ????????? ?? ????? ??????, ?? ?????????? 57.6 ?. ??????? ???????? ??? ? ????? ?????. ??????????? ???????? 15 ?????. ?????1. ??????????? ??? ?????????? ?????? ????? ????.

??????? ? ????? ????????????. ?? ?????????? 64,7 ?. ??? ???? ????? ???????? ????-???????. ???????????????? ????-??????? ??????????? ???????, ? ???? ? ????????, ????? ??????, ? ?????. ???? ??????, ????????? ??????? ???????, ???????? ?? ??????. ? ???- ??????? ? ??? ???????? ??????-??????????? ?? ? ??? ?????? ???? ??????? - ???????? ?????? ?????. ?????? ?????? ?????? ??? ??????? ??????????? ?????????????? ?????? ??????- ????? ??? ?????, ?????? 40-60 ?????. ? ?????? ?????????? ???????????? ?????- ???? ??????, ?? ?????? ??????? ???? 60 ?????. ????????? ? ??????? ?? ????????? ?????. ?? ?????????? 71,6 ?. ??? ???? ???- ?? ??? ???????? ?????-???????. ????-??????? ?????????? ???? ?????? ??? ????? ????????????. ?????-??????? ??????????? ??????? ? ?????????. ??? ????? ????- ??, ??????? ?? ????????????, ? ??????? ?? ????????. ?? ? ????? ??? ????????- ? ??????? ?????? ?????? ????? ????????? ?????? ?? ????????? ???? ? ??? ????- ????????. \"?????\" ????????????? ? ????? ??? ??? ?????, ????? ???? ????? ? ???????. ?? ?? ??????????, ? 15 ????? ?????? ?????? ??? ????????? ??????????. ????? ??? ?????. ???? ????????????? ?????, ??????? ?????? ? ???????? ???? ? ????????. ??? ???? ????? ??????? ?? 78 ? ??? ???????? ???????. ?????? ? ????. ???? ??? ??????????? ? ???? ? ?????? ??????? ????????? ????, ??? \"?????????? ????????\". ???? ??? ??????????? ????????, ? ?????? ??????? ? ????? ??????????. ???????? ????? ? ?????? ???????? ?? ??? ?? ???????????. ????? ???????? ???? ?? ???????????? ????????? ? ???????? ???????? ???????- ????? ?????? ??????. ???? ? ????????? ?????? ??????, ?? ????? ???? ?? ????- ???. ???? ? ????????? ???????????? ???????, ?? ????? ????????? ? ?????- ?????????? ??? ?????? ????. ? ????? ?????? ???????????? ?????? ???????. ???-??? (Mash-Out). ??? ????? ?????, ??????? ????????? ???????? ???? ???- ?????? ??????. ????? ????????? ??? ??????????? 78 ? ?? ????? 5 ?????. ????? ?????. ?????? ????? ???????? ??????? ?? ????????????? ?????????. ??? ??? ?????, ?????? ?????????, ??????- ????? ???????? ????? ???????. ?????? ??? ?????????? ???? ??????, ?????????, ???? ??????? ????? ?????? ? ?????????? ???????????? ???????? ???????. ?? ???????? ????????? ?? ???? ?????????. ?? ????? ?? ????-

??????. ?? ?????? ?????? ???????? ????? ?????????, ????? ????? ?????????? ? ????. ????????? ?????????? ???? ?????, ?????? ???????. ?? ????????????? ???????? ?????? ????? ??????? ??????? ???? ??? ????????? ??????????? ?????? ?? ?????- ?? . ? ????????? ??????? ?????????? ?? ??????????. ?????? ????? ????????????? ? ????????? ????????????? ??????? - ????? ????- ??. ?????? ????? ???????? ???????? ????????????? ??????. ?? ?????? ? ?? ???? ??? ????? ??????? ?????? ???? ?????. ?? ?????, ??? ???????? ?????????? ? ????????? ?????. ????????? ???????? ??? 60 ????? ????????? ?? ?? ????, ?.?. ?? 100 ?. ????? ??????? ????????, ????? ??????? ? ????.

?? ??????? ?????????? ???????? ????? East Kent Goldings ? ?????- ???????????? 5,1% ? ????? ?????? ?????????. ????????... ??? ? ???????? ? ??????? ?????. ????? ??? ????? ????? ????????????? ? ???. ?????? ?? ???????, ?? ????? ?????? ? ????2 ??? ??????????. ?????? 15 ????? ????????? ??????? ????????? ????? Fuggle ? ?????- ???????????? 5%. ????????... ? ???????? ? ???????. ???????? ???????? ?? ???? ?????. ????? ???? ????? ????? ??????, ?????? ???? ????????. ?? ????? ????? ???????? ????????? ? ?????? ?????? ?? ????? ?? ?????? ????, ????? ? ???????? ????? ??????? ??????? ???? ?????? ? ????? ? ??????????? ??? ????. 2 ? ???? - ??? ???????????? ??????, ??????? ????-??????? ???? ? ???????????? ??????? ???? ?????. ??? ??????????

?? ????????? ?????? ????????? ????? ?????????? ??? 22 ?? East Kent Goldings. ?????? ????? ?????? ? ?????? ????? ????????? ?????? ??? ????? ?????, ?????? ?????? ????? ????????? ??? ???????? ?????? ????. ??????????? ?????? ??????? ???? ?????????. ?? ????????? ?????? ????????? ???????? ????? ??????? ???? ???? ?????????? ??????. ? ??? ?????? ????? ???-?? ?? ????????? ????????? ???-?? ????????? ?????, ?? ??? ??????????? ???? 7%, ???? ?????????? ????? ???????, ??? ?????? ?? ??????- ??. ??????, ?? 10 ????? ?? ????????? ????????? ? ??????? ????? ????????? ??- ???????? ???. ????? ??? ??????? ? ??????????????? ?? ???????? ?????????, ??????? ? ??????? ??????? ??????????? ???????? ? ?? ???? ????? ??????-?????????? ?????, ??????? ??????? ???????????. ?????? ????? ????????? ?????. ?????????? ????? ????? ?????? ????. ? ???? ?????? ?????????? ?? ????? ????????? ???????, ??????? ???, ????? ??????????? ?? ? ??? ?? ??????????????, ????? ???????. ????????? ?????? ? ??????? - ??? ?????? ? ???????. ????? ???????? ?????? ?? ??????? ? ??????? ????????? ?? ??????????. ???? ? ????? ??? ???? ? ?????????? ????. ?? ?????? ?? ???? ???????? ?????- ?????? ?????. ??????? ??? ????????? ? ?????? ???????????? ?????. ????? ????? ?? ????????? ??? ?? ????????????? ????? ?? ?????, ???????????? ???????. ???? ????? ??????? ??? ??????? ???????? ???????????? ????? ? ????????? ? ??????? ??????. ????? ??????????? ? ??????? ??????????? ?????????. ????? ??????? ????. ?????? ???????????????? ??????? ??? ??????? ??????, ????????? ???????????? ??????? ??????????. ?????? ???? ??? ? ????? ?????.

?? ???????? ??? ???????????? ?????????. ????????? ????????? ????? 10%. ?? ??????. ??????? ?????? ???? 11%. ????? ??????????? ?? ??????? ????? ?? ???? ??????? ????, ????? ???????, ????? ???? ??????????. ????? ? ?????????? ? ????? ????? ??????????. ????????? ????????? ?? ??????. ? ?? ????? ?? ????? ??????????? ?? ???????- ???? ???? 20 ?, ? ??? ???? ????????? ???????? ??? ????????????????? ???????. ??????? ???????? ??????? ?? ????????????, ????????? ?? ????? ???? ??? 3.00 ? ??????? ???????? ?????. ?????? ??????????? ?????? ? ????????. ???????? ???????, ??? ?? ??????????, ?? 20-30 ??????. ??? ??? ??, ??? ???????????. ?? ??? ?? ?????????? ?????? ????? ???? ??????? ??????????????? ? ?????, ??????? ??????. ?? ? ????? ?????? ?????, ??? ????? ???? ?????? ???????????? ? ?????? ?????? ???? ? ??????? 15- 30 ?????. ? ??? ????? ??? ???????????, ??????? ? ??????? ???????? ?????? ???? ? ????????. ??? ??? ? ??? ????? ?????????? ?? ??????? ? ?????. ??? ?? ?????- ???, ????????????, ????? (????????) ??? ?????, ? ??? ??? ?????????? ??? ? ?????, ??? ??????? ???????? ????? ?????????????????. ??????? ??????????? ???? ????????????? ? ????????? ????? ???????????. ? ???????? ???????? ? ??????? ????????????? ???????????? ????? ??? ???????. ????? ????? ?????? ?? ???? ??- ????? ?? ????????? ? ?????????.

????????? ????????? ?????????? ??? ??????? ? ?? ????????? ??????????? ? ????? ?????? ?????. ???? ?????????? ?????? ?????????? ? ?????? ?????????? ???? 6-8. ????? ???????? ?????????. ?1. ??? ????? ???? ???????????, ????? ??????????, ? ???????? ??????. ????????? ????? ?? 2,5%. ????? ???????, ??? ??????? ???????? ??????? ? ???- ??. ?????????? ??? ????? ? ?????????? ????????? ????? ????????? ?????? 24-48 ?????. ????????? ????? ??, ??? ? ??? ?????????? ?????????. ????? ??????? ??- ??. ????? ?????? ?????????. ??? ????? ?? ?????? ????? ? ?????. ??????? ????- ???????????? ??????????. ????????????? ????????

??? ? ?????, ?????????? ??????? ??????? ???????? ??????????. ??????? ? ???- ?????? ??????? ?? ???????! ? ?????? ??? ?????????? ? ????. ???? ????? ???? ?? ????. ???? ????, ? ??? ?????? ???????????? ? ? ?????? ????. ?????????? ????? ??? ? ?????????? ?????? ???????? 0,5 ?. ????????? ????? ??????-????????. ????? ???????? ?????????? ???????????????? ???????. ? ?????? ??????? ?? ??? ? ??????? ????????, ????? ?????? ? ???? ? ?????, ? ????? ?????? ??????????? ???????? ?????. ??? ??? ??????? ????. ? ???????? ???? ????????? - ?????, ???- ??????, ???????? ?? ?????????? ????. ??????????? ???? ??????? ?????? ????? ????? ?? ?????? ???????????????. ??? ?? ????????? ???????: ????????????, ???????, ????????????. ??????????, ??? ??????? ???????.


mirnauka61

DL-2023-02
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS