የእርስዎን Arduino/ESP ውቅር ድርን ከደመናው ይጫኑ - 7 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:33

የአርዱዲኖ / ኢስፒ (ESP8266 / ESP32) ፕሮጀክት ሲፈጥሩ ሁሉንም ነገር በጥብቅ ኮድ ማድረግ ይችላሉ። ግን ብዙውን ጊዜ አንድ ነገር ብቅ ይላል እና የእርስዎን አይኦቲ-መሣሪያ እንደገና ከእርስዎ አይዲኢ ጋር እንደገና ያያይዙታል። ወይም ወደ ውቅሩ የሚገቡ ብዙ ሰዎችን አግኝተዋል እና ውስጣዊ አሠራሮችን እንዲረዱ ከመጠበቅ ይልቅ በይነገጽ ማቅረብ ይፈልጋሉ።

ይህ አስተማሪ በአርዲኖ / ESP ላይ ሳይሆን አብዛኛው በይነገጽ በደመና ውስጥ እንዴት እንደሚቀመጥ ይነግርዎታል። በዚህ መንገድ ማድረግ በቦታ እና በማስታወስ አጠቃቀም ላይ ያድንዎታል። ነፃ የማይንቀሳቀስ ድረ -ገጾችን የሚሰጥ አገልግሎት በተለይ እንደ “ደመና” ፣ እንደ GitHub ገጾች ተስማሚ ነው ፣ ግን ሌሎች አማራጮችም እንዲሁ ይሰራሉ።

በዚህ መንገድ ድረ -ገጹን መገንባት የተጠቃሚው አሳሽ በ 4 ደረጃዎች እንዲሄድ ይጠይቃል።

1. ከ አርዱinoኖ / ኢኤስፒ ሥር ሥሩ url ን ይጠይቁ
2. ለሚከተለው በመናገር በጣም ቀላል የሆነ ድረ -ገጽ ይቀበሉ።
3. ከደመናው የጃቫስክሪፕት ፋይልን ይጠይቁ
4. ትክክለኛውን ገጽ የሚገነባውን ኮድ ይቀበሉ

ከላይ በተዘረዘሩት ደረጃዎች መሠረት ገጹ ከተዘጋጀ በኋላ ይህ አስተማሪ እንዲሁ ከ Arduino / ESP ጋር እንዴት መስተጋብር መፍጠር እንደሚቻል ያብራራል።

በዚህ አስተማሪ ላይ የተፈጠረው ኮድ እንዲሁ በ GitHub ላይ ሊገኝ ይችላል።

ቅድመ ሁኔታዎች

ይህ አስተማሪ የተወሰኑ ቁሳቁሶችን እና አንዳንድ ቀደምት እውቀቶችን እንዳገኙ ያስባል -

• አንድ አርዱዲኖ (ከአውታረ መረብ መድረሻዎች ጋር) / ESP
• ከላይ ለማያያዝ ኮምፒተር
• ከበይነመረቡ ጋር የተገናኘ የ WiFi መዳረሻ
• አርዱዲኖ አይዲኢ ተጭኗል (እንዲሁም ለ ESP32)
• ወደ IoT- መሣሪያዎ ንድፍ እንዴት እንደሚሰቅሉ ያውቃሉ
• Git & GitHub ን እንዴት እንደሚጠቀሙ ያውቃሉ

ደረጃ 1 - በቀላል ዌብሳይቨር ንድፍ መጀመር

በተቻለ መጠን ቀላል እንጀምራለን ፣ እና ከዚህ በኋላ እንዲያድግ እናድርገው።

#ያካትቱ

const char* ssid = "yourssid"; const char* password = "yourpasswd"; የ WiFi አገልጋይ አገልጋይ (80); ባዶነት ማዋቀር () {// ተከታታይን ያስጀምሩ እና ወደብ እስኪከፈት ይጠብቁ Serial.begin (115200); ሳለ (! ተከታታይ) {; // ተከታታይ ወደብ እስኪገናኝ ይጠብቁ። ለአገሬው የዩኤስቢ ወደብ ብቻ ያስፈልጋል። WiFi.begin (ssid ፣ password); ሳለ (WiFi.status ()! = WL_CONNECTED) {መዘግየት (500); Serial.print ("."); } Serial.println ("WiFi ተገናኝቷል"); Serial.println ("IP አድራሻ:"); Serial.println (WiFi.localIP ()); server.begin (); } ባዶነት loop () {// ለገቢ ደንበኞች ያዳምጡ WiFiClient client = server.available (); // ለገቢ ደንበኞች ያዳምጡ bool sendResponse = ሐሰት; // መልስ ለመላክ ከፈለግን ወደ እውነት ተቀናብሯል ሕብረቁምፊ urlLine = ""; // (ደንበኛ) // ደንበኛ ካገኙ ፣ {Serial.println («አዲስ ደንበኛ»))/ የተጠየቀውን ዩአርኤል ለመያዝ ሕብረቁምፊ ያድርጉ። // መልዕክቱን ወደብ ወደብ ያትሙ String currentLine = ""; // ደንበኛው በሚገናኝበት ጊዜ (client.connected ()) // loop ከደንበኛው ገቢ ውሂብ ለመያዝ ሕብረቁምፊ ያድርጉ (ከ (ደንበኛ የሚገኝ)) // ከደንበኛው የሚያነቡ ባይቶች ካሉ ፣ {char c = ደንበኛ.ንባብ (); // ባይት ያንብቡ ፣ ከዚያ (c == '\ n') // ባይት አዲስ መስመር ቁምፊ ከሆነ {// የአሁኑ መስመር ባዶ ከሆነ ፣ በተከታታይ ሁለት አዲስ መስመር ቁምፊዎችን አግኝተዋል። // ያ የደንበኛው የኤችቲቲፒ ጥያቄ ያበቃል ፣ ስለዚህ ምላሽ ይላኩ - ከሆነ (currentLine.length () == 0) {sendResponse = true; // ሁሉም ነገር ደህና ነው! ሰበር; // ከሌላው ጊዜ ይራቁ} ሌላ // // አዲስ መስመር ካገኙ ፣ ከዚያ የአሁኑን መስመር ያፅዱ ፦ {ከሆነ (currentLine.indexOf ("GET /")> = 0) // ይህ የዩአርኤል መስመር መሆን አለበት {urlLine = currentLine; // ለቀጣይ አጠቃቀም ያስቀምጡት} currentLine = ""; // የአሁኑን መስመር ሕብረቁምፊን ዳግም ያስጀምሩ}} ሌላ (c! = '\ r') // ከተሽከርካሪ መመለሻ ቁምፊ በስተቀር ሌላ ነገር ካገኙ ፣ {currentLine += c; // ወደ የአሁኑ መስመር መጨረሻ ያክሉት}}} ከሆነ (sendResponse) {Serial.print («ደንበኛ ተጠይቋል») ፤ Serial.println (urlLine); // የኤችቲቲፒ ራስጌዎች ሁል ጊዜ በምላሽ ኮድ (ለምሳሌ ኤችቲቲፒ/1.1 200 እሺ) // እና የይዘት ዓይነት ደንበኛው የሚመጣውን እንዲያውቅ ፣ ከዚያም ባዶ መስመር-client.println (“HTTP/1.1 200 እሺ”); client.println ("የይዘት-አይነት ጽሑፍ/html"); client.println (); ከሆነ (urlLine.indexOf ("GET /")> = 0) // ዩአርኤሉ ብቻ " /" {// የኤችቲቲፒ ምላሽ ይዘት ይዘቱን ራስጌ የሚከተል ከሆነ - client.println ("Hello world!"); } // የኤች ቲ ቲ ፒ ምላሽ በሌላ ባዶ መስመር ያበቃል - client.println (); } // ግንኙነቱን ዝጋ: client.stop (); Serial.println ("ደንበኛ ተለያይቷል"); }}

ከላይ ባለው ኮድ ላይ ይቅዱ ፣ ወይም በጊትሆብ ላይ ካለው ቃል ያውርዱ።

ከአውታረ መረብዎ ጋር የሚስማማውን SSID እና የይለፍ ቃል መለወጥዎን አይርሱ።

ይህ ንድፍ የታወቀውን አርዱዲኖን ይጠቀማል

አዘገጃጀት()

እና

loop ()

ተግባራት። በውስጡ

አዘገጃጀት()

ተግባር ከ IDE ጋር ያለው ተከታታይ ግንኙነት ተጀምሯል እና WiFi እንዲሁ ነው። አንዴ WiFi ከተጠቀሰው SSID ጋር ከተገናኘ በኋላ አይፒው ታትሟል እና የድር አገልጋዩ ተጀመረ። በእያንዳንዱ ድግግሞሽ ውስጥ

loop ()

ተግባር የድር አገልጋዩ ለተገናኙ ደንበኞች ተፈትኗል። አንድ ደንበኛ ከተገናኘ ጥያቄው ይነበባል እና የተጠየቀው ዩአርኤል በተለዋዋጭ ውስጥ ይቀመጣል። ሁሉም ነገር ደህና መስሎ ከታየ ከአገልጋዩ ለደንበኛው የተሰጠው ምላሽ በተጠየቀው ዩአርኤል መሠረት ይከናወናል።

ማስጠንቀቂያ! ይህ ኮድ ቀላል እንዲሆን የአሩዲኖ ሕብረቁምፊ ክፍልን ይጠቀማል። የሕብረቁምፊ ማመቻቸት በዚህ አስተማሪ ወሰን ውስጥ አይደሉም። አነስተኛውን ራም በመጠቀም ስለ አርዱዲኖ ሕብረቁምፊ ማስተማሪያ መመሪያ ስለዚህ ጉዳይ የበለጠ ያንብቡ።

ደረጃ 2 - የርቀት ጃቫስክሪፕትን መፍጠር

አርዱinoኖ / ኢኤስፒ / ጎብኝዎች አሳሽ ይህንን አንድ ፋይል እንዲጭን ይነግረዋል። የተቀረው ሁሉ በዚህ የጃቫስክሪፕት ኮድ ይከናወናል።

በዚህ መመሪያ ውስጥ የ jQuery ን እንጠቀማለን ፣ ይህ በጥብቅ አስፈላጊ አይደለም ፣ ግን ነገሮችን ቀላል ያደርገዋል።

ይህ ፋይል ከድር ተደራሽ መሆን አለበት ፣ ይህንን ሥራ ለመሥራት የማይንቀሳቀስ ገጾች አገልጋይ በቂ ነው ፣ ለምሳሌ የ GitHub ገጾች። ስለዚህ ምናልባት አዲስ የ GitHub ማከማቻ ማዘጋጀት እና ሀ መፍጠር ይፈልጋሉ

gh- ገጾች

ቅርንጫፍ። የሚከተለውን ኮድ በ ውስጥ ያስገቡ ሀ

.js

በትክክለኛው ቅርንጫፍ ውስጥ በማጠራቀሚያ ውስጥ ፋይል ያድርጉ።

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (ተግባር () {var script = document.createElement ('script'); // አንድ ኤለመንት script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // src = "" ያዘጋጁ) attribute script.onload = function () // callback ተግባር ፣ አንዴ የ jquery ፋይል ከተጫነ የሚጠራው {$ = window.jQuery; // jQuery ን እንደ ዓለም አቀፍ $ ተለዋዋጭ init () ፤ // የ init ተግባርን ይደውሉ ፤ ሰነድ። getElementsByTagName ('ራስ') [0].appendChild (ስክሪፕት) ፤ // የተፈጠረውን መለያ በሰነዱ ላይ ያክሉ ፣ ይህ የ jQuery lib} ን መጫን ይጀምራል)) (); ተግባር init () {// jQuery ን መጫን ተከናውኗል ፣ በኋላ ላይ እዚህ ኮድ ያክላል…}

ከላይ ባለው ኮድ ላይ ይቅዱ ፣ ወይም በጊትሆብ ላይ ካለው ቃል ያውርዱት።

ፋይልዎ ተደራሽ መሆኑን ያረጋግጡ። የ GitHub ገጾች ካሉ ወደ https://username.github.io/repository/your-file.j… ይሂዱ (ይተኩ

የተጠቃሚ ስም

,

ማከማቻ

እና

የእርስዎ- file.js

ለትክክለኛ መለኪያዎች)።

ደረጃ 3 - የርቀት ጃቫስክሪፕት ፋይልን ወደ ጎብኝዎች አሳሽ ውስጥ በመጫን ላይ

አሁን ሁሉንም ነገር ስላዘጋጀን ድረ -ገጹ የርቀት ጃቫስክሪፕትን ፋይል እንዲጭን ለማድረግ ጊዜው አሁን ነው።

የስዕሉን መስመር 88 በመቀየር ይህንን ማድረግ ይችላሉ

client.println ("ሰላም ዓለም!"); ቲ

client.println ("");

(ለውጥ

src

ወደ የራስዎ የጃቫስክሪፕት ፋይል ለመጠቆም አይነታ) ።ይህ ትንሽ የኤችቲኤምኤል ድረ -ገጽ ነው ፣ የሚያደርገው ሁሉ የጃቫስክሪፕት ፋይልን ወደ ጎብኝዎች አሳሽ መጫን ነው።

የተቀየረው ፋይል እንዲሁ በ GitHub ላይ ባለው ተጓዳኝ ቃል ውስጥ ሊገኝ ይችላል።

የተስተካከለውን ንድፍ ወደ የእርስዎ አርዱinoኖ / ኢኤስፒ ይስቀሉ።

ደረጃ 4 - አዲስ ንጥረ ነገሮችን ወደ ገጹ ማከል

ባዶ ገጽ ምንም ፋይዳ የለውም ፣ ስለዚህ በድረ -ገጹ ላይ አዲስ አካል ለማከል ጊዜው አሁን ነው። ለጊዜው ይህ የ YouTube ቪዲዮ ይሆናል። በዚህ ምሳሌ ውስጥ አንዳንድ የ jQuery ኮዶች ይህንን ለማከናወን ያገለግላሉ።

የሚከተለውን የኮድ መስመር ወደ

በ ዉስጥ()

ተግባር

$ ('')። prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0'}) '342px'})። appendTo ('አካል');

ይህ አንድ ይፈጥራል

iframe

ንጥረ ነገር ፣ ትክክለኛውን ያዘጋጁ

src

css ን በመጠቀም መጠኑን ይግለጹ እና ያዘጋጁ እና ኤለመንቱን ወደ ገጹ አካል ያክሉ።

jQuery በድረ -ገጹ ውስጥ ያሉትን ንጥረ ነገሮች በቀላሉ ለመምረጥ እና ለመለወጥ ይረዳናል ፣ ማወቅ ያለብን አንዳንድ መሠረታዊ ነገሮች

• $ ('አካል')

• ማንኛውንም ነባር አባል ይመርጣል ፣ ሌሎች የሲኤስኤስ መራጮች እንዲሁ ጥቅም ላይ ሊውሉ ይችላሉ

• $(' ')

  አዲስ ይፈጥራል

• አካል (ግን ወደ ሰነዱ አያክለውም)

• .appendTo ('. ዋና')

• የተመረጠውን/የተፈጠረውን ኤለመንት ከ css ክፍል ‹ዋና› ጋር ወደ አንድ አካል ያክላል።

• ንጥረ ነገሮችን ለማከል ሌላ ተግባር

  .ተጨማሪ ()

  ,

  .ቅድሚያ ()

  ,

  .prependTo ()

  ,

  .ገባ ()

  ,

  .ገባረት ()

  ,

  .እስገባ በፊት ()

  ,

  . በኋላ ()

  ,

  .ከዚህ በፊት()

የሆነ ነገር ግልፅ ካልሆነ በ GitHub ላይ ያለውን ተጓዳኝ ቃል ይመልከቱ።

ደረጃ 5 - በይነተገናኝ አካላት

ቪዲዮ አስደሳች ነው ፣ ግን የዚህ አስተማሪ ዓላማ ከ Arduino / ESP ጋር መስተጋብር ነው። ቪዲዮውን ወደ አርዱinoኖ / ኢኤስፒ የሚልክ እና እንዲሁም መልስን ለሚጠብቅ አዝራር ቪዲዮውን እንተካ።

ያስፈልገናል ሀ

$('')

ወደ ገጹ ለማከል እና የክስተት አድማጭ ከእሱ ጋር ያያይዙት። የተጠቀሰው ክስተት ሲከሰት የክስተት አድራጊው የጥሪ መልሶ ማግኛ ተግባርን ይደውላል-

$ ('')። ጽሑፍ ('አንድ አዝራር')። ላይ ('ጠቅ አድርግ' ፣ ተግባር ()

አዝራሩ ጠቅ ሲደረግ {// ኮድ እዚህ ይፈጸማል})። appendTo ('አካል') ፤

እና በመደወያው ተግባር ላይ የ AJAX ጥያቄን ያክሉ-

$.get ('/ajax' ፣ ተግባር (ውሂብ)

{// ኮድ እዚህ የ AJAX ጥያቄ ሲጠናቀቅ ይፈጸማል});

ጥያቄው ከተጠናቀቀ በኋላ የተመለሰው ውሂብ ወደ ገጹ ይታከላል-

$('

').text (ውሂብ).appendTo (' አካል ');

ለማጠቃለል ፣ ከላይ ያለው ኮድ አንድ አዝራር ይፈጥራል ፣ ወደ ድረ -ገጹ ያክላል ፣ አዝራሩ ጠቅ ሲደረግ ጥያቄ ይላካል እና ምላሹም እንዲሁ በድረ -ገጹ ላይ ይታከላል።

የጥሪ መመለሻዎችን ሲጠቀሙ ይህ ለመጀመሪያ ጊዜዎ ከሆነ ሁሉም ነገር እንዴት ጎጆ እንደሆነ ለማየት በ GitHub ላይ ያለውን ቃል መፈተሽ ይፈልጉ ይሆናል።

ደረጃ 6 - በይነተገናኝ ንጥረ ነገር ምላሽ ይስጡ

በእርግጥ የ AJAX ጥያቄ ምላሽ ይፈልጋል።

ትክክለኛውን ምላሽ ለ

/አጃክስ

url እኛ ማከል አለብን

ሌላ ከሆነ ()

የሚመለከተው መግለጫ ከሆነ የመዝጊያ ቅንፍ በኋላ

/

ዩአርኤል

ሌላ ከሆነ (urlLine.indexOf ("GET /ajax")> = 0)

{client.print («ሠላም!»); }

በ GitHub ላይ በተደረገው ቃል ውስጥ እያንዳንዱ ጥያቄ ልዩ መሆኑን አሳሹን ለማሳየት አንድ ቆጣሪ ጨምሬያለሁ።

ደረጃ 7 መደምደሚያ

የዚህ አስተማሪ መጨረሻ ይህ ነው። አሁን የጎብitorው አሳሽ የጃቫስክሪፕት ፋይልን ከደመናው እንዲጭን የሚነግረውን ትንሽ ድረ -ገጽ የሚያገለግል አርዱinoኖ / ኢስፒ አለዎት። አንዴ ጃቫስክሪፕት ከተጫነ ለተጠቃሚው ከአርዱዲኖ / ኢስፒ ጋር እንዲገናኝ በይነገጽ የሚሰጥ የቀረውን የድረ -ገጽ ይዘት ይገነባል።

አሁን በድረ -ገፁ ላይ ተጨማሪ ንጥረ ነገሮችን ለመፍጠር እና በአንዳንድ ዓይነት ሮም (EEPROM / NVS / ወዘተ) ላይ ቅንብሮቹን በአከባቢዎ ለማስቀመጥ አሁን የእርስዎ ሀሳብ ነው።

ስላነበቡ እናመሰግናለን ፣ እና እባክዎን አንዳንድ ግብረመልስ ለመስጠት ነፃነት ይሰማዎ!