lvgl(v8.2)自定义字体实现多国语言切换功能(代码片段)

Engineer-Bruce_Yang Engineer-Bruce_Yang     2022-12-07     684

关键词:

点击上方“嵌入式应用研究院”,选择“置顶/星标公众号

干货福利,第一时间送达!

来源 | 嵌入式应用研究院

整理&排版 | 嵌入式应用研究院

一款带LCD的嵌入式电子产品,如果是面向出口贸易,那么多国语言的显示功能必不可少。那么如何使用LVGL来实现多语言功能呢?先来实现一个简单的语言功能切换demo:当不断点击一个按钮,即将一个文本以不同语言进行显示。

1、下载TTF或者WOFF字体

这里我下的是思源黑体Normal版本:SourceHanSansCN-Normal-2.otf 如果想要找其它的一些字体,去Adobe开源字体 github 上下载就行了,地址:

https://github.com/adobe-fonts
2、使用 LVGL 官方的字体转换工具进行转换

使用官网网页版本的转换工具,地址如下:

https://lvgl.io/tools/fontconverter

例如我想显示:你好中国

中文:你好中国

日文:こんにちは中国

英文:Hello China

德文:Hallo China

俄文:Привет Китай

因为我只是想要显示个别国家的文本,故不需要整个字库文件,而只是从字库文件里取出我想要的那部分即可,那么这时候我们就将翻译好的文本填写到Symbols区域即可,设置完对应的参数以后,点击Convert即可生成对应的字体数组文件并通过网页端进行下载,下载完成打开文件显示如下:(温馨提示,字库文件最好选择等宽字库文件,这样就可以兼容其它特殊的字体,例如韩语等)

3、将生成的字体文件拷贝到 lvgl 字体对应的目录下

然后添加到 lv_font.mk 中:

4、编写代码逻辑

点击按钮,将"你好中国"以中文、日文、德文、俄文分别进行显示。

#include "lvgl/lvgl.h"
#include "lvgl/demos/lv_demos.h"
#include "lv_drivers/display/fbdev.h"
#include "lv_drivers/indev/evdev.h"
#include <unistd.h>
#include <pthread.h>
#include <time.h>
#include <sys/time.h>
#define DISP_BUF_SIZE (128 * 1024)
lv_obj_t *btn ;
lv_obj_t *label;
static void event_handler(lv_event_t * e)

 static uint8_t status = 0 ;
 lv_event_code_t code = lv_event_get_code(e);
 if(code == LV_EVENT_CLICKED)
 
   switch(status)
   
   case 0:
     lv_label_set_text(label,"こんにちは");
     status = 1 ;
     break ;
   case 1:
     lv_label_set_text(label,"Hallo China");
     status = 2 ;
     break ;
   case 2:
     lv_label_set_text(label,"Привет Китай");
     status = 3 ;
     break ;
   case 3:
     lv_label_set_text(label,"你好中国");
     status = 0 ;
     break ;
   default:
     break ;
   
 

int main(void)

 lv_init();
 fbdev_init();
 static lv_color_t buf[DISP_BUF_SIZE];
 /*Initialize a descriptor for the buffer*/
 static lv_disp_draw_buf_t disp_buf;
 lv_disp_draw_buf_init(&disp_buf, buf, NULL, DISP_BUF_SIZE);
 static lv_disp_drv_t disp_drv;
 lv_disp_drv_init(&disp_drv);
 disp_drv.draw_buf  = &disp_buf;
 disp_drv.flush_cb  = fbdev_flush;
 disp_drv.hor_res  = 480;
 disp_drv.ver_res  = 800;
 lv_disp_drv_register(&disp_drv);
 evdev_init();
 static lv_indev_drv_t indev_drv_1;
 lv_indev_drv_init(&indev_drv_1); 
 indev_drv_1.type = LV_INDEV_TYPE_POINTER;
 indev_drv_1.read_cb = evdev_read;
 lv_indev_t *mouse_indev = lv_indev_drv_register(&indev_drv_1);

 LV_IMG_DECLARE(mouse_cursor_icon)
 lv_obj_t * cursor_obj = lv_img_create(lv_scr_act()); 
 lv_img_set_src(cursor_obj, &mouse_cursor_icon); 
 lv_indev_set_cursor(mouse_indev, cursor_obj); 
 
 //创建一个按钮
 btn = lv_btn_create(lv_scr_act());
 //设置按钮的大小
 lv_obj_set_size(btn, 100, 50);
 //将按钮居中显示
 lv_obj_center(btn);
 //设置按钮默认的背景颜色样式
 lv_obj_set_style_bg_color(btn, lv_color_hex(0xE3EAF4), LV_STATE_DEFAULT);
 //当按钮按下时的背景颜色样式
 lv_obj_set_style_bg_color(btn, lv_color_hex(0x3E6094), LV_STATE_PRESSED);
 //注册按钮事件,点击按钮时,将在event_handler回调函数里进行处理
 lv_obj_add_event_cb(btn, event_handler, LV_EVENT_ALL, NULL);
 //从外部导入自定义字库文件
 LV_FONT_DECLARE(siyuan_black);
 //设置自定义字体样式
 static lv_style_t style_font ;
 lv_style_init(&style_font);
 //创建一个Label标签控件
 label = lv_label_create(lv_scr_act());
 //设置Label的大小
 lv_obj_set_size(label, 200,100);
 //将Label显示的字体样式设置为自定义字体样式
 lv_obj_set_style_text_font(label, &siyuan_black, 0);
 //在Label显示显示内容
 lv_label_set_text(label,"你好中国");
 /*Handle LitlevGL tasks (tickless mode)*/
 while(1) 
   lv_timer_handler();
   usleep(5000);
 
 return 0;


/*基于Liunx的时基产生心跳函数,提供给LVGL用*/
uint32_t custom_tick_get(void)

   static uint64_t start_ms = 0;
   if(start_ms == 0) 
     struct timeval tv_start;
     gettimeofday(&tv_start, NULL);
     start_ms = (tv_start.tv_sec * 1000000 + tv_start.tv_usec) / 1000;
   
   struct timeval tv_now;
   gettimeofday(&tv_now, NULL);
   uint64_t now_ms;
   now_ms = (tv_now.tv_sec * 1000000 + tv_now.tv_usec) / 1000;
   uint32_t time_ms = now_ms - start_ms;
   return time_ms;
 
5、运行效果

Linux开发板上的显示效果:

这个是我在SSD212开发板上跑的效果,同样的,也可以将平台无关的代码移植到任何支持LVGL v8.2的平台上:

https://gitee.com/morixinguan/lvgl_v8.2_for_mcu
https://gitee.com/morixinguan/lvgl_v8.2_for_linux

就用我提供的上面这两个模板直接修改即可。我还将韦东山老师提供的开源中文键盘输入控件移植到相应的工程里,但是该控件的实现效果以及定制化离真正的产品功能还有一段距离,期待后续优化和改进:

在真正的产品开发中,一般情况下会将不同语言放在不同的文件里,然后再通过程序逻辑来实现动态切换,这样做有利于后期的维护和样式扩展,例如实现UI换肤功能。

在真正的产品开发中,一般情况下会将不同语言放在不同的文件里,然后再通过程序逻辑来实现动态切换,这样做有利于后期的维护和样式扩展,例如实现UI换肤功能。本demo例程如下:

https://gitee.com/morixinguan/lvgl_v8.2_for_linux

往期精彩

【开源】程序员在家做饭方法指南

基于HarmonyOS项目的手把手开源教程

一个超棒的开源解读项目【Linux内核揭秘】,一定不要错过啦!

整理了很久之前在码云/Github/CSDN上收藏的嵌入式产品级项目分享开源

觉得本次分享的文章对您有帮助,随手点[在看]并转发分享,也是对我的支持。

lvgl(v8.2)自定义字体实现多国语言切换功能(代码片段)

点击上方“嵌入式应用研究院”,选择“置顶/星标公众号”干货福利,第一时间送达!来源|嵌入式应用研究院整理&排版 |嵌入式应用研究院一款带LCD的嵌入式电子产品,如果是面向出口贸易,那么多国语... 查看详情

uwp-使用资源字典实现多国语言切换(重启应用生效)

...办法倒是有,不过我试过后觉得不怎么好用,诸如:用类定义——太麻烦不易修改,绑定麻烦;试过通过自定义主题来实现,比用类来实现好太多了,切换ElementTheme属性就可以实时变更语言,不过怪怪的,而且也是比较麻烦所以... 查看详情

前端html页面如何实现多语言切换功能

...,html不能自动切换,但是浏览器自带语音切换还是无法实现多国语言翻译的。国内的电脑用户基本上是中文、简体繁体和英文切换,首先要搞清楚HTML逻辑,如果要改变网页文字内容要用如JQ的$("#id).html("内容")来改变... 查看详情

lvgl页面管理器(代码片段)

...动画可以指定切换页面时是否删除当前页面(节省内存)自定义页面过渡动画(TODO)自定义页面返回按钮(TODO)页面选择器(TODO)moretodo…使用示例lv_100ask_page_manager使用起来非常简单&#x 查看详情

lvglv8学习笔记|07-字体的使用方法(代码片段)

...供的思源字体1.使能思源字体2.使用思源字体三、使用自定义字体1.下载字体2.字体转换3.使用自定义字体一、lvgl提供的ASCII字体1.使能字体lvgl默认提供了Montserrat字体的ASCII字符范围,支持从8-48字号,可以通过lv_conf.h中的宏定义配... 查看详情

lvglv8学习笔记|07-字体的使用方法(代码片段)

...供的思源字体1.使能思源字体2.使用思源字体三、使用自定义字体1.下载字体2.字体转换3.使用自定义字体一、lvgl提供的ASCII字体1.使能字体lvgl默认提供了Montserrat字体的ASCII字符范围,支持从8-48字号,可以通过lv_conf.h中的宏定义配... 查看详情

微信小程序实现多国语言的切换-简单

参考技术A实现步骤:1,首先在根目录新建文件夹i18n,该文件夹下是各种语言的js文件,如下图所示:每个js文件内容和下面的图片类似;2,新建base.js文件,位置和app.js同级别即可,也可自行安排位置;里面内容如下3,在页面中使... 查看详情

.net网站如何实现多国语言切换?

A.如何手动建立并编辑资源文件1.建立名为LocProject的ASP.NETWeb应用程序。如需详细说明,请参阅建立Web项目。注意:程序中会使用项目名称LocProject2.在项目中,加入新项(AddNewItem...)3.选择"资源文件"(AssemblyResourceFile)。文件名... 查看详情

c#多国语言datagridview的标题切换问题

...fb8235e6f11f3647.html高手帮忙看看,那个语句应该怎么写可以实现DataGridView的标题多语言切换,谢谢啦。不要用你那种方法了,太累了。直接在初始化之前,把资源文件Load进去,初始化时,自会调用的。关键源码让你看看,可以初... 查看详情

lvgl8基础语法-设置中文(代码片段)

...C文件拖入工程,所有依赖准备结束代码调试//声明自定义字体LV_FONT_DECLARE(wenmou9);//创建标签lv_obj_t*label=lv_label_create(lv_scr 查看详情

word利用域代码快速实现自定义编号

问题自定义编号形式是日常学术论文写作的常用方式,本文介绍一种基于域代码的方式快速实现该功能。方法定义新的多级列表;确定ListNum域列表名称为“def”并确定输入自定义编号的格式和字体;Alt+F9打开域代... 查看详情

word利用域代码快速实现自定义编号

问题自定义编号形式是日常学术论文写作的常用方式,本文介绍一种基于域代码的方式快速实现该功能。方法定义新的多级列表;确定ListNum域列表名称为“def”并确定输入自定义编号的格式和字体;Alt+F9打开域代... 查看详情

wince6.0多国语言软键盘

  N久以前写过一篇《WinCE下自定义的大软键盘》,这个自定义软键盘就是为RM905a+项目来做的。RM905a+的系统分辨率是640*480,WinCE原生键盘小的太小,大的又太大。所以就去除了大软键盘其中很多没必要的按键,既满足了使用需... 查看详情

详解升讯威在线客服系统前端多国语言实现技术:原生支持葡文印尼文土耳其文俄文(代码片段)

...0c;如葡文、印尼文、土耳其文、俄文等。并且希望能够自定义访客端的界面语言。好,那就满足这个需求吧!本文重点从技术角度介绍了访客端多国语言的实现方法,以及如何实现自定义界面语言功能。在线客服系统... 查看详情

lvgl显示中文和自定义图标(代码片段)

lvgl显示中文和自定义图标显示中文制作字库lvgl字库在线制作网址https://lvgl.io/tools/fontconverter下面以制作“按钮”这两个汉字字库为例首先选择一个字体文件可以在网上找,也可以去电脑C:\\Windows\\Fonts里挑一个顺眼的确定要转... 查看详情

esp32基础应用之lvgl显示中文(代码片段)

...考乐鑫官网《API指南—分区表》在官方例程中复制一份自定义分区表到lvgl工程中修改分区表中的内容后如下#Name,Type,SubType,Offset,Size,Flags#Note:ifyouhaveincreasedthebootloadersize,makesuretoupdatetheoffsetstoavoidoverlapnvs,data,nvs,0x9000,0x6000,phy_init,data... 查看详情

winform,自定义文本框控件实现文本框验证加水印功能

需求:1、当文本框无值时出现灰色字体提示用户输入信息;   2、当文本框有值时出现用户输入的值并且字体恢复黑色;   3、当该文本框失去焦点时验证用户输入的值是否正确(正则表达式验证),如果错误,弹出“... 查看详情

lvgl开发|lv_lib_100ask之lvgl中文输入(lv_100ask_pinyin_ime)-lvgl中文输入(代码片段)

...xX介绍lv_100ask_pinyin_ime是在lv_keyboard的基础上编写的一个自定义部件(创建接口为:lv_100ask_pinyin_ime_create(lv_obj_t*parent));),它和lv_keyboard没有什么区别,只是增加了支持中文拼音输入法的功能。所以将其称为ÿ... 查看详情