טען את דף האינטרנט שלך של Arduino/ESP Config מהענן: 7 שלבים

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

בעת יצירת פרויקט Arduino / ESP (ESP8266 / ESP32), אתה יכול פשוט לקודד הכל. אך לא פעם משהו יופיע ותצמיד שוב את מכשיר ה- IoT שלך ל- IDE שלך. או שפשוט יש לך יותר אנשים שניגשים לתצורה ואתה רוצה לספק ממשק משתמש במקום לצפות שהם יבינו את הפעולה הפנימית.

מדריך זה יגיד לך כיצד לשים את רוב ממשק המשתמש בענן במקום ב- Arduino / ESP. פעולה זו תחסוך לך שטח ושימוש בזיכרון. שירות המספק דפי אינטרנט סטטיים בחינם מתאים במיוחד כ"ענן ", כמו דפי GitHub, אך כנראה שאפשרויות אחרות יעבדו גם כן.

בניית דף האינטרנט בצורה כזו מחייבת את דפדפן המשתמש לעבור 4 שלבים:

1. בקש את כתובת ה- URL של ה- Arduino / ESP
2. קבל דף אינטרנט פשוט מאוד, המספר ל:
3. בקש קובץ JavaScript מהענן
4. קבל את הקוד שבונה את הדף בפועל

מדריך זה יסביר גם כיצד לתקשר עם ה- Arduino / ESP לאחר שהדף מוכן בהתאם לשלבים שלעיל.

ניתן למצוא את הקוד שנוצר במדריך זה גם ב- GitHub.

תנאים מוקדמים

הוראה זו מניחה שקיבלת גישה לחומרים מסוימים וכמה ידע קודם:

• Arduino (עם גישה לרשת) / ESP
• מחשב שאפשר לצרף אליו את האמור לעיל
• חיבור WiFi מחובר לאינטרנט
• ה- Arduino IDE מותקן (גם עבור ESP32)
• אתה יודע להעלות סקיצה למכשיר ה- IoT שלך
• אתה יודע להשתמש ב- Git & GitHub

שלב 1: התחל עם סקיצה פשוטה של שרת אתרים

נתחיל הכי פשוט שאפשר, וניתן לזה לצמוח מכאן והלאה.

#לִכלוֹל

const char* ssid = "yourssid"; const char* password = "yourpasswd"; שרת WiFiServer (80); הגדרת void () {// אתחל סידורי והמתן לפתיחת הנמל: Serial.begin (115200); בעוד (! סדרתי) {; // המתן להתחברות של יציאה טורית. דרוש ליציאת USB מקורית בלבד} WiFi.begin (ssid, סיסמא); בעוד (WiFi.status ()! = WL_CONNECTED) {עיכוב (500); Serial.print ("."); } Serial.println ("WiFi מחובר."); Serial.println ("כתובת IP:"); Serial.println (WiFi.localIP ()); server.begin (); } לולאת void () {// האזינו ללקוחות נכנסים לקוח WiFiClient = server.available (); // האזינו ללקוחות נכנסים bool sendResponse = false; // מוגדר ל- true אם נרצה לשלוח תגובה String urlLine = ""; // צור מחרוזת בכדי להחזיק את כתובת האתר המבוקשת אם (לקוח) // אם אתה מקבל לקוח, {Serial.println ("לקוח חדש"); // הדפס הודעה מהיציאה הטורית String currentLine = ""; // צור מחרוזת בכדי לאחסן נתונים נכנסים מהלקוח בעוד (client.connected ()) // לולאה בזמן שהלקוח מחובר {if (client.available ()) // אם יש בתים לקרוא מהלקוח, {char c = client.read (); // קרא בית, ואז אם (c == '\ n') // אם הבייט הוא תו קו חדש {// אם השורה הנוכחית ריקה, קיבלת שתי תווים של שורה חדשה בשורה. // זהו סוף בקשת HTTP של הלקוח, אז שלח תגובה: if (currentLine.length () == 0) {sendResponse = true; // הכל בסדר! לשבור; // פרק מלולאת ה- while} else // אם קיבלת שורה חדשה, נקה את currentLine: {if (currentLine.indexOf ("GET /")> = 0) // זו צריכה להיות שורת כתובת האתר {urlLine = currentLine; // שמור אותו לשימוש מאוחר יותר} currentLine = ""; // אפס את מחרוזת currentLine}} else if (c! = '\ r') // אם קיבלת משהו אחר מלבד תו החזרת עגלה, {currentLine += c; // הוסף אותו לסוף ה- currentLine}}} if (sendResponse) {Serial.print ("הלקוח מתבקש"); Serial.println (urlLine); // כותרות HTTP תמיד מתחילות עם קוד תגובה (למשל HTTP/1.1 200 OK) // וסוג תוכן כדי שהלקוח יידע מה מגיע, ואז שורה ריקה: client.println ("HTTP/1.1 200 OK"); client.println ("סוג תוכן: טקסט/HTML"); client.println (); if (urlLine.indexOf ("GET /")> = 0) // אם כתובת האתר היא רק " /" {// תוכן תגובת HTTP עוקב אחר הכותרת: client.println ("שלום עולם!"); } // תגובת HTTP מסתיימת בשורה ריקה נוספת: client.println (); } // סגור את החיבור: client.stop (); Serial.println ("הלקוח מנותק."); }}

העתק את הקוד לעיל, או הורד אותו מההתחייבות ב- GitHub.

אל תשכח לשנות את ה- SSID והסיסמה כך שיתאימו לרשת שלך.

מערכון זה משתמש בארדואינו הידוע

להכין()

ו

לוּלָאָה()

פונקציות. בתוך ה

להכין()

פונקציה החיבור הטורי ל- IDE מאתחל וכך גם ה- WiFi. לאחר חיבור ה- WiFi ל- SSID האמור כתובת ה- IP מודפסת ושרת האינטרנט מופעל. בכל איטרציה של

לוּלָאָה()

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

אַזהָרָה! קוד זה משתמש במחלקת Arduino String כדי לשמור על הפשטות. אופטימיזציות מחרוזות אינן בגדר הוראה זו. קרא עוד על כך במדריך בנושא מניפולציה של מחרוזת ארדואינו באמצעות ראם מינימלי.

שלב 2: יצירת ה- JavaScript מרחוק

ה- Arduino / ESP יגיד לדפדפן המבקרים לטעון קובץ אחד זה. כל השאר יבוצע על ידי קוד JavaScript זה.

במדריך זה נשתמש ב- jQuery, אין זה הכרחי בהחלט, אך יקל על העניינים.

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

gh-pages

ענף. הכנס את הקוד הבא בתוך a

.js

קובץ במאגר בענף הנכון.

var cdnjsURL = 'https://cdnjs.cloudflare.com/ajax/libs/', $; (function () {var script = document.createElement ('script'); // צור רכיב script.src = cdnjsURL + 'jquery/3.2.1/jquery.min.js'; // הגדר את src = "" תכונה script.onload = function () // פונקציית callback, נקראת ברגע שקובץ jquery נטען {$ = window.jQuery; // להפוך את jQuery לנגיש כמשתנה $ global init (); // קורא לפונקציית init}; מסמך. getElementsByTagName ('head') [0].appendChild (script); // הוסף את התג שנוצר למסמך, פעולה זו תתחיל לטעון את jQuery lib}) (); function init () {// טעינה של jQuery, תוסיף כאן קוד מאוחר יותר …}

העתק את הקוד לעיל, או הורד אותו מההתחייבות ב- GitHub.

בדוק אם הקובץ שלך נגיש. במקרה של דפי GitHub עבור אל https://username.github.io/repository/your-file.j… (החלף

שם משתמש

,

מאגר

ו

your-file.js

לפרמטרים הנכונים).

שלב 3: טעינת קובץ ה- JavaScript המרוחק לדפדפן המבקרים

כעת, לאחר שהגדרנו הכל הגיע הזמן לגרום לדף האינטרנט לטעון את קובץ ה- JavaScript המרוחק.

אתה יכול לעשות זאת על ידי שינוי שורה 88 של המערכון מתוך

client.println ("שלום עולם!"); t

client.println ("");

(לשנות את ה

src

תכונה להצביע על קובץ ה- JavaScript שלך). זהו דף אינטרנט קטן של HTML, כל שעושה הוא להעלות את קובץ ה- JavaScript לדפדפן המבקרים.

הקובץ שהשתנה ניתן למצוא גם בהתחייבות המתאימה ב- GitHub.

העלה את הסקיצה המותאמת ל- Arduino / ESP שלך.

שלב 4: הוספת אלמנטים חדשים לדף

דף ריק אינו מועיל, ולכן הגיע הזמן להוסיף אלמנט חדש לדף האינטרנט. לעת עתה זה יהיה סרטון YouTube. בדוגמה זו ישמשו כמה קודי jQuery כדי להשיג זאת.

הוסף את שורת הקוד הבאה ל-

init ()

פוּנקצִיָה:

$ (''). prop ({src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', מסגרת מסגרת: '0'}). css ({רוחב: '608px', גובה: '342px'}). AppendTo ('body');

זה ייצור

iframe

אלמנט, הגדר את הנכון

src

תכונה והגדר את הגודל באמצעות css והוסף את האלמנט לגוף הדף.

jQuery עוזר לנו לבחור ולשנות בקלות רכיבים בדף האינטרנט, כמה דברים בסיסיים שכדאי לדעת:

• $ ('גוף')

• בוחר כל רכיב שכבר קיים, ניתן להשתמש בבוררי CSS אחרים

• $(' ')

  יוצר חדש

• רכיב (אך אינו מוסיף אותו למסמך)

• .appendTo ('. main')

• מצרף את האלמנט שנבחר/נוצר לרכיב עם מחלקה css 'main'

• פונקציה נוספת להוספת אלמנטים היא

  .לְצַרֵף()

  ,

  .הכנה מראש ()

  ,

  .prependTo ()

  ,

  .לְהַכנִיס()

  ,

  .insertAfter ()

  ,

  .insertBefore ()

  ,

  .לאחר()

  ,

  .לפני()

תסתכל על ההתחייבות המתאימה ב- GitHub אם משהו לא ברור.

שלב 5: רכיבים אינטראקטיביים

סרטון הוא כיף, אך מטרתו של מדריך זה היא אינטראקציה עם ה- Arduino / ESP. בואו נחליף את הסרטון לכפתור ששולח מידע ל- Arduino / ESP וגם מחכה לתגובה.

נצטרך א

$('')

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

$ (''). טקסט ('כפתור'). על ('קליק', פונקציה ()

{// הקוד כאן יבוצע לאחר לחיצה על הלחצן}). appendTo ('body');

והוסף בקשת AJAX לפונקציית החזרה:

$.get ('/ajax', function (data)

{// קוד כאן יבוצע עם סיום בקשת AJAX});

לאחר סיום הבקשה, הנתונים המוחזרים יתווספו לדף:

$('

').text (נתונים).appendTo (' גוף ');

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

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

שלב 6: הגיב לאלמנט האינטראקטיבי

כמובן שבקשת AJAX דורשת תגובה.

כדי ליצור את התגובה הנכונה עבור

/אייאקס

url נצטרך להוסיף

אחרת אם ()

מיד אחרי סוגר הסגירה של הצהרת if שבודקת את

/

url.

אחרת אם (urlLine.indexOf ("GET /ajax")> = 0)

{client.print ("היי!"); }

בהתחייבות ב- GitHub הוספתי גם מונה להראות לדפדפן שכל בקשה היא ייחודית.

שלב 7: סיכום

זה הסוף של ההנחיה הזו. כעת יש לך Arduino / ESP המשרת דף אינטרנט קטן שאומר לדפדפן המבקר לטעון קובץ JavaScript מהענן. לאחר טעינת ה- JavaScript הוא בונה את שאר התוכן של דף האינטרנט המספק ממשק משתמש למשתמש לתקשר עם ה- Arduino / ESP.

כעת תלוי בדמיונך ליצור אלמנטים נוספים בדף האינטרנט ולשמור את ההגדרות באופן מקומי באיזשהו ROM (EEPROM / NVS / וכו ').

תודה שקראת, ואל תהסס לתת קצת משוב!