שליטה מדף אינטרנט — הלוח שלכם הופך לאתר

מה נלמד כאן

• מה זה Wi-Fi, ומה שלושת מצבי העבודה של ה-ESP32
• מה זו כתובת IP ולמה כל מכשיר צריך אחת
• הבלוק enable AP mode — הלוח מייצר רשת Wi-Fi משלו
• מה זה שרת אינטרנט ואיך הוא עונה לבקשות
• לבנות דף שליטה שלם — מבלוקים בלבד

המכשיר הכי חזק בשיעור הזה כבר בכיס שלכם

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

טלפון, טאבלט, מחשב נייד, מחשב של סבתא. אם יש לו דפדפן — הוא יכול לשלוט בלוח שלכם. בלי להתקין כלום.

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

הרכיבים

Wi-Fi — שלושה מצבים

Wi-Fi היא טכנולוגיה שמחברת מכשירים לרשת בלי חוטים. הבלוטות׳ מהשיעור הקודם היה מתאים לשני מכשירים קרובים; ה-Wi-Fi בנוי לרשת שלמה, עם הרבה מכשירים, ומעביר הרבה יותר מידע.

ל-ESP32 יש שלוש דרכים להשתמש ב-Wi-Fi:

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

מצב 2 — נקודת גישה (AP). הלוח מייצר רשת Wi-Fi בעצמו. הוא הופך להיות הראוטר, ומכשירים אחרים מתחברים אליו. זה המצב שנשתמש בו היום.

מצב 3 — שניהם יחד. הלוח גם מתחבר לרשת של הבית וגם מייצר רשת משלו. שימושי כשרוצים גם אינטרנט וגם שליטה ישירה.

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

כתובת IP — המספר של הבית

ברשת יש הרבה מכשירים, ולכן כל אחד צריך כתובת, בדיוק כמו שלכל בית ברחוב יש מספר. הכתובת הזאת נקראת כתובת IP, והיא בנויה מארבעה מספרים בין 0 ל-255, עם נקודות ביניהם — למשל 192.168.10.136.

שלושת המספרים הראשונים (192.168.10) הם השכונה — כל המכשירים באותה רשת חולקים אותם. המספר האחרון (136) הוא מספר הבית — הוא מבדיל בין מכשיר למכשיר.

יש דבר נוח מאוד במצב AP: כתובת ה-IP של הלוח תמיד קבועה — 192.168.4.1. אין צורך לחפש אותה, אין צורך לשנות אותה. זה תמיד אותו מספר.

מה זה שרת אינטרנט

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

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

החיבור

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

בנו את זה בשלבים, ובדקו כל רכיב לפני שעוברים לבא:

1. קודם קווי המתח — 5V ו-GND לאורך הלוח.
2. הנורית עם הנגד, מפין 5.
3. נגד האור עם נגד 10kΩ, אל פין 32.
4. חיישן DHT11 אל פין 18.
5. מנהל המנוע: IN- לפין 16, IN+ לפין 17, והמנוע אל היציאות שלו.

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

הבלוקים

התוכנית הזאת ארוכה, ובצדק — היא בונה אתר שלם. אבל היא מתחלקת לשני חלקים ברורים: מה קורה בלוח ואיך נראה הדף.

חלק א׳ — מכינים את הרשת והשרת

בראש התוכנית יש שורה של בלוקי set [שם] data type [String]. הם מכריזים על המשתנים שבהם נשמור נתונים — T לטמפרטורה, H ללחות, L לאור, ועוד. זה כמו להוציא מגירות ריקות לפני שמסדרים את החדר.

אחר כך באים שני הבלוקים החשובים:

enable AP mode, SSID: [WebControl], password: [12345678], channel: [1]

זה הבלוק שהופך את הלוח לראוטר. SSID הוא שם הרשת שיופיע ברשימת ה-Wi-Fi בטלפון. password היא הסיסמה — לפחות 8 תווים. channel הוא הערוץ שבו הרשת משדרת; אפשר להשאיר 1.

initialize web server port [80]

מדליק את השרת. המספר 80 הוא ה״דלת״ שבה דפדפנים נכנסים כברירת מחדל — לכן אין צורך לכתוב אותו בכתובת.

חלק ב׳ — עונים לבקשות

web server processes request [/] — בלוק בצורת מעטפת, שכל מה שבתוכו מופעל כשמישהו פותח את הדף הראשי. בתוכו יושב web server sends [webpage] data to client (web generation result) — כלומר: שלח את הדף שבנינו.

web server processes request [/control] — המעטפת השנייה, וזאת שעושה את העבודה האמיתית. היא מופעלת כשמישהו לוחץ על מתג בדף. בתוכה:

• set [device] to (receive value from client [device]) — מי צריך להשתנות? הנורית או המאוורר?
• set [data] to (receive value from client [state]) — למה לשנות אותו? ON או OFF?

ואז שורה של בלוקי if מקוננים:

• אם device = LEDData ו-data = ON → single LED [5] [on]
• אם device = LEDData ו-data = OFF → single LED [5] [off]
• אם מדובר במאוורר → 5V 130 DC motor IN- [16] IN+ [17] speed [255] להפעלה, ו-speed [0] לעצירה.

המספר 255 הוא המהירות המקסימלית, 0 הוא עצירה מלאה, וכל מספר באמצע נותן מהירות בינונית.

חלק ג׳ — שולחים נתוני חיישנים

web server processes request [/data] רץ כשהדף מבקש עדכון. בתוכו:

• set [T] to (join (humiture [18] temperature) [°C])
• set [H] to (join (humiture [18] humidity) [%])
• set [L] to (light sensor [32])

ואז web server sends [JSON] data to client (…). הלוח אורז את שלושת המספרים בחבילה קטנה ומסודרת ושולח אותה. החבילה נראית בערך ככה — לא צריך להקליד את זה, רק להסתכל:

{"H":"48%","T":"26°C","L":"528"}

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

חלק ד׳ — מעצבים את הדף

זה החלק המפתיע: גם דף האינטרנט עצמו בנוי מבלוקים. הבלוק web design הוא המעטפת, ובתוכו:

• create block container, set name [test] — קופסה שמכילה דברים אחרים.
• create heading [1], set name [title], initial content [ESP32 Device Controller] — כותרת ראשית. המספר הוא הגודל: 1 הכי גדול.
• create switch, when on … when off … — מתג הזזה. בתוך when on יושב send data [ON] to [FanData] — כלומר: כשהמתג נדלק, שלח ללוח את המילה ON.
• create text, set name [FanKEY], initial content [OFF] — טקסט שמראה את המצב הנוכחי.

ולבסוף יש בלוקי attribute settings שקובעים איך הדף נראה: set padding (רווח מבפנים), set margin (רווח מבחוץ), set background color (צבע רקע) ו-set border radius (פינות מעוגלות).

הבלוק data request, request [repeatedly] הוא זה שגורם למספרים להתעדכן לבד כל שתי שניות. בלעדיו הייתם צריכים לרענן את הדף בכל פעם.

מריצים

⬇ להורדת הקובץ Web Control.sb3 — גוררים אותו לתוך ACECode ולוחצים Upload.

ההסבר המלא על צריבה נמצא בשיעור ההתקנה.

אחרי הצריבה, שלושה שלבים:

1. פתחו את הגדרות ה-Wi-Fi בטלפון. חפשו רשת בשם WebControl והתחברו אליה עם הסיסמה 12345678. הטלפון אולי יתלונן ש״אין חיבור לאינטרנט״ — זה בסדר גמור, הרשת הזאת מובילה ללוח, לא לעולם.
2. פתחו דפדפן והקלידו בשורת הכתובת: 192.168.4.1
3. הדף ייטען.

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

מה קרה כאן

זה שיא הקורס, ומגיע לכם לעצור ולהבין למה.

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

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

תרגילים

1. רשת בשם שלכם. בבלוק enable AP mode, שנו את ה-SSID מ-WebControl ל-ROOM ואת השם שלכם, ואת הסיסמה למשהו אחר (לפחות 8 תווים). צרבו, והתחברו מחדש עם הפרטים החדשים.

2. מהירות בינונית. בבלוק 5V 130 DC motor, שנו את speed מ-255 ל-120. המאוורר יסתובב לאט יותר. נסו גם 60 — באיזה מספר הוא כבר לא מצליח להתחיל לזוז?

3. כותרת חדשה. בבלוק create heading [1] … initial content, החליפו את ESP32 Device Controller בשם שלכם. שנו גם set background color לצבע אחר. רעננו את הדף בדפדפן.

4. עדכון מהיר יותר. הבלוק wait [1] seconds שבסוף החלק של השרת קובע כל כמה זמן נקראים החיישנים. שנו ל-0.5 וראו אם המספרים בדף מתעדכנים מהר יותר — ואם הלוח מצליח לעמוד בקצב.