מנהל חלון משובץ: 10 שלבים

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

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

מלבד מתן הקוד לניהול חלונותך יש ל- MiniWin אוסף של פקדי ממשק משתמש - כפתורים, מחוונים, פסי התקדמות, עצים וכו '. תוכל לקבל מספר חלונות מסוגים שונים או מספר מופעים מאותו סוג. ניתן להזיז את Windows, לשנות את הגודל, למקסם, למזער, לסגור - כל הדברים הרגילים שאתה עושה עם חלונות במנהלי חלונות גדולים יותר. גופני TrueType עם kerning ואנטי-כינוי (גורמים לטקסט להיראות חלק יותר) נתמכים גם הם לעיבוד טקסט אטרקטיבי.

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

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

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

MiniWin הועבר ללוחות פיתוח סטנדרטיים עם מסכי מגע של יצרני בקר מיקרו ST, NXP ורנסס. ישנם מנהלי התקני חומרה ופרויקטים לדוגמה לכל המכשירים הללו. בנוסף ניתן לבנות MiniWin עבור Windows או Linux, כך שתוכל לדמות את קוד ממשק המשתמש שלך לפני שתקבל את החומרה המוטבעת שלך.

ל- MiniWin יש מחולל קוד. אתה יכול לציין את החלונות והפקדים שלך בקובץ JSON פשוט לקריאה אנושית ומחולל הקוד מנתח את הקובץ ויוצר עבורך את הקוד (יש הרבה דוגמאות להמשך). הוא יוצר יישומי סימולטור מלאים של Windows או לינוקס שניתן פשוט לבנות ויש את תצוגת ה- LCD המדומה שלך עם חלונות MiniWin שלך העובדים. אתה יכול לקחת בדיוק את אותו קוד שנוצר ולשחרר אותו לפרויקט מוטבע ולקבל את אותו קוד המציג את אותם חלונות ובקרות רגעים לאחר מכן על החומרה המוטבעת שלך.

MiniWin אינו דורש תמיכה בהפעלה במכשיר המשובץ. הכל פועל בחוט אחד. ניתן לשלב את MiniWin עם RTOS הפועל על מעבד מוטבע ויש דוגמאות לשילוב MiniWin עם FreeRTOS.

מדריך זה מראה כיצד להפעיל את MiniWin במעבד STM32 M4 באמצעות לוח דיסקברי STM32F429 הזול המגיע עם צג מסך מגע QVGA שכבר מצורף. אלה זמינים בקלות מספק רכיבי האלקטרוניקה שלך.

MiniWin פועל על מיקרו-בקרי טווח בינוני ומעלה.

אספקה

לוח פיתוח STM32F429I-DISC1 וכבל מיקרו USB

הורדת STM32CubeIDE בחינם.

שלב 1: קבלת הקוד

קודם כל אתה צריך STM32CubeIDE מותקן. אתה מקבל את זה מאתר ST. עליך להירשם ולוקח זמן להורדה ולהתקנה. הכל בחינם.

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

github.com/miniwinwm/miniwinwm

ולאחר מכן בחר הורדת מיקוד. פתח את התוכן.

שלב 2: בניית פרויקט לדוגמא

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

1. בחר קובץ | ייבא …
2. פתח את הכללי ובחר פרויקט קיים לחלל העבודה. הַבָּא.
3. לחץ על עיון ונווט למקום שבו ביטלת את רוכסן MiniWin. לאחר מכן עבור אל התיקיה STM32CubeIDE / MiniWinSimple / STM32F429. לחץ על בחר תיקיה.
4. בפרויקט: סמן את MiniWinSimple_STM32F429 ולאחר מכן לחץ על סיום.
5. פרויקט MiniWinSimple_STM32F429 יופיע ב- Explorer Project שלך. בחר אותו ולאחר מכן בנה אותו עם Project | Build Project.
6. כעת חבר את כבל ה- USB שלך ללוח ולמחשב והפעל אותו באמצעות הפעלה | באגים וכאשר הוא הורד בחר הפעלה | המשך. תקבל תצוגת כיול מסך בפעם הראשונה, אז גע במרכז שלושת הצלבים בתצוגת ה- LCD. כעת תוכל לקיים אינטראקציה עם החלון בתצוגה.

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

שלב 3: הפעלת מחולל הקוד

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

1. פתח שורת פקודה ועבור לתיקייה שבה ביטלת את הרכיפה של MiniWin ולאחר מכן אל התיקייה Tools / CodeGen.
2. ההפעלה עבור Windows CodeGen.exe כבר זמינה. עבור Linux אתה צריך לבנות אותו על ידי הקלדת make. (תוכל גם לבנות אותו מהמקור עבור Windows אם אתה חושש להריץ קובץ הפעלה שהורד אך עליך להתקין את מהדר וסביבת הפיתוח. עיין בתיעוד MiniWin בתיקיית המסמכים לפרטים).
3. בתיקייה זו כמה דוגמאות לקבצי JSON. נשתמש ב- example_empty.json. עליך לערוך אותו תחילה כדי להגדיר אותו עבור Windows או Linux. פתח אותו בעורך ובחלק העליון שבו תמצא "TargetType" שנה את ערך "Linux" או "Windows" למה שאתה מפעיל את מחולל הקוד.
4. כעת הקלד codegen example_empty.json בשורת הפקודה.
5. עבור אל הפרויקט שלך ב- STM32CubeIDE ופתח את התיקייה MiniWinSimple_Common. מחק את כל הקבצים שם.
6. השארנו את "TargetName" בקובץ JSON כברירת מחדל ב- "MiniWinGen", כך שזה שם תיקיית הקוד שנוצר שלנו. עבור לתיקיה שבה ביטלת את רוכסן MiniWin ולאחר מכן את תיקיית MiniWinGen_Common. כעת בחר את כל הקבצים האלה וגרור ושחרר ואז אל STM32CubeIDE בתיקיית MiniWinSimple_Common של הפרויקט שלך.
7. כעת בנה מחדש והפעל את הפרויקט ב- STM32CubeIDE וחלון העיצוב החדש שלך יופיע. הכפתור בחלון נעלם מכיוון example_empty.json אינו מגדיר אף אחד.

שלב 4: הוספת חלון

כעת נוסיף חלון שני לקובץ התצורה של JSON ונייצר מחדש את הקוד.

1. פתח את example_empty.json בעורך טקסט.

2. תחת הקטע "Windows" קיים מערך של הגדרות חלונות אשר כרגע יש רק חלון אחד. העתיקו את כל זה…

{

"שם": "W1", "כותרת": "חלון 1", "X": 10, "Y": 15, "רוחב": 200, "גובה": 180, "גבול": נכון, "כותרת": true, "גלוי": נכון, "ממוזער": שקר}

והדבק אותו שוב עם פסיק המפריד בין 2 ההגדרות.

3. שנה את "W1" ל- "W2" ו- "חלון 1" ל"חלון 2 ". שנה את "X", "Y", "רוחב" ו"גובה "לכמה ערכים שונים תוך זכור שרזולוציית המסך היא 240 רוחב על 320.

4. שמור את הקובץ והפעל שוב את מחולל הקוד.

5. העתק את הקבצים כמו בשלב הקודם, בנה מחדש והפעל מחדש. כעת יהיו לך 2 חלונות בתצוגה.

שלב 5: הוספת פקד

כעת נוסיף כמה פקדים לחלון החדש שלך. ערוך את אותו קובץ כמו בשלב הקודם.

1. במפרט עבור חלון W1 הוסף פסיק לאחר ההגדרה האחרונה ("ממוזער": שקר) ולאחר מכן הוסף טקסט זה

"MenuBar": נכון, "MenuBarEnabled": true, "MenuItems": ["Fred", "Bert", "Pete", "Alf", "Ian"], "Buttons": [{"Name": "B1", "Label": "כפתור 1", "X": 10, "Y": 10, "מופעל": נכון, "גלוי": נכון}]

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

2. שחזר את הקוד, העתק אותו, בנה מחדש, הפעל מחדש הכל כמו קודם.

שלב 6: לגרום לבקרות לעשות משהו

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

עבור אל הפרויקט שלך ב- STM32CubeIDE ופתח את התיקיה MiniWinSimple_Common ולאחר מכן פתח את הקובץ W1.c (שם הקובץ הזה מתאים לשדה "שם" של החלון בקובץ JSON בעת יצירת הקוד).

בקובץ זה תמצא את הפונקציה window_W1_message_function (). זה נראה כמו זה:

void window_W1_message_function (const mw_message_t *message) {MW_ASSERT (message! = (void *) 0, "פרמטר Null מצביע"); / * השורה הבאה עוצרת את אזהרות המהדר מכיוון שהמשתנה אינו בשימוש כרגע */ (חלל) window_W1_data; switch (message-> message_id) {case MW_WINDOW_CREATED_MESSAGE: / * הוסף כאן כל קוד אתחול חלון * / break; מקרה MW_MENU_BAR_ITEM_PRESSED_MESSAGE: / * הוסף כאן קוד טיפול בתפריט חלון * / break; מקרה MW_BUTTON_PRESSED_MESSAGE: if (message-> sender_handle == button_B1_handle) { / * הוסף את קוד המטפל שלך לפקד זה כאן * /} הפסקה; ברירת מחדל: / * שמור על MISRA שמח / / הפסקה; }}

מנהל החלון קורא לזה לחלון זה בכל פעם שמנהל החלון צריך ליידע את החלון שמשהו קרה. במקרה זה אנו מעוניינים לדעת כי לחצו על הכפתור היחיד של החלון. בהצהרת המתג לסוגי הודעות תראה מקרה עבור MW_BUTTON_PRESSED_MESSAGE. קוד זה מופעל לאחר לחיצה על הכפתור. יש רק כפתור אחד בחלון זה, אך יכול להיות יותר, ולכן נבדק באיזה כפתור מדובר. במקרה זה זה יכול להיות רק כפתור B1 (השם תואם את השם של הלחצן בקובץ JSON שוב).

אז לאחר תווית האריזה הזו הוסף את הקוד כדי שיפתח תיבת דו -שיח לבחירת צבעים, וזהו:

mw_create_window_dialog_colour_chooser (10, 10, "Color", MW_HAL_LCD_RED, false, message-> recipient_handle);

הפרמטרים הם כדלקמן:

• 10, 10 הוא המיקום במסך של תיבת הדו -שיח
• "צבע" הוא כותרת הדו -שיח
• MW_HAL_LCD_RED הוא צבע ברירת המחדל שאיתו תיפתח הדו -שיח
• אמצעי שקר אינו מציג גודל גדול (נסה להגדיר אותו כ- true וראה את ההבדל)
• הודעה-> ידית הנמען היא מי הבעלים של דיאלוג זה, במקרה זה חלון זה. ידית של חלון נמצאת בפרמטר ההודעה של הפונקציה. זהו החלון שאליו תישלח תגובת הדיאלוג.

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

תיק MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE:

{mw_hal_lcd_colour_t selected_colour = message-> message_data; (void) selected_colour; } לשבור;

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

חלון חלל_W1_ הודעה_פונקציה (הודעת const mw_message_t *הודעה)

{MW_ASSERT (message! = (Void*) 0, "פרמטר מצביע Null"); / * השורה הבאה עוצרת את אזהרות המהדר מכיוון שהמשתנה אינו בשימוש כרגע */ (חלל) window_W1_data; switch (message-> message_id) {case MW_WINDOW_CREATED_MESSAGE: / * הוסף כאן כל קוד אתחול חלון * / break; מקרה MW_MENU_BAR_ITEM_PRESSED_MESSAGE: / * הוסף קוד טיפול בתפריט חלון כאן * / הפסקה; מקרה MW_BUTTON_PRESSED_MESSAGE: if (message-> sender_handle == button_B1_handle) { / * הוסף את קוד המטפל שלך לפקד זה כאן * / mw_create_window_dialog_colour_chooser (10, 10, "Color", MW_HAL_LCD_RED, false, message-> recipient_) } לשבור; מקרה MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE: {mw_hal_lcd_colour_t selected_colour = message-> message_data; (void) selected_colour; } לשבור; ברירת מחדל: / * שמור על MISRA שמח / / הפסקה; }}

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

en.wikipedia.org/wiki/Modal_window

שלב 7: ציור בחלון

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

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

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

ראשית, עליך למצוא את פונקציית הצבע שלך. מחולל הקוד יוצר אותו עבורך והוא נמצא ממש מעל הפונקציה של מטפל בהודעות שהשתנתה בחלק הקודם. עבור אל הפרויקט שלך ופתח שוב את הקובץ W1.c.

בקובץ זה תמצא את הפונקציה window_W1_paint_function (). זה נראה כמו זה:

חלון חלל_W1_paint_function (mw_handle_t window_handle, const mw_gl_draw_info_t *draw_info)

{MW_ASSERT (draw_info! = (Void*) 0, "פרמטר Null מצביע"); / * אזור הלקוח של חלון מילוי בלבן מלא */ mw_gl_set_fill (MW_GL_FILL); mw_gl_set_solid_fill_colour (MW_HAL_LCD_WHITE); mw_gl_set_border (MW_GL_BORDER_OFF); mw_gl_clear_pattern (); mw_gl_rectangle (draw_info, 0, 0, mw_get_window_client_rect (window_handle).width, mw_get_window_client_rect (window_handle).height); / * הוסף לך את קוד ציור החלון כאן */}

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

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

mw_gl_set_fg_colour (MW_HAL_LCD_BLACK);

mw_gl_set_solid_fill_colour (MW_HAL_LCD_YELLOW); mw_gl_set_line (MW_GL_SOLID_LINE); mw_gl_set_border (MW_GL_BORDER_ON); mw_gl_circle (draw_info, window_simple_data.circle_x, window_simple_data.circle_y, 25);

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

mw_gl_circle (draw_info, 30, 30, 15);

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

שלב 8: נתוני חלון

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

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

typedef struct

{ / * הוסף את חברי הנתונים שלך כאן * / char dummy; /* כמה מהדרים מתלוננים על מבנים ריקים; הסר זאת כאשר אתה מוסיף את חבריך */} window_W1_data_t; חלון סטטי_W1_data_t חלון_W1_data;

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

typedef struct

{ / * הוסף את חברי הנתונים שלך כאן * / mw_hal_lcd_colour_t selected_colour; } window_W1_data_t; static window_W1_data_t window_W1_data = {MW_HAL_LCD_YELLOW};

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

תיק MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE:

{window_W1_data.chosen_colour = message-> message_data; } לשבור;

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

mw_gl_set_solid_fill_colour (window_W1_data.chosen_colour);

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

mw_paint_window_client (הודעה-> נמען_ידית);

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

הקובץ כולו נראה כך אם אינך בטוח לאן מגיעים חלק מקטעי הקוד למעלה:

#לִכלוֹל

#include "miniwin.h" #include "miniwin_user.h" #include "W1.h" typedef struct { / * הוסף את חברי הנתונים שלך כאן * / mw_hal_lcd_colour_t selected_colour; } window_W1_data_t; static window_W1_data_t window_W1_data = {MW_HAL_LCD_YELLOW}; void window_W1_paint_function (mw_handle_t window_handle, const mw_gl_draw_info_t *draw_info) {MW_ASSERT (draw_info! = (void *) 0, "פרמטר Null מצביע"); / * אזור הלקוח של חלון מילוי בלבן מלא */ mw_gl_set_fill (MW_GL_FILL); mw_gl_set_solid_fill_colour (MW_HAL_LCD_WHITE); mw_gl_set_border (MW_GL_BORDER_OFF); mw_gl_clear_pattern (); mw_gl_rectangle (draw_info, 0, 0, mw_get_window_client_rect (window_handle).width, mw_get_window_client_rect (window_handle).height); / * הוסף לך את קוד ציור החלון כאן */ mw_gl_set_fg_colour (MW_HAL_LCD_BLACK); mw_gl_set_solid_fill_colour (window_W1_data.chosen_colour); mw_gl_set_line (MW_GL_SOLID_LINE); mw_gl_set_border (MW_GL_BORDER_ON); mw_gl_circle (draw_info, 30, 30, 15); } חלון חלל_וו 1_ הודעה_פונקציה (const mw_message_t *הודעה) {MW_ASSERT (הודעה! = (חלל *) 0, "פרמטר מצביע Null"); / * השורה הבאה עוצרת את אזהרות המהדר מכיוון שהמשתנה אינו בשימוש כרגע */ (חלל) window_W1_data; switch (message-> message_id) {case MW_WINDOW_CREATED_MESSAGE: / * הוסף כאן כל קוד אתחול חלון * / break; מקרה MW_MENU_BAR_ITEM_PRESSED_MESSAGE: / * הוסף קוד טיפול בתפריט חלון כאן * / הפסקה; מקרה MW_BUTTON_PRESSED_MESSAGE: if (message-> sender_handle == button_B1_handle) { / * הוסף את קוד המטפל שלך לפקד זה כאן * / mw_create_window_dialog_colour_chooser (10, 10, "Color", MW_HAL_LCD_RED, false, message-> recipient_) } לשבור; מקרה MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE: {window_W1_data.chosen_colour = message-> message_data; mw_paint_window_client (הודעה-> נמען_ידית); } לשבור; ברירת מחדל: / * שמור על MISRA שמח / / הפסקה; }}

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

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

שלב 9: קצת כיף גופן אחרון

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

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

כעת נוסיף פקד תיבת טקסט לקובץ התצורה JSON שלנו. הוסף אותו להגדרת חלון 2 כך שזה ייראה כך:

ככה:

{

"שם": "W2", "כותרת": "חלון 2", "X": 50, "Y": 65, "רוחב": 100, "גובה": 80, "גבול": נכון, "כותרת": true, "Visible": true, "Minimized": false, "TextBoxes": [{"Name": "TB1", "X": 0, "Y": 0, "Width": 115, "Height": 50, "הצדקה": "מרכז", "רקע צבע": "MW_HAL_LCD_YELLOW", "ForegroundColour": "MW_HAL_LCD_BLACK", "Font": "mf_rlefont_BLKCHCRY16", "Enabled": true, "Visible": true}]}}

מילה קצרה על גופני TrueType ב- MiniWin. גופנים מגיעים בקבצי.ttf. במנהלי חלון במחשבים גדולים יותר הם מוצגים על הצג שלך בעת הצורך. זה דורש הרבה כוח עיבוד וזיכרון ואינו מתאים למכשירים קטנים. ב- MiniWin הם מעובדים מראש למפות סיביות ומקושרים בזמן הידור בגודל וסגנון קבוע של גופן (מודגש, נטוי וכו ') כלומר עליך להחליט אילו גופנים באיזה גודל וסגנון אתה עומד להשתמש בזמן הידור. הדבר נעשה עבורך עבור שני גופנים לדוגמה בקובץ ה- zip של MiniWin שהורדת. אם ברצונך להשתמש בגופנים אחרים בגדלים וסגנונות אחרים עיין בתיעוד MiniWin בתיקיית המסמכים. ישנם כלים ב- MiniWin עבור Windows ו- Linux לעיבוד מראש של קבצי tttf לקובצי קוד מקור שתוכלו לפרסם בפרויקט שלכם.

ומילה מהירה שנייה - רוב הגופנים הינם זכויות יוצרים, כולל אלה שתמצא ב- Microsoft Windows. השתמש בהם כרצונך לשימוש אישי, אך כל דבר שתפרסם עליך לוודא שהרישיון שאיתו מתפרסמים הגופנים מאפשר זאת, כפי שקורה ל -2 הגופנים הכלולים ב- MiniWin, אך לא לגופנים של מיקרוסופט!

בחזרה לקוד! צור, שחרר קבצים, בנה והפעל מחדש כמו פעם ותראה שחלון 2 מכיל כעת טקסט ברירת מחדל על רקע צהוב בגופן מטורף. מאפשר לשנות את הטקסט על ידי עריכת קובץ המקור W2.c. של חלון 2.

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

תיק MW_WINDOW_CREATED_MESSAGE:

/ * הוסף כאן כל קוד אתחול חלון */ break;

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

תיק MW_WINDOW_CREATED_MESSAGE:

/ * הוסף כאן כל קוד אתחול חלון */ mw_post_message (MW_TEXT_BOX_SET_TEXT_MESSAGE, message-> recipient_handle, text_box_TB1_handle, 0UL, "היה לילה חשוך וסוער …", MW_CONTROL_MESSAGE); לשבור;

אלה הפרמטרים:

• MW_TEXT_BOX_SET_TEXT_MESSAGE - זהו סוג ההודעה שאנו שולחים לבקרה. הם רשומים ב- miniwin.h ומתועדים בתיעוד.
• message-> recipient_handle - מכאן מגיעה ההודעה - חלון זה - הידית שלו נמצאת בפרמטר ההודעה המועבר לפונקציית מטפל ההודעות.
• text_box_TB1_handle - למי אנו שולחים את ההודעה - הידית של פקד תיבת הטקסט. אלה מופיעים בקובץ שנוצר miniwin_user.h.
• 0UL - ערך הנתונים, שום דבר במקרה זה.
• "היה לילה אפל וסוער …" - ערך המצביע - הטקסט החדש.
• MW_CONTROL_MESSAGE - סוג הנמען שהוא פקד.

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

פרסום הודעות הוא בסיסי ל- MiniWin (כפי שהוא לכל מנהלי החלון). לקבלת דוגמאות נוספות, עיין בפרויקטים לדוגמה בקובץ ה- zip ולהסבר מקיף קרא את הסעיף בנושא הודעות MiniWin בתיעוד.

שלב 10: התקדמות נוספת

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

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

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

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

למידע נוסף עיין בתיקיית docs לתיעוד וגם באפליקציות הדוגמא האחרות בקובץ ה- zip. יש כאן דוגמאות המראות כיצד להשתמש בכל התכונות של MiniWin וכיצד לשלב MiniWin עם FatFS ו- FreeRTOS.