[Digi-Key Electronics Follow me Issue 2] + Control the screen to display Chinese

swzswz

[Digi-Key Electronics Follow me Issue 2] + Control the screen to display Chinese [Copy link]

<i class="pstatus"> This post was last edited by swzswz on 2023-8-12 11:10 </i> # Overall process of controlling the screen to display Chinese I am very happy to participate in the second phase of the event. Since the first phase was also programmed in micropython, the second phase will still use this language for programming. At first, I wanted to use the onboard tft 7789 chip color screen to display Chinese, but it failed. Later, with the help of the OLED display of the first phase, the 0.96-inch screen was used for Chinese display. The process is divided into two parts: - First find the Chinese font file ttf, use the otf2bdf command (linux) to convert the file format, and then use the adafruit_bitmap_font module to import the BDF font - Improve the template of the sample file ssd1306, mainly to replace the font, modify the displayed characters, and change the characters to Chinese. Pay attention to setting up the environment in advance, installing the thonny software, and importing the corresponding library into the board and putting it in its lib directory. You can refer to the document dk_adafruit_esp32_s3_tft_feather_en.pdf. I put the details in the attachment. ------------ ## Font format conversion and font import 1. For font conversion, refer to https://learn.adafruit.com/custom-fonts-for-pyportal-circuitpython-display/use-otf2bdf. First install the otf2bdf command script, and then perform the conversion. The computer font file is in the /windows/font directory under the system disk (C drive). The following is a screenshot of my font. 
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_723403_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>字体.png</strong> <em class="xg1">(211.5 KB, downloads: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >download attach</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_723403" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=723403&handlekey=savephoto_723403">save to album</a>

</p>

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

</ignore_js_op>
 Use the Linux environment to convert fonts. I use ubuntu22 and ssh remote commands to convert. ```bash sudo ap-get install otf2bdf otf2bdf STXINWEI.TTF -p 12 -o STXINWEI.bdf ``` The converted font is imported into the board. Because the file is too large, I write the code directly on the computer and save it in the computer, as shown in the figure below. 
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_723405_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>字体位置.png</strong> <em class="xg1">(8.21 KB, downloads: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >download attach</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_723405" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=723405&handlekey=savephoto_723405">save to album</a>

</p>

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

</ignore_js_op>
 2. Font import Use the adafruit_bitmap_font module to import the font and update the bitmap. For details, see the use of this module. ```python from adafruit_bitmap_font import bitmap_font from displayio import Bitmap font = bitmap_font.load_font("./font/STXINWEI.bdf", Bitmap) ``` ## Chinese display With the help of the displayio_ssd1305_simpletest.py template, we mainly modify the code in two locations, as follows. The first is to change the text string to Chinese, and the second is to change the first parameter of the label function to the imported font. ```python text = "Chinese" text_area = label.Label( font, text=text, color=0xFFFFFF, x=28, y=HEIGHT // 2 - 1 ) ``` The total code is as follows: ```python # SPDX-FileCopyrightText: 2021 ladyada for Adafruit Industries # SPDX-License-Identifier: MIT """ This test will initialize the display using displayio and draw a solid white background, smaller black rectangle, and some white text. """ # SPDX-FileCopyrightText: 2021 ladyada for Adafruit Industries # SPDX-License-Identifier: MIT """ This test will initialize the display using displayio and draw a solid white background, a smaller black rectangle, and some white text. """ import board import displayio import terminalio from adafruit_display_text import label import adafruit_displayio_ssd1306 from adafruit_bitmap_font import bitmap_font from displayio import Bitmap displayio.release_displays() oled_reset = board.D9 font = bitmap_font.load_font("STXINWEI.bdf", Bitmap) # Use for I2C i2c = board.I2C() # uses board.SCL and board.SDA # i2c = board.STEMMA_I2C() # For using the built-in STEMMA QT connector on a microcontroller display_bus = displayio.I2CDisplay(i2c, device_address=0x3C, reset=oled_reset) # Use for SPI # spi = board.SPI() # oled_cs = board.D5 # oled_dc = board.D6 # display_bus = displayio.FourWire(spi, command=oled_dc, chip_select=oled_cs, # reset=oled_reset, baudrate=10000 00) WIDTH = 128 HEIGHT = 32 # Change to 64 if needed BORDER = 5 display = adafruit_displayio_ssd1306.SSD1306(display_bus, width=WIDTH, height=HEIGHT) # Make the display context splash = displayio.Group() display.show(splash) color_bitmap = displayio.Bitmap(WIDTH, HEIGHT, 1) color_palette = displayio.Palette(1) color_palette[0] = 0xFFFFFF # White 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(WIDTH - BORDER * 2, HEIGHT - BORDER * 2, 1) inner_palette = displayio.Palette(1) inner_palette[0] = 0x000000 # Black 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 = "Chinese" text_area = label.Label( font, text=text, color=0xFFFFFF, x=28, y=HEIGHT // 2 - 1 ) splash.append(text_area) while True: pass ``` ## Phenomenon: First click the stop button in the software, then click run, and the characters "Chinese" will be displayed on the oled. 
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_723414_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>现象 00_00_00-00_00_30.gif</strong> <em class="xg1">(7.93 MB, downloads: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >download attach</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_723414" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=723414&handlekey=savephoto_723414">save to album</a>

</p>

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

</ignore_js_op>
 The following are the attachments, one is the document description, and the other is the code. [attach]723416 [/attach]
<ignore_js_op>

<a href="javascript:;" class="loginf">Adafruit ESP32-S3 TFT Feather 入门手册.pdf</a>

<em class="xg1">(18.64 MB, downloads: 2)</em>
</span>
<div class="tip tip_4" id="attach_723417_menu" style="position: absolute; display: none" disautofocus="true">
<div class="tip_c xs0">
<div class="y">2023-8-12 11:02 上传</div>
点击文件名下载附件

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

</ignore_js_op>

lugl4313820

Your problem-solving ability is so strong, I give you a thumbs up!

秦天qintian0303

Large memory is good, it can store Chinese fonts

wangerxian

Is the font library placed on the board? Or is the generated Chinese dot matrix placed on the board?

swzswz

wangerxian posted on 2023-8-14 10:20 Is the font library put on the board? Or is the generated Chinese dot matrix put on the board?

The font library uses a tool to convert ttf into bcf, and then put it on the board. The article has a detailed description

swzswz

Qintianqintian0303 posted on 2023-8-13 19:25 Large memory is good, it can store Chinese fonts

The memory is OK, about 4MB, and there is not much left after putting the library files and font files in it.

swzswz

lugl4313820 posted on 2023-8-13 08:46 Your ability to solve the problem is really strong. I give you a thumbs up!

Learn together, refer to this. I also searched for a long time. I know python, but it’s a bit troublesome to find this function and library. I spent a long time referring to the web page and github.

秦天qintian0303

swzswz posted on 2023-8-14 14:31 Let’s study together. I also spent a long time looking for this reference. I mainly know python, but it’s a bit troublesome to find this function and library. Please refer to the webpage and github ...

It's great if you know Python. I have basically never come into contact with it, so I'll just follow the recommendations step by step.

[Digi-Key Electronics Follow me Issue 2] + Control the screen to display Chinese [Copy link]

Latest reply

Comments

Comments

Comments

Comments