【得捷电子Follow me第2期】+任务1：控制屏幕显示中文【含字库自制】

alanlan86

【得捷电子Follow me第2期】+任务1：控制屏幕显示中文【含字库自制】 [复制链接]

<i class="pstatus"> 本帖最后由 alanlan86 于 2023-8-27 19:39 编辑 </i>

# 显示中文字
## 需求类型
- 针对在屏幕上显示中文字符这个要求，总结了一下基本是以下2种需求：
- （1）中文字能够在屏幕上显示，本质就是位图/图片，因此，如果仅仅需要显示某几个/部分文字/字符时,将所需要的字体以图片存储在嵌入式端即可。这个是字符显示的最本质底层逻辑。

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_727602" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=727602&handlekey=savephoto_727602">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

- （2）期望显示任意文字/字符，则需要用到字库，字库可以覆盖。在使用字库前，考虑获得的字符信息（编码）是什么格式？是多少字节长度的？因此，大家经常可以看到ASCII、GB2312，Unicode等这些编码的概念。若感兴趣相关细节，可以扩展了解一下：
https://www.toolhelper.cn/Encoding/Unicode
在获得需要显示的字符内容的数值（编码），则需要按照规则在字库内检索得到字符的点阵数据，然后调用屏幕显示函数，将点阵显示到界面上，即得到所见内容。

## 实现方式
- （1）字库芯片
通过专用芯片，这是一个比较快的实现方式，只要实现字库芯片的SPI/I2C通信接口进行点阵数据访问，既可以获得点阵数据，然后执行显示。根据前文的原理，可知字库芯片是完成点阵的数据存储和规则检索。当然，该方式带来的直观缺点就是：额外需要成本！

- （2）采用GUI，借助GUI上的Font管理模块，能够快速高效地完成这个功能。例如，用emWin GUI显示库，可以将XBF文件存储到Flash上，然后调用对应的Font增加接口，增加字体类型，在显示时，调用字符显示接口即可。同时，最大的好处：XBF的文件导出是有现成的PC端配套工具，使用非常简便。类似的，LVGL等GUI也都比较方便支持字库/字体扩展功能。
emWin上的Font Converter：

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_727604_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>fontcvt.JPG</strong> <em class="xg1">(133.45 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_727604" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=727604&handlekey=savephoto_727604">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

因此，在拿到本次任务时，也考虑（犹豫:Onion-3:）过采用LVGL这种方式，重新刷固件实现显示效果。。。。但是，本着不折腾，没意思的原则，选择了（3）方式。

- （3）针对CiruitPython，原本示例里面有一个客制化bitmap Font的显示例子。
https://learn.adafruit.com/custom-fonts-for-pyportal-circuitpython-display

![](https://cdn-learn.adafruit.com/assets/assets/000/071/369/large1024/circuitpython_hero-desk.jpg?1550448667)

根据步骤走，基本就能实现：TTF/OTF字库文件->转BDF文字字库->转PCF，然后显示字符到界面上。

下面逐个步骤扒一扒中间的细节和坑位的部分吧~~~~:Onion-19:

# 准备工作
- （1）准备Adafruit TFT Feather开发板，并且刷入支持CiruitPyhton的固件，此步不累述。
- （2）下载字库文件和字库转换软件。
- A、下载软件FontForge-2023-01-01-Windows.exe，该软件可实现OTF/TTF字库文件转换为BDF文件：https://fontforge.github.io/en-US/

- 也可以在Linux上安装otf2bdf 【我试过用的WSL2 用命令行转换，也可行，可以不需要安装Font Forge软件】：
```bash
apt-get install otf2bdf
otf2bdf ChicagoFLF.ttf -p 12 -o Chicago-12.bdf
```
- 其中参数值12是可以根据需要转换字体大小调整

- B、BDF文件转PCF文件，非常方便的线上工具：https://adafruit.github.io/web-bdftopcf/

## 字库/字体文件
- 重点坑位①：若出现英文字符显示正常，中文显示字符不正常时，果断更换一个字库ttf文件。【这个位置的根本原因，我没有深究，如果有对字库编码规则比较懂的行家，可以在评论区告知一下~~~】
例如，开始用的阿里巴巴普惠体，AlibabaPuHuiTiAll.zip这个压缩包的TTF字库，转换为BDF，转PCF之后，能够显示英文，但是中文不行。

- 字体下载选择了“阿里妈妈方圆体”：AlimamaFangYuanTiVF-Thin.ttf
https://www.alibabafonts.com/#/more

- 【小技巧】：用FontForge软件导入TTF/BDF/PCF文件时，可以看到中文的字体点阵极为可用的字库文件。否则只有字体编码，无点阵（黑色文字）则转换后，开发板上无法正常显示。

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_727605" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=727605&handlekey=savephoto_727605">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

- 【字库大小】：按照上面步骤可以制作出：AlimamaFangYuanTiVF-Thin-16.pcf 约708K大小的PCF字库文件。

# 程序代码

## 增加Lib库
- 重点使用了bitmap font:
```python
from adafruit_bitmap_font import bitmap_font
```

##加载字库
- 将字体文件通过load_font加载,得到字体Font。

```python
# try uncommenting different font files if you like
#font_file = "fonts/Helvetica-Bold-16.pcf"
font_file = "fonts/AlimamaFangYuanTiVF-Thin-16.pcf"

font = bitmap_font.load_font(font_file)
```

##中文字符显示
```python
text1 = "你好"

while True:
    color = 0xFF00FF

# Create the tet label
    text_area = label.Label(font, text=text1, color=color)
    
    # Set the location
    text_area.x = 20
    text_area.y = 20
    
    # Show it
    display.show(text_area)
```

## 综合代码

```python
# SPDX-FileCopyrightText: 2021 ladyada for Adafruit Industries
# SPDX-License-Identifier: MIT

"""
This example runs on PyPortal, or any Circuit Python device
with a built-in screen.

It will use adafruit_bitmap_font to load a font and fill a
bitmap with pixels matching glyphs from a given String
"""

import time
import board
import displayio
import terminalio
from adafruit_bitmap_font import bitmap_font
from adafruit_display_text import label
from adafruit_st7789 import ST7789

# First set some parameters used for shapes and text
BORDER = 20
FONTSCALE = 2
BACKGROUND_COLOR = 0x00FF00  # Bright Green
FOREGROUND_COLOR = 0xAA0088  # Purple
TEXT_COLOR = 0xFFFF00

# Release any resources currently in use for the displays
displayio.release_displays()

spi = board.SPI()
tft_cs = board.TFT_CS
tft_dc = board.TFT_DC

display_bus = displayio.FourWire(spi, command=tft_dc, chip_select=tft_cs)
display = ST7789(
    display_bus, rotation=270, width=240, height=135, rowstart=40, colstart=53
)

# Make the display context
splash = displayio.Group()
display.show(splash)

color_bitmap = displayio.Bitmap(display.width, display.height, 1)
color_palette = displayio.Palette(1)
color_palette[0] = BACKGROUND_COLOR

bg_sprite = displayio.TileGrid(color_bitmap, pixel_shader=color_palette, x=0, y=0)
splash.append(bg_sprite)

# Draw a smaller inner rectangle
inner_bitmap = displayio.Bitmap(
    display.width - BORDER * 2, display.height - BORDER * 2, 1
)
inner_palette = displayio.Palette(1)
inner_palette[0] = FOREGROUND_COLOR
inner_sprite = displayio.TileGrid(
    inner_bitmap, pixel_shader=inner_palette, x=BORDER, y=BORDER
)
splash.append(inner_sprite)

# Draw a label
text = "Hello World!"
text_area = label.Label(terminalio.FONT, text=text, color=TEXT_COLOR)
text_width = text_area.bounding_box[2] * FONTSCALE
text_group = displayio.Group(
    scale=FONTSCALE,
    x=display.width // 2 - text_width // 2,
    y=display.height // 2,
)
text_group.append(text_area)  # Subgroup for text scaling
splash.append(text_group)

# try uncommenting different font files if you like
#font_file = "fonts/Helvetica-Bold-16.pcf"
font_file = "fonts/AlimamaFangYuanTiVF-Thin-16.pcf"

font = bitmap_font.load_font(font_file)

text1 = "你好,欢迎参加"
text2 = "EEWorld电子工程世界与得捷电子"
text3 = "举行的FollowMe第2期活动"

while True:
    color = 0xFF00FF

# Create the tet label
    text_area = label.Label(font, text=text1, color=color)
    
    # Set the location
    text_area.x = 20
    text_area.y = 20
    
    # Show it
    display.show(text_area)
    
    time.sleep(1)
    
    color = 0x00FFFF
    # Create the tet label
    text_area = label.Label(font, text=text2, color=color)
    
    # Set the location
    text_area.x = 5
    text_area.y = 50
    
    # Show it
    display.show(text_area)
    
    time.sleep(1)
    
    color = 0xFFFF00
    # Create the tet label
    text_area = label.Label(font, text=text3, color=color)
    
    # Set the location
    text_area.x = 20
    text_area.y = 80
    
    # Show it
    display.show(text_area)

time.sleep(1)
```
#总结
- 在本次设计任务中，字库的文件格式的了解和处理，占比较大的部分，显示部分调用接口简单简洁，难度低。

- 另外，尝试了TTF字库文件直接导入CIRCUITPY，并不能正常显示，若其他爱好者有操作成功的，欢迎分享一下其中的坑位。

- 重点坑位②：友情提醒：BDF格式的字库显示比较慢，且文件体积比较大，所以不要省步骤，详见如下 
https://github.com/adafruit/circuitpython/issues/2783

#源代码

<ignore_js_op>

<em class="xg1">(257.04 KB, 下载次数: 2)</em>
</span>
<div class="tip tip_4" id="attach_727606_menu" style="position: absolute; display: none" disautofocus="true">
<div class="tip_c xs0">
<div class="y">2023-8-27 17:50 上传</div>
点击文件名下载附件
源代码
</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

# 演示效果
<div id="player_4e20f9f8f5eaa79199685b0670035e560" class="localvideo-box"></div><div class="localvideo-title">中文字体显示效果</div><br/>

Jacktang

BDF格式的字库显示比较慢，存储不够啊

秦天qintian0303

这个可以有，我记得linux的字库也很小

【得捷电子Follow me第2期】+任务1：控制屏幕显示中文【含字库自制】 [复制链接]

最新回复