LittleVgl GUI中實現(xiàn)嵌入中文輸入法框架

時隔一年多終于又冒泡了，哎，隨著工作越來越忙，自己踏實坐下來寫點東西真是越來越費勁，這篇文章也是準備了好久好久才打算發(fā)表出來（不瞞大家，東西做完好久了，文章憋了一年了，當真“高產(chǎn)”出，咳咳），本來想著好久不見該好好扯點兒閑皮撈點兒閑嗑，結(jié)果兒子跑來旁邊嘮嘮叨叨的把我靈感都整沒了。。。最近國內(nèi)疫情嚴重，還有東航的事件，再回首身邊家人朋友同事，真心感謝靜好的歲月，也感謝負重前行的人，希望疫情早點結(jié)束，待到春花浪漫時，生活處處有生機，不多說了，talk is cheap, let's writing...

LittleVgl作為一款開源免費的嵌入式GUI得到越來越多工程師的厚愛，我們可以看到很多小型HMI項目或者一些開源社區(qū)都在使用它作為GUI的框架，同時也受益于用戶群的不斷擴大以及一些半導體原廠的青睞（通俗點就是說有贊助有錢兒了），LittleVgl本身也在快速的不斷更新迭代，易用的組件和相關(guān)的輔助開發(fā)工具在不斷的增加，而RT1050/1060/1170系列作為一款帶有LCD控制器的平臺，自然成為了LittleVgl最佳的載體之一了。

LittleVgl本身的組件已經(jīng)很豐富了，但是遺憾的是一直沒有加入對中文輸入法Keyboard的支持（看了下它在Github上的Contributor List沒有華人），這讓它在我們國內(nèi)的應用有了一些限制（注意在某組件上顯示中文和真正的中文輸入法是不同的概念），所以本項目旨在解決該問題，即把一個簡單輕量的中文輸入法框架嵌入到LittleVgl并跑在RT1050平臺上，并把它開源開放出來，所以不要小看了我的“公益心”，哈哈。

下面進入正題，首先把測試環(huán)境給出來，方便有興趣有能力的朋友可以自行搭建（當然應一部分偷懶的強烈需求，文章后面我隨附贈了完整的移植好的工程），然后我再一步一步地給出如何移植這套框架到用戶自己的工程里，當然我已經(jīng)把代碼本身做了很多優(yōu)化，盡量減小環(huán)境依賴，力求最少步驟的移植過程，“理論上”來講不太會出現(xiàn)移植后編譯出一堆Error的問題，咳咳。。。下面我們趕緊開整吧：

測試環(huán)境：

SDK版本：SDK_v2.9.1

SDK參考例程：boardsevkbimxrt1050littlevgl_exampleslittlevgl_demo_widgets

LittleVgl版本：v7.4.0

IDE工具：Keil_v5.31

開發(fā)板：MIMXRT1050-EVK + 480*272 RGB LCD屏

軟件說明：

我們先看下這套中文輸入法所需的幾個文件，如下圖所示，.c和.h文件加起來一共7個，其中nxp_logo.c只是我額外加的一個NXP的官方logo圖標轉(zhuǎn)成的C數(shù)組文件供littleVgl調(diào)用顯示，屬于錦上添花的東西，可有可無，真正跟輸入法相關(guān)的是剩下的6個文件，下面我們逐一介紹下這幾個文件的作用：

1. qwerty_py.c/.h，實際上這兩個文件才是這套全鍵盤拼音中文輸入法的核心框架，實現(xiàn)了對輸入的拼音字母進行索引匹配對應的漢字候選列表，這部分我是移植了如下鏈接中網(wǎng)友分享的代碼，所以這兩個文件我的角色只是一個大自然搬運工，不過說實話我是很感激該網(wǎng)友的無私分享的（這也是我一直推崇開源分享精神的源動力），之前對平時使用的各種輸入法里面的算法原理一直充滿好奇，直到看了這篇文章后才豁然開朗，“So that is what it is!”，讓我獲益匪淺（可能人的學習曲線和知識體系就是這樣一點一滴的積累吧），而且更關(guān)鍵的是，如果讓我繼續(xù)往下開發(fā)諸如拼音聯(lián)想和多漢字輸入等功能的話，我更多關(guān)心的可能只是邏輯搭建的工作量問題，而不是糾結(jié)于Yes or No的問題了，因為咱已經(jīng)了解了其最底層的工作原理了，所以很多復雜的事情，我們?nèi)绻艹榻z剝繭的找到其最底層的本質(zhì)（雖然這真的很難），那很多讓人抓耳撓腮的問題很快就可以理清思路。說到這里我思維又發(fā)散了，呵呵，我想起讓Linus Torvalds等一波老大神們一直頭疼的Linux內(nèi)核維護后繼無人的問題，其實我的個人理解有很大一部分原因是如今的Linux太龐大了以至于幾乎沒有后輩的人對Linux的理解能趕上這些老輩大神，而這些老輩大神的最大優(yōu)勢是他們創(chuàng)建了Linux最早期的底層框架而且難能可貴的是一直在follow Linux每個版本的歷史。總之，推薦大家看看如下這篇文章吧（實際上主要內(nèi)容也都是代碼），希望能各有所獲；

https://www.amobbs.com/thread-5668320-1-1.html?_dsign=0939dcbd

2. lv_chs_keyboard.c/.c文件，這部分就是我的工作了（咱也不能啥都搬運…，這是體現(xiàn)咱的value的東西不是），我把它當作littleVgl的一個補充組件來寫的，里面的大多數(shù)API參考官方littlevgl的lv_keyboard.c，所謂的文章開頭的嵌入中文輸入法到LittleVgl GUI環(huán)境中實際上就是這兩個文件干的活，即將上面提到qwerty.c/.h實現(xiàn)的拼音輸入法與LittleVgl框架結(jié)合到一塊，起到一個橋梁的作用，所以如果你想把這套中文輸入法嵌入到其他GUI環(huán)境中的話（比如emWin，GUIX，TouchGFX等），那主要的工作就是參考這兩個文件的內(nèi)容了；

3. lv_font_NotoSansCJKsc_Regular.c字體文件，雖然littleVgl官方源碼包里自帶了一個中文字體文件（lvglsrclv_fontlv_font_simsun_16_cjk.c），但是它只包含了1000個左右最常用的字，我實際體驗了下很多我們想用的字都找不到，所以這個時候就需要自己去做一個更全一點的字體庫了。這里面涉及到兩個問題需要考慮，第一是很多我們常見的中文字體是收費的（咱PC機的Microsoft Office套件里的中文字體都是微軟付費買的，所以咱也理解下早年正版Windows為啥辣么貴了，那你問為啥現(xiàn)在便宜了？因為人家現(xiàn)在不靠這個賺錢了唄），第二個是字體轉(zhuǎn)換工具的問題，我們網(wǎng)上找到的字體都是TTF或者OTF格式的，但littleVgl是不認的，需要轉(zhuǎn)換成它支持的字體格式。

對于第一個問題，我網(wǎng)上搜了好久最終選擇了目前用的比較多的Google開源免費的字體，Google真乃金主也，它維護的網(wǎng)站里面字體各種各樣啥都有且是開源免費的，如下鏈接，我選擇的是NotoSansCJKsc字體（最后面的sc表示simplified Chinese，簡體中文），然后它里面又包含了各種字形（regular, bold, light等），可以根據(jù)需要自行選擇，整個包很大（100多MB），拆分成不同字形的就小了（每個14~16MB左右）；

https://www.google.com/get/noto/

對于第二個字體轉(zhuǎn)換工具的問題，LittleVgl官方自帶了一個字體轉(zhuǎn)換工具（online font converter）,我個人覺著不太好用（對OTF字體支持的不行），這里推薦阿里大神自己做的一個LittleVgl字體轉(zhuǎn)換工具（LvglFontTool），非常方便好用，且支持加入Awesome圖標；

http://www.lfly.xyz/forum.php?mod=viewthread&tid=24&extra=page%3D1

關(guān)于字體這部分我需要再補充個問題，就是它占用的memory大小，畢竟我們是在嵌入式MCU平臺Flash和RAM的資源是受限的，如下圖所示，該字體文件占用大概1Mbytes的rodata空間（即可尋址的Flash空間，當然該大小可以通過在上圖轉(zhuǎn)換工具中增減一些文字來調(diào) 整），所以在移植本套輸入法之前需要預留足夠的Flash空間，當然對RT平臺來說這部分還好，畢竟其本身就外擴至少幾MB空間的QSPI Flash作為存儲空間的。

4. lv_demo_chineseinput.c/.h文件，這兩個文件屬于應用層實現(xiàn)了，主要關(guān)注該文件中下圖的ta_event_cb函數(shù)（即textarea事件的callback，點擊文本框的輸入時回調(diào)），在里面我們需要按照1，2，3去調(diào)用即可（這三步的API均在lv_chs_keyboard.c/h文件里實現(xiàn)）；

至此，這套全鍵盤拼音中文輸入法框架所需的幾個文件就介紹完了，用戶只需要把這幾個文件放到自己的工程設(shè)置好文件搜索路徑，并參考隨本文檔附帶的代碼工程示例，再結(jié)合自己產(chǎn)品的GUI樣式，把這套中文輸入法嵌入到自己應用當中。下面鏈接為本項目github倉庫，覺著不錯的別吝嗇您的小星星，star me！好了，就扯到這兒了，本文首發(fā)ChinaAET，續(xù)發(fā)于CSDN：https://blog.csdn.net/jicheng0622/article/details/123851560和博客園：https://www.cnblogs.com/jicheng0622/p/16078169.html，未完待續(xù)！

https://github.com/jicheng0622/Chinese-Input-Method-Framework-on-MCU-based-LittleVgl-GUI

審核編輯 ：李倩