前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Lvgl(V8.2)自定义字体实现多国语言切换功能

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

作者头像
杨源鑫
发布于 2022-11-28 05:33:10
发布于 2022-11-28 05:33:10
3.4K00
代码可运行
举报
文章被收录于专栏:嵌入式开发圈嵌入式开发圈
运行总次数:0
代码可运行

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

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

1、下载TTF或者WOFF字体

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://github.com/adobe-fonts
2、使用 LVGL 官方的字体转换工具进行转换

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://lvgl.io/tools/fontconverter

例如我想显示:你好中国

中文:你好中国

日文:こんにちは中国

英文:Hello China

德文:Hallo China

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

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

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

然后添加到 lv_font.mk 中:

4、编写代码逻辑

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#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的平台上:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://gitee.com/morixinguan/lvgl_v8.2_for_mcu
https://gitee.com/morixinguan/lvgl_v8.2_for_linux

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
https://gitee.com/morixinguan/lvgl_v8.2_for_linux
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 嵌入式应用研究院 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
全志V853开发板移植基于 LVGL 的 2048 小游戏
这一节将以一个已经编写好的 lvgl 小游戏 2048 描述如何将已经编写完成的 lvgl 程序移植到开发板上。
阿志小管家
2024/02/02
4250
全志V853开发板移植基于 LVGL 的 2048 小游戏
嵌入式Linux高级案例-移植LVGL到Linux开发板
​ 本篇主要是记录将LVGL移植到百问网STM32MP157开发板上,并且仅是跑一下LVGL的一些例程。
韦东山
2022/06/30
4.3K0
lvgl学习
在 aithinker\_Ai-M6X\_SDK\examples\lvgl\demos目录中新建一个文件夹, 可以直接cv lvgl文件夹修改, 例如我新建的目录 lvgltest2 结构如下
治电小白菜
2024/01/21
1640
为全志D1开发板移植LVGL日历控件和显示天气
Linux还真是逐步熟悉中,现在才了解到Linux即没有原生的GUI,也没有应用层协议栈,所以要实现HTTP应用,必须利用TCP然后自己封装HTTP数据包。本篇即记录封装HTTP数据包,到心知天气请求天气信息的案例实现过程。
阿志小管家
2024/02/22
3620
为全志D1开发板移植LVGL日历控件和显示天气
百问网全志D1h开发板红外控制LVGL界面切换
建议在window上都选择V9.0版本下载上面两个仓库,最后用lvgl仓库代替lv_port_linux_frame_buffer的lvgl文件夹。
阿志小管家
2024/07/26
1740
百问网全志D1h开发板红外控制LVGL界面切换
野火指南者开发板移植 lvgl 库
由于近期要做一个装置 ,想着把装置做的好看一点,就打算使用 GUI 来做一个信息的相关显示,之前听说过一款比较轻量级的图形库,也就是 lvgl,手头又正好有一块搭配屏幕的野火指南者开发板,单片机型号是 STM32F103VET6,Flash 为 512KB,RAM 为 64KB,屏幕为 3.2 寸电阻触摸屏,我们在来看一下运行 lvgl 这个 GUI 需要的资源,所需资源如下图所示:
wenzid
2021/03/04
2.3K0
野火指南者开发板移植 lvgl 库
机器人编程趣味实践01-简要介绍
历经6年打磨,5轮测试,机器人编程趣味实践将逐步更新。涵盖windows、linux双系统,涉及硬件平台有手表、手机、电脑和机器人等。
zhangrelay
2021/12/02
4190
机器人编程趣味实践01-简要介绍
实战贴:开源GUI LittlevGL在MCU上的移植
前几天看见正点原子发布了LittlevGL的教程,这个GUI貌似又火了,于是应读者要求,我也来移植一下,将正点原子的这个GUI移植到小熊派上,不到一会功夫就搞定了,总的来说挺简单,没遇到什么特别的障碍,因为正点原子把坑都帮我们绕过了,直接改下一些基本配置就可以成功显示,但是从头开始移植一个可不简单噢,要详细看官方文档和说明。
杨源鑫
2020/06/10
4.1K1
实战贴:开源GUI LittlevGL在MCU上的移植
littlevgl(Lvgl)最新版V7.4移植
LittleVGL最新已经更新到V7,网上大多数移植教程的版本比较老,很多特性没有,界面也不够酷炫。
杨永贞
2020/09/02
3.5K0
STM32CubeMX6.0 + HAL + LittleVGL7.6 等学习[最全附工程源码]
https://sxf1024.lanzoui.com/b09rf2dwj 密码:bgvi
小锋学长生活大爆炸
2020/10/26
2.7K0
STM32CubeMX6.0 + HAL + LittleVGL7.6 等学习[最全附工程源码]
LVGL视频播放界面实现方法
使用LVGL开发且需要在UI下显示视频或者显示摄像头数据,但是不知道如何实现,要么是只显示UI,要么就只显示视频。
阿志小管家
2024/02/02
1.1K0
LVGL视频播放界面实现方法
AIoT应用创新大赛-基于TencentOS Tiny 的智能家居中控
随着科技水平的不断提高,生活水平的改善,智能家居产品正在不断走进日常生活。智能家居可以让家电更智能,更能让生活更舒适。智能家居也是互联网不断深化发展的产物。互联网连接的是人与人,进一步发展后形成物联网,连接人与物、物与物。
羽翰尘
2022/03/06
1.4K1
AIoT应用创新大赛-基于TencentOS Tiny 的智能家居中控
Tina-SDK开发
Tina-SDKV2.0源码网盘链接:https://pan.baidu.com/s/13uKlqDXImmMl9cgKc41tZg?pwd=qcw7
韦东山
2024/08/24
5030
Tina-SDK开发
lvgl 库 V7版本相关应用
在使用 lvgl 库的时候,笔者使用的 V7 版本的库,使用过程中发现网上关于 V7 版本的资料非常少,官网有文档介绍其如何使用,但有些方面还不是很全面,而且网上现在的中文教程大多数是针对于 V6 版本的,V6 和 V7 使用上的差异在有些方面还是挺大的,所以笔者也就想把自己在使用 V7 版本的库的时候的一些心得记录下来,这篇文章不能覆盖全面,只是笔者就最近几天所使用到的 lvgl V7 版本的一部分功能的一个总结,后期如果有新的心得了,会继续完善这个系列,好了,下面开始正文。
wenzid
2020/11/09
7940
嵌入式linux之go语言开发(十三)LittlevGL,漂亮的嵌入式GUI的go语言绑定
LittleVgl,一款开源嵌入式图形用户界面库。https://littlevgl.cn/
杨永贞
2020/08/04
2.8K0
STM32CubeMX6.0 + HAL + LittleVGL7.6 等学习[最全附工程源码]
问题1: 打印正常,但是加入接收中断后,开始出bug,最后锁定接收中断挂掉了。 原因: HAL库的串口接收发送函数有bug,就是收发同时进行的时候,会出现锁死的现象。 解决: 需要注释掉 HAL_UART_Receive_IT 和 HAL_UART_Transmit_IT 中的 __HAL_LOCK(huart) 函数。或者不要在接收里面,每接收到一个字符就printf一下。
小锋学长生活大爆炸
2025/05/24
1380
STM32CubeMX6.0 + HAL + LittleVGL7.6 等学习[最全附工程源码]
基于RT-THREAD的桌面小工具
摘要 这个桌面小盒子是之前的东西,一直放着没有整理好。最近有空了就把他整理整理。 小盒子主要用来显示时间和天气预报,功能比较简单,其实还有很多可以玩的,懒得弄,所以就把最简单的整理出来。 软件是基于rt-thread, UI采用lvgl。 功能主要分为两个部分 第一部分--功能 功能部分主要分为两个部分,一个是NTP获取实时时间,一个是天气等信息。 NTP比较简单,RTT提供了相关API。代码如下: void get_local_time(void) { time_t now; now =
Rice加饭
2022/05/10
7910
基于RT-THREAD的桌面小工具
全志 Tina Linux 图形系统 框架介绍 最全介绍 MiniGUI、QT5、EFL、GTK+(WebkitGtk、Midori)、DirectFB、Wayland
本文档将介绍 Allwinner Tina Linux 中已经移植好的窗口系统,以及怎么使用,包括 MiniGUI、QT5、EFL、GTK+(WebkitGtk、Midori)、DirectFB、Wayland,整体结构 如下:
韦东山
2022/12/28
17.9K0
全志 Tina Linux 图形系统 框架介绍 最全介绍 MiniGUI、QT5、EFL、GTK+(WebkitGtk、Midori)、DirectFB、Wayland
LVGL的多语言转换工具--MCU_Font_Release
「重要提示:为了支持多国语言,目前本软件使用 UTF-8 编码读取源程序,如果你的源程序文件为 GB2312 或其他编码 则请转为 UTF-8编码。可以使用 notepad++ 转为 UTF-8 编码,但 keil 编辑器的编码可以任然使用 GB2312。」
Rice加饭
2022/05/10
2.4K0
LVGL的多语言转换工具--MCU_Font_Release
WPF TreeGrid MVVM 模式下自定义表格带展开缩放效果,并且可以获取点击行的数据
MVVM其实就是:Model 、View、ViewModel三个的简称,就像MVC一样。 Model就是模型。View就是视图。ViewModel就是和view进行绑定的。
Shunnet
2022/05/31
6.3K0
WPF TreeGrid MVVM 模式下自定义表格带展开缩放效果,并且可以获取点击行的数据
推荐阅读
相关推荐
全志V853开发板移植基于 LVGL 的 2048 小游戏
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验