Naka-embed na Window Manager: 10 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:10

Ipinapakita ng proyektong ito kung paano ipatupad ang isang window manager na may palipat-lipat na magkakapatong na mga bintana sa isang naka-embed na micro-controller na may LCD panel at isang touch screen. Mayroong mga magagamit na komersyal na mga pakete ng software upang magawa ito ngunit nagkakahalaga ang mga ito ng pera at saradong mapagkukunan. Ang isang ito, na tinawag na MiniWin, ay libre at open-source. Nakasulat ito sa ganap na sumusunod na C99 at maaaring magamit sa isang C o C ++ application. Ang mga layunin ng MiniWin ay madaling gamitin, madaling mabago, napapalawak, portable sa isang malawak na hanay ng hardware, at hindi masyadong mapagkukunan ng gutom.

Pati na rin ang pagbibigay ng code upang pamahalaan ang iyong windows MiniWin ay may isang koleksyon ng mga kontrol ng interface ng gumagamit - mga pindutan, slider, mga progress bar, mga puno atbp Maaari kang magkaroon ng maraming mga bintana ng iba't ibang uri o maraming mga pagkakataon ng parehong uri. Maaaring ilipat ang Windows sa paligid, baguhin ang laki, i-maximize, i-minimize, sarado - lahat ng mga karaniwang bagay na ginagawa mo sa mga bintana sa mas malaking mga window manager. Sinusuportahan din ang mga TrueType na font na may kerning at anti-aliasing (ginagawang smooooooth ang teksto) para sa kaakit-akit na pag-render ng teksto.

Sa bawat window mayroon kang isang lugar ng kliyente (ang iyong puwang sa loob ng hangganan at sa ibaba ng tuktok na bar). Dito maaari kang magdagdag ng mga kontrol upang makagawa ng isang dayalogo o maaari mong gamitin ang built-in na library ng graphics upang iguhit ang anumang nais mo. Ang lahat ng mga pagpapaandar sa library ng graphics ay may kamalayan sa window. Hindi mo kailangang mag-alala tungkol sa kung nasaan ang iyong window, kung ano ang nag-o-overlap dito o kung ito ay nai-minimize.

Bilang karagdagan sa paggawa ng iyong sariling mga bintana mayroon ding ilang mga karaniwang mga dialog na isinama na napakadaling ibigay - halimbawa ng mga dialog ng kumpirmasyon (isang OK lang o Oo / Hindi mga pindutan), tagatakda ng oras / petsa, mga tagapili ng file, mga tagapili ng kulay atbp.

Gumagamit ang MiniWin ng isang karaniwang sistema ng queue ng mensahe ng disenyo ng windows manager. Maaaring makipag-ugnay ang Windows sa bawat isa at sa window manager sa pamamagitan ng mga mensahe. Hindi ka tumatawag sa mga pagpapaandar upang direktang gawin ang mga bagay, nagdagdag ka ng isang mensahe sa pila at gagawin ito ng manager ng window.

Ang MiniWin ay nai-port sa karaniwang mga board ng pag-unlad na may mga display ng touch screen mula sa mga vendor ng micro-controller na ST, NXP at Renesas. Mayroong mga driver ng hardware at mga halimbawang proyekto para sa lahat ng mga aparatong ito. Bilang karagdagan MiniWin ay maaaring binuo para sa Windows o Linux upang maaari mong gayahin ang iyong interface ng code ng gumagamit bago mo makuha ang iyong naka-embed na hardware.

Ang MiniWin ay may isang generator ng code. Maaari mong tukuyin ang iyong mga bintana at kontrol sa isang simpleng upang lumikha ng nababasa na file ng JSON at pinaparehas ng code generator ang file at lumilikha ng code para sa iyo (maraming mga halimbawa na susundan). Lumilikha ito ng mga kumpletong aplikasyon ng simulator ng Windows o Linux na maaaring maitayo lamang at nariyan ang iyong simulate na LCD display sa iyong MiniWin windows na gumagana. Maaari mong kunin ang eksaktong parehong nabuong code at i-drop ito sa isang naka-embed na proyekto at magkaroon ng parehong code na nagpapakita ng parehong mga bintana at kinokontrol sandali sa iyong naka-embed na hardware.

Ang MiniWin ay hindi nangangailangan ng suporta sa pagpapatakbo sa naka-embed na aparato. Tumatakbo ang lahat sa isang solong thread. Maaaring maisama ang MiniWin sa isang RTOS na tumatakbo sa isang naka-embed na processor at may mga halimbawa ng pagsasama ng MiniWin sa FreeRTOS.

Ang itinuturo na ito ay nagpapakita kung paano makakuha ng MiniWin up at tumatakbo sa isang STM32 M4 processor gamit ang murang STM32F429 Discovery board na may kasamang isang QVGA touch screen display na naka-attach na. Madali itong magagamit mula sa iyong tagapagtustos ng sangkap ng electronics.

Tumatakbo ang MiniWin sa mid-range micro-Controller at sa itaas.

Mga gamit

Ang STM32F429I-DISC1 development board at isang micro USB cable

Pag-download ng STM32CubeIDE na libre.

Hakbang 1: Pagkuha ng Code

Una sa lahat kailangan mo ng naka-install na STM32CubeIDE. Nakukuha mo iyan mula sa website ng ST. Kailangan mong magparehistro at tumatagal upang i-download at mai-install ito. Libre ang lahat.

Habang nag-i-install i-download ang mapagkukunan ng MiniWin at i-unzip ito. Malaki ito, ngunit gagamitin mo lamang ang isang maliit na bahagi nito. Mag-click sa berdeng 'I-clone o I-download' na pindutan dito…

github.com/miniwinwm/miniwinwm

pagkatapos ay piliin ang I-download ang Zip. I-zip ang mga nilalaman.

Hakbang 2: Pagbuo ng isang Halimbawa ng Proyekto

Hinahayaan muna na bumuo ng isa sa mga halimbawang proyekto. Ang isang mahusay ay tinatawag na MiniWinSimple. Simulan ang STM32CubeIDE pagkatapos gawin ito:

1. Piliin ang File | I-import…
2. Buksan ang Pangkalahatan at piliin ang Umiiral na Project sa Workspace. Susunod
3. I-click ang Mag-browse at mag-navigate sa kung saan mo naka-zip ang MiniWin. Pagkatapos ay pumunta sa STM32CubeIDE / MiniWinSimple / STM32F429 folder. I-click ang Piliin ang Folder.
4. Sa Project: lagyan ng tsek ang MiniWinSimple_STM32F429 pagkatapos ay i-click ang Tapusin.
5. Lumilitaw ang proyekto ng MiniWinSimple_STM32F429 sa iyong Project Explorer. Piliin ito pagkatapos ay itayo ito sa Project | Build Project.
6. I-plug ngayon ang iyong USB cable sa board at iyong computer at patakbuhin ito gamit ang Run | Debug at kapag na-download ito piliin ang Run | Resume. Makakakuha ka ng isang display sa pag-calibrate ng screen sa unang pagkakataon kaya hawakan ang gitna ng 3 mga krus sa LCD display. Maaari ka na ngayong makipag-ugnay sa window sa display.

Upang ilipat ang isang window, i-drag ito sa pamamagitan ng title bar. Upang baguhin ang laki sa isang window, gamitin ang puting tatsulok na icon sa kaliwa ng title bar. Ang mga bintana ng MiniWin ay hindi maaaring baguhin ang laki sa pamamagitan ng pag-drag sa mga hangganan habang ang ipinapakitang MiniWin na ginamit ay masyadong maliit. Upang i-minimize, i-maximize o isara ang isang window gamitin ang mga icon sa kanang kanang dulo ng title bar (maaaring hindi paganahin ang malapit). Kapag ang isang window ay nai-minimize hindi mo maaaring ilipat ang minimized na mga icon sa paligid. Bumuo sila mula sa ibabang kaliwa hanggang kanan.

Hakbang 3: Pagpapatakbo ng Code Generator

Ngayon ay babaguhin namin ang halimbawa ng proyekto sa pamamagitan ng pagbuo ng aming sariling mga bintana at ihuhulog ang bagong code. Upang magawa ito tatakbo namin ang code generator.

1. Magbukas ng isang prompt ng utos at pumunta sa folder kung saan mo in-zip ang MiniWin at pagkatapos ay sa Tools / CodeGen folder.
2. Ang maipapatupad para sa Windows CodeGen.exe ay magagamit na. Para sa Linux kailangan mong itayo ito sa pamamagitan ng pag-type ng make. (Maaari mo ring buuin ito mula sa mapagkukunan para sa Windows kung nag-aalala kang magpatakbo ng na-download na maipapatupad ngunit kailangan mong mai-install ang tagabuo at pag-unlad na kapaligiran. Tingnan ang dokumentasyon ng MiniWin sa folder ng mga dokumento para sa mga detalye).
3. Sa folder na ito ang ilang halimbawa ng mga file na JSON. Gagamitin namin ang example_empty.json. Kailangan mo munang i-edit ito upang mai-set up ito para sa Windows o Linux. Buksan ito sa isang editor at sa tuktok kung saan makikita mo ang "TargetType" na baguhin ang "Linux" o "Windows" na halaga sa kung saan mo pinapatakbo ang code generator.
4. Ngayon i-type ang codegen example_empty.json sa prompt ng utos.
5. Pumunta sa iyong proyekto sa STM32CubeIDE at buksan ang folder MiniWinSimple_Common. Tanggalin ang lahat ng mga file doon.
6. Iniwan namin ang "TargetName" sa JSON file bilang default sa "MiniWinGen" kaya't iyon ang pangalan ng aming folder ng nabuong code. Pumunta sa folder kung saan mo in-zip ang MiniWin at pagkatapos ang MiniWinGen_Common folder. Piliin ngayon ang lahat ng mga file na ito at i-drag at i-drop pagkatapos sa STM32CubeIDE sa folder ng MiniWinSimple_Common ng iyong proyekto.
7. Muling itayo at ibalik ang proyekto sa STM32CubeIDE at lilitaw ang iyong bagong window ng disenyo. Ang pindutan sa window ay nawala dahil ang halimbawa_empty.json ay hindi tumutukoy sa anumang.

Hakbang 4: Pagdaragdag ng isang Window

Magdaragdag kami ngayon ng isang pangalawang window sa file ng pagsasaayos ng JSON at muling buhayin ang code.

1. Buksan ang example_empty.json sa isang text editor.

2. Sa ilalim ng seksyong "Windows" mayroong isang hanay ng mga kahulugan ng windows na kasalukuyang mayroon lamang isang window. Kopyahin ang lahat ng ito…

{

"Pangalan": "W1", "Pamagat": "Window 1", "X": 10, "Y": 15, "Lapad": 200, "Taas": 180, "Border": totoo, "TitleBar": totoo, "Nakikita": totoo, "Minimize": false}

at i-paste ito muli sa isang kuwit na naghihiwalay sa 2 kahulugan.

3. Palitan ang "W1" sa "W2" at "Window 1" sa "Window 2". Baguhin ang "X", "Y", "Lapad" at "Taas" sa ilang iba't ibang mga halagang isinasaalang-alang ang resolusyon ng screen ay 240 ang lapad ng 320 taas.

4. I-save ang file at patakbuhin muli ang code generator.

5. Kopyahin ang mga file tulad ng sa nakaraang hakbang, muling itayo at muling simulan. Magkakaroon ka ngayon ng 2 windows sa iyong display.

Hakbang 5: Pagdaragdag ng isang Control

Ngayon ay magdagdag kami ng ilang mga kontrol sa iyong bagong window. I-edit ang parehong file tulad ng sa nakaraang hakbang.

1. Sa pagtutukoy para sa window W1 magdagdag ng isang kuwit pagkatapos ng huling setting ("Minimized": false) pagkatapos idagdag ang teksto na ito

"MenuBar": totoo, "MenuBarEnabled": totoo, "MenuItems": ["Fred", "Bert", "Pete", "Alf", "Ian"], "Buttons": [{"Pangalan": "B1", "Label": "Button1", "X": 10, "Y": 10, "Pinagana": totoo, "Makikita": totoo}]

Ang seksyon na ito ay nagdaragdag ng isang menu bar na may 5 mga item at nagbibigay-daan dito (ang mga menu bar ay maaaring hindi paganahin sa buong mundo, subukan ito). Nagdadagdag din ito ng isang pindutan na pinagana at nakikita (maaari silang likhain na hindi nakikita at pagkatapos ay makikita sa code sa paglaon).

2. Muling buhayin ang code, kopyahin ito sa kabuuan, muling itayo, muling ibalik ang lahat tulad ng dati.

Hakbang 6: Ang Paggawa ng mga Kontrol ay May Ginagawa

Ngayon ay mayroon kaming pangunahing interface ng gumagamit na kailangan namin upang magawa ito ng isang bagay. Para sa halimbawang ito ay pop up namin ang isang dayalogo ng tagapili ng kulay kapag ang pindutan sa Window 1 ay pinindot.

Pumunta sa iyong proyekto sa STM32CubeIDE at buksan ang folder na MiniWinSimple_Common at pagkatapos buksan ang file na W1.c (ang pangalan ng file na ito ay tumutugma sa patlang na "Pangalan" ng window sa JSON file nang nabuo ang code).

Sa file na ito mahahanap mo ang function window_W1_message_unction (). Parang ganito:

void window_W1_message_unction (const mw_message_t * message) {MW_ASSERT (message! = (void *) 0, "Null pointer parameter"); / * Susunod na linya ay humihinto sa mga babala ng tagatala bilang variable ay kasalukuyang hindi ginagamit * / (walang bisa) window_W1_data; switch (message-> message_id) {case MW_WINDOW_CREATED_MESSAGE: / * Magdagdag ng anumang window initialisation code dito * / break; case MW_MENU_BAR_ITEM_PRESSED_MESSAGE: / * Magdagdag ng window ng code sa paghawak ng menu dito * / break; case MW_BUTTON_PRESSED_MESSAGE: kung (message-> sender_handle == button_B1_handle) {/ * Idagdag ang iyong handler code para sa kontrol na ito dito * /} masira; default: / * Panatilihing masaya ang MISRA * / break; }}

Tinawag ito ng window manager para sa window na ito tuwing kailangang ipaalam sa window manager na ang window ay may nangyari. Sa kasong ito interesado kaming malaman na ang pindutan lamang ng window ay pinindot. Sa switch statement para sa mga uri ng mensahe makikita mo ang isang kaso para sa MW_BUTTON_PRESSED_MESSAGE. Tumatakbo ang code na ito kapag pinindot ang pindutan. Mayroon lamang isang pindutan sa window na ito, ngunit maaaring may higit pa, kaya't isang pagsusuri ang ginawa kung aling pindutan ito. Sa kasong ito maaari lamang itong maging pindutan ng B1 (ang pangalan ay tumutugma sa pangalan para sa pindutan sa JSON file muli).

Kaya pagkatapos ng label ng case na ito idagdag ang code upang mag-pop up ang isang dayalogo ng tagapili ng kulay, alin ito:

mw_create_window_dialog_colour_chooser (10, 10, "Kulay", MW_HAL_LCD_RED, maling, mensahe-> tatanggap_handle);

Ang mga parameter ay ang mga sumusunod:

• 10, 10 ang lokasyon sa screen ng dayalogo
• "Kulay" ang pamagat ng dialog
• Ang MW_HAL_LCD_RED ang default na kulay na magsisimula ang dayalogo
• maling ibig sabihin ay huwag ipakita ang malaking sukat (subukang itakda ito sa totoo at tingnan ang pagkakaiba)
• mensahe-> tatanggap ng tatanggap ay ang nagmamay-ari ng dayalogo na ito, sa kasong ito ang window na ito. Ang hawakan ng isang window ay nasa parameter ng mensahe ng pagpapaandar. Ito ang window na ipapadala ang tugon sa dayalogo.

Upang malaman ang halaga ng kulay na pinili ng gumagamit ang window manager ay magpapadala sa aming window ng isang mensahe na may napiling kulay kapag pinindot ng gumagamit ang OK button sa dayalogo. Samakatuwid kailangan namin upang maharang ang mensaheng ito din sa ibang kaso sa switch statement na ganito ang hitsura:

kaso MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE:

{mw_hal_lcd_colour_t napili_colour = mensahe-> mensahe_data; (walang bisa) napili_colour; } pahinga;

Wala pa kaming ginagawa sa napiling kulay kaya't itatapon lamang ito upang walang bisa upang maiwasan ang babala ng tagatala. Ang pangwakas na code ng pagpapaandar na ito ngayon ay ganito:

walang bisa ang window_W1_message_unction (const mw_message_t * mensahe)

{MW_ASSERT (mensahe! = (Walang bisa *) 0, "Null pointer parameter"); / * Susunod na linya ay humihinto sa mga babala ng tagatala bilang variable ay kasalukuyang hindi ginagamit * / (walang bisa) window_W1_data; switch (message-> message_id) {case MW_WINDOW_CREATED_MESSAGE: / * Magdagdag ng anumang window initialisation code dito * / break; case MW_MENU_BAR_ITEM_PRESSED_MESSAGE: / * Magdagdag ng window ng code sa paghawak ng menu dito * / break; case MW_BUTTON_PRESSED_MESSAGE: kung (message-> sender_handle == button_B1_handle) {/ * Idagdag ang iyong handler code para sa kontrol na ito dito * / mw_create_window_dialog_colour_chooser (10, 10, "Color", MW_HAL_LCD_RED, false, message-> tatanggap } pahinga; kaso MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE: {mw_hal_lcd_colour_t napili_colour = mensahe-> mensahe_data; (walang bisa) napili_colour; } pahinga; default: / * Panatilihing masaya ang MISRA * / break; }}

Ang pagpapatakbo ng code ay ipinapakita sa imahe sa itaas. Maaari mong mapansin na kapag nagpapakita ang isang diyalogo kailangan mong tumugon dito at tanggalin ito bago ka gumawa ng iba pa. Tinatawag itong modal na pag-uugali. Mga dayalogo sa MiniWin at lahat palaging globally modal at maaari mo lamang ipakita ang isa sa bawat oras. Mayroong higit pang paliwanag dito …

en.wikipedia.org/wiki/Modal_window

Hakbang 7: Pagguhit sa Window

Sa ngayon ginagamit lamang namin ang mga kontrol, at iginuhit nila ang kanilang sarili. Panahon na upang gumawa ng isang pasadyang pagguhit sa aming window. Ang bahaging maaari mong iguhit ay nasa loob ng mga hangganan (kung mayroon sila, opsyonal sila), sa loob ng mga scroll bar (kung tinukoy, opsyonal din) at sa ibaba ng pamagat ng bar (kung mayroong isa, opsyonal din iyon). Tinawag itong lugar ng kliyente sa window terminology.

Mayroong isang library ng mga utos ng graphics sa MiniWin na maaari mong gamitin. Lahat sila ay may kamalayan sa window. Nangangahulugan iyon na hindi mo kailangang mag-alala tungkol sa kung ang window ay nakikita, bahagyang natakpan ng iba pang mga bintana, sa, bahagyang off o ganap na off ang screen, o kung ang coordinate ng kung saan ka gumuhit ay nasa client area o lampas nito. Pinangangalagaan ang lahat para sa iyo. Hindi ka maaaring gumuhit sa labas ng lugar ng iyong kliyente.

Ang pagguhit sa mga lugar ng kliyente sa terminology ng windows ay tinatawag na painting at bawat window ay may function na pintura kung saan mo ginagawa ang iyong pagguhit. Hindi mo tinawag ang iyong pagpapaandar ng pintura, ginagawa ito ng window manager para sa iyo kapag kinakailangan. Kailangan ito kapag ang isang window ay inilipat o ang isa pang window sa itaas ay nabago ang posisyon o kakayahang makita. Kung kailangan mo ang pagpipinta muli ng iyong window dahil ang ilan sa mga data na nakasalalay sa mga nilalaman ng window ay nagbago (ibig sabihin alam mo na kinakailangan ng muling pagpipinta kaysa alam ng window manager), sasabihin mo sa window manager na kailangan ng muling pintahan at tumatawag ito pagpapaandar ng pintura mo. Hindi mo ito tinawag sa iyong sarili. (Lahat ito ay ipinakita sa susunod na seksyon).

Una, kailangan mong hanapin ang pagpapaandar ng pintura. Lumilikha ito ng code generator para sa iyo at nasa itaas lamang ito ng pagpapaandar ng mensahe ng handler na binago sa nakaraang seksyon. Pumunta sa iyong proyekto at buksan muli ang file W1.c.

Sa file na ito mahahanap mo ang function window_W1_paint_unction (). Parang ganito:

walang bisa ang window_W1_paint_unction (mw_handle_t window_handle, const mw_gl_draw_info_t * draw_info)

{MW_ASSERT (draw_info! = (Walang bisa *) 0, "Null pointer parameter"); / * Punan ang lugar ng kliyente ng window ng solidong puti * / 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). taas); / * Magdagdag ka ng window ng pagpipinta code dito * /}

Ito ang hubad na nabuong code at lahat ng ginagawa nito ay punan ang lugar ng kliyente ng solidong puti. Hinahayaan gumuhit ng isang dilaw na puno ng bilog sa lugar ng client. Una kailangan nating maunawaan ang konsepto ng isang konteksto ng graphics (isa pang bagay sa windows). Itinatakda namin ang mga parameter ng pagguhit sa konteksto ng graphics at pagkatapos ay tumawag sa isang pangkaraniwang gawain na pagguhit ng bilog. Ang mga bagay na dapat nating itakda sa halimbawang ito ay kung ang bilog ay may hangganan, istilo ng linya ng hangganan, kulay ng hangganan, kung napunan ang bilog, punan ang kulay at punan ang pattern. Maaari mong makita ang code sa itaas na gumagawa ng katulad na bagay para sa pagpuno sa lugar ng kliyente ng isang walang hangganan na solid na puno ng puting rektanggulo. Ang mga halaga sa konteksto ng graphics ay hindi naaalala sa pagitan ng bawat tawag ng pagpapaandar ng pintura kaya kailangan mong i-set up ang mga halaga sa bawat oras (naalala nila ang pagpapaandar ng pintura).

Sa code sa itaas maaari mong makita na ang pagpuno ay nakabukas at ang pattern ng punan ay naka-off, kaya hindi namin kailangang itakda muli ang mga iyon. Kailangan naming itakda ang hangganan sa, estilo ng linya ng hangganan sa solid, kulay ng harapan ng harapan sa itim at punan ang kulay sa dilaw tulad nito:

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);

Idagdag ang code na ito sa komento sa pagpapaandar na ito kung saan sinasabi na idagdag ang iyong code. Susunod na kailangan namin upang gumuhit ng isang bilog na tapos na ganito:

mw_gl_circle (draw_info, 30, 30, 15);

Gumuhit ito ng isang bilog sa mga coordinate 30, 30 na may radius 15. Muling itayo ang code at ibalik ito at makikita mo ang isang bilog sa window tulad ng ipinakita sa itaas. Mapapansin mo na ang bilog at ang pindutan ay nagsasapawan ngunit ang pindutan ay nasa itaas. Ito ay sa pamamagitan ng disenyo. Ang mga kontrol ay palaging nasa tuktok ng anumang iguhit mo sa lugar ng client.

Hakbang 8: Data ng Window

Sa ngayon naipatupad namin ang aming sariling code sa pagpapaandar ng mensahe ng Window 1 (upang mahawakan ang mga papasok na mensahe) at ang pagpapaandar ng pintura nito (upang gumuhit sa lugar ng client ng window). Ngayon oras na upang maiugnay ang dalawa. Hinahayaan nating punan ang bilog na iginuhit sa pagpapaandar ng pintura ng kulay na pipiliin ng gumagamit ng tagapili ng kulay kapag pinindot ang pindutan. Tandaan na hindi namin tinawag ang pagpapaandar ng pintura, ginagawa ito ng window manager, kaya't ang pag-andar ng aming mensahe (na alam ang piniling kulay) ay hindi maaaring tawagan ang pagpapaandar ng pintura nang direkta mismo. Sa halip ay kailangan naming i-cache ang data at ipaalam sa window manager na kinakailangan ng muling pagpipinta. Tatawagan ng manager ng window ang pagpapaandar ng pintura na maaaring magamit ang naka-cache na data.

Sa tuktok ng W1.c makikita mo ang isang walang laman na istraktura ng data at isang bagay ng ganitong uri na idineklara ng code generator na tulad nito:

typedef str

{/ * Idagdag ang iyong mga kasapi ng data dito * / char dummy; / * Ang ilang mga tagataguyod ay nagreklamo tungkol sa mga walang laman na struct; alisin ito kapag idinagdag mo ang iyong mga miyembro * /} window_W1_data_t; static window_W1_data_t window_W1_data;

Dito namin nai-cache ang aming data upang mapanatili ito sa mga tawag at kilala bilang data ng window. Kailangan lamang nating itago dito ang napiling kulay, tulad nito:

typedef str

{/ * Idagdag ang iyong mga kasapi ng data dito * / mw_hal_lcd_colour_t napili_colour; } window_W1_data_t; static window_W1_data_t window_W1_data = {MW_HAL_LCD_YELLOW};

Bibigyan namin ito ng isang panimulang kulay ng dilaw. Ngayon sa pagpapaandar ng mensahe babaguhin namin ang code nang kaunti upang mai-save ang napiling kulay dito tulad nito:

kaso MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE:

{window_W1_data.chosen_colour = message-> message_data; } pahinga;

Pagkatapos ay babaguhin namin ang pagpapaandar ng pintura upang magamit ang halagang ito kapag iginuhit nito ang bilog na tulad nito:

mw_gl_set_solid_fill_colour (window_W1_data.chosen_colour);

Ngayon ay binago namin ang data na nakasalalay sa mga nilalaman ng window, kaya kailangan naming ipaalam sa window manager na kailangan ng pinturang muli sa window. Ginagawa namin ito sa pagpapaandar ng mensahe kapag natanggap ang dialog na OK na mensahe, tulad nito:

mw_paint_window_client (mensahe-> tatanggap_handle);

Hindi ito sanhi ng window na direktang maipinta. Ito ay isang pagpapaandar na utility na nagpapadala ng isang mensahe sa window manager na ang isang window ay kailangang muling pinturahan (kung papasok ka dito maaari mong makita kung paano ito mangyayari). Ang window na kailangang muling pinturahan sa kasong ito ay mismo, at ang hawakan sa window ay nasa parameter ng mensahe sa pagpapaandar ng mensahe ng mensahe.

Ganito ang ganito ang buong file kung hindi ka sigurado kung saan pupunta ang ilan sa mga snippet ng code sa itaas:

# isama

# isama ang "miniwin.h" #include "miniwin_user.h" #include "W1.h" typedef struct {/ * Idagdag ang iyong mga kasapi ng data dito * / mw_hal_lcd_colour_t napili_colour; } window_W1_data_t; static window_W1_data_t window_W1_data = {MW_HAL_LCD_YELLOW}; void window_W1_paint_unction (mw_handle_t window_handle, const mw_gl_draw_info_t * draw_info) {MW_ASSERT (draw_info! = (void *) 0, "Null pointer parameter"); / * Punan ang lugar ng kliyente ng window ng solidong puti * / 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). taas); / * Magdagdag ka ng window ng pagpipinta code dito * / 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); } void window_W1_message_unction (const mw_message_t * message) {MW_ASSERT (message! = (void *) 0, "Null pointer parameter"); / * Susunod na linya ay humihinto sa mga babala ng tagatala bilang variable ay kasalukuyang hindi ginagamit * / (walang bisa) window_W1_data; switch (message-> message_id) {case MW_WINDOW_CREATED_MESSAGE: / * Magdagdag ng anumang window initialisation code dito * / break; case MW_MENU_BAR_ITEM_PRESSED_MESSAGE: / * Magdagdag ng window ng code sa paghawak ng menu dito * / break; case MW_BUTTON_PRESSED_MESSAGE: kung (message-> sender_handle == button_B1_handle) {/ * Idagdag ang iyong handler code para sa kontrol na ito dito * / mw_create_window_dialog_colour_chooser (10, 10, "Color", MW_HAL_LCD_RED, false, message-> tatanggap } pahinga; case MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE: {window_W1_data.chosen_colour = message-> message_data; mw_paint_window_client (mensahe-> tatanggap_handle); } pahinga; default: / * Panatilihing masaya ang MISRA * / break; }}

Bumuo at tumakbo muli at dapat mong itakda ang punan ng kulay ng bilog.

Ang halimbawang ito ng data ng window ay gumagamit ng data na nakaimbak sa isang static na istraktura ng data sa tuktok ng pinagmulang file. Mabuti ito kung mayroon ka lamang isang halimbawa ng window, tulad ng ginagawa namin sa halimbawang ito, ngunit kung mayroon kang higit sa isang halimbawa sa gayon lahat sila ay magbabahagi ng parehong istraktura ng data. Posibleng magkaroon ng per-instance data kaya maraming mga pagkakataon na may parehong uri ng window ang mayroong sariling data. Ipinaliwanag ito sa dokumentasyong MiniWin na matatagpuan sa direktoryo ng mga doc. Ginagamit ito ng halimbawa ng file upang ipakita ang maraming mga imahe sa parehong uri ng window (tulad ng nakikita sa pangunahing imahe sa tuktok ng itinuro na ito).

Hakbang 9: Ang Ilang Panghuling Font Fun

Sinusuportahan ng MiniWin ang pag-render ng TrueType font. Kung mayroong isang bagay na ginagawang maganda ang iyong interface ng gumagamit ito ay kaakit-akit na mga font. Ipinapakita ng huling hakbang na ito kung paano mag-render ng isang TrueType font sa isang MiniWin window.

Mayroong dalawang paraan ng pag-render ng mga font ng TrueType. Ang isa ay iguhit ang mga ito nang direkta sa lugar ng iyong kliyente tulad ng ginawa para sa bilog nang mas maaga, ang isa pa ay upang magdagdag ng isang control ng text box sa iyong window. Ginagawa namin ang huli bilang mas madali.

Ngayon ay magdagdag kami ng isang control ng text box sa aming file ng pagsasaayos ng JSON. Idagdag ito sa kahulugan ng Window 2 upang ganito ang hitsura nito:

ganito:

{

"Pangalan": "W2", "Pamagat": "Window 2", "X": 50, "Y": 65, "Lapad": 100, "Taas": 80, "Border": totoo, "TitleBar": true, "Visible": true, "Minimized": false, "TextBoxes": [{"Name": "TB1", "X": 0, "Y": 0, "Width": 115, "Taas": 50, "Justification": "Center", "BackgroundColour": "MW_HAL_LCD_YELLOW", "ForegroundColour": "MW_HAL_LCD_BLACK", "Font": "mf_rlefont_BLKCHCRY16", "Enified": true, "Visible": true}]}

Isang mabilis na salita tungkol sa mga font ng TrueType sa MiniWin. Ang mga font ay dumating sa.ttf file. Sa mga window manager sa mas malalaking computer ay nai-render sa iyong display kapag kinakailangan ang mga ito. Tumatagal ito ng maraming kapangyarihan sa pagproseso at memorya at hindi angkop para sa maliliit na aparato. Sa MiniWin sila ay paunang proseso sa mga bitmap at naka-link sa oras ng pag-ipon sa isang nakapirming laki ng font at istilo (naka-bold, italiko atbp) ibig sabihin magpasya ka kung anong mga font sa anong laki at istilo ang iyong gagamitin sa oras ng pag-ipon. Ginawa ito para sa iyo para sa dalawang halimbawang mga font sa MiniWin zip file na na-download mo. Kung nais mong gumamit ng iba pang mga font sa iba pang mga laki at istilo tingnan ang dokumentasyon ng MiniWin sa folder ng mga doc. Mayroong mga tool sa MiniWin para sa Windows at Linux para sa paunang pagproseso ng.ttf na mga file sa mga file ng source code na maaari mong i-drop sa iyong proyekto.

At isang pangalawang mabilis na salita - ang karamihan sa mga font ay copyright, kasama ang mga makikita mo sa Microsoft Windows. Gamitin ang mga ito sa kalooban para sa personal na paggamit, ngunit ang anumang nai-publish mo dapat mong tiyakin na ang lisensya na nai-publish ang mga font ay nagbibigay-daan sa ito, tulad ng kaso para sa 2 mga font na kasama sa MiniWin, ngunit hindi ang mga font ng Microsoft!

Bumalik sa code! Bumuo, mag-drop ng mga file, bumuo at muling tumakbo tulad ng dati at makikita mo ang Window 2 ngayon ay may ilang default na teksto sa isang dilaw na background sa isang wacky font. Hinahayaan nating baguhin ang teksto sa pamamagitan ng pag-edit ng pinagmulang file ng Window 2 na W2.c.

Kailangan naming makipag-usap sa text box na nilikha lamang namin at ang paraan ng paggawa nito tulad ng anumang komunikasyon sa MiniWin ay upang magpadala ito ng isang mensahe. Nais naming itakda ang teksto sa control kapag ang window ay nilikha ngunit bago ito ipakita, kaya nagdagdag kami ng code sa handler ng mensahe sa kaso na MW_WINDOW_CREATED_MESSAGE. Natatanggap ito ng window code bago ipakita ang window at inilaan ito para sa mga inisyal na katulad nito. Lumikha ang code generator ng isang may-ari ng lugar na ganito ang hitsura sa handler ng mensahe:

kaso MW_WINDOW_CREATED_MESSAGE:

/ * Magdagdag ng anumang window inisisasyon code dito * / break;

Dito ay magpo-post kami ng isang mensahe sa control box ng teksto na nagsasabi dito kung anong teksto ang nais nating ipakita nito sa pamamagitan ng paggamit ng mw_post_message function na tulad nito:

kaso MW_WINDOW_CREATED_MESSAGE:

/ * Magdagdag ng anumang window initialisation code dito * / mw_post_message (MW_TEXT_BOX_SET_TEXT_MESSAGE, mensahe-> tatanggap_handle, text_box_TB1_handle, 0UL, "Samantalang madilim at mapang-abusong gabi …", MW_CONTROL_MESSAGE); pahinga;

Ito ang mga parameter:

• MW_TEXT_BOX_SET_TEXT_MESSAGE - Ito ang uri ng mensahe na ipinapadala namin sa kontrol. Nakalista ang mga ito sa miniwin.h at dokumentado sa dokumentasyon.
• mensahe-> tatanggap_handle - Ito ay kanino nagmula ang mensahe - ang window na ito - ang hawakan na kung saan ay nasa parameter ng mensahe na ipinasa sa pagpapaandar ng mensahe ng mensahe.
• text_box_TB1_handle - Kanino kami nagpapadala ng mensahe - ang hawakan ng kontrol sa text box. Nakalista ang mga ito sa nabuong file miniwin_user.h.
• 0UL - Halaga ng data, wala sa kasong ito.
• "Twas a dark and bagyo night …" - Pointer halaga - ang bagong teksto.
• MW_CONTROL_MESSAGE - Uri ng tatanggap na isang kontrol.

Ayan yun. Muling pagbuo at muling pagtakbo tulad ng dati at makukuha mo ang text box na ipinapakita tulad ng sa imahe sa itaas.

Mahalaga sa MiniWin ang pag-post ng mensahe (tulad ng sa lahat ng mga window manager). Para sa higit pang mga halimbawa tingnan ang mga halimbawang proyekto sa zip file at para sa isang komprehensibong paliwanag basahin ang seksyon sa mga mensahe ng MiniWin sa dokumentasyon.

Hakbang 10: Pupunta Pa

Iyon lang para sa pangunahing pagpapakilala sa MiniWin. Ang MiniWin ay maaaring gumawa ng higit pa kaysa sa naipakita dito. Halimbawa, ang screen sa board na ginamit sa itinuturo na ito ay maliit at ang mga kontrol ay maliit at kailangang gamitin sa isang dibber. Gayunpaman, ang iba pang mga halimbawa at hardware ay gumagamit ng mas malalaking kontrol (mayroong 2 laki) sa mas malaking display at maaari itong patakbuhin ng daliri.

Maraming iba pang mga uri ng kontrol kaysa sa ipinakita dito. Para sa karagdagang mga kontrol tingnan ang iba't ibang mga halimbawang JSON file sa folder ng generator ng code. Ang lahat ng mga uri ng kontrol ay sakop sa mga halimbawang ito.

Ang Windows ay may maraming mga pagpipilian. Ang border, title bar at mga icon ay lahat mai-configure. Maaari kang magkaroon ng mga scroll bar at pag-scroll sa mga lugar ng client ng window, maraming mga pagkakataon ng parehong uri ng window at windows ay maaaring hubad (isang lugar lamang ng kliyente, walang hangganan o title bar) na nangangahulugang naayos ang mga ito sa oras ng pag-ipon sa lugar sa display (tingnan ang imahe sa seksyong ito na may laki ng malalaking mga icon - ang mga ito ay talagang 6 hubad na bintana).

Ang MiniWin ay hindi gumagamit ng pabuong memorya. Ginagawa nitong angkop para sa maliliit na pinipigilan na aparato at isang kinakailangan para sa ilang mga naka-embed na proyekto. Ang MiniWin at ang code na nabubuo nito ay ganap ding sumusunod sa MISRA 2012 sa antas na 'kinakailangan'.

Para sa karagdagang impormasyon tingnan ang folder ng mga dokumento para sa dokumentasyon at pati na rin ang iba pang mga halimbawang apps sa zip file. Mayroong mga halimbawa dito na nagpapakita kung paano gamitin ang lahat ng mga tampok ng MiniWin at kung paano isama ang MiniWin sa FatFS at FreeRTOS.