שליטה בתצוגת LED בת 7 קטעים באמצעות שרת אינטרנט ESP8266: 8 שלבים (עם תמונות)

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:15

לפרויקט שלי יש Nodemcu ESP8266 השולט בתצוגה בת 7 פלחים באמצעות שרת http באמצעות טופס HTML.

שלב 1: אודות הפרויקט הזה

זהו פרויקט IOT שפותח באמצעות מודול wifi ESP8266 (NodeMCU). מניע הפרויקט הוא יצירת שרת אינטרנט במודול שיכול לארח מספר לקוחות ברשת. כאן, יש צורך בידע בסיסי ב- html ו- javaScript כדי להבין את הפרויקט שלי. כמה נושאים מוקדמים בהם אדון כאן בנוגע ל- ESP8266 ו- javaScript הם:

1. העלאת קבצים ב- SPIFFS של ESP8266 כדי להשתמש בקובץ ביעילות רבה יותר בקוד הארדואינו שלנו.

2. אחסון אינטרנט באמצעות javaScript

SPIFFS

עד כה, תמיד כללנו את ה- HTML של דפי האינטרנט שלנו כמילות מחרוזת במערכון שלנו. זה הופך את הקושי שלנו לקריא מאוד, ונגמר לך הזיכרון די מהר.

SPIFFS מערכת קבצים קלה עבור מיקרו-בקרים עם שבב פלאש SPI. לשבב הפלאש המשולב של ESP8266 יש הרבה מקום לדפי האינטרנט שלך, במיוחד אם יש לך את גרסת 1MB, 2MB או 4MB. תוכל להבין כיצד להוסיף כלים בתוכנת arduino שלך להעלאת קבצים ל- SPIFFS על ידי הקישור הבא:

בפרויקט זה יש לי 2 קובץ HTML וקובץ javascript. כל הקבצים הללו מועלים ל- SPIFFS המופרדים מהשרטוט כך שהשינוי בקבצים אלה אינו תלוי בסקיצה הראשית.

שני קבצי ה- HTML מאוחזרים על ידי preparFile () כפי שמוצג להלן:

void preparFile () {

בול אישור = SPIFFS.begin (); אם (בסדר) {קובץ f = SPIFFS.open ("/index.html", "r"); קובץ f1 = SPIFFS.open ("/index1.html", "r"); data = f.readString (); data1 = f1.readString (); f.close (); f1.close (); } else Serial.println ("לא נמצא קובץ כזה."); }

בעוד שקובץ javascript נקרא באמצעות loadScript () כפי שמוצג להלן:

void loadScript (נתיב מחרוזת, סוג מחרוזת) {

if (SPIFFS.exists (נתיב)) {קובץ קובץ = SPIFFS.open (נתיב, "r"); server.streamFile (קובץ, סוג); }}

אחסון מקומי ליישומי אינטרנט

תוכל להבין כיצד להשתמש באובייקטים ושיטות אחסון מקומיות שונות ב- HTML5 באמצעות javascript מתוך המאמר הבא: https://diveintohtml5.info/storage.html. אדון בשימוש באחסון מקומי בפרויקט שלי בחלק העבודה.

שלב 2: נדרשת חומרה

NodeMCU מודול Wifi ESP8266 12E

קרש לחם ללא הלחמה

כבל מגשר

תצוגת 7 מגזרים (קתודה נפוצה)

נגד 1K אוהם

כבל מיקרו USB (לחיבור NodeMCU למחשב)

שלב 3: מעגל וחיבורים

החיבורים ממש קלים. בתרשים המעגל לעיל, סיכות nodemcu מחוברות באופן הבא:

A D1

B D2

C D3

D D4

E D6

F D7

G D8

כאשר A, B, C, D, E & F הם הקטעים של תצוגת 7 מגזרים

. התעלם מ- DP של תצוגת 7 פלחים. אל תחבר אותו עם סיכה D5 של ESP

שלב 4: עבודה

כפי שנדון קודם לכן, יש לנו שני קבצי HTML. אחד מהם הוא דף ה- HTML הבסיסי שנקרא כאשר שרת ESP8266 קיבל "/" כלומר אם מתבקש ה- URI '/', השרת צריך להשיב עם קוד סטטוס HTTP של 200 (Ok) ולאחר מכן לשלוח תגובה עם אינדקס ". html "קובץ.

קובץ ה- HTML השני יישלח כאשר הלקוח מבקש מדף הבסיס על ידי שליחת קלט על הטופס. ברגע שהשרת מקבל את הקלט POSTED מהטופס, הוא משווה אותו עם ערך מחרוזת קבוע ושולח את דף ה- HTML השני בתגובה.

if (server.arg ("nam") == "0") {server.send (200, "text/html", data1); sevenSeg (0); }

מכיוון שה- html לדף השני אינו מוגדר בסקיצה, אז כאן אנו מתייחסים ל"נתונים 1 "שכבר קראו את קודי ה- html באמצעות SPIFFS.readString ()

קובץ f1 = SPIFFS.open ("/index1.html", "r"); data1 = f1.readString ();

כאן SevenSeg () נקרא גם עם הארגומנט "0" כך שניתן להשתמש בו להצגת "0" על ידי הפעלה וכיבוי של פלחים שונים. כאן, עשיתי את השם של fuction המבהיר את עצמו כלומר onA () יפעיל את קטע A של 7 seg תצוגת על לוח הלוח, באופן דומה offA יכבה אותו.

לכן, במקרה זה כדי להציג את "0", עלינו להחליף את כל הקטע למעט G (התעלמות מ- DP מכיוון שהיא לא מחוברת לשום סיכה של ESP8266). אז הפונקציה שלי נראית כך:

אם (num == 0) {onA (); onB (); onC (); onD (); אחד(); onF (); offG (); }

שלב 5: קוד HTML ו- JAVASCRIPT

ל- index.html יש קנבס עם תצוגת 7 פלחים במצב כיבוי וטופס שמתחתיו. זה מה שאתה רואה לאחר פתיחתו:

אם נרצה להשתמש בדף האינטרנט שלנו ללא ESP8266, זה יהיה אפשרי על ידי שינוי הקישור במאפיין הפעולה של הטופס שלך. כרגע זהו הקישור בפעולה:

כאן אתה יכול לראות שהקישור בפעולה הוא אותה כתובת ip המוקצית ל- nodeMCU שלך לאחר חיבור לאינטרנט wifi (או נקודה חמה). תג הטופס לאחר ההתאמה נראה כך:

כאן, אני משתמש במכת אינטרנט של הדפדפן כדי לאחסן את ערך הקלט של המשתמש כך שהערך שהוזן ב- index.html יאוחסן בדפדפן באופן מקומי (כמו קובץ cookie). ערך זה נאסף על ידי index1.html והמספר מוצג בתצוגת 7 הקטע על בד HTML. ייתכן שתבין את ההליך הזה על ידי סרטון וידאו הבא:

צירוף וידאו

שלב 6: הערות מפתח

פרויקט זה יעבוד עם nodemcu שלך אם תדאג לנקודות הבאות:

1. הקישור במאפיין הפעולה של קובץ HTML הבסיסי צריך להיות "https:// (IP על צג סידורי או IP המוקצה ל- ESP שלך)/שלח".

2. השתמש בגרסה האחרונה של הדפדפן התומך ב- HTML5 ובתגים ופונקציונליות חדשים.

3. SPIFFS יפעל רק אם index.html, index1.html ו- main.js שלך יחוברו בתיקיית הנתונים. אתה יכול לשכפל את קובץ הקוד מה- github שלי

שלב 7: CODE

זהו הקישור למאגר של הקוד של הפרויקט שלי. אם אתה עובד עם SPIFFS ב- ESP8266, אתה יכול להבין מדוע שמתי את קבצי ה- html ו- javascript בתיקיית הנתונים. השתמש בזה כפי שהוא.

קישור למאגר GitHub

שלב 8: הדרכת וידאו

אם זה עוזר, אנא הירשם