Manajer Jendela Tertanam: 10 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:54

Proyek ini menunjukkan cara menerapkan pengelola jendela dengan jendela tumpang tindih yang dapat dipindahkan pada mikrokontroler tertanam dengan panel LCD dan layar sentuh. Ada paket perangkat lunak yang tersedia secara komersial untuk melakukan ini tetapi harganya mahal dan merupakan sumber tertutup. Yang ini, disebut MiniWin, gratis dan open-source. Ini ditulis dalam C99 yang sepenuhnya sesuai dan dapat digunakan dalam aplikasi C atau C++. Tujuan MiniWin adalah mudah digunakan, mudah dimodifikasi, dapat diperluas, portabel ke berbagai perangkat keras, dan tidak terlalu haus sumber daya.

Selain menyediakan kode untuk mengelola jendela Anda, MiniWin memiliki kumpulan kontrol antarmuka pengguna - tombol, bilah geser, bilah kemajuan, pohon, dll. Anda dapat memiliki beberapa jendela dari jenis yang berbeda atau beberapa instance dari jenis yang sama. Windows dapat dipindahkan, diubah ukurannya, dimaksimalkan, diminimalkan, ditutup - semua hal yang biasa Anda lakukan dengan jendela di pengelola jendela yang lebih besar. Font TrueType dengan kerning dan anti-aliasing (membuat teks terlihat halus) juga didukung untuk rendering teks yang menarik.

Di setiap jendela Anda memiliki area klien (ruang Anda di dalam perbatasan dan di bawah bilah atas). Di sini Anda dapat menambahkan kontrol untuk membuat dialog atau Anda dapat menggunakan pustaka grafis bawaan untuk menggambar apa pun yang Anda inginkan. Semua fungsi pustaka grafis sadar akan jendela. Anda tidak perlu khawatir tentang di mana jendela Anda, apa yang tumpang tindih atau jika diminimalkan.

Selain membuat jendela Anda sendiri, ada juga beberapa dialog standar yang disertakan yang sangat mudah untuk dipakai - misalnya dialog konfirmasi (hanya tombol OK atau Ya/Tidak), penyetel waktu/tanggal, pemilih file, pemilih warna, dll.

MiniWin menggunakan sistem antrian pesan desain manajer windows standar. Windows dapat berinteraksi satu sama lain dan pengelola jendela melalui pesan. Anda tidak memanggil fungsi untuk melakukan sesuatu secara langsung, Anda menambahkan pesan ke antrian dan pengelola jendela akan memberlakukannya untuk Anda.

MiniWin telah di-porting ke papan pengembangan standar dengan tampilan layar sentuh dari vendor mikrokontroler ST, NXP dan Renesas. Ada driver perangkat keras dan proyek contoh untuk semua perangkat ini. Selain itu MiniWin dapat dibuat untuk Windows atau Linux sehingga Anda dapat mensimulasikan kode antarmuka pengguna Anda sebelum Anda mendapatkan perangkat keras yang disematkan.

MiniWin memiliki pembuat kode. Anda dapat menentukan jendela dan kontrol Anda secara sederhana untuk membuat file JSON yang dapat dibaca manusia dan pembuat kode mem-parsing file dan membuat kode untuk Anda (ada banyak contoh untuk diikuti). Ini menciptakan aplikasi simulator lengkap Windows atau Linux yang hanya dapat dibangun dan ada tampilan LCD simulasi Anda dengan jendela MiniWin Anda berfungsi. Anda dapat mengambil kode yang dihasilkan sama persis dan memasukkannya ke dalam proyek yang disematkan dan memiliki kode yang sama yang menunjukkan jendela dan kontrol yang sama beberapa saat kemudian pada perangkat keras yang disematkan.

MiniWin tidak memerlukan dukungan pengoperasian pada perangkat yang disematkan. Semuanya berjalan dalam satu utas. MiniWin dapat diintegrasikan dengan RTOS yang berjalan pada prosesor tertanam dan ada contoh yang mengintegrasikan MiniWin dengan FreeRTOS.

Instruksi ini menunjukkan cara mengaktifkan dan menjalankan MiniWin pada prosesor STM32 M4 menggunakan papan Discovery STM32F429 murah yang dilengkapi dengan tampilan layar sentuh QVGA yang sudah terpasang. Ini mudah tersedia dari pemasok komponen elektronik Anda.

MiniWin berjalan pada mikrokontroler kelas menengah ke atas.

Perlengkapan

Papan pengembangan STM32F429I-DISC1 dan kabel micro USB

Unduh STM32CubeIDE yang gratis.

Langkah 1: Mendapatkan Kode

Pertama-tama Anda perlu menginstal STM32CubeIDE. Anda mendapatkannya dari situs web ST. Anda harus mendaftar dan butuh beberapa saat untuk mengunduh dan menginstalnya. Semuanya gratis.

Saat menginstal, unduh sumber MiniWin dan unzip. Ini besar, tetapi Anda hanya akan menggunakan sebagian kecil saja. Klik tombol hijau 'Klon atau Unduh' di sini…

github.com/miniwinwm/miniwinwm

lalu pilih Unduh Zip. Buka ritsleting isinya.

Langkah 2: Membangun Proyek Contoh

Pertama mari kita buat salah satu proyek contoh. Yang bagus disebut MiniWinSimple. Mulai STM32CubeIDE lalu lakukan ini:

1. Pilih File|Impor…
2. Buka Umum dan pilih Proyek yang Ada ke dalam Ruang Kerja. Lanjut.
3. Klik Browse dan arahkan ke tempat Anda membuka ritsleting MiniWin. Lalu pergi ke folder STM32CubeIDE\MiniWinSimple\STM32F429. Klik Pilih Folder.
4. Di Proyek: centang MiniWinSimple_STM32F429 lalu klik Selesai.
5. Proyek MiniWinSimple_STM32F429 akan muncul di Project Explorer Anda. Pilih lalu bangun dengan Project|Build Project.
6. Sekarang colokkan kabel USB Anda ke board dan komputer Anda dan jalankan menggunakan Run|Debug dan ketika diunduh pilih Run|Resume. Anda akan mendapatkan tampilan kalibrasi layar pertama kali jadi sentuh bagian tengah dari 3 salib pada layar LCD. Anda sekarang dapat berinteraksi dengan jendela di layar.

Untuk memindahkan jendela seret dengan bilah judulnya. Untuk mengubah ukuran jendela, gunakan ikon segitiga putih di sebelah kiri bilah judul. Jendela MiniWin tidak dapat diubah ukurannya dengan menyeret batas karena tampilan MiniWin yang digunakan terlalu kecil. Untuk meminimalkan, memaksimalkan, atau menutup jendela, gunakan ikon di ujung kanan bilah judul (tutup mungkin dinonaktifkan). Saat jendela diperkecil, Anda tidak dapat memindahkan ikon yang diperkecil. Mereka membangun dari kiri bawah ke kanan.

Langkah 3: Menjalankan Pembuat Kode

Sekarang kita akan mengubah proyek contoh dengan membuat beberapa jendela kita sendiri dan memasukkan kode baru. Untuk melakukan ini, kita akan menjalankan pembuat kode.

1. Buka prompt perintah dan buka folder tempat Anda membuka ritsleting MiniWin dan kemudian ke folder Tools\CodeGen.
2. Eksekusi untuk Windows CodeGen.exe sudah tersedia. Untuk Linux Anda harus membangunnya dengan mengetikkan make. (Anda juga dapat membangunnya dari sumber untuk Windows jika Anda khawatir menjalankan executable yang diunduh tetapi Anda memerlukan kompiler dan lingkungan pengembangan yang diinstal. Lihat dokumentasi MiniWin di folder dokumen untuk detailnya).
3. Di folder ini ada beberapa contoh file JSON. Kami akan menggunakan example_empty.json. Anda perlu mengeditnya terlebih dahulu untuk mengaturnya untuk Windows atau Linux. Buka di editor dan di bagian atas tempat Anda akan menemukan "TargetType" ubah nilai "Linux" atau "Windows" menjadi apa yang Anda gunakan untuk menjalankan pembuat kode.
4. Sekarang ketik codegen example_empty.json di command prompt.
5. Buka proyek Anda di STM32CubeIDE dan buka folder MiniWinSimple_Common. Hapus semua file yang ada di sana.
6. Kami meninggalkan "TargetName" di file JSON sebagai default di "MiniWinGen" jadi itulah nama folder kami dari kode yang dihasilkan. Buka folder tempat Anda membuka ritsleting MiniWin dan kemudian folder MiniWinGen_Common. Sekarang pilih semua file ini dan seret dan lepas kemudian ke STM32CubeIDE di folder MiniWinSimple_Common proyek Anda.
7. Sekarang bangun kembali dan jalankan kembali proyek di STM32CubeIDE dan jendela desain baru Anda akan muncul. Tombol di jendela telah hilang karena example_empty.json tidak mendefinisikan apa pun.

Langkah 4: Menambahkan Jendela

Sekarang kita akan menambahkan jendela kedua ke file konfigurasi JSON dan membuat ulang kodenya.

1. Buka example_empty.json di editor teks.

2. Di bawah bagian "Windows" terdapat serangkaian definisi jendela yang saat ini hanya memiliki satu jendela. Salin semua ini…

{

"Nama": "W1", "Judul": "Jendela 1", "X": 10, "Y": 15, "Lebar": 200, "Tinggi": 180, "Border": benar, "TitleBar": benar, "Terlihat": benar, "Diminimalkan": salah }

dan rekatkan lagi dengan koma yang memisahkan 2 definisi.

3. Ubah "W1" menjadi "W2" dan "Jendela 1" menjadi "Jendela 2". Ubah "X", "Y", "Lebar" dan "Tinggi" ke beberapa nilai berbeda dengan mengingat resolusi layar adalah lebar 240 kali tinggi 320.

4. Simpan file dan jalankan kembali pembuat kode.

5. Salin file seperti pada langkah sebelumnya, bangun kembali dan jalankan kembali. Anda sekarang akan memiliki 2 jendela di layar Anda.

Langkah 5: Menambahkan Kontrol

Sekarang kami akan menambahkan beberapa kontrol ke jendela baru Anda. Edit file yang sama seperti pada langkah sebelumnya.

1. Pada spesifikasi window W1 tambahkan koma setelah setting terakhir ("Minimised": false) lalu tambahkan teks ini

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

Bagian ini menambahkan bilah menu dengan 5 item dan mengaktifkannya (bilah menu dapat dinonaktifkan secara global, coba). Itu juga menambahkan tombol yang diaktifkan dan terlihat (mereka dapat dibuat tidak terlihat dan kemudian dibuat terlihat dalam kode nanti).

2. Buat ulang kode, salin, bangun kembali, jalankan kembali semua seperti sebelumnya.

Langkah 6: Membuat Kontrol Melakukan Sesuatu

Sekarang kita memiliki antarmuka pengguna dasar yang kita butuhkan untuk membuatnya melakukan sesuatu. Untuk contoh ini kita akan memunculkan dialog pemilih warna ketika tombol di Window 1 ditekan.

Buka proyek Anda di STM32CubeIDE dan buka folder MiniWinSimple_Common lalu buka file W1.c (nama file ini sesuai dengan bidang "Nama" jendela di file JSON saat kode dibuat).

Dalam file ini Anda akan menemukan fungsi window_W1_message_function(). Ini terlihat seperti ini:

void window_W1_message_function(const mw_message_t *message){ MW_ASSERT(message != (void*)0, "Parameter pointer nol"); /* Baris berikutnya menghentikan peringatan compiler karena variabel saat ini tidak digunakan */ (void)window_W1_data; switch (message->message_id) { case MW_WINDOW_CREATED_MESSAGE: /* Tambahkan kode inisialisasi jendela di sini */ break; case MW_MENU_BAR_ITEM_PRESSED_MESSAGE: /* Tambahkan kode penanganan menu jendela di sini */ break; case MW_BUTTON_PRESSED_MESSAGE: if (message->sender_handle == button_B1_handle) { /* Tambahkan kode handler Anda untuk kontrol ini di sini */ } break; default: /* Jauhkan MISRA senang */ istirahat; } }

Ini dipanggil oleh pengelola jendela untuk jendela ini setiap kali pengelola jendela perlu memberi tahu jendela bahwa sesuatu telah terjadi. Dalam hal ini kami tertarik untuk mengetahui bahwa satu-satunya tombol jendela telah ditekan. Dalam pernyataan beralih untuk jenis pesan, Anda akan melihat kasus untuk MW_BUTTON_PRESSED_MESSAGE. Kode ini berjalan ketika tombol telah ditekan. Hanya ada satu tombol di jendela ini, tetapi mungkin ada lebih banyak lagi, jadi cek dilakukan di tombol mana itu. Dalam hal ini hanya bisa menjadi tombol B1 (nama sesuai dengan nama tombol dalam file JSON lagi).

Jadi setelah label kasus ini tambahkan kode untuk memunculkan dialog pemilih warna, yaitu ini:

mw_create_window_dialog_colour_chooser(10, 10, "Warna", MW_HAL_LCD_RED, false, pesan->recipient_handle);

Parameternya adalah sebagai berikut:

• 10, 10 adalah lokasi di layar dialog
• "Warna" adalah judul dialog
• MW_HAL_LCD_RED adalah warna default dialog akan dimulai
• false berarti jangan tampilkan ukuran besar (coba setel ke true dan lihat perbedaannya)
• pesan->pegangan penerima adalah siapa yang memiliki dialog ini, dalam hal ini adalah jendela ini. Pegangan jendela ada di parameter pesan fungsi. Ini adalah jendela tempat respons dialog akan dikirim.

Untuk mengetahui nilai warna yang dipilih pengguna, pengelola jendela akan mengirim jendela kita pesan dengan warna yang dipilih ketika pengguna menekan tombol OK dalam dialog. Oleh karena itu kita perlu mencegat pesan ini juga dengan kasus lain dalam pernyataan switch yang terlihat seperti ini:

kasus MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE:

{ mw_hal_lcd_colour_t selected_color = pesan->data_pesan; (void)chosen_color; } merusak;

Kami belum melakukan apa pun dengan warna yang dipilih, jadi hanya membuangnya ke void untuk mencegah peringatan kompiler. Kode terakhir dari fungsi ini sekarang terlihat seperti ini:

void window_W1_message_function(const mw_message_t *message)

{ MW_ASSERT(pesan != (void*)0, "Parameter penunjuk nol"); /* Baris berikutnya menghentikan peringatan compiler karena variabel saat ini tidak digunakan */ (void)window_W1_data; switch (message->message_id) { case MW_WINDOW_CREATED_MESSAGE: /* Tambahkan kode inisialisasi jendela di sini */ break; case MW_MENU_BAR_ITEM_PRESSED_MESSAGE: /* Tambahkan kode penanganan menu jendela di sini */ break; case MW_BUTTON_PRESSED_MESSAGE: if (message->sender_handle == button_B1_handle) { /* Tambahkan kode handler Anda untuk kontrol ini di sini */ mw_create_window_dialog_colour_chooser(10, 10, "Colour", MW_HAL_LCD_RED, false, message->recipient); } merusak; kasus MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE: { mw_hal_lcd_colour_t selected_colour = message->message_data; (void)chosen_color; } merusak; default: /* Jauhkan MISRA senang */ istirahat; } }

Menjalankan kode ditunjukkan pada gambar di atas. Anda mungkin memperhatikan bahwa ketika sebuah dialog ditampilkan, Anda harus menanggapinya dan mengabaikannya sebelum Anda melakukan hal lain. Ini disebut perilaku modal. Dialog di MiniWin dan semuanya selalu modal global dan Anda hanya dapat menampilkan satu per satu. Ada penjelasan lebih lanjut di sini…

en.wikipedia.org/wiki/Modal_window

Langkah 7: Menggambar di Jendela

Sejauh ini kami hanya menggunakan kontrol, dan mereka menggambar sendiri. Saatnya untuk melakukan beberapa gambar kustom di jendela kita. Bagian yang dapat Anda gambar ada di dalam batas (jika ada, itu opsional), di dalam bilah gulir (jika ditentukan, juga opsional) dan di bawah bilah judul (jika ada, itu juga opsional). Ini disebut area klien dalam terminologi jendela.

Ada perpustakaan perintah grafis di MiniWin yang dapat Anda gunakan. Mereka semua sadar jendela. Itu berarti Anda tidak perlu khawatir jika jendela terlihat, sebagian tertutup oleh jendela lain, aktif, sebagian mati, atau sepenuhnya keluar dari layar, atau jika koordinat tempat Anda menggambar berada di area klien atau di luarnya.. Itu semua diurus untuk Anda. Anda tidak dapat menggambar di luar area klien Anda.

Menggambar di area klien dalam terminologi windows disebut lukisan dan setiap jendela memiliki fungsi cat tempat Anda menggambar. Anda tidak memanggil fungsi cat Anda, pengelola jendela melakukannya untuk Anda saat dibutuhkan. Ini diperlukan ketika sebuah jendela dipindahkan atau jendela lain di atasnya berubah posisi atau visibilitasnya. Jika Anda membutuhkan pengecatan ulang jendela Anda karena beberapa data yang bergantung pada isi jendela telah berubah (yaitu Anda tahu bahwa pengecatan ulang diperlukan daripada yang diketahui pengelola jendela), maka Anda memberi tahu pengelola jendela bahwa pengecatan ulang diperlukan dan itu memanggil fungsi cat Anda. Anda tidak menyebutnya sendiri. (Ini semua ditunjukkan di bagian selanjutnya).

Pertama, Anda perlu menemukan fungsi cat Anda. Pembuat kode membuatnya untuk Anda dan itu tepat di atas fungsi pengendali pesan yang dimodifikasi di bagian sebelumnya. Buka proyek Anda dan buka file W1.c lagi.

Dalam file ini Anda akan menemukan fungsi window_W1_paint_function(). Ini terlihat seperti ini:

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 pointer nol"); /* Isi area klien jendela dengan warna putih solid */ 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); /* Tambahkan kode pengecatan jendela di sini */ }

Ini adalah kode yang dihasilkan dan yang dilakukannya hanyalah mengisi area klien dengan warna putih solid. Mari menggambar lingkaran berwarna kuning di area klien. Pertama kita harus memahami konsep konteks grafis (hal lain jendela). Kami mengatur parameter gambar dalam konteks grafik dan kemudian memanggil rutinitas menggambar lingkaran generik. Hal-hal yang harus kita atur dalam contoh ini adalah apakah lingkaran memiliki batas, gaya garis batas, warna batas, apakah lingkaran diisi, warna isian, dan pola isian. Anda dapat melihat kode di atas yang melakukan hal serupa untuk mengisi area klien dengan persegi panjang putih tanpa batas. Nilai dalam konteks grafik tidak diingat di antara setiap panggilan fungsi cat sehingga Anda harus mengatur nilai setiap kali (mereka diingat dengan fungsi cat).

Pada kode di atas Anda dapat melihat bahwa isian aktif dan pola isian tidak aktif, jadi kita tidak perlu mengaturnya lagi. Kita perlu mengatur batas, gaya garis batas menjadi padat, batas warna latar depan menjadi hitam dan mengisi 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 kode ini di komentar di fungsi ini di mana dikatakan untuk menambahkan kode Anda. Selanjutnya kita perlu menggambar lingkaran yang dilakukan seperti ini:

mw_gl_circle(draw_info, 30, 30, 15);

Ini menggambar lingkaran pada koordinat 30, 30 dengan radius 15. Buat kembali kode dan jalankan kembali dan Anda akan melihat lingkaran di jendela seperti yang ditunjukkan di atas. Anda akan melihat bahwa lingkaran dan tombol tumpang tindih tetapi tombolnya ada di atas. Ini adalah dengan desain. Kontrol selalu di atas apa pun yang Anda gambar di area klien.

Langkah 8: Data Jendela

Sejauh ini kita telah mengimplementasikan kode kita sendiri pada fungsi pesan Window 1 (untuk menangani pesan masuk) dan fungsi paintnya (untuk menggambar pada area klien jendela). Sekarang saatnya untuk menghubungkan keduanya. Mari kita isi lingkaran yang digambar dalam fungsi cat dengan warna yang dipilih pengguna oleh pemilih warna saat tombol ditekan. Ingat bahwa kita tidak memanggil fungsi paint, window manager yang melakukannya, jadi fungsi pesan kita (yang mengetahui warna yang dipilih) tidak dapat memanggil fungsi paint itu sendiri secara langsung. Alih-alih, kita perlu men-cache data dan memberi tahu pengelola jendela bahwa pengecatan ulang diperlukan. Manajer jendela kemudian akan memanggil fungsi cat yang dapat menggunakan data yang di-cache.

Di bagian atas W1.c Anda akan melihat struktur data kosong dan objek jenis ini dideklarasikan oleh pembuat kode seperti ini:

struktur typedef

{ /* Tambahkan data anggota Anda di sini */ char dummy; /* Beberapa compiler mengeluh tentang struct kosong; hapus ini ketika Anda menambahkan anggota Anda */ } window_W1_data_t; jendela statis_W1_data_t jendela_W1_data;

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

struktur typedef

{ /* Tambahkan anggota data Anda di sini */ mw_hal_lcd_colour_t selected_colour; } jendela_W1_data_t; static window_W1_data_t window_W1_data = { MW_HAL_LCD_YELLOW };

Kami akan memberikan warna awal kuning. Sekarang di fungsi pesan kita akan mengubah kode sedikit untuk menyimpan warna yang dipilih di sini seperti ini:

kasus MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE:

{ window_W1_data.chosen_color = pesan->data_pesan; } merusak;

Kemudian kita akan mengubah fungsi paint untuk menggunakan nilai ini ketika menggambar lingkaran seperti ini:

mw_gl_set_solid_fill_colour(window_W1_data.chosen_colour);

Sekarang kita telah mengubah data yang bergantung pada isi jendela, jadi kita perlu memberi tahu pengelola jendela bahwa jendela perlu dicat ulang. Kami melakukannya dalam fungsi pesan ketika pesan dialog OK diterima, seperti ini:

mw_paint_window_client(pesan->recipient_handle);

Ini tidak menyebabkan jendela dicat secara langsung. Ini adalah fungsi utilitas yang mengirim pesan ke pengelola jendela bahwa jendela perlu dicat ulang (jika Anda masuk ke dalamnya, Anda dapat melihat bagaimana ini terjadi). Jendela yang perlu dicat ulang dalam hal ini adalah dirinya sendiri, dan pegangan ke jendela ada di parameter pesan ke fungsi pengendali pesan.

Seluruh file sekarang terlihat seperti ini jika Anda tidak yakin di mana beberapa potongan kode di atas pergi:

#termasuk

#include "miniwin.h" #include "miniwin_user.h" #include "W1.h" typedef struct { /* Tambahkan anggota data Anda di sini */ mw_hal_lcd_colour_t selected_colour; } jendela_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, "Parameter pointer nol"); /* Isi area klien jendela dengan warna putih solid */ 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); /* Tambahkan kode pengecatan jendela 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 pointer nol"); /* Baris berikutnya menghentikan peringatan compiler karena variabel saat ini tidak digunakan */ (void)window_W1_data; switch (message->message_id) { case MW_WINDOW_CREATED_MESSAGE: /* Tambahkan kode inisialisasi jendela di sini */ break; case MW_MENU_BAR_ITEM_PRESSED_MESSAGE: /* Tambahkan kode penanganan menu jendela di sini */ break; case MW_BUTTON_PRESSED_MESSAGE: if (message->sender_handle == button_B1_handle) { /* Tambahkan kode handler Anda untuk kontrol ini di sini */ mw_create_window_dialog_colour_chooser(10, 10, "Colour", MW_HAL_LCD_RED, false, message->recipient); } merusak; kasus MW_DIALOG_COLOUR_CHOOSER_OK_MESSAGE: { window_W1_data.chosen_colour = message->message_data; mw_paint_window_client(pesan->recipient_handle); } merusak; default: /* Jauhkan MISRA senang */ istirahat; } }

Bangun dan jalankan lagi dan Anda harus dapat mengatur warna isian lingkaran.

Contoh data jendela ini menggunakan data yang disimpan dalam struktur data statis di bagian atas file sumber. Ini bagus jika Anda hanya memiliki satu instance dari jendela, seperti yang kita lakukan dalam contoh ini, tetapi jika Anda memiliki lebih dari satu instance maka semuanya akan berbagi struktur data yang sama. Dimungkinkan untuk memiliki data per instance sehingga beberapa instance dari jenis jendela yang sama memiliki datanya sendiri. Ini dijelaskan dalam dokumentasi MiniWin yang ditemukan di direktori docs. Contoh file menggunakannya untuk menampilkan beberapa gambar dalam jenis jendela yang sama (seperti yang terlihat pada gambar utama di bagian paling atas instruksi ini).

Langkah 9: Beberapa Kesenangan Font Terakhir

MiniWin mendukung rendering font TrueType. Jika ada satu hal yang membuat antarmuka pengguna Anda terlihat bagus adalah font yang menarik. Langkah terakhir ini menunjukkan cara membuat font TrueType di jendela MiniWin.

Ada dua cara untuk merender font TrueType. Salah satunya adalah menggambarnya langsung di area klien Anda seperti yang dilakukan untuk lingkaran sebelumnya, yang lainnya adalah menambahkan kontrol kotak teks ke jendela Anda. Kami melakukan yang terakhir karena lebih mudah.

Sekarang kita akan menambahkan kontrol kotak teks ke dalam file konfigurasi JSON kita. Tambahkan ke definisi Window 2 sehingga terlihat seperti ini:

seperti ini:

{

"Nama": "W2", "Judul": "Jendela 2", "X": 50, "Y": 65, "Lebar": 100, "Tinggi": 80, "Border": true, "TitleBar": benar, "Terlihat": benar, "Diminimalkan": salah, "Kotak Teks": [{ "Nama": "TB1", "X": 0, "Y": 0, "Lebar": 115, "Tinggi": 50, "Justification": "Centre", "BackgroundColour": "MW_HAL_LCD_YELLOW", "ForegroundColour": "MW_HAL_LCD_BLACK", "Font": "mf_rlefont_BLKCHCRY16", "Enabled": true, "Visible": true }] }

Sepatah kata tentang font TrueType di MiniWin. Font datang dalam file.ttf. Di pengelola jendela di komputer yang lebih besar, ini ditampilkan ke layar Anda saat dibutuhkan. Ini membutuhkan banyak daya pemrosesan dan memori dan tidak cocok untuk perangkat kecil. Di MiniWin mereka telah diproses sebelumnya menjadi bitmap dan ditautkan pada waktu kompilasi dengan ukuran dan gaya font tetap (tebal, miring, dll.) yaitu Anda harus memutuskan font apa dengan ukuran dan gaya apa yang akan Anda gunakan pada waktu kompilasi. Ini telah dilakukan untuk Anda untuk dua contoh font dalam file zip MiniWin yang Anda unduh. Jika Anda ingin menggunakan font lain dengan ukuran dan gaya lain, lihat dokumentasi MiniWin di folder dokumen. Ada alat di MiniWin untuk Windows dan Linux untuk pra-pemrosesan file.ttf menjadi file kode sumber yang dapat Anda masukkan ke dalam proyek Anda.

Dan kata cepat kedua - sebagian besar font adalah hak cipta, termasuk yang akan Anda temukan di Microsoft Windows. Gunakan sesuka hati untuk penggunaan pribadi, tetapi apa pun yang Anda publikasikan, Anda harus memastikan bahwa lisensi font yang diterbitkan mengizinkannya, seperti halnya 2 font yang disertakan dalam MiniWin, tetapi bukan font Microsoft!

Kembali ke kode! Hasilkan, jatuhkan file, buat dan jalankan kembali seperti sebelumnya dan Anda akan melihat Window 2 sekarang memiliki beberapa teks default pada latar belakang kuning dengan font yang aneh. Mari kita ubah teks dengan mengedit file sumber Window 2 W2.c.

Kita perlu berkomunikasi dengan kotak teks yang baru saja kita buat dan cara Anda melakukannya seperti komunikasi apa pun di MiniWin adalah dengan mengirimkannya pesan. Kami ingin mengatur teks di kontrol saat jendela dibuat tetapi sebelum ditampilkan, jadi kami menambahkan kode di pengendali pesan dalam kasus MW_WINDOW_CREATED_MESSAGE. Ini diterima oleh kode jendela tepat sebelum jendela ditampilkan dan dimaksudkan untuk inisialisasi seperti ini. Pembuat kode membuat tempat penampung yang terlihat seperti ini di fungsi penangan pesan:

kasus MW_WINDOW_CREATED_MESSAGE:

/* Tambahkan kode inisialisasi jendela di sini */ break;

Di sini kita akan memposting pesan ke kontrol kotak teks yang memberi tahu teks apa yang ingin kita tampilkan dengan menggunakan fungsi mw_post_message seperti ini:

kasus MW_WINDOW_CREATED_MESSAGE:

/* Tambahkan kode inisialisasi jendela apa pun di sini */ mw_post_message(MW_TEXT_BOX_SET_TEXT_MESSAGE, message->recipient_handle, text_box_TB1_handle, 0UL, "Twas a dark and stormy night…", MW_CONTROL_MESSAGE); merusak;

Ini adalah parameternya:

• MW_TEXT_BOX_SET_TEXT_MESSAGE - Ini adalah jenis pesan yang kami kirim ke kontrol. Mereka terdaftar di miniwin.h dan didokumentasikan dalam dokumentasi.
• message->recipient_handle - Ini adalah dari mana pesan itu berasal - jendela ini - pegangannya ada dalam parameter pesan yang diteruskan ke fungsi penangan pesan.
• text_box_TB1_handle - Kepada siapa kita mengirim pesan - pegangan dari kontrol kotak teks. Ini tercantum dalam file yang dihasilkan miniwin_user.h.
• 0UL - Nilai data, tidak ada dalam kasus ini.
• "Sungguh malam yang gelap dan penuh badai…" - Nilai penunjuk - teks baru.
• MW_CONTROL_MESSAGE - Jenis penerima yang merupakan kontrol.

Itu dia. Bangun kembali dan jalankan kembali seperti biasa dan Anda akan mendapatkan kotak teks yang ditampilkan seperti pada gambar di atas.

Pengeposan pesan merupakan hal mendasar bagi MiniWin (seperti halnya semua pengelola jendela). Untuk contoh lebih lanjut, lihat contoh proyek di file zip dan untuk penjelasan lengkap baca bagian tentang pesan MiniWin di dokumentasi.

Langkah 10: Melangkah Lebih Jauh

Itu saja untuk pengenalan dasar MiniWin ini. MiniWin dapat melakukan lebih banyak daripada yang telah ditunjukkan di sini. Misalnya, layar di papan yang digunakan dalam instruksi ini kecil dan kontrolnya kecil dan perlu digunakan dengan dibber. Namun, contoh dan perangkat keras lain menggunakan kontrol yang lebih besar (ada 2 ukuran) pada layar yang lebih besar dan ini dapat dioperasikan dengan jari.

Ada banyak jenis kontrol lain selain yang ditunjukkan di sini. Untuk kontrol lebih lanjut, lihat berbagai contoh file JSON di folder pembuat kode. Semua jenis kontrol tercakup dalam contoh ini.

Windows memiliki banyak pilihan. Perbatasan, bilah judul, dan ikon semuanya dapat dikonfigurasi. Anda dapat memiliki bilah gulir dan area klien jendela gulir, beberapa contoh dari jenis jendela yang sama dan jendela dapat telanjang (hanya area klien, tanpa batas atau bilah judul) yang berarti bahwa mereka diperbaiki pada waktu kompilasi di tempat pada tampilan (lihat gambar di bagian ini dengan ikon ukuran besar - ini sebenarnya adalah 6 jendela telanjang).

MiniWin tidak menggunakan memori dinamis. Ini membuatnya cocok untuk perangkat kecil yang dibatasi dan merupakan persyaratan untuk beberapa proyek tertanam. MiniWin dan kode yang dihasilkannya juga sepenuhnya sesuai dengan MISRA 2012 ke level 'wajib'.

Untuk informasi lebih lanjut, lihat di folder dokumen untuk dokumentasi dan juga contoh aplikasi lain dalam file zip. Ada contoh di sini yang menunjukkan cara menggunakan semua fitur MiniWin dan cara mengintegrasikan MiniWin dengan FatFS dan FreeRTOS.