הקו הראשון על המסך
שלוש שורות קוד. מסך קטן. ורגע שלא תשכחו. היום נצייר קו לבן על רקע שחור ונבין בדיוק איך זה עובד.
צפו בהדגמה לפני שמתחילים
סרטון של כ-17 דקות שמראה בדיוק מה נעשה בשיעור הזה. מומלץ לפתוח אותו בלשונית נפרדת ולעקוב במקביל.
010 ציור קווים על מסך OLED (17 דקות)לפני שמתחילים
אם עשיתם את שיעור 2, הכל אמור להיות מוכן. בואו נוודא:
1. ה-ESP32 מחובר בכבל USB
2. Thonny פתוח ובתחתית מופיע >>>
3. בצד של MicroPython device מופיעים הקבצים ssd1306.py ו-font.py
חזרו ל-שיעור 2 ועקבו אחרי השלבים שם. אחרי שהכל עובד, חזרו לכאן.
מה בידיים שלנו?
ארבעה רכיבים. בואו נכיר כל אחד.
ESP32
מחשב זעיר בגודל אגודל. מעבד + זיכרון + WiFi. הוא מריץ את הקוד שלנו.
מסך OLED
128×64 נקודות, שחור-לבן בלבד. כל פיקסל: 0 = כבוי, 1 = דלוק.
I2C — החיבור
שפת תקשורת בין הלוח למסך. שני כבלים: SCL (פין 22) ו-SDA (פין 21).
MicroPython
שפת Python שרצה ישירות על הלוח. אותה Python שמשתמשים בה בתעשייה.
הלוח מדבר עם המסך דרך חיבור I2C (שני חוטים)
I2C (נהגה "אי-טו-סי") הוא פרוטוקול תקשורת פשוט שמאפשר לרכיבים אלקטרוניים לדבר אחד עם השני דרך שני חוטים בלבד: אחד לסנכרון (SCL, כמו "שעון" שאומר מתי לדבר) ואחד לנתונים (SDA, המידע עצמו). זה כמו שיחה מסודרת: אחד שואל, השני עונה, בתור. בזכות I2C אפשר לחבר כמה רכיבים (מסך, חיישנים, זיכרון) באותם שני חוטים.
איפה כל נקודה על המסך?
לפני שמציירים, צריך להבין את "המפה" של המסך. (0,0) זה הפינה השמאלית העליונה.
במתמטיקה Y גדל כלפי מעלה. על מסך מחשב Y גדל כלפי מטה. ככל ש-Y גדול יותר, הנקודה נמוכה יותר.
המסך הוא 128 עמודות × 64 שורות. (0,0) = פינה שמאלית-עליונה. Y גדל כלפי מטה.
פתחו את הקובץ והריצו
הקובץ כבר מוכן בתיקיית הפרויקט. לא צריך להקליד כלום.
פתחו את הקובץ ב-Thonny
בתפריט העליון: File → Open. נווטו ל-c:\projects\single_button ופתחו את הקובץ 010 lines.py.
הריצו
לחצו על הכפתור הירוק Run (או מקש F5). אם Thonny שואל איפה לשמור, בחרו MicroPython device.
הסתכלו על המסך
אמור להופיע קו לבן אלכסוני על רקע שחור. אם המסך ריק, בדקו שהכבל מחובר ונסו שוב.
מה כתוב בקובץ?
פחות מ-10 שורות. בואו נבין כל שורה.
# ייבוא ספריות — כלים מוכנים שנכתבו עבורנו from machine import Pin, I2C import ssd1306 # יצירת ערוץ תקשורת I2C עם המסך i2c = I2C(scl=Pin(22), sda=Pin(21), freq=400000) # יצירת אובייקט המסך: רוחב=128, גובה=64, חיבור=i2c display = ssd1306.SSD1306_I2C(128, 64, i2c) # ניקוי מסך: 0=שחור (כבה הכל), 1=לבן (הדלק הכל) display.fill(0) # ציור קו: (x_התחלה, y_התחלה, x_סוף, y_סוף, צבע) display.line(30, 10, 50, 50, 1) # שלח את מה שציירנו למסך — בלי זה לא יופיע כלום! display.show()
שורה אחר שורה
ייבוא ספריות
from machine import Pin, I2C — אומרים לפייתון: "תביא לי את הכלים Pin ו-I2C מהחבילה machine". הם נותנים לנו גישה לחומרה.
import ssd1306 — הקובץ שהעלינו ללוח בשיעור 2. הוא יודע לדבר עם המסך הספציפי שלנו.
יצירת I2C
פותחים ערוץ תקשורת בין הלוח למסך. כמו לפתוח שיחת טלפון לפני שמדברים.
| פרמטר | ערך | מה זה |
|---|---|---|
scl | Pin(22) | פין שעון — מסנכרן את השיחה |
sda | Pin(21) | פין נתונים — מעביר את המידע |
freq | 400000 | מהירות: 400,000 ביט בשנייה |
יצירת אובייקט המסך
ssd1306.SSD1306_I2C(128, 64, i2c) — יוצרים "שלט רחוק" למסך. אומרים לו: אתה רחב 128, גבוה 64, ומחובר דרך i2c.
מהרגע הזה — כל פקודה שנכתוב עם display הולכת למסך.
ניקוי — display.fill(0)
מכבה את כל 8,192 הפיקסלים. המסך הופך שחור.
fill(0) = הכל שחור. fill(1) = הכל לבן.
תמיד מתחילים עם fill(0) כדי לנקות מה שהיה לפני.
ציור — display.line(30, 10, 50, 50, 1)
הפקודה המרכזית. חמישה מספרים:
| מיקום | ערך | מה זה |
|---|---|---|
| 1 | 30 | X התחלה — עמודה 30 |
| 2 | 10 | Y התחלה — שורה 10 |
| 3 | 50 | X סוף — עמודה 50 |
| 4 | 50 | Y סוף — שורה 50 |
| 5 | 1 | צבע: 1 = לבן |
שליחה — display.show()
כל מה שציירנו עד עכשיו נשמר בזיכרון הלוח, לא על המסך. show() שולח את הכל למסך בבת אחת.
שכחתם display.show() — המסך ריק. לכולם זה קורה לפחות פעם אחת.
עכשיו תורכם!
הקוד עובד? מעולה. נסו את האתגרים האלה לבד. שנו את המספרים בקובץ, שמרו, והריצו שוב.
צייר X גדול
שני קווים שחוצים את המסך מפינה לפינה
צייר שני קווים: קו מהפינה השמאלית-עליונה לימנית-תחתונה, וקו מהימנית-עליונה לשמאלית-תחתונה. התוצאה — X ענק.
display.line() לפני ה-show(). הפינות: (0,0), (127,0), (0,63), (127,63).ציירו אות משמכם
בעזרת קווים בלבד
בחרו אות אחת משמכם וציירו אותה על המסך. לא צריך מושלם — מספיק שאפשר לזהות.
בונוס — מסגרת
ארבעה קווים שמקיפים את כל המסך
ציירו ארבעה קווים שיוצרים מסגרת מלאה סביב קצוות המסך.
מה למדנו היום
import
מביא ספריות מוכנות
I2C
ערוץ תקשורת לוח ↔ מסך
(0,0) שמאל-מעלה
Y גדל כלפי מטה
fill(0)
מנקה את המסך
line(x1,y1,x2,y2,c)
מצייר קו בין שתי נקודות
show()
שולח ציור למסך — חובה!
בשיעור 4 נגרום לקו לזוז! נלמד על לולאות ומשתנים שגורמים לאנימציה.