שליטה בארדואינו באמצעות HTML/Javascript בדרך הקלה: 8 שלבים

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

הדרכה זו מראה לך כיצד לשלוט בארדואינו עם שיחת אייאקס בחזרה מחוזה אדפריט באמצעות פונקציות javascript בלבד. בעיקרון אתה יכול להשתמש ב- javascript בדף html שיאפשר לך לכתוב ממשקי html בקלות עם פונקציות javascript פשוטות המנצלות שיחה חוזרת של ajax. כדי לאפשר ל- ESP8266 לתקשר עם הארדואינו. לכן ניתן להגדיר את כל הסיכות מפונקציית javascript. באופן דומה, אנו יכולים גם לקרוא את הערך מכל סיכה באמצעות פונקציית javascript. אני מקווה שזה עוזר להקל על השליטה בארדואינו ממסמך HTML. הבנתי שיש הרבה אנשים שיכולים לכתוב html. רובם לא רוצים לטרוח בניסיון ליצור אפליקציה לסלולר עם ג'אווה או xcode או מסגרת אחרת. זה יקל מאוד על אנשים מכיוון שכל מה שהם צריכים לעשות הוא להשתמש בפונקציית javascript כדי להגדיר ולקרוא ערכים מסיכות. למשל, לא הרבה יותר קל לכתוב

להדליק

על מנת להפעיל כפתור. היופי הוא שאין שום תכנות ארדואינו אחר מלבד הצהרת ה- pinMode (12, INPUT); בפונקציית ההגדרה שלך. כל עוד הסיכה מוצהרת, ניתן להשתמש ב- javascript לכל דבר אחר.

document.onload = {

GetJSON ('A0', 1 'return_json')

}

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

שלב 1: מה שאתה צריך

בניתי את הפרויקט הזה למשתמשים שרוצים לשלוט בארדואינו שלהם עם דף HTML ב- ESP8266. מטרתו של פרויקט זה היא ליצור שיטה פשוטה לקביעת ערכי הפינים בארדואינו שלך עם פונקציית javascript. For exampleplate onclick = "SetPin (12, 1, 0)" יגדיר את Pin 12 בארדואינו שלך ל- High.

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

Arduino Uno - אמור לעבוד עם כל arduino התואם בעל לוח Rx TxAdafruit Huzzah סדרתי USB לכבל סידורי 4 בודק עכירות אנלוגי של LED נמוך - כל חיישן אנלוגי המספק פלט אנלוגי יעשה טלפון סלולרי נתב Wifi עם דפדפן נייד Arduino ספריות.

שלב 2: הכנת מזהה Arduino

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

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

בכל אופן, אני משתמש בספריות הבאות ב- ESP8266

ESP8266WiFi WiFiClient ESP8266WebServer ArduinoJSONT זוהי לא הדרכה כיצד להוריד ולהתקין ספריות אולם אלה הספריות המשמשות ב- HUZZAH. אז אנא מצא אותם והתקן אותם. יהיה עליך גם להתקין את הגדרות הלוח עבור HUZZAH כך שאם אתה נכנס לקובץ> העדפות בתיבה שאומרת כתובות אתרים נוספות של מנהל לוחות אנא הוסף את הכתובת הבאה: //arduino.esp8266.com/stable/package_esp8266c… אם כבר יש לך משהו בתחום זה, הקפד להוסיף שם פסיק כדי להוסיף כתובת אתר לוח נוספת. לחץ על אישור זה

כלים> לוח> מנהל לוחות מאשר לחפש אחר ESP8266 מאשר להתקין את ESP8266 לפי קהילת ESP8266.

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

תוכנה SerialArduinoJSON שכבר אמורה להיות לך.

שלב 3: הכנת ה- ESP8266

עכשיו אנחנו הולכים להכניס את הקוד ל- ESP8266 (Adafruit HUZZAH) ולהכין אותו לחיבור לארדואינו. פתח את הקוד של HUZZAH ופתח את הסקיצה. בשורות 11 ו -12 שנה את ה- ssid והסיסמה לזו של חיבור ה- WIFI שלך ברשת המקומית. תבחין כי ישנם 2 קבצים קובץ הסקיצה וקובץ index.h. קובץ index.h הוא המקום בו מאוחסן ה- html שיוצג בטלפון שלך.

לאחר שהגדרת את ה- SSID והסיסמה הנכונים ל- wifi שלך תוכל לאסוף את הקוד ולהעלות אותו ל- ESP8266 שלך. ב- HUZZAH עליך להחזיק את הכפתור שכותרתו GPIO0 ולאחר מכן ללחוץ על כפתור המנוחה, מאשר להרפות מכפתור GPIO0 כדי להכניס את השבב למצב אתחול. אם השבב הוכנס בהצלחה למצב מטען אתחול, תידלק נורה אדומה המצביעה על השבב במצב מטעין אתחול.

כדי להתחבר ל- ESP8266 תזדקק לכבל טורי או למתאם USB סידורי או לשבב FDTI. במקרה זה אני משתמש בכבל adafruit כפי שצוין בהוראות. עם זאת, אתה יכול להתחבר לשבב במספר דרכים, באמצעות TTL על סיכות ה- Tx וה- Rx. שאני מקווה שהאנשים הצופים בזה ידעו כיצד להתחבר לשבב כדי לטעון את הקוד עליו. בכל מקרה קדימה והבהב את השבב עם הקוד בקובץ ה- zip המצורף לשלב זה.

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

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

שלב 5: חיבור הכל ביחד

אוקיי אז לחיווט יש לי תמונה למעלה של מה שיש לי כאן.

חבר Tx על החוזה לפין 2 על הארדואינו. חבר Rx על החוזה לסיכה 3 על הארדואינו. יצרתי שקע טורי נוסף על פינים 2 ו -3 בארדואינו כדי לפנות את מסוף הסידורי המוגדר כברירת מחדל.

חבר את Pin V+ ו- En ל- 5v מהארדואינו. - חוזה אדפרוט כוללת ווסת מתח 3.3v מובנה, כך שחיבור הפינים כך לא יכול לעבוד עם כל המודולים ESP8266. ייתכן שיהיה עליך לחבר את ווסת המתח שלך. אני ממליץ להשתמש בחוזה אם אתה רק רוצה שהדבר יעבוד בקלות. חבר את ה- GND ל- GND של הארדואינו

על סיכות 12, 11, 9, 8 על חוט הארדואינו בנורות הלדים שלך השתמשתי כאן בנורות LED נמוכות מכיוון שמי שמושך יותר מדי זרם עשוי למשוך יותר מדי חשמל כדי לשמור על ניסוי זה פשוט.

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

שלב 6: גישה לדף האינטרנט

כעת, לאחר שחיבור הארדואינו והכל נטען על הלוחות שלך, עליך להיות מסוגל לצפות ב- HTML בטלפון הנייד שלך. עכשיו אני רוצה שתתחבר לאותו נתב wifi שהגדרת עבורו את ה- SSID והסיסמה בקוד בחוזה. אז אתה צריך להבין איזו כתובת IP שהנתב שלך הקצה למכשיר שלך. בדרך כלל, אם תיכנס לתצורת הנתבים שלך אמורה להיות רשימת לקוחות. זה מציג את כתובות ה- IP של כל המכשירים המחוברים לחיבור ה- Wifi שלך. עם זאת, אם אינך יכול למצוא את כתובת ה- IP הזו, תוכל לנתק אותה מהארדואינו ולהפעיל אותה שוב עם הכבל הטורי. אם תפתח את הקונסולה הטורית במכשיר היא תדפיס את כתובת ה- IP למכשיר בקונסולה הטורית במקרה שלא תוכל למצוא אותה בדרך אחרת. בכל מקרה ברגע שאתה מחובר לאותה רשת Wifi באמצעות הטלפון הסלולרי שלך. מכוון את דפדפן האינטרנט הנייד שלך לכתובת ה- ip של החוזה. מה שנראה כנראה משהו דומה לזה. https://192.168.0.107 או משהו דומה מאוד. שם הכנסתי דף בסיסי שיאפשר לך להדליק ולכבות את 4 האורות וכן לקרוא את ערך החיישן האנלוגי.

שלב 7: שימוש ב- Javascipt

בקובץ שנקרא index.h בסקיצת ESP8266Code הוא אמור להופיע ככרטיסייה נפרדת בעורך arduino. אתה יכול לראות את הדוגמה הבסיסית שהכנתי כאן. בעיקרון הדרך שבה זה עובד היא כזו.

SetPin (12, 1, 0); SetPin ({מספר מספר}, {ערך 1 גבוה 0 נמוך}, {IsAnalog 1 כן 0 לא})

זה יגדיר את הערך של סיכה דיגיטלית 12 לגבוה

SetPin (4, 0, 0);

זה יגדיר את הערך של סיכה דיגיטלית 4 לנמוך

SetPin (A2, 439, 1) פעולה זו תקבע את הערך של פין אנלוגי 2 ל- 439

באופן דומה, הפונקציה GetJSON תחזיר ערך מבוקש מהסיכה ותמקם אותו ב- html elemted עם מזהה div שצוין.

GetJSON ('A0', 1, 'resp_i') GetJSON ({מספר מספר}, {IsAnalog 1 כן 0 לא}, {Id של HTML Element להחזרת התוצאה})

פעולה זו תשלח בקשה לארדואינו ותבקש ממנה את ערך הסיכה האנלוגית 0 ותחזיר את התוצאה ל- Div עם מזהה resp_iGetJSON (12, 0, 'mydiv'); זה יבקש מהארדואינו לקבל את הערך של סיכה דיגיטלית 0 ולהחזיר את התוצאה לרכיב HTML עם מזהה mydiv

שלב 8: תמיכה

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

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

תודה שהקדשת מזמנך לראות את הקוד שלי.

ג'ון אנדרסון שלח לי דוא ל

Vermont Internet Design LLC

www.vermontinternetdesign.com