Lvgl(V8.2)自定义字体实现多国语言切换功能

简介: Lvgl(V8.2)自定义字体实现多国语言切换功能

一款带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

640.png

例如我想显示:你好中国


中文:你好中国


日文:こんにちは中国


英文:Hello China


德文:Hallo China


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


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

640.png

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

640.png

然后添加到 lv_font.mk 中:

640.png

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开发板上的显示效果:

640.png

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

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

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

640.png

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


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

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

640.png

往期精彩

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


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


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


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

目录
相关文章
|
7月前
vscode编辑器使用拓展插件background添加背景图片改变外观
vscode编辑器使用拓展插件background添加背景图片改变外观
97 0
|
9月前
|
C++ 计算机视觉 Python
Qt+C++窗体界面中英文语言切换
这篇博客针对<<Qt+C++窗体界面中英文语言切换>>编写代码,代码整洁,规则,易读。 学习与应用推荐首选。
91 0
|
11月前
|
人工智能 前端开发
前端封装库/工具库的字体/图标之Iconfont
在前端开发中,图标是不可或缺的一部分。传统的图片素材虽然能够满足需求,但使用方式较为繁琐,还会增大项目的体积和加载时间。随着前端技术的发展,字体/图标库逐渐成为了替代传统图片素材的新选择。其中一个非常流行的字体/图标库就是 Iconfont。
239 1
|
12月前
Magisk模块:阴影截图可切换带壳截图
一款自动为截图套上阴影边框的面具模块 使用模块自动完成截图后的套阴影操作 如果不想使用阴影方式,也可以切换为带壳,壳子可以自定义 还有更多3D壳子可供选择
206 0
|
iOS开发
(转载)教你如何在iOS项目中设置各种字体
原文地址:http://www.cnblogs.com/jijiYY/p/4736967.html 在iOS开发中设置字体的方法有很多种,下面为大家介绍比较常用的三种方法 1.
1371 0
|
图形学 Windows
Unity 之 实用技巧更换编辑器主题
你的编辑器还在用灰色主题吗?还在羡慕别人的深色主题吗?教你一步修改Unity编辑器主题,赶快来看看吧 ~
1048 0
Unity 之 实用技巧更换编辑器主题
|
XML iOS开发 数据格式
iOS程序框架设计之皮肤切换功能(一)
iOS程序框架设计之皮肤切换功能
209 0
iOS程序框架设计之皮肤切换功能(一)
|
iOS开发
iOS程序框架设计之皮肤切换功能(二)
iOS程序框架设计之皮肤切换功能
202 0
iOS程序框架设计之皮肤切换功能(二)
|
自然语言处理
用控件仅一条指令实现界面换肤和多语言版本(YFSkins)
这一段时间做程序,一直在做界面方面的工作,刚开始是简单的贴图操作,后来感觉不通用,代码重用性不好,并且要做很多基本工作
597 0
|
图形学
Unity 便捷小工具之批量更改UGUI Font(字体)
在项目开发过程中可能会遇到更改字体的需求,如果手动逐一更改实在是太麻烦,所以我们需要自动化,一键能解决的问题绝不点击两次 效果过下 源码如下 using UnityEngine; using System.
2178 0