研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

quop_mike · 2018-12-01 19:15:43

LVGL版本是5.2，芯片是ESP32【内核是小端】，FATFS使能长文件名，然后同时使能了CP936（支持中文文件名）
问题来了，做了一个MP3播放器，然后在屏幕上显示正在播放的文件名，显示的文件名除了英文全部乱码
研究了一下，由于使能了CP936，所以FATFS读回来的文件名字串应该就是GBK编码的，但是LVGL不支持GBK编码，所以查不到对应的字库来显示，所以全乱码
刚开始以为LVGL直接支持unicode，把GBK强制转换成unicode以后还是乱码，一脸懵逼
搞了好久才弄清楚，LVGL支持的是UTF-8编码格式，简单来说就是英文是1个byte,中文是3byte，那就好办了
思路如下：
对于英文字符，ASCII和GBK还有UTF-8都是一毛一样的，那么
读GBK的字串中的一个byte
若值<0x80，那么说明目前读取的就是英文字符，直接copy到输出即可

若值>=0x80，那么说明读取到的已经不是英文字符了，那么先转换为unicode，然后再把unicode转换为UTF-8编码即可

代码如下，均为小端，大端请自行处理

/*------------------
*gbk 指向gbk字串的指针【输入】
*utf8 指向utf8字串的指针【输出】
--------------------*/
void StringGBK2UTF8(uint8_t *gbk, uint8_t *utf8)
{
	int i = 0;
	while (gbk[i] != 0)
	{
		if (gbk[i] < 0x80)
		{
			*utf8 = gbk[i];
			utf8++;
			i++;
		}
		else
		{
			WCHAR unicode = ff_oem2uni((WCHAR)(gbk[i] << 8 | gbk[i+1]), 936);
			int byte = enc_unicode_to_utf8_one(unicode, utf8);
			utf8 += byte;
			i = i + 2;
		}
	}
}

其中ff_oem2uni是FATFS自带的把相应的CODEPAGE编码字符转换成UNICODE字符的函数，不同版本的函数可能略有区别
enc_unicode_to_utf8_one函数是把一个unicode转换为utf-8编码

int enc_unicode_to_utf8_one(unsigned long unic,unsigned char *pOutput)
{  
	assert(pOutput != NULL);  
  
	if (unic <= 0x0000007F)  
	{  
		// * U-00000000 - U-0000007F:  0xxxxxxx  
		*pOutput     = (unic & 0x7F);  
		return 1;  
	}  
	else if (unic >= 0x00000080 && unic <= 0x000007FF)  
	{  
		// * U-00000080 - U-000007FF:  110xxxxx 10xxxxxx  
		*(pOutput + 1) = (unic & 0x3F) | 0x80;  
		*pOutput     = ((unic >> 6) & 0x1F) | 0xC0;  
		return 2;  
	}  
	else if (unic >= 0x00000800 && unic <= 0x0000FFFF)  
	{  
		// * U-00000800 - U-0000FFFF:  1110xxxx 10xxxxxx 10xxxxxx  
		*(pOutput + 2) = (unic & 0x3F) | 0x80;  
		*(pOutput + 1) = ((unic >>  6) & 0x3F) | 0x80;  
		*pOutput     = ((unic >> 12) & 0x0F) | 0xE0;  
		return 3;  
	}  
	else if (unic >= 0x00010000 && unic <= 0x001FFFFF)  
	{  
		// * U-00010000 - U-001FFFFF:  11110xxx 10xxxxxx 10xxxxxx 10xxxxxx  
		*(pOutput + 3) = (unic & 0x3F) | 0x80;  
		*(pOutput + 2) = ((unic >>  6) & 0x3F) | 0x80;  
		*(pOutput + 1) = ((unic >> 12) & 0x3F) | 0x80;  
		*pOutput     = ((unic >> 18) & 0x07) | 0xF0;  
		return 4;  
	}  
	else if (unic >= 0x00200000 && unic <= 0x03FFFFFF)  
	{  
		// * U-00200000 - U-03FFFFFF:  111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx  
		*(pOutput + 4) = (unic & 0x3F) | 0x80;  
		*(pOutput + 3) = ((unic >>  6) & 0x3F) | 0x80;  
		*(pOutput + 2) = ((unic >> 12) & 0x3F) | 0x80;  
		*(pOutput + 1) = ((unic >> 18) & 0x3F) | 0x80;  
		*pOutput     = ((unic >> 24) & 0x03) | 0xF8;  
		return 5;  
	}  
	else if (unic >= 0x04000000 && unic <= 0x7FFFFFFF)  
	{  
		// * U-04000000 - U-7FFFFFFF:  1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx  
		*(pOutput + 5) = (unic & 0x3F) | 0x80;  
		*(pOutput + 4) = ((unic >>  6) & 0x3F) | 0x80;  
		*(pOutput + 3) = ((unic >> 12) & 0x3F) | 0x80;  
		*(pOutput + 2) = ((unic >> 18) & 0x3F) | 0x80;  
		*(pOutput + 1) = ((unic >> 24) & 0x3F) | 0x80;  
		*pOutput     = ((unic >> 30) & 0x01) | 0xFC;  
		return 6;  
	}  
  
	return 0;  
}

arphone · 2018-12-01 19:42:19

不错，感谢分享！

晕哥 · 2018-12-01 20:00:59

不错，感谢分享！

晕哥 · 2018-12-01 20:28:09

帮楼主补上视频

晕哥 · 2018-12-01 20:29:51

freetype参考网址:

https://whycan.cn/t_741.html
https://whycan.cn/t_1496.html

dgtg · 2018-12-03 19:08:39

蛮酷的界面呀...

jw__liu · 2019-01-18 20:33:46

正要用啊感谢。

rpi · 2019-01-23 17:56:39

不错，感谢分享！

tink · 2019-03-10 11:26:49

mark

Ken · 2019-03-10 13:12:23

mark. 感谢分享！

还能这么玩 · 2019-09-21 09:51:45

mark. 感谢分享！

cjqdot · 2019-09-22 11:45:21

不错，感谢分享

1066950103 · 2020-09-12 23:10:43

这个漂亮

vip888888 · 2020-09-21 09:33:11

用上，无言感谢，只能顶一下。

shawn.d · 2020-09-22 18:56:09

厉害厉害！

f1c100_ · 2020-09-22 20:04:18

大佬牛逼

srovio · 2020-09-23 11:17:01

牛逼, 做个记号

lovelessing · 2020-12-16 18:05:04

多问一句，lvgl获取控件的中文写到文件里面是不是也需要反向转换的步骤

armstrong · 2020-12-16 20:23:41

楼主，请问歌曲名左右滚动显示，是lvgl控件内置具备的特性吗？

vip888888 · 2020-12-17 09:48:33

armstrong 说：

楼主，请问歌曲名左右滚动显示，是lvgl控件内置具备的特性吗？

好像是有这么个功能的我之前看过lvgl的帮助文档label里面有个是这样的。是左右滚还是循环滚应该是可以设置模式的。
void lv_ex_label_text(void)
{
lv_obj_t * label2 = lv_label_create(lv_scr_act(), NULL);
lv_label_set_long_mode(label2, LV_LABEL_LONG_SROLL_CIRC); /*Circular scroll*/
lv_obj_set_width(label2, 150);
lv_label_set_text(label2, "It is a circularly scrolling text. ");
lv_obj_align(label2, NULL, LV_ALIGN_CENTER, 0, 30);
}

石头 · 2022-12-13 16:23:10

程序是GBK转UTF8，有没有另一半，UTF8转GBK的程序？多谢！

WhyCan Forum(哇酷开发者社区)

楼主 #1 2018-12-01 19:15:43 分享评论

研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#2 2018-12-01 19:42:19 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#3 2018-12-01 20:00:59 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#4 2018-12-01 20:28:09 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#5 2018-12-01 20:29:51 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#6 2018-12-03 19:08:39 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#7 2019-01-18 20:33:46 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#8 2019-01-23 17:56:39 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#9 2019-03-10 11:26:49 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#10 2019-03-10 13:12:23 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#11 2019-09-21 09:51:45 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#12 2019-09-22 11:45:21 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#13 2020-09-12 23:10:43 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#14 2020-09-21 09:33:11 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#15 2020-09-22 18:56:09 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#16 2020-09-22 20:04:18 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#17 2020-09-23 11:17:01 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#18 2020-12-16 18:05:04 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#19 2020-12-16 20:23:41 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#20 2020-12-17 09:48:33 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

#21 2022-12-13 16:23:10 分享评论

Re: 研究了1天，终于搞清楚如何在LVGL上显示GBK字串，分享一下让大家少踩坑

页脚