תחנת מזג אוויר ESP8266 המציגה נתונים באתר: 7 שלבים

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

הערה: חלקים מהדרכה זו עשויים להיות זמינים בפורמט וידאו בערוץ YouTube שלי - Tech Tribe

במדריך זה אראה כיצד ליצור תחנת מזג אוויר ששולחת נתונים ישירות לאתר שלך. לכן תזדקק לדומיין משלך (למשל: msolonko.net). כדי להתחיל, להלן החומרים הדרושים לך:

פריטים:

חוזה נוצה ($ 16.95)

כבל מיקרו USB עם נתונים ($ 1.99)

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

1 פוטורסיסטור

כמה נגדים אחרים - נדון בהמשך

חוּט

לוח פרפ (5.59 $) - חבילה של 20

חיישן טמפרטורה, לחץ ולחות BME280 ($ 9.99)

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

אירוח אתרים ודומיין, אם אתה רוצה לעקוב לחלוטין עם ההדרכה

כלים:

קאטר

מלחם

שלב 1: קוד חוזה נוצה

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

שלב 2: קבלת נתונים מחוזה נוצות

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

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

לאחר שהגדרת מסד נתונים, עבור אל phpMyAdmin ובחר את מסד הנתונים שלך. צור טבלה בשם weather_data עם 9 עמודות. עיין באחת התמונות שלי למעלה כדי לראות מה כל עמודה צריכה להיות (העתק את השם, סוג הנתונים וכל השאר בדיוק אם אתה רוצה להשתמש בקוד שלי). המונה יהיה המפתח והזיהוי העיקרי שלנו שיעזרו לנו לזהות איזה יום הנתונים מתייחסים (1: היום, 2: אתמול, 3: כל השאר). מכיוון שיהיו לנו הרבה נתונים, נמחק חלק מהם ככל שהם יהיו מבוגרים. לכן אנו זקוקים לעמודת המזהה. שאר הטורים די מסבירים את עצמם. כרגע, הטבלה שלך במסד הנתונים שלך אמורה להיראות בדיוק כמו שלי.

כעת, הורד את הקוד המצורף וקרא אותו ואת הערותיי. בסיום, המשך לשלב הבא.

הערה: כאשר אתה מוריד את הקוד, שנה את שמו ל- esp.php. משום מה, קיבלתי שגיאה כאשר ניסיתי להעלות קובץ PHP.

כך בעצם יעבוד הקוד.

1. אסוף נתונים כל 10 דקות והצג אותם

2. ברגע שחולף יום, ממוצע כל 6 ערכים (כדי לחסוך מקום ב- DB) כך שיש נקודת נתונים לכל שעה

3. לאחר שעובר עוד יום, ממוצע כל הנתונים הנותרים לאותו יום ושמור אותם כנקודת נתונים אחת בלבד

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

שלב 3: אחזור נתונים ממסד הנתונים לתצוגה

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

שלב 4: הגדרת ספריות ועוד כמה דברים

עבור פרויקט זה, אחת המסגרות בהן נשתמש היא AngularJS, שיעזור לנו לתקשר עם מסד הנתונים ולבנות SPA (יישום דף יחיד). כדי לקבל את הספרייה, עבור לקישור זה והורד גירסה 1.64 ומעלה. עבור הדרכה זו השתמשתי ב- 1.64 אך לעתים קרובות משתחררות גרסאות חדשות כך שתוכל להשתמש בגרסה אחרת. מצא קישור בדף זה שמסתיים כך: /VERSION/angular.min.js

העתק את הקישור ושמור אותו במקום בטוח. בדיוק קיבלנו קישור לספריית AngularJS. תזדקק לזה לשלב הבא. כעת, באותו דף מצא קישור שנראה כך והעתק אותו גם: /VERSION/angular-route.min.js

מסלול הזווית יעזור לנו לנהל את הספא שלנו ולטפל בהחלפת הצפיות בדף.

אנחנו רוצים להיות מסוגלים להציג יפה תרשימים של הנתונים שלנו. לשם כך נשתמש בספרייה בשם ChartJS. כנס לכאן, בחר את הגירסה העדכנית ביותר ושמור קישור המסתיים כך: VERSION/Chart.bundle.min.js

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

כעת עלינו להגדיר את התצוגות השונות ליישום שלנו. בספריית המארח שבה יש לך את שני הקבצים הקודמים (esp.php ו- getWeatherData.php), צור תיקייה חדשה בשם weather_views. כאן, נכניס את כל הדפים שלנו שכל אחד יתכתב עם מזהה ממאגר הנתונים שלנו (1, 2 או 3).

בתיקייה, צור 3 קבצים (day.html, old.html ו- gister.html). הורד את הקוד המצורף והכנס אותו לקבצים אלה. הקוד של DAY. HTML מגיב כך שתוכל להבין מה קורה. הקוד לשני הדפים האחרים הוא בעצם אותו דבר (חלק אחר ב- old.html מגיב).

לאחר שתסיים עם שלב זה, המשך לשלב הבא, שהוא שלב התכנות הקשה ביותר.

שלב 5: קובץ HTML ראשי

בשלב זה תעשה/תערוך/תקרא את קובץ ה- HTML הראשי שבו תציג הכל. שמור את הקובץ המצורף (שכמו תמיד מגיבים אליו) כ- espdata.html באותה ספרייה כמו esp.php. אני מקווה שתוכל לבצע בו כמה שינויים ולהבין מה באמת קורה.

זהו עיקר הקוד שלך, ולכן בהחלט חשוב להבין מה קורה.

שלב 6: בדיקת חיווט על לוח קרש

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

1. מניחים נוצה על לוח הלחם. חבר 3V למעקה + ו- GND למעקה.

2. חבר את חיישן VIN למעקה + GND למעקה.

3. חבר את חיישן SDA לסיכה 4 על נוצה. חבר את SCL לפין 5.

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

5. חבר נגד 4.7k להובלה הלא מחוברת של הפוטורזיסטור. חבר את ההובלה הלא מחוברת של ה- 4.7k לנגד 2k. חבר את הקצה הבלתי מחובר של הנגד 2k למעקה - (GND).

6. חבר את המפרק של הנגד 4.7k ו- 2k לסיכה ADC (סיכה אנלוגית). הרגע יצרנו מחלק מתח המחלק את המתח המרבי הנקרא בפין מ -3.3 וולט עד פחות מ -1 וולט. אתה יכול לשחק עם שילוב משלך אם אתה רוצה, אך זכור כי המתח שניתן לפין האנלוגי חייב להיות פחות מ- 1V.

7. לבסוף, חבר את סיכת ה- RST (איפוס) שבנוצה לסיכה 16 על הנוצה (חוט כתום בתמונה). תצורה זו מאפשרת לחוזה הנוצות להיכנס למצב שינה עמוק כדי לחסוך בחשמל.

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

שלב 7: פרויקט קבוע (אופציונלי)

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