Pengurus Tetingkap Terbenam: 10 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:07

Projek ini menunjukkan cara melaksanakan pengurus tetingkap dengan tingkap bertindih bergerak pada pengawal mikro tertanam dengan panel LCD dan layar sentuh. Terdapat pakej perisian yang tersedia secara komersil untuk melakukan ini tetapi harganya mahal dan merupakan sumber tertutup. Yang ini, dipanggil MiniWin, adalah percuma dan sumber terbuka. Ia ditulis dalam C99 yang mematuhi sepenuhnya dan boleh digunakan dalam aplikasi C atau C ++. Matlamat MiniWin adalah mudah digunakan, mudah diubah suai, diperluas, mudah alih ke pelbagai jenis perkakasan, dan tidak terlalu lapar sumber.

Serta menyediakan kod untuk menguruskan tetingkap anda. MiniWin mempunyai koleksi kawalan antara muka pengguna - butang, gelangsar, bar kemajuan, pokok dll. Anda boleh mempunyai banyak tetingkap dari pelbagai jenis atau beberapa jenis yang sama. Windows boleh dipindahkan, diubah ukurannya, dimaksimumkan, diminimumkan, ditutup - semua perkara biasa yang anda lakukan dengan tingkap di pengurus tetingkap yang lebih besar. Fon TrueType dengan kerning dan anti-aliasing (menjadikan teks kelihatan lebih lancar) juga disokong untuk rendering teks yang menarik.

Di setiap tetingkap anda mempunyai kawasan pelanggan (ruang anda di dalam sempadan dan di bawah bar atas). Pada ini, anda boleh menambahkan kawalan untuk membuat dialog atau anda boleh menggunakan pustaka grafik terpasang untuk melukis apa sahaja yang anda mahukan. Semua fungsi perpustakaan grafik menyedari tetingkap. Anda tidak perlu risau di mana tetingkap anda, apa yang bertindih atau jika diminimumkan.

Selain membuat tetingkap anda sendiri terdapat juga beberapa dialog standard yang disertakan yang sangat mudah untuk dibuat - contohnya dialog pengesahan (hanya butang OK atau Ya / Tidak), penentu masa / tarikh, pemilih fail, pemilih warna dll.

MiniWin menggunakan sistem barisan pesanan reka bentuk pengurus windows standard. Windows boleh berinteraksi antara satu sama lain dan pengurus tetingkap melalui mesej. Anda tidak memanggil fungsi untuk melakukan sesuatu secara langsung, anda menambahkan mesej ke barisan dan pengurus tetingkap akan menetapkannya untuk anda.

MiniWin telah dibawa ke papan pengembangan standard dengan paparan skrin sentuh dari vendor pengawal mikro ST, NXP dan Renesas. Terdapat pemacu perkakasan dan projek contoh untuk semua peranti ini. Di samping itu MiniWin boleh dibina untuk Windows atau Linux supaya anda dapat mensimulasikan kod antara muka pengguna anda sebelum anda mendapatkan perkakasan terbenam anda.

MiniWin mempunyai penjana kod. Anda boleh menentukan tetingkap dan kawalan anda dengan mudah untuk membuat fail JSON yang boleh dibaca manusia dan penjana kod menghurai fail dan membuat kod untuk anda (terdapat banyak contoh yang harus diikuti). Ia mencipta aplikasi simulator lengkap Windows atau Linux yang baru dapat dibina dan terdapat paparan LCD simulasi anda dengan tetingkap MiniWin anda berfungsi. Anda boleh mengambil kod yang dihasilkan yang sama dan memasukkannya ke dalam projek terbenam dan mempunyai kod yang sama yang menunjukkan tetingkap dan kawalan yang sama beberapa saat kemudian pada perkakasan terbenam anda.

MiniWin tidak memerlukan sokongan operasi pada peranti tertanam. Semuanya berjalan dalam satu utas. MiniWin boleh disatukan dengan RTOS yang berjalan pada pemproses tertanam dan ada contoh yang mengintegrasikan MiniWin dengan FreeRTOS.

Petunjuk ini menunjukkan cara menghidupkan dan menjalankan MiniWin pada pemproses STM32 M4 menggunakan papan Penemuan STM32F429 yang murah yang dilengkapi dengan paparan skrin sentuh QVGA yang sudah terpasang. Ini mudah didapati dari pembekal komponen elektronik anda.

MiniWin berjalan pada pengawal mikro jarak pertengahan dan ke atas.

Bekalan

Papan pengembangan STM32F429I-DISC1 dan kabel USB mikro

Muat turun STM32CubeIDE yang percuma.

Langkah 1: Mendapatkan Kod

Pertama sekali, anda perlu memasang STM32CubeIDE. Anda mendapatkannya dari laman web ST. Anda mesti mendaftar dan memerlukan beberapa saat untuk memuat turun dan memasangnya. Semuanya percuma.

Semasa memasang, muat turun sumber MiniWin dan lepaskannya. Ia besar, tetapi anda hanya akan menggunakan sebahagian kecilnya. Klik butang 'Klon atau Muat turun' hijau di sini …

github.com/miniwinwm/miniwinwm

kemudian pilih Muat turun Zip. Nyahzip kandungannya.

Langkah 2: Membina Contoh Projek

Pertama mari kita bina salah satu contoh projek. Yang baik dipanggil MiniWinSimple. Mulakan STM32CubeIDE kemudian lakukan ini:

1. Pilih Fail | Import …
2. Buka Umum dan pilih Projek Sedia Ada ke Ruang Kerja. Seterusnya.
3. Klik Semak imbas dan arahkan ke tempat anda melepaskan MiniWin dengan zip. Kemudian pergi ke folder STM32CubeIDE / MiniWinSimple / STM32F429. Klik Pilih Folder.
4. Dalam Projek: tandakan MiniWinSimple_STM32F429 kemudian klik Selesai.
5. Projek MiniWinSimple_STM32F429 akan muncul di Project Explorer anda. Pilih kemudian bina dengan Project | Build Project.
6. Sekarang pasangkan kabel USB anda ke papan dan komputer anda dan jalankan menggunakan Run | Debug dan semasa dimuat turun pilih Run | Resume. Anda akan mendapat paparan penentukuran skrin untuk pertama kalinya jadi sentuh pusat 3 salib pada paparan LCD. Anda kini boleh berinteraksi dengan tetingkap pada paparan.

Untuk menggerakkan tetingkap seret ke bar tajuknya. Untuk mengubah saiz tetingkap gunakan ikon segitiga putih di sebelah kiri bar tajuk. Tingkap MiniWin tidak dapat diubah ukurannya dengan menyeret sempadan kerana paparan MiniWin yang digunakan terlalu kecil. Untuk meminimumkan, memaksimumkan atau menutup tetingkap, gunakan ikon di hujung kanan bar tajuk (penutupan mungkin dilumpuhkan). Apabila tetingkap diminimumkan, anda tidak dapat memindahkan ikon yang dikecilkan. Mereka membina dari bawah kiri ke kanan.

Langkah 3: Menjalankan Penjana Kod

Sekarang kita akan mengubah contoh projek dengan menghasilkan beberapa tetingkap kita sendiri dan menjatuhkan kod baru. Untuk melakukan ini kita akan menjalankan penjana kod.

1. Buka prompt arahan dan pergi ke folder di mana anda membuka zip MiniWin dan kemudian ke folder Tools / CodeGen.
2. Yang boleh dilaksanakan untuk Windows CodeGen.exe sudah tersedia. Untuk Linux anda harus membinanya dengan menaip make. (Anda juga boleh membuatnya dari sumber untuk Windows jika anda bimbang menjalankan aplikasi yang dimuat turun tetapi anda memerlukan penyusun dan persekitaran pembangunan yang dipasang. Lihat dokumentasi MiniWin di folder dokumen untuk maklumat lanjut).
3. Dalam folder ini terdapat beberapa contoh fail JSON. Kami akan menggunakan example_empty.json. Anda perlu mengeditnya terlebih dahulu untuk menyiapkannya untuk Windows atau Linux. Buka di editor dan di bahagian atas di mana anda akan dapati "TargetType" menukar nilai "Linux" atau "Windows" kepada yang anda gunakan penjana kodnya.
4. Sekarang ketik codegen example_empty.json di command prompt.
5. Pergi ke projek anda di STM32CubeIDE dan buka folder MiniWinSimple_Common. Padamkan semua fail di sana.
6. Kami meninggalkan "TargetName" dalam fail JSON sebagai lalai di "MiniWinGen" jadi itulah nama folder kod yang dihasilkan kami. Pergi ke folder di mana anda membuka zip MiniWin dan kemudian folder MiniWinGen_Common. Sekarang pilih semua fail ini dan seret dan lepas kemudian ke STM32CubeIDE dalam folder MiniWinSimple_Common projek anda.
7. Sekarang bina semula dan jalankan semula projek di STM32CubeIDE dan tetingkap reka bentuk baru anda akan muncul. Butang di tetingkap telah hilang kerana example_empty.json tidak menentukan apa-apa.

Langkah 4: Menambah Tetingkap

Kami sekarang akan menambah tetingkap kedua ke fail konfigurasi JSON dan menjana semula kodnya.

1. Buka example_empty.json dalam penyunting teks.

2. Di bawah bahagian "Windows" terdapat pelbagai definisi windows yang pada masa ini hanya mempunyai satu tetingkap. Salin semua ini …

{

"Name": "W1", "Judul": "Window 1", "X": 10, "Y": 15, "Width": 200, "Height": 180, "Border": true, "TitleBar": true, "Visible": true, "Minimized": false}

dan tampal lagi dengan koma yang memisahkan 2 definisi.

3. Tukar "W1" menjadi "W2" dan "Window 1" menjadi "Window 2". Ubah "X", "Y", "Lebar" dan "Tinggi" ke beberapa nilai yang berbeza dengan mengingat resolusi skrin adalah lebar 240 hingga 320 tinggi.

4. Simpan fail dan jalankan penjana kod sekali lagi.

5. Salin fail seperti pada langkah sebelumnya, buat semula dan jalankan semula. Anda sekarang akan mempunyai 2 tetingkap di paparan anda.

Langkah 5: Menambah Kawalan

Sekarang kita akan menambahkan beberapa kawalan ke tetingkap baru anda. Edit fail yang sama seperti pada langkah sebelumnya.

1. Dalam spesifikasi untuk tetingkap W1 tambahkan koma setelah tetapan terakhir ("Minimized": false) kemudian tambahkan teks ini

"MenuBar": benar, "MenuBarEnabled": true, "MenuItems": ["Fred", "Bert", "Pete", "Alf", "Ian"], "Button": [{"Name": "B1", "Label": "Button1", "X": 10, "Y": 10, "Enabled": true, "Visible": true}]

Bahagian ini menambah bar menu dengan 5 item dan mengaktifkannya (bar menu boleh dilumpuhkan secara global, cubalah). Ia juga menambah butang yang diaktifkan dan kelihatan (mereka boleh dibuat tidak kelihatan dan kemudian dapat dilihat dalam kod kemudian).

2. Buat semula kod tersebut, salinnya, buat semula, jalankan semua seperti sebelumnya.

Langkah 6: Membuat Kawalan Melakukan Sesuatu

Sekarang kita mempunyai antara muka pengguna asas yang kita perlukan untuk membuatnya melakukan sesuatu. Untuk contoh ini kita akan memaparkan dialog pemilih warna apabila butang di Window 1 ditekan.

Pergi ke projek anda di STM32CubeIDE dan buka folder MiniWinSimple_Common dan kemudian buka fail W1.c (nama fail ini sepadan dengan bidang "Nama" tetingkap dalam fail JSON ketika kod itu dihasilkan).

Dalam fail ini, anda akan menemui fungsi window_W1_message_function (). Ia kelihatan seperti ini:

void window_W1_message_function (const mw_message_t * message) {MW_ASSERT (message! = (void *) 0, "Parameter penunjuk kosong"); / * Baris seterusnya menghentikan amaran pengkompil kerana pemboleh ubah tidak digunakan * / (void) window_W1_data; tukar (message-> message_id) {case MW_WINDOW_CREATED_MESSAGE: / * Tambahkan sebarang kod permulaan tetingkap di sini * / break; kes MW_MENU_BAR_ITEM_PRESSED_MESSAGE: / * Tambahkan kod pengendalian menu tetingkap di sini * / rehat; kes MW_BUTTON_PRESSED_MESSAGE: if (message-> sender_handle == button_B1_handle) {/ * Tambahkan kod pengendali anda untuk kawalan ini di sini * /} rehat; lalai: / * Pastikan MISRA gembira * / rehat; }}

Ini dipanggil oleh pengurus tetingkap untuk tetingkap ini setiap kali pengurus tetingkap perlu memberitahu tetingkap bahawa sesuatu telah berlaku. Dalam kes ini, kami berminat untuk mengetahui bahawa satu-satunya butang tingkap telah ditekan. Dalam pernyataan beralih untuk jenis mesej, anda akan melihat kes untuk MW_BUTTON_PRESSED_MESSAGE. Kod ini berjalan apabila butang ditekan. Hanya ada satu butang di tetingkap ini, tetapi mungkin ada lebih banyak tombol, jadi pemeriksaan dibuat pada tombol mana. Dalam kes ini, hanya butang B1 (nama sesuai dengan nama untuk butang dalam fail JSON lagi).

Jadi selepas label kes ini tambahkan kod untuk memunculkan dialog pemilih warna, seperti ini:

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

Parameternya adalah seperti berikut:

• 10, 10 adalah lokasi di skrin dialog
• "Warna" adalah tajuk dialog
• MW_HAL_LCD_RED adalah warna lalai yang akan dimulakan dialognya
• bermaksud tidak menunjukkan ukuran yang besar (cuba tetapkan menjadi benar dan lihat perbezaannya)
• message-> pemegang penerima adalah siapa yang memiliki dialog ini, dalam kes ini tetingkap ini. Pegangan tetingkap berada di parameter pesan fungsi. Ini adalah tetingkap jawapan dialog akan dihantar.

Untuk mengetahui nilai warna pengguna memilih pengurus tetingkap akan mengirimkan pesan kepada tetingkap kita dengan warna yang dipilih ketika pengguna menekan butang OK dalam dialog. Oleh itu, kita perlu memintas mesej ini dengan kes lain dalam pernyataan beralih yang kelihatan seperti ini:

kes MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE:

{mw_hal_lcd_colour_t used_colour = message-> message_data; (tidak sah) warna_ dipilih; } rehat;

Kami tidak melakukan apa-apa dengan warna yang dipilih, jadi membuangnya untuk mengelakkan amaran penyusun. Kod akhir fungsi ini kini kelihatan seperti ini:

batal window_W1_message_function (const mw_message_t * message)

{MW_ASSERT (message! = (Void *) 0, "Parameter penunjuk kosong"); / * Baris seterusnya menghentikan amaran pengkompil kerana pemboleh ubah tidak digunakan * / (void) window_W1_data; tukar (message-> message_id) {case MW_WINDOW_CREATED_MESSAGE: / * Tambahkan sebarang kod inisial tetingkap di sini * / break; kes MW_MENU_BAR_ITEM_PRESSED_MESSAGE: / * Tambahkan kod pengendalian menu tetingkap di sini * / rehat; case MW_BUTTON_PRESSED_MESSAGE: if (message-> sender_handle == button_B1_handle) {/ * Tambahkan kod pengendali anda untuk kawalan ini di sini * / mw_create_window_dialog_colour_chooser (10, 10, "Color", MW_HAL_LCD_RED, false, message-> } rehat; kes MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE: {mw_hal_lcd_colour_t used_colour = message-> message_data; (tidak sah) warna_ dipilih; } rehat; lalai: / * Pastikan MISRA gembira * / rehat; }}

Menjalankan kod ditunjukkan dalam gambar di atas. Anda mungkin menyedari bahawa ketika dialog menunjukkan anda harus membalasnya dan menolaknya sebelum anda melakukan perkara lain. Ini dipanggil tingkah laku modal. Dialog dalam MiniWin dan semua modal secara global dan anda hanya boleh memaparkannya pada satu masa. Terdapat lebih banyak penjelasan di sini …

en.wikipedia.org/wiki/Modal_window

Langkah 7: Melukis di Tingkap

Setakat ini kami hanya menggunakan kawalan, dan mereka menggunakan sendiri kawalan. Sudah tiba masanya untuk membuat beberapa gambar khas di tingkap kami. Bahagian yang boleh anda gunakan adalah di dalam sempadan (jika ada, itu adalah pilihan), di dalam bar tatal (jika ditentukan, juga pilihan) dan di bawah bar tajuk (jika ada, itu juga pilihan). Ini disebut kawasan pelanggan dalam terminologi tetingkap.

Terdapat perpustakaan arahan grafik di MiniWin yang boleh anda gunakan. Mereka semua sedar. Ini bermakna bahawa anda tidak perlu risau jika tetingkap itu kelihatan, sebahagiannya dikaburkan oleh tetingkap lain, di, sebahagian mati atau sepenuhnya di luar skrin, atau jika koordinat tempat anda melukis berada di kawasan klien atau di luarnya. Semuanya dijaga untuk anda. Anda tidak boleh menarik di luar kawasan pelanggan anda.

Melukis kawasan klien dalam terminologi tingkap disebut lukisan dan setiap tetingkap mempunyai fungsi cat di mana anda membuat lukisan anda. Anda tidak memanggil fungsi cat anda, pengurus tetingkap melakukannya untuk anda apabila diperlukan. Ia diperlukan apabila tetingkap dipindahkan atau tetingkap lain di atasnya berubah atau kelihatan. Sekiranya anda memerlukan pengecatan semula tetingkap anda kerana beberapa data yang bergantung pada kandungan tingkap telah berubah (iaitu anda tahu bahawa pengecatan semula diperlukan daripada pengurus tetingkap yang diketahui), maka anda memberitahu pengurus tetingkap bahawa pengecatan semula diperlukan dan ia memanggil fungsi cat anda. Anda tidak menyebutnya sendiri. (Ini semua ditunjukkan di bahagian seterusnya).

Pertama, anda perlu mencari fungsi cat anda. Penjana kod membuatnya untuk anda dan ia berada tepat di atas fungsi pengendali mesej yang diubah suai di bahagian sebelumnya. Pergi ke projek anda dan buka fail W1.c sekali lagi.

Dalam fail ini, anda akan menemui fungsi window_W1_paint_function (). Ia kelihatan seperti ini:

batal window_W1_paint_function (mw_handle_t window_handle, const mw_gl_draw_info_t * draw_info)

{MW_ASSERT (draw_info! = (Batal *) 0, "Parameter penunjuk kosong"); / * Isi kawasan pelanggan tetingkap dengan warna putih padat * / 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). lebar, mw_get_window_client_rect (window_handle). tinggi); / * Tambahkan kod lukisan tetingkap di sini * /}

Ini adalah kod kosong yang dihasilkan dan semua yang dilakukannya adalah mengisi kawasan pelanggan dengan warna putih pekat. Mari melukis bulatan berisi kuning di kawasan pelanggan. Mula-mula kita harus memahami konsep konteks grafik (perkara windows lain). Kami menetapkan parameter lukisan dalam konteks grafik dan kemudian memanggil rutin lukisan bulatan generik. Perkara yang harus kita tetapkan dalam contoh ini ialah sama ada lingkaran mempunyai garis sempadan, gaya garis sempadan, warna sempadan, sama ada lingkaran itu dipenuhi, warna isi dan corak isi. Anda dapat melihat kod di atas yang melakukan perkara yang serupa untuk mengisi kawasan pelanggan dengan segi empat putih padat tanpa sempadan. Nilai-nilai dalam konteks grafik tidak diingati antara setiap panggilan fungsi cat sehingga anda harus menetapkan nilai setiap kali (walaupun diingat dengan fungsi cat).

Dalam kod di atas anda dapat melihat bahawa isian dihidupkan dan corak pengisian mati, jadi kami tidak perlu menetapkannya lagi. Kita perlu mengatur sempadan, gaya garis sempadan menjadi padat, warna latar depan menjadi hitam dan isi warna menjadi kuning seperti ini:

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

Tambahkan kod ini pada komen dalam fungsi ini di mana ia mengatakan untuk menambahkan kod anda. Seterusnya kita perlu melukis bulatan yang dilakukan seperti ini:

mw_gl_circle (draw_info, 30, 30, 15);

Ini melukis bulatan pada koordinat 30, 30 dengan jejari 15. Buat semula kod dan jalankan semula dan anda akan melihat bulatan di tingkap seperti gambar di atas. Anda akan melihat bahawa bulatan dan butang bertindih tetapi butangnya ada di atas. Ini berdasarkan reka bentuk. Kawalan sentiasa ada di atas apa sahaja yang anda menarik di kawasan pelanggan.

Langkah 8: Data Tetingkap

Sejauh ini kami telah melaksanakan kod kami sendiri dalam fungsi mesej Window 1 (untuk menangani mesej masuk) dan fungsi catnya (untuk menggambar di kawasan pelanggan tingkap). Kini tiba masanya untuk menghubungkan kedua-duanya. Mari mengisi bulatan yang dilukis dalam fungsi cat dengan warna yang dipilih pengguna oleh pemilih warna semasa butang ditekan. Ingat bahawa kita tidak memanggil fungsi cat, pengurus tetingkap melakukannya, jadi fungsi mesej kita (yang mengetahui warna yang dipilih) tidak dapat memanggil fungsi cat secara langsung. Sebaliknya, kita perlu menyimpan data dalam cache dan membiarkan pengurus tetingkap tahu bahawa pengecatan semula diperlukan. Pengurus tetingkap kemudian akan memanggil fungsi cat yang dapat menggunakan data cache.

Di bahagian atas W1.c anda akan melihat struktur data kosong dan objek jenis ini yang dinyatakan oleh penjana kod seperti ini:

typedef struktur

{/ * Tambahkan ahli data anda di sini * / char dummy; / * Beberapa penyusun mengadu tentang struktur kosong; keluarkan ini semasa anda menambah ahli * /} window_W1_data_t; tetingkap statik_W1_data_tingkap_W1_data;

Di sinilah kami menyimpan data kami sehingga data tersebut disimpan di seluruh panggilan dan dikenali sebagai data tetingkap. Kita hanya perlu menyimpan warna yang dipilih di sini, seperti ini:

typedef struktur

{/ * Tambahkan ahli data anda di sini * / mw_hal_lcd_colour_t used_colour; } tetingkap_W1_data_t; window statik_W1_data_t window_W1_data = {MW_HAL_LCD_YELLOW};

Kami akan memberikan warna kuning permulaan. Sekarang dalam fungsi mesej kita akan menukar sedikit kod untuk menyimpan warna yang dipilih di sini seperti ini:

kes MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE:

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

Kemudian kita akan menukar fungsi cat untuk menggunakan nilai ini semasa melukis bulatan seperti ini:

mw_gl_set_solid_fill_colour (window_W1_data.chosen_colour);

Sekarang kami telah mengubah data yang bergantung pada isi tetingkap, jadi kami harus memberitahu pengurus tetingkap bahawa tetingkap perlu dicat semula. Kami melakukannya dalam fungsi mesej apabila dialog dialog OK diterima, seperti ini:

mw_paint_window_client (message-> penerima_handle);

Ini tidak menyebabkan tingkap dicat secara langsung. Ini adalah fungsi utiliti yang menghantar mesej kepada pengurus tetingkap bahawa tetingkap perlu dicat semula (jika anda melangkah ke dalamnya, anda dapat melihat bagaimana ini berlaku). Tingkap yang perlu dicat semula dalam kes ini adalah sendirinya, dan pemegang ke tetingkap berada dalam parameter mesej ke fungsi pengendali mesej.

Seluruh fail sekarang kelihatan seperti ini jika anda tidak pasti di mana beberapa coretan kod di atas pergi:

#sertakan

#include "miniwin.h" #include "miniwin_user.h" #include "W1.h" typedef struct {/ * Tambahkan ahli data anda di sini * / mw_hal_lcd_colour_t used_colour; } tetingkap_W1_data_t; window statik_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, "Parameter penunjuk kosong"); / * Isi kawasan pelanggan tetingkap dengan warna putih padat * / 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). lebar, mw_get_window_client_rect (window_handle). tinggi); / * Tambahkan kod lukisan tetingkap anda di sini * / 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_function (const mw_message_t * message) {MW_ASSERT (message! = (void *) 0, "Parameter penunjuk kosong"); / * Baris seterusnya menghentikan amaran pengkompil kerana pemboleh ubah tidak digunakan * / (void) window_W1_data; tukar (message-> message_id) {case MW_WINDOW_CREATED_MESSAGE: / * Tambahkan sebarang kod inisial tetingkap di sini * / break; kes MW_MENU_BAR_ITEM_PRESSED_MESSAGE: / * Tambahkan kod pengendalian menu tetingkap di sini * / rehat; case MW_BUTTON_PRESSED_MESSAGE: if (message-> sender_handle == button_B1_handle) {/ * Tambahkan kod pengendali anda untuk kawalan ini di sini * / mw_create_window_dialog_colour_chooser (10, 10, "Color", MW_HAL_LCD_RED, false, message-> } rehat; kes MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE: {window_W1_data.chosen_colour = message-> message_data; mw_paint_window_client (message-> penerima_handle); } rehat; lalai: / * Pastikan MISRA gembira * / rehat; }}

Bangun dan jalankan lagi dan anda seharusnya dapat menetapkan warna isi bulatan.

Contoh data tetingkap ini menggunakan data yang disimpan dalam struktur data statik di bahagian atas fail sumber. Ini baik-baik saja jika anda hanya mempunyai satu contoh tetingkap, seperti yang kita lakukan dalam contoh ini, tetapi jika anda mempunyai lebih dari satu contoh, semuanya akan berkongsi struktur data yang sama. Ada kemungkinan mempunyai data per-contoh, jadi beberapa jenis jenis tetingkap yang sama mempunyai data mereka sendiri. Ini dijelaskan dalam dokumentasi MiniWin yang terdapat di direktori docs. Contoh fail menggunakannya untuk menunjukkan beberapa gambar dalam jenis tetingkap yang sama (seperti yang dilihat pada gambar utama di bahagian atas petunjuk ini).

Langkah 9: Beberapa Keseronokan Fon Akhir

MiniWin menyokong rendering fon TrueType. Sekiranya ada satu perkara yang menjadikan antara muka pengguna anda kelihatan bagus, fonnya menarik. Langkah terakhir ini menunjukkan cara membuat font TrueType di tetingkap MiniWin.

Terdapat dua cara membuat font TrueType. Salah satunya adalah dengan menariknya secara langsung di kawasan pelanggan anda seperti yang dilakukan pada lingkaran sebelumnya, yang lain adalah dengan menambahkan kawalan kotak teks ke dalam tetingkap anda. Kami melakukan yang terakhir kerana lebih mudah.

Sekarang kita akan menambahkan kawalan kotak teks ke dalam fail konfigurasi JSON kami. Tambahkannya ke dalam definisi Window 2 sehingga kelihatan seperti ini:

seperti ini:

{

"Name": "W2", "Judul": "Window 2", "X": 50, "Y": 65, "Width": 100, "Height": 80, "Border": true, "TitleBar": true, "Visible": true, "Minimized": false, "TextBoxes": [{"Name": "TB1", "X": 0, "Y": 0, "Lebar": 115, "Tinggi": 50, "Justification": "Center", "BackgroundColour": "MW_HAL_LCD_YELLOW", "ForegroundColour": "MW_HAL_LCD_BLACK", "Font": "mf_rlefont_BLKCHCRY16", "Enabled": true, "Visible": true}]}

Perkataan ringkas mengenai fon TrueType di MiniWin. Font masuk dalam fail.ttf. Dalam pengurus tetingkap di komputer yang lebih besar, komputer ini diberikan ke paparan anda apabila diperlukan. Ini memerlukan banyak daya pemprosesan dan memori dan tidak sesuai untuk peranti kecil. Dalam MiniWin mereka diproses terlebih dahulu menjadi bitmap dan dihubungkan pada waktu kompilasi pada ukuran dan gaya fon tetap (tebal, miring dll) iaitu anda harus memutuskan fon apa pada ukuran dan gaya apa yang akan anda gunakan pada waktu kompilasi. Ini telah dilakukan untuk dua contoh fon dalam fail zip MiniWin yang anda muat turun. Sekiranya anda ingin menggunakan fon lain dengan saiz dan gaya lain, lihat dokumentasi MiniWin dalam folder dokumen. Terdapat alat dalam MiniWin untuk Windows dan Linux untuk memproses fail.ttf ke dalam fail kod sumber yang boleh anda masukkan ke dalam projek anda.

Dan kata cepat kedua - kebanyakan fon adalah hak cipta, termasuk fon yang anda dapati di Microsoft Windows. Gunakannya sesuka hati untuk penggunaan peribadi, tetapi apa sahaja yang anda terbitkan, anda mesti memastikan bahawa lesen fon diterbitkan membenarkannya, seperti halnya 2 fon yang disertakan dalam MiniWin, tetapi bukan fon Microsoft!

Kembali ke kod! Hasilkan, jatuhkan fail, bina dan jalankan semula seperti sebelumnya dan anda akan melihat Window 2 kini mempunyai beberapa teks lalai pada latar belakang kuning dalam fon yang aneh. Mari ubah teks dengan mengedit fail sumber Window 2 W2.c.

Kita perlu berkomunikasi dengan kotak teks yang baru kita buat dan cara anda melakukannya seperti komunikasi dalam MiniWin adalah dengan menghantar mesej. Kami ingin menetapkan teks dalam kawalan semasa tetingkap dibuat tetapi sebelum ditunjukkan, jadi kami menambah kod dalam pengendali mesej dalam kes MW_WINDOW_CREATED_MESSAGE. Ini diterima oleh kod tetingkap sebelum tetingkap dipaparkan dan dimaksudkan untuk inisialisasi seperti ini. Penjana kod membuat pemegang tempat yang kelihatan seperti ini dalam fungsi pengendali mesej:

kes MW_WINDOW_CREATED_MESSAGE:

/ * Tambahkan sebarang kod permulaan tetingkap di sini * / rehat;

Di sini kita akan menghantar mesej ke kawalan kotak teks yang memberitahunya teks apa yang kita mahu tunjukkan dengan menggunakan fungsi mw_post_message seperti ini:

kes MW_WINDOW_CREATED_MESSAGE:

/ * Tambahkan sebarang kod inisialisasi tetingkap di sini * / mw_post_message (MW_TEXT_BOX_SET_TEXT_MESSAGE, message-> penerima_handle, text_box_TB1_handle, 0UL, "Twas a dark and bady night…", MW_CONTROL_MESSAGE); rehat;

Ini adalah parameter:

• MW_TEXT_BOX_SET_TEXT_MESSAGE - Ini adalah jenis mesej yang kami hantar ke kawalan. Mereka disenaraikan dalam miniwin.h dan didokumentasikan dalam dokumentasi.
• message-> penerima_handle - Dari sinilah asal mesej - tetingkap ini - pegangannya berada dalam parameter mesej yang diteruskan ke fungsi pengendali mesej.
• text_box_TB1_handle - Kepada siapa kita akan menghantar mesej - pemegang kawalan kotak teks. Ini disenaraikan dalam fail yang dihasilkan miniwin_user.h.
• 0UL - Nilai data, tidak ada dalam kes ini.
• "Malam yang gelap dan ribut …" - Nilai penunjuk - teks baru.
• MW_CONTROL_MESSAGE - Jenis penerima yang merupakan kawalan.

Itu sahaja. Bangun semula dan jalankan semula seperti biasa dan anda akan mendapat kotak teks seperti dalam gambar di atas.

Pengeposan mesej adalah asas bagi MiniWin (seperti semua pengurus tetingkap). Untuk lebih banyak contoh, lihat contoh projek dalam fail zip dan untuk penjelasan yang komprehensif, baca bahagian mengenai mesej MiniWin dalam dokumentasi.

Langkah 10: Melangkah Lebih Lanjut

Itu sahaja untuk pengenalan asas ini kepada MiniWin. MiniWin boleh melakukan lebih banyak daripada yang telah ditunjukkan di sini. Contohnya, layar di papan yang digunakan dalam instruksinya ini kecil dan alat kawalannya kecil dan perlu digunakan dengan dibber. Walau bagaimanapun, contoh dan perkakasan lain menggunakan kawalan yang lebih besar (terdapat 2 ukuran) pada paparan yang lebih besar dan ini boleh dikendalikan dengan jari.

Terdapat banyak jenis kawalan lain daripada yang ditunjukkan di sini. Untuk kawalan lebih lanjut, lihatlah pelbagai contoh fail JSON dalam folder penjana kod. Semua jenis kawalan diliputi dalam contoh ini.

Windows mempunyai banyak pilihan. Batas, bar tajuk dan ikon semuanya boleh dikonfigurasi. Anda boleh mempunyai bar tatal dan tatal tatal tetingkap klien, beberapa contoh jenis tetingkap yang sama dan tingkap boleh menjadi telanjang (hanya kawasan pelanggan, tanpa sempadan atau bar tajuk) yang bermaksud bahawa tetingkap itu diperbaiki pada waktu kompilasi di paparan (lihat gambar di bahagian ini dengan ikon berukuran besar - ini sebenarnya 6 tingkap telanjang).

MiniWin tidak menggunakan memori dinamik. Ini menjadikannya sesuai untuk peranti kecil yang dikekang dan merupakan syarat untuk beberapa projek tertanam. MiniWin dan kod yang dihasilkannya juga sepenuhnya sesuai dengan MISRA 2012 ke tahap 'wajib'.

Untuk maklumat lebih lanjut, lihat folder docs untuk dokumentasi dan juga aplikasi contoh lain dalam fail zip. Terdapat contoh di sini yang menunjukkan cara menggunakan semua ciri MiniWin dan cara mengintegrasikan MiniWin dengan FatFS dan FreeRTOS.