0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

LittleVgl GUI中实现嵌入中文输入法框架

TopSemic嵌入式 来源:AET网站 作者:jicheng0622 2022-04-02 09:42 次阅读

时隔一年多终于又冒泡了,哎,随着工作越来越忙,自己踏实坐下来写点东西真是越来越费劲,这篇文章也是准备了好久好久才打算发表出来(不瞒大家,东西做完好久了,文章憋了一年了,当真“高产”出,咳咳),本来想着好久不见该好好扯点儿闲皮捞点儿闲嗑,结果儿子跑来旁边唠唠叨叨的把我灵感都整没了。。。最近国内疫情严重,还有东航的事件,再回首身边家人朋友同事,真心感谢静好的岁月,也感谢负重前行的人,希望疫情早点结束,待到春花浪漫时,生活处处有生机,不多说了,talk is cheap, let's writing...

LittleVgl作为一款开源免费的嵌入式GUI得到越来越多工程师的厚爱,我们可以看到很多小型HMI项目或者一些开源社区都在使用它作为GUI的框架,同时也受益于用户群的不断扩大以及一些半导体原厂的青睐(通俗点就是说有赞助有钱儿了),LittleVgl本身也在快速的不断更新迭代,易用的组件和相关的辅助开发工具在不断的增加,而RT1050/1060/1170系列作为一款带有LCD控制器的平台,自然成为了LittleVgl最佳的载体之一了。

LittleVgl本身的组件已经很丰富了,但是遗憾的是一直没有加入对中文输入法Keyboard的支持(看了下它在Github上的Contributor List没有华人),这让它在我们国内的应用有了一些限制(注意在某组件上显示中文和真正的中文输入法是不同的概念),所以本项目旨在解决该问题,即把一个简单轻量的中文输入法框架嵌入到LittleVgl并跑在RT1050平台上,并把它开源开放出来,所以不要小看了我的“公益心”,哈哈。

下面进入正题,首先把测试环境给出来,方便有兴趣有能力的朋友可以自行搭建(当然应一部分偷懒的强烈需求,文章后面我随附赠了完整的移植好的工程),然后我再一步一步地给出如何移植这套框架到用户自己的工程里,当然我已经把代码本身做了很多优化,尽量减小环境依赖,力求最少步骤的移植过程,“理论上”来讲不太会出现移植后编译出一堆Error的问题,咳咳。。。下面我们赶紧开整吧:

测试环境:

SDK版本:SDK_v2.9.1

SDK参考例程:boardsevkbimxrt1050littlevgl_exampleslittlevgl_demo_widgets

LittleVgl版本:v7.4.0

IDE工具:Keil_v5.31

开发板:MIMXRT1050-EVK + 480*272 RGB LCD屏

软件说明:

我们先看下这套中文输入法所需的几个文件,如下图所示,.c和.h文件加起来一共7个,其中nxp_logo.c只是我额外加的一个NXP的官方logo图标转成的C数组文件供littleVgl调用显示,属于锦上添花的东西,可有可无,真正跟输入法相关的是剩下的6个文件,下面我们逐一介绍下这几个文件的作用:

ac302460-b18b-11ec-aa7f-dac502259ad0.png

1. qwerty_py.c/.h,实际上这两个文件才是这套全键盘拼音中文输入法的核心框架,实现了对输入的拼音字母进行索引匹配对应的汉字候选列表,这部分我是移植了如下链接中网友分享的代码,所以这两个文件我的角色只是一个大自然搬运工,不过说实话我是很感激该网友的无私分享的(这也是我一直推崇开源分享精神的源动力),之前对平时使用的各种输入法里面的算法原理一直充满好奇,直到看了这篇文章后才豁然开朗,“So that is what it is!”,让我获益匪浅(可能人的学习曲线和知识体系就是这样一点一滴的积累吧),而且更关键的是,如果让我继续往下开发诸如拼音联想和多汉字输入等功能的话,我更多关心的可能只是逻辑搭建的工作量问题,而不是纠结于Yes or No的问题了,因为咱已经了解了其最底层的工作原理了,所以很多复杂的事情,我们如果能抽丝剥茧的找到其最底层的本质(虽然这真的很难),那很多让人抓耳挠腮的问题很快就可以理清思路。说到这里我思维又发散了,呵呵,我想起让Linus Torvalds等一波老大神们一直头疼的Linux内核维护后继无人的问题,其实我的个人理解有很大一部分原因是如今的Linux太庞大了以至于几乎没有后辈的人对Linux的理解能赶上这些老辈大神,而这些老辈大神的最大优势是他们创建了Linux最早期的底层框架而且难能可贵的是一直在follow Linux每个版本的历史。总之,推荐大家看看如下这篇文章吧(实际上主要内容也都是代码),希望能各有所获;

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

2. lv_chs_keyboard.c/.c文件,这部分就是我的工作了(咱也不能啥都搬运…,这是体现咱的value的东西不是),我把它当作littleVgl的一个补充组件来写的,里面的大多数API参考官方littlevgl的lv_keyboard.c,所谓的文章开头的嵌入中文输入法到LittleVgl GUI环境中实际上就是这两个文件干的活,即将上面提到qwerty.c/.h实现的拼音输入法与LittleVgl框架结合到一块,起到一个桥梁的作用,所以如果你想把这套中文输入法嵌入到其他GUI环境中的话(比如emWin,GUIX,TouchGFX等),那主要的工作就是参考这两个文件的内容了;

3. lv_font_NotoSansCJKsc_Regular.c字体文件,虽然littleVgl官方源码包里自带了一个中文字体文件(lvglsrclv_fontlv_font_simsun_16_cjk.c),但是它只包含了1000个左右最常用的字,我实际体验了下很多我们想用的字都找不到,所以这个时候就需要自己去做一个更全一点的字体库了。这里面涉及到两个问题需要考虑,第一是很多我们常见的中文字体是收费的(咱PC机的Microsoft Office套件里的中文字体都是微软付费买的,所以咱也理解下早年正版Windows为啥辣么贵了,那你问为啥现在便宜了?因为人家现在不靠这个赚钱了呗),第二个是字体转换工具的问题,我们网上找到的字体都是TTF或者OTF格式的,但littleVgl是不认的,需要转换成它支持的字体格式。

对于第一个问题,我网上搜了好久最终选择了目前用的比较多的Google开源免费的字体,Google真乃金主也,它维护的网站里面字体各种各样啥都有且是开源免费的,如下链接,我选择的是NotoSansCJKsc字体(最后面的sc表示simplified Chinese,简体中文),然后它里面又包含了各种字形(regular, bold, light等),可以根据需要自行选择,整个包很大(100多MB),拆分成不同字形的就小了(每个14~16MB左右);

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

ac43f6c0-b18b-11ec-aa7f-dac502259ad0.png

对于第二个字体转换工具的问题,LittleVgl官方自带了一个字体转换工具(online font converter),我个人觉着不太好用(对OTF字体支持的不行),这里推荐阿里大神自己做的一个LittleVgl字体转换工具(LvglFontTool),非常方便好用,且支持加入Awesome图标;

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

ac59af2e-b18b-11ec-aa7f-dac502259ad0.png

关于字体这部分我需要再补充个问题,就是它占用的memory大小,毕竟我们是在嵌入式MCU平台Flash和RAM的资源是受限的,如下图所示,该字体文件占用大概1Mbytes的rodata空间(即可寻址的Flash空间,当然该大小可以通过在上图转换工具中增减一些文字来调 整),所以在移植本套输入法之前需要预留足够的Flash空间,当然对RT平台来说这部分还好,毕竟其本身就外扩至少几MB空间的QSPI Flash作为存储空间的。

ac6e70da-b18b-11ec-aa7f-dac502259ad0.png

4. lv_demo_chineseinput.c/.h文件,这两个文件属于应用层实现了,主要关注该文件中下图的ta_event_cb函数(即textarea事件的callback,点击文本框的输入时回调),在里面我们需要按照1,2,3去调用即可(这三步的API均在lv_chs_keyboard.c/h文件里实现);

ac90d9cc-b18b-11ec-aa7f-dac502259ad0.png

至此,这套全键盘拼音中文输入法框架所需的几个文件就介绍完了,用户只需要把这几个文件放到自己的工程设置好文件搜索路径,并参考随本文档附带的代码工程示例,再结合自己产品的GUI样式,把这套中文输入法嵌入到自己应用当中。下面链接为本项目github仓库,觉着不错的别吝啬您的小星星,star me!好了,就扯到这儿了,本文首发ChinaAET,续发于CSDN:https://blog.csdn.net/jicheng0622/article/details/123851560和博客园:https://www.cnblogs.com/jicheng0622/p/16078169.html,未完待续!

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

aca20012-b18b-11ec-aa7f-dac502259ad0.png

审核编辑 :李倩

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 嵌入式
    +关注

    关注

    5000

    文章

    18383

    浏览量

    290706
  • 开源
    +关注

    关注

    3

    文章

    3014

    浏览量

    41755
  • GUI
    GUI
    +关注

    关注

    3

    文章

    616

    浏览量

    38929

原文标题:LittleVgl GUI中实现嵌入中文输入法框架

文章出处:【微信号:TopSemic,微信公众号:TopSemic嵌入式】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    分享几个嵌入式中常用的GUI

    一、什么是GUIGUI是图形用户界面(GraphicalUserInterface,简称GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面。通过GUI
    的头像 发表于 04-06 08:09 367次阅读
    分享几个<b class='flag-5'>嵌入</b>式中常用的<b class='flag-5'>GUI</b>

    【飞腾派4G版免费试用】+越品越有味道的体验

    输入法 图6 完成添加 此时,选取右上角的输入法图标,将EN输入法切换到拼音输入法就可以使用中文输入法了。 图7切换
    发表于 01-13 21:10

    【飞腾派4G版免费试用】ibus中文输入法安装

    为例,如下图: 不知道什么原因,ibus中文输入法有时会出现bug,可能是系统兼容性的问题,切换到EN再切换回来就恢复正常了。
    发表于 01-11 22:23

    详解全志R128 GUI图形系统—LVGL篇

    LVGL 是一个免费的开源图形库,提供了创建嵌入GUI 所需的一切,具有易于使用的图形元素,美观的视觉效果和低内存占用,采用MIT 许可协议,可以访问LittlevGL官网获取更多资料。
    的头像 发表于 12-11 14:49 1331次阅读
    详解全志R128 <b class='flag-5'>GUI</b>图形系统—LVGL篇

    详解全志R128GUI图形系统——LVGL篇

    使用起来。 lv_g2d_test 应用中有完整的使用示例。 sunximem 在sunximem实现了管理物理内存的封装,这些函数都不需要应用调用,但能加深对整个框架的理解,如下: 接口 说明
    发表于 12-07 15:43

    嵌入GUI开发特训营”开营啦!是学霸就有奖拿,快来挑战一下!

    前言 近期,恩智浦中国官方账号在国内知名视频平台"B站"推出了嵌入GUI开发特训营系列视频教程:   https://www.bilibili.com/video
    的头像 发表于 12-07 10:55 753次阅读
    “<b class='flag-5'>嵌入</b>式<b class='flag-5'>GUI</b>开发特训营”开营啦!是学霸就有奖拿,快来挑战一下!

    谁说单片机不能图形编程,介绍MCU的TOP 5图形GUI库!

    LittlevGL(LVGL) 是一款开源的嵌入式图形用户界面(GUI)库,专为嵌入式系统设计。LVGL以其轻量级、灵活性和强大的功能而备受开发者青睐,资源够的情况下可移植到所有MCU
    的头像 发表于 12-07 10:42 3541次阅读
    谁说单片机不能图形编程,介绍MCU的TOP 5图形<b class='flag-5'>GUI</b>库!

    嵌入GUI特训营』开营啦!是学霸就有奖拿,快来挑战一下!

    “同是嵌入GUI设计 为什么别人做起来 轻松、快捷,很炫酷 而我的设计却 费力、耗时,有点low…“ 不要焦虑! 加入恩智浦 “ 嵌入GUI特训营 ” 让你的
    的头像 发表于 12-01 09:15 235次阅读
    『<b class='flag-5'>嵌入</b>式<b class='flag-5'>GUI</b>特训营』开营啦!是学霸就有奖拿,快来挑战一下!

    littlevgl这个GUI怎么样?相比EMWIN有什么特色?

    littlevgl这个GUI怎么样?相比EMWIN有什么特色?
    发表于 10-28 07:03

    请问LittlevGL支持12864这种液晶吗?

    LittlevGL支持12864这种液晶吗?有没有人用过这个gui呢?
    发表于 09-26 07:36

    Qt For OpenHarmony

    绘制双缓存实现)、Screen(系统屏幕对象,用于管理Window显示)、Window(系统窗口对象)、InputContext(系统输入处理,包括鼠标、输入法等)、OpenGLContext(系统
    发表于 09-15 15:39

    使用GUI Guider工具开发嵌入GUI应用(3)

    本节讲述在GUI Guider中,应用各种UI的基本元素,并顺利部署到MCU的过程。在GUI Guider中使用各LVGL的组件时,将会涉及到GUI Guider的操作,以及将某些组件额外生成的源码添加到Keil工程中。
    的头像 发表于 08-16 14:39 1660次阅读
    使用<b class='flag-5'>GUI</b> Guider工具开发<b class='flag-5'>嵌入</b>式<b class='flag-5'>GUI</b>应用(3)

    使用GUI Guider工具开发嵌入GUI应用(2)

    GUI Guider本质上是一个方便嵌入式开发者基于LVGL开发GUI应用的源码生成器工具,其作用是帮助开发者生成LVGL的应用源码,GUI Guider最终生成的源码将要被部署到具体
    的头像 发表于 08-16 14:36 2314次阅读
    使用<b class='flag-5'>GUI</b> Guider工具开发<b class='flag-5'>嵌入</b>式<b class='flag-5'>GUI</b>应用(2)

    嵌入式界面神器littleVGL介绍

    littleVGL 是近几年开始流行的一个小型开源嵌入GUI 库,具有界面精美,消耗资源小,可移植度高,响应式布局等特点,全库采用纯 c 语言开发,而且 littleVGL 库的更
    发表于 06-30 10:00 1980次阅读
    <b class='flag-5'>嵌入</b>式界面神器<b class='flag-5'>littleVGL</b>介绍

    iTOP-RK3588 | Linux系统和应用开发手册

    中文输入法 2.4 Debian系统使用VNC远程控制桌面 2.4.1 什么是VNC 2.4.2 安装VNC服务器 2.4.3 客户端连接 2.5 Debian系统安装ToDesk 第3章 Ubuntu
    发表于 06-16 14:39