- רכיבים נדרשים:
- הכנת ה- Raspberry Pi:
- בדוק התקנת WebIOPi:
- בניית יישום האינטרנט לאוטומציה ביתית של פטל:
- עריכות שרת WebIOPi לאוטומציה ביתית:
- תרשים מעגל והסבר:
היי חבר'ה, ברוכים הבאים להדרכה של היום, אחד הדברים הטובים ב- Raspberry Pi הוא היכולת והקלות הגדולים שבהם הוא נותן לכם את האפשרות לחבר מכשירים לאינטרנט במיוחד עבור פרויקטים הקשורים לאוטומציה ביתית. היום אנו הולכים לבחון את האפשרות לשלוט במכשירי AC בלחיצת כפתורים בדף אינטרנט באמצעות האינטרנט. באמצעות מערכת אוטומציה ביתית מבוססת IoT זו תוכלו לשלוט במכשירי החשמל הביתיים שלכם מכל מקום בעולם. ניתן להפעיל שרת אינטרנט זה מכל מכשיר שיכול להריץ יישומי HTML, כמו טלפון חכם, טאבלט, מחשב וכו '.
רכיבים נדרשים:
עבור פרויקט זה, הדרישות ייפלו בשתי קטגוריות, חומרה ותוכנה:
I. דרישות חומרה:
- פטל פי 3 (כל גרסה אחרת תהיה נחמדה)
- כרטיס זיכרון 8 או 16GB עם ג'ספי Raspbian
- ממסרי 5v
- טרנזיסטורים 2n222
- דיודות
- חוטי מגשר
- חסימות חיבור
- נוריות לבדיקה.
- מנורת AC לבדיקה
- כבלים של לוח לחם ומגשר
- נגד 220 או 100 אוהם
II. דרישות תוכנה:
מלבד מערכת ההפעלה Raspbian Jessie הפועלת על פטל פטל, אנו נשתמש גם בעבודת מסגרת WebIOPi, פנקס רשימות ++ הפועל במחשב האישי וב- filezila כדי להעתיק קבצים מהמחשב לפטל פטל, במיוחד לקבצי אפליקציית האינטרנט.
כמו כן אתה לא צריך לקודד בפייתון עבור פרויקט אוטומציה ביתית זה, WebIOPi תעשה את כל העבודה.
הכנת ה- Raspberry Pi:
זה הרגל כלשהו מבחינתי ואני חושב שזה טוב, הדבר הראשון שאני עושה בכל פעם שאני רוצה להשתמש ב- Raspberry Pi הוא לעדכן את ה- PI. עבור פרויקט זה, חלק זה יכלול את הליכי העדכון של Pi והתקנת מסגרת WebIOPi אשר יסייעו לנו להתמודד עם תקשורת מדף האינטרנט לפטל פטל. אני בטח צריך לציין שניתן לעשות זאת גם בצורה קלה יותר לטעון באמצעות עבודת מסגרת הבקבוק של פיתון, אך אחד הדברים המעניינים בעיצוב DIY הוא כאשר אתה מסתכל מתחת למכסה המנוע ועושה את העבודה הקשה. זה המקום שבו מגיע כל השמחה של DIY.
כדי לעדכן את פטל פי פטל למטה ואז לאתחל מחדש את ה- RPi;
sudo apt-get עדכון
עם זאת, הדבר הבא הוא להתקין את מסגרת webIOPi.
ודא שאתה נמצא בספרייה הביתית באמצעות;
cd ~
השתמש ב- wget כדי לקבל את הקובץ מדף sourceforge שלהם;
wget
לאחר סיום ההורדה, חילץ את הקובץ ונכנס לספרייה;
tar xvzf WebIOPi-0.7.1.tar.gz cd WebIOPi-0.7.1 /
בשלב זה לפני הפעלת ההתקנה, עלינו להתקין תיקון מכיוון שגרסה זו של ה- WebIOPi אינה עובדת עם פטל pi 3 בו אני משתמש ולא הצלחתי למצוא גרסה של WebIOPi העובדת במפורש עם ה- Pi 3.
הפקודות שלהלן משמשות להתקנת תיקון כשהן עדיין בספריה WebIOPi, הפעל;
wget https://raw.githubusercontent.com/doublebind/raspi/master/webiopi-pi2bplus.patch תיקון -p1 -i webiopi-pi2bplus.patch
אז נוכל להפעיל את התקנת ההתקנה עבור ה- WebIOPi באמצעות;
sudo./setup.sh
המשך לומר כן אם תתבקש להתקין תלות כלשהי במהלך התקנת ההתקנה. בסיום, אתחל את ה- pi שלך;
אתחול סודו
בדוק התקנת WebIOPi:
לפני שנקפוץ לסכימות וקודים, כאשר ה- Raspberry Pi מופעל מחדש, נצטרך לבדוק את התקנת ה- WebIOPi שלנו כדי להיות בטוחים שהכל עובד בסדר לפי הצורך.
הפעל את הפקודה;
sudo webiopi -d -c / etc / webiopi / config
לאחר הוצאת הפקודה שלמעלה על ה- pi, הפנה את דפדפן האינטרנט של המחשב המחובר ל- pipberry pi אל http: // raspberrypi. mshome.net:8000 או http; // כתובת ה- IP של thepi: 8000. המערכת תבקש ממך שם משתמש וסיסמה.
שם המשתמש הוא webiopi הסיסמה היא פטל
כניסה זו ניתנת להסרה מאוחר יותר אם תרצה בכך, אך אפילו למערכת האוטומציה הביתית שלך מגיעה רמת אבטחה נוספת כדי למנוע מכל מי שיש לו מכשירי ה- IP השולטים והתקני ה- IOT בביתך.
לאחר הכניסה, הסתכל סביב, ואז לחץ על קישור הכותרת של GPIO.
לבדיקה זו אנו נחבר נורית ל- GPIO 17, אז המשך והגדר את GPIO 17 כפלט.
עם זאת, חבר את הוביל לפאי הפטל שלך כפי שמוצג בתרשימים שלמטה.
לאחר החיבור, חזור לדף האינטרנט ולחץ על כפתור הסיכה 11 כדי להפעיל או לכבות את נורית הנורית. בדרך זו אנו יכולים לשלוט ב- Raspberry Pi GPIO באמצעות WebIOPi.
לאחר הבדיקה, אם הכל עבד כמתואר, נוכל לחזור לטרמינל ולעצור את התוכנית באמצעות CTRL + C. אם יש לך בעיה עם ההתקנה הזו, פגע בי דרך סעיף ההערות.
מידע נוסף על Webiopi ניתן למצוא בדף ה- Wiki שלו (http://webiopi.trouch.com/INSTALL.html)
עם סיום המבחן, אנו מוגדרים להתחיל את הפרויקט הראשי.
בניית יישום האינטרנט לאוטומציה ביתית של פטל:
כאן נערוך את תצורת ברירת המחדל של שירות WebIOPi ונוסיף קוד משלנו להפעלה בעת קריאה. הדבר הראשון שנעשה הוא להתקין PCzilla או תוכנת העתק FTP / SCP אחרת על המחשב האישי שלנו. תסכים איתי שהקידוד ב- pi דרך הטרמינל הוא די מלחיץ, ולכן filezilla או כל תוכנת SCP אחרת יועילו לך בשלב זה. לפני שנתחיל לכתוב את קודי ה- html, css ו- java עבור יישום האינטרנט הזה לאוטומציה ביתית של IoT ולהעבירם ל- Raspberry Pi, מאפשר ליצור את תיקיית הפרויקט בה יהיו כל קבצי האינטרנט שלנו.
וודא שאתה נמצא בספרייה הביתית ולאחר מכן צור את התיקיה, היכנס לתיקיה שנוצרה וצור תיקיית HTML בספריה:
cd ~ mkdir webapp cd webapp mkdir html
צור תיקיה עבור סקריפטים, CSS ותמונות בתוך תיקיית ה- html
mkdir html / css mkdir html / img mkdir html / scripts
עם הקבצים שנוצרו מאפשר לנו לעבור לכתיבת הקודים במחשב האישי שלנו ואז לעבור ל- Pi באמצעות filezilla.
קוד JavaScript:
פיסת הקוד הראשונה שנכתוב היא של כתב ה- javascript. זהו סקריפט פשוט לתקשר עם שירות WebIOPi.
חשוב לציין כי עבור פרויקט זה, אפליקציית האינטרנט שלנו תורכב מארבעה לחצנים, מה שאומר שאנחנו מתכננים לשלוט בארבעה פינים של GPIO בלבד, אם כי נשלוט רק בשני ממסרים בהפגנה שלנו. בדקו את הסרטון המלא בסוף.
webiopi (). מוכן (function () {webiopi (). setFunction (17, "out"); webiopi (). setFunction (18, "out"); webiopi (). setFunction (22, "out"); webiopi ().setFunction (23, "out"); var content, button; content = $ ("# content"); button = webiopi (). createGPIOButton (17, "ממסר 1"); content.append (כפתור); כפתור = webiopi (). createGPIOButton (18, "ממסר 2"); content.append (כפתור); button = webiopi (). createGPIOButton (22, "ממסר 3"); content.append (כפתור); כפתור = webiopi ().createGPIOButton (23, "ממסר 4"); content.append (כפתור);});
הקוד שלמעלה פועל כאשר ה- WebIOPi מוכן.
להלן הסברנו על קוד JavaScript:
webiopi (). ready (function (): זה רק מורה למערכת שלנו ליצור פונקציה זו ולהפעיל אותה כאשר ה- webiopi מוכן.
webiopi (). setFunction (23, "out"); זה עוזר לנו לומר לשירות WebIOPi להגדיר את GPIO23 כפלט. יש לנו כאן ארבעה כפתורים, יתכן שיהיה לך יותר מכך אם אתה מיישם יותר כפתורים.
תוכן var, כפתור; שורה זו אומרת למערכת שלנו ליצור משתנה בשם תוכן ולהפוך את המשתנה לכפתור.
content = $ ("# content"); משתנה התוכן עדיין ישמש בכל ה- html וה- css שלנו. לכן כאשר אנו מתייחסים ל- # content, מסגרת WebIOPi יוצרת את כל מה שקשור אליה.
כפתור = webiopi (). createGPIOButton (17, "ממסר 1"); WebIOPi יכול ליצור סוגים שונים של כפתורים. פיסת הקוד שלמעלה עוזרת לנו לומר לשירות WebIOPi ליצור כפתור GPIO השולט על סיכת ה- GPIO במקרה זה 17 שכותרתו "ממסר 1". כנ"ל לגבי האחרים.
content.append (כפתור); הוסף קוד זה לכל קוד אחר עבור הכפתור שנוצר בקובץ ה- html או במקום אחר. ניתן ליצור כפתורים נוספים וכולם יהיו בעלי אותם מאפיינים של כפתור זה. זה שימושי במיוחד בעת כתיבת CSS או סקריפט.
לאחר יצירת קבצי JS, אנו שומרים אותו ואז מעתיקים אותו באמצעות filezilla ל- webapp / html / scripts אם יצרת את הקבצים שלך באותה צורה בה עשיתי את שלי.
עם זאת, אנו עוברים ליצירת CSS. אתה יכול להוריד את הקוד כולו מהקישור שניתן בסעיף הקוד בסופו של דבר.
קוד CSS:
ה- CSS עוזר לנו להפוך את דף האוטומציה הביתית של IoT Raspberry Pi למראה יפה.
רציתי שדף האינטרנט ייראה כמו התמונה למטה וכך הייתי צריך לכתוב את גיליון הסגנון smarthome.css כדי להשיג אותו.
להלן הסברנו על קוד CSS:
סקריפט ה- CSS מרגיש מגושם מכדי לכלול אותו כאן, אז אני פשוט אבחר חלק ממנו ואשתמש בהם לצורך פירוט. תוכלו להוריד את קובץ ה- CSS המלא מכאן. קל CSS ותוכלו להבין זאת רק על ידי מעבר לקוד CSS. אתה יכול בקלות לגלוש על החלק הזה ולהשתמש מייד בקוד CSS שלנו.
החלק הראשון של התסריט מייצג את גיליון הסגנונות לגוף אפליקציית האינטרנט ומוצג להלן;
גוף {רקע-צבע: #ffffff; תמונת רקע: url ('/ img / smart.png'); רקע-חזרה: אין לחזור; עמדת רקע: מרכז; גודל רקע: כריכה; גופן: מודגש 18px / 25px Arial, sans-serif; צבע: LightGray; }
אני רוצה להאמין שהקוד לעיל מובן מאליו, אנו קובעים את צבע הרקע כ- #ffffff שהוא לבן ואז מוסיפים תמונת רקע שנמצאת במיקום התיקייה (זוכרים את הגדרת התיקייה הקודמת שלנו?), אנו מבטיחים שהתמונה לא ' t חזור על ידי הגדרת המאפיין רקע-חזרה ללא חזור, ואז הורה ל- CSS לרכז את הרקע. לאחר מכן נעבור להגדרת גודל הרקע, הגופן והצבע.
כשהגוף נעשה, כתבנו את ה- css כדי שהכפתורים יראו יפים.
כפתור {תצוגה: חסום; מיקום: קרוב משפחה; שוליים: 10 פיקסלים; ריפוד: 0 10 פיקסלים; יישור טקסט: מרכז; קישוט טקסט: אין; רוחב: 130 פיקסלים; גובה: 40 פיקסלים; גופן: מודגש 18px / 25px Arial, sans-serif; צבע שחור; טקסט צל: 1px 1px 1px rgba (255,255,255,.22); -רדיוס גבול-רשת: 30 פיקסלים; רדיוס מוז-גבול: 30 פיקסלים; גבול רדיוס: 30 פיקסלים;
כדי לשמור על הקצרה הזו, כל דבר אחר בקוד נעשה גם כדי שייראה טוב. אתה יכול לשנות אותם לראות מה קורה, אני חושב שזה נקרא למידה באמצעות ניסוי וטעייה אבל דבר אחד טוב ב- CSS הוא דברים שבאים לידי ביטוי באנגלית רגילה, מה שאומר שהם די קלים להבנה. בחלק השני של בלוק הכפתורים יש כמה תוספות להצללת טקסט על הכפתור וצל הכפתור. יש לו גם אפקט מעבר קל שעוזר לו להיראות נחמד ומציאותי כשלוחצים על הכפתור. אלה מוגדרים בנפרד עבור ערכות אינטרנט, Firefox, אופרה וכו 'רק כדי להבטיח שדף האינטרנט יופיע בצורה אופטימלית בכל הפלטפורמות.
גוש הקוד הבא נועד לשירות WebIOPi שיאמר לו שזה קלט לשירות WebIOPi.
i nput {תצוגה: חסום; רוחב: 160 פיקסלים; גובה: 45 פיקסלים; }
הדבר האחרון שאנחנו רוצים לעשות הוא לתת איזושהי אינדיקציה כאשר לחצו על הכפתור. כך שתוכלו להסתכל על המסך וצבע הכפתורים יידע את המצב הנוכחי. לשם כך יושם שורת הקוד שלמטה עבור כל כפתור אחד.
# gpio17.LOW {צבע רקע: אפור; צבע שחור; } # gpio17.HIGH {צבע רקע: אדום; צבע: LightGray; }
שורות הקודים לעיל פשוט משנות את צבע הכפתור על סמך מצבו הנוכחי. כאשר הכפתור כבוי (LOW) צבע הרקע של הכפתורים הופך לאפור כדי להראות שהוא לא פעיל וכשהוא מופעל (HIGH) צבע הרקע של הכפתור הופך לאדום.
CSS בתיק, מאפשר לשמור כ- smarthome.css, ואז להעביר אותו באמצעות filezilla (או כל תוכנת SCP אחרת בה תרצה להשתמש) לתיקיית הסגנונות שבפי הפטל שלנו ולתקן את החלק האחרון, קוד ה- HTML. זכור להוריד CSS מלא מכאן.
קוד HTML:
קוד ה- html מושך הכל יחד, את ה- javascript ואת גיליון הסגנון.
לחץ על הכפתור; לקבל בייקון
בתוך תג הראש קיימות כמה תכונות חשובות מאוד.
שורת הקוד שלמעלה מאפשרת לשמור את אפליקציית האינטרנט בשולחן העבודה הנייד באמצעות כרום או ספארי נייד. ניתן לעשות זאת באמצעות תפריט הכרום. זה נותן לאפליקציה תחושת השקה קלה משולחן העבודה הנייד או הבית.
שורת הקוד הבאה שלמטה נותנת איזושהי היענות לאפליקציית האינטרנט. זה מאפשר לו לכבוש את המסך של כל מכשיר שעליו הוא הושק.
שורת הקוד הבאה מצהירה על הכותרת המוצגת בשורת הכותרת של דף האינטרנט.
ארבעת שורת הקודים הבאים מבצעים כל אחד את הפונקציה של קישור קוד ה- html למספר משאבים שהוא זקוק להם בכדי לעבוד כרצונם.
השורה הראשונה מעל שיחות במסגרת WebIOPi העיקרית JavaScript שהיא בקידוד קשיח בתיקיית השורש. זה צריך להיקרא בכל פעם שיש להשתמש ב- WebIOPi.
הקו השני מצביע בדף html כדי תסריט jQuery שלנו, השלישיות נקודה זה בכיוון של גיליון הסגנון שלנו. לבסוף השורה האחרונה מסייעת בהגדרת סמל שישמש לשולחן העבודה הנייד למקרה שנחליט להשתמש בו כאפליקציית אינטרנט או כ- favicon לדף האינטרנט.
קטע הגוף של קוד ה- html מכיל רק תגי הפסקה כדי להבטיח שהלחצנים מיושרים כראוי עם השורה שלמטה שאומרים לקוד ה- html שלנו להציג את הכתוב בקובץ ה- JavaScript. Id =" תוכן" צריך להזכיר לך את הצהרת התוכן עבור הכפתור שלנו קודם לכן תחת קוד JavaScript.
אתה מכיר את התרגיל, את קוד ה- HTML כ- index.html ועבר לתיקיית ה- html ב- Pi באמצעות filezilla. אתה יכול להוריד את כל קובצי CSS, JS ו- HTML מכאן.
עריכות שרת WebIOPi לאוטומציה ביתית:
בשלב זה, אנו מוכנים להתחיל ליצור את הסכימות שלנו ולבדוק את אפליקציית האינטרנט שלנו, אך לפני כן עלינו לערוך את קובץ התצורה של שירות ה- webiopi, ולכן כדאי להשתמש בנתונים מתיקיית ה- HTML שלנו במקום בקבצי התצורה המצורפים אליו..
כדי לערוך את התצורה, הפעל את הפעולות הבאות באישור בסיס
sudo nano / etc / webiopi / config
חפש את הקטע http של קובץ התצורה, בדוק מתחת לקטע שבו יש לך משהו כמו, # השתמש ב- doc-root כדי לשנות את מיקום ברירת המחדל של קבצי HTML ומשאבים
הגב על כל דבר שמתחתיה באמצעות # ואז אם התיקיה שלך מוגדרת כמו שלי, הפנה את שורש ה- doc שלך לנתיב של קובץ הפרויקט שלך
doc-root = / home / pi / webapp / html
שמור וצא. אתה יכול גם לשנות את היציאה מ- 8000, אם יש לך שרת אחר הפועל על ה- pi באמצעות יציאה זו. אם לא לשמור ולהפסיק, כשאנחנו ממשיכים הלאה.
חשוב לציין כי באפשרותך לשנות את הסיסמה של שירות WebIOPi באמצעות הפקודה;
sudo webiopi-passwd
זה יבקש ממך שם משתמש וסיסמה חדשים. ניתן גם להסיר זאת לחלוטין אך אבטחה חשובה, נכון?
לבסוף הפעל את שירות WebIOPi על ידי הנפקת הפקודה למטה:
sudo /etc/init.d/webiopi מתחילים
ניתן לבדוק את מצב השרת באמצעות;
מצב sudo /etc/init.d/webiopi
ניתן להפסיק את פעולתו באמצעות;
sudo /etc/init.d/webiopi עצור
כדי להגדיר את WebIOPi כך שיפעל בעת האתחול, השתמש ב;
ברירת מחדל של sudo update-rc.d webiopi
אם ברצונך להפוך ולהפסיק את פעולתו בעת האתחול, השתמש ב;
הסרת sudo update-rc.d webiopi
תרשים מעגל והסבר:
עם הגדרת התוכנה שלנו, כולנו אמורים להתחיל ליצור את הסכימות לפרויקט זה עם מכשיר ביתי מבוקר אינטרנט.
אמנם לא יכולתי לשים את ידי על מודולי ממסר, שלדעתי קל יותר לעבוד איתם עבור חובבים. אז אני מצייר כאן את התרשימים של ממסרי 5V בודדים ועצמאיים רגילים.
חבר את המעגל שלך כפי שמוצג במעגל הטיגון שלמעלה. עליך לשים לב כי COM, NO (בדרך כלל פתוח) ו- NC (בדרך כלל קרוב) של הממסר שלך עשויים להיות ממוקמים בצדדים / נקודות שונים. אנא השתמש במילימטר כדי לבדוק זאת. למידע נוסף על ממסר כאן.
כאשר רכיבינו מחוברים, הפעל את השרת שלך מדף אינטרנט, עבור אל ה- IP של ה- Raspberry Pi שלך וציין את היציאה כפי שתואר קודם, התחבר באמצעות שם המשתמש והסיסמה שלך, ועליך לראות דף אינטרנט שנראה בדיוק כמו התמונה למטה.
עכשיו אתה יכול לשלוט בקלות בארבע יישומי AC Home מכל מקום באופן אלחוטי, פשוט על ידי לחיצה על הכפתורים. זה יעבוד ממוביילפון, טאבלט וכו 'ותוכל להוסיף עוד כפתורים וממסרים לשליטה במכשירים נוספים. בדוק את הסרטון המלא למטה.
זהו זה חבר'ה, תודה שנשארים בשביל זה. אם יש לך שאלות, שחרר אותן בתיבת ההערות.