ESP8266 የድር አገልጋይን በመጠቀም ባለ 7-ክፍል LED ማሳያ መቆጣጠር 8 ደረጃዎች (ከስዕሎች ጋር)

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

የእኔ ፕሮጀክት የኤችቲኤምኤል ቅጽን በመጠቀም በ http አገልጋዩ በኩል ባለ 7 ክፍል ማሳያ የሚቆጣጠር Nodemcu ESP8266 አለው።

ደረጃ 1 በዚህ ፕሮጀክት ላይ

ESP8266 (NodeMCU) wifi ሞዱል በመጠቀም የተገነባ IOT ፕሮጀክት ነው። የፕሮጀክቱ ዓላማ በአውታረ መረቡ ላይ ብዙ ደንበኞችን ማስተናገድ የሚችል በሞጁሉ ላይ የድር አገልጋይ መፍጠር ነው። እዚህ የእኔን ፕሮጀክት ለመረዳት የ html እና javaScript መሠረታዊ እውቀት ያስፈልጋል። ESP8266 ን እና javaScript ን በተመለከተ እዚህ የምወያይበት አንዳንድ የቅድሚያ ርዕስ -

1. በአርዲኖ ኮዳችን ውስጥ እነዚያን ፋይሎች በብቃት ለመጠቀም በ ESP8266 SPIFFS ላይ ፋይሎችን በመስቀል ላይ።

2. javaScript ን በመጠቀም የድር ማከማቻ

SPIFFS

እስከዚህ ድረስ እኛ ሁልጊዜ ለድር ገጾቻችን ኤችቲኤምኤልን በስዕላችን ውስጥ እንደ ሕብረቁምፊ ጽሑፎች አካትተናል። ይህ የእኛን ኮድ ለማንበብ በጣም ከባድ ያደርገዋል ፣ እና በፍጥነት ማህደረ ትውስታዎን ያጣሉ።

SPIFFS ከ SPI ፍላሽ ቺፕ ጋር ለማይክሮ መቆጣጠሪያዎች ቀላል ክብደት ፋይል ስርዓት። የ ESP8266 የቦርድ ፍላሽ ቺፕ ለድር ገጾችዎ ብዙ ቦታ አለው ፣ በተለይም 1 ሜባ ፣ 2 ሜባ ወይም 4 ሜባ ስሪት ካለዎት። አገናኝን በመከተል ፋይሎችን ወደ SPIFFS ለመስቀል በአርዱዲኖ ሶፍትዌርዎ ውስጥ መሳሪያዎችን እንዴት ማከል እንደሚችሉ መረዳት ይችላሉ

በዚህ ፕሮጀክት ውስጥ 2 html ፋይል እና የጃቫስክሪፕት ፋይል አለኝ። በእነዚህ ፋይሎች ውስጥ ያለው ለውጥ ከዋናው ንድፍ ነፃ እንዲሆን እነዚህ ሁሉ ፋይሎች ከስዕሉ ተለይተው ወደ SPIFFS ተሰቅለዋል።

ሁለቱም የኤችቲኤምኤል ፋይሎች ከዚህ በታች እንደሚታየው በ ዝግጁ ፋይል () ተሰርዘዋል።

ባዶነት አዘጋጅ ፋይል () {

bool ok = SPIFFS.begin (); ከሆነ (እሺ) {ፋይል f = SPIFFS.open ("/index.html", "r"); ፋይል f1 = SPIFFS.open ("/index1.html", "r"); ውሂብ = f.readString (); data1 = f1.readString (); ረ. ዝጋ (); f1. ዝጋ (); } ሌላ Serial.println ("እንደዚህ ያለ ፋይል አልተገኘም"); }

ከዚህ በታች እንደሚታየው የጃቫስክሪፕት ፋይል ሎድስክሪፕት () ን በመጠቀም ሲነበብ

ባዶ ጭነት (ስክሪፕት)

ከሆነ (SPIFFS.exists (ዱካ)) {ፋይል ፋይል = SPIFFS.open (ዱካ ፣ “r”); server.streamFile (ፋይል ፣ ዓይነት); }}

የድር ማከማቻ ለድር ትግበራዎች

ከሚከተለው ጽሑፍ ጃቫስክሪፕትን በመጠቀም በኤችቲኤምኤል 5 ውስጥ የተለያዩ ነገሮችን እና የአከባቢ ማከማቻ ዘዴዎችን እንዴት እንደሚጠቀሙ መረዳት ይችላሉ- https://diveintohtml5.info/storage.html። በስራ ክፍሉ ውስጥ በእኔ ፕሮጀክት ውስጥ የአከባቢ ማከማቻ አጠቃቀምን እወያይበታለሁ።

ደረጃ 2 ሃርድዌር ያስፈልጋል

NodeMCU ESP8266 12E Wifi ሞዱል

ብረታ የሌለው የዳቦ ሰሌዳ

ዝላይ ገመድ

7 ክፍልፋይ ማሳያ (የጋራ ካቶድ)

1 ኪ ohm resistor

የማይክሮ ዩኤስቢ ገመድ (NodeMCU ን ከኮምፒዩተርዎ ጋር ለማገናኘት)

ደረጃ 3 የወረዳ እና ግንኙነቶች

ግንኙነቶች በእውነቱ ቀላል ናቸው። ከላይ ባለው የወረዳ ዲያግራም ውስጥ የ nodemcu ፒኖች በሚከተለው ፋሽን ተገናኝተዋል-

መ 1

ለ D2

ሲ ዲ 3

መ D4

ኢ ዲ 6

ኤፍ ዲ 7

ጂ ዲ 8

ሀ ፣ ቢ ፣ ሲ ፣ ዲ ፣ ኢ እና ኤፍ የ 7 ክፍል ማሳያ ክፍሎች ናቸው

. የ 7 ክፍል ማሳያውን DP ን ችላ ይበሉ። በ ESP ፒን D5 አያገናኙት

ደረጃ 4: መስራት

ቀደም ሲል እንደተብራራው ሁለት የኤችቲኤምኤል ፋይሎች አሉን። ከነዚህም አንዱ ESP8266 አገልጋዩ “/” ሲቀበል የተጠራው ሥር html ገጽ ነው ፣ ማለትም ዩአርአይ//ከተጠየቀ ፣ አገልጋዩ በኤችቲቲፒ ሁኔታ 200 (እሺ) ሁኔታ መልስ መስጠት እና ከዚያ በ “ማውጫ” ምላሽ መላክ አለበት። html ፋይል።

ሁለተኛው የኤችቲኤምኤል ፋይል ደንበኛው በቅጹ ላይ ግብዓት በማስገባት ከሥሩ ገጽ ሲጠይቅ ይላካል። ወዲያውኑ ፣ አገልጋዩ ከቅጹ የተለጠፈውን ግብዓት ያገኛል ፣ እሱ ከቋሚ ሕብረቁምፊ እሴት ጋር ያወዳድራል እና ሁለተኛውን የኤችቲኤምኤል ገጽ በምላሽ ይልካል።

ከሆነ (server.arg ("nam") == "0") {server.send (200, "text/html", data1); ሰባት ሰግ (0); }

ለ 2 ኛ ገጽ ኤችቲኤምኤል በስዕሉ ውስጥ ስላልተገለጸ ፣ እዚህ እኛ SPIFFS.readString () ን በመጠቀም የ html ኮዶችን ቀድሞውኑ የተነበበውን “ዳታ 1” እንጠቅሳለን።

ፋይል f1 = SPIFFS.open ("/index1.html", "r"); data1 = f1.readString ();

የተለያዩ ክፍሎችን በማብራት እና በማጥፋት “0” ን ለማሳየት ጥቅም ላይ እንዲውል እዚህ ሰባት ሴግ () በክርክር “0” ተብሎ ይጠራል። እዚህ ፣ እኔ የፉክክር ስም ገላጭ እንዲሆን አድርጌአለሁ ማለትም onA () በእንጨት ሰሌዳ ላይ የ 7 ሴግ ማሳያ ክፍልን ያበራል ፣ በተመሳሳይ መልኩ ኤኤ ያጠፋዋል።

ስለዚህ ፣ በዚህ ሁኔታ “0” ን ለማሳየት ፣ ከ G በስተቀር (ከማንኛውም የ ESP8266 ፒን ጋር ስላልተያያዘ ችላ ተብሏል) ሁሉንም ክፍሎች መለወጥ አለብን። ስለዚህ የእኔ ተግባር እንደዚህ ይመስላል

ከሆነ (num == 0) {onA (); onB (); onC (); onD (); አንድ(); onF (); offG (); }

ደረጃ 5 ኤችቲኤምኤል እና ጃቫስክሪፕት ኮድ

ኢንዴክስ.html በ 7 ሞድ ውስጥ የ 7 ክፍል ማሳያ ያለው እና ከሱ በታች ያለው ሸራ አለው። ከከፈቱ በኋላ የሚያዩት ይህ ነው-

ያለ ESP8266 የእኛን ድረ -ገጽ ለመጠቀም ከፈለግን ፣ በቅጽዎ የድርጊት ባህርይ ውስጥ አገናኙን በመለወጥ ይቻላል። በአሁኑ ጊዜ ይህ በተግባር ያለው አገናኝ ነው።

እዚህ በተግባር ላይ ያለው አገናኝ ከማንኛውም wifi (ወይም ነጥብ ነጥብ) ጋር ከተገናኘ በኋላ ወደ nodeMCU የተቀላቀለ ተመሳሳይ የአይፒ አድራሻ መሆኑን ማየት ይችላሉ። ማስተካከያ ከተደረገ በኋላ የቅጹ መለያው እንደዚህ ይመስላል

እዚህ ፣ የተጠቃሚውን የግብዓት እሴት ለማከማቸት የአሳሹን የድር መጎዳት እጠቀማለሁ ፣ ይህም በ index.html ውስጥ የገባው እሴት በአሳሹ ውስጥ በአከባቢው (እንደ ኩኪ) ውስጥ እንዲከማች እችላለሁ። ያ እሴት በመረጃ ጠቋሚ 1.html ተፈልጎ ቁጥር በኤችቲኤምኤል ሸራ ላይ በ 7 ክፍል ማሳያ ላይ ይታያል። ቪዲዮን በመከተል ይህንን አሰራር ሊረዱት ይችላሉ።

ቪዲዮ_አያይዝ

ደረጃ 6 ቁልፍ ማስታወሻዎች

የሚከተሉትን ነጥቦች የሚንከባከቡ ከሆነ ይህ ፕሮጀክት ከእርስዎ ኖዶምኩ ጋር ይሠራል።

1. በስር html ፋይል የድርጊት ባህርይ ውስጥ ያለው አገናኝ “https:// (IP on Serial monitor or IP alloted to your ESP)/submit” መሆን አለበት።

2. html5 ን እና አዲስ መለያዎችን እና ተግባራዊነትን የሚደግፍ የቅርብ ጊዜውን የአሳሽ ስሪት ይጠቀሙ።

3. SPIFFS የሚሰራው የእርስዎ index.html ፣ index1.html እና main.js በመረጃ አቃፊው ውስጥ አንድ ላይ ከተጣመሩ ብቻ ነው። ከእኔ github የኮዱን ፋይል መዝጋት ይችላሉ

ደረጃ 7 ፦ ኮድ

ይህ የእኔ ፕሮጀክት ኮድ የማከማቻ ማከማቻ አገናኝ ነው። በ ESP8266 ውስጥ ከ SPIFFS ጋር እየሰሩ ከሆነ ፣ ለምን የኤችቲኤምኤል እና የጃቫስክሪፕት ፋይሎችን በውሂብ አቃፊ ውስጥ እንዳስቀመጥኩ መረዳት ይችላሉ። ያንን እንደዚያ ይጠቀሙበት።

የ GitHub ማከማቻ አገናኝ

ደረጃ 8: የቪዲዮ አጋዥ ስልጠና

የሚረዳ ከሆነ እባክዎ ይመዝገቡ