[Digi-Key Follow me Issue 2] Task 1: Use CircuitPython to display images and Chinese

walker2048

[Digi-Key Follow me Issue 2] Task 1: Use CircuitPython to display images and Chinese [Copy link]

 

Welcome to this episode, which is about using CircuitPython to display pictures and Chinese.

Introduction to displayio

displayio is a library in CircuitPython for managing and controlling display devices (usually LCD or OLED screens). It provides a way to create and manage graphic elements so as to draw various graphics and text on the display device. In short, you can use the display series library to make some simple interfaces. The simplest one is to use a background image plus text.

Step 1: Create a display object

First, we need to create a displayio.Display object, which represents the physical display device. The firmware of this board has bound the display device by default, so we just need to import the corresponding library and call it. There is no need to worry about the display driver, resolution, offset, etc.

import board
# 导入displayio库（内置的）
import displayio

# 导入外部库adafruit_imageload，如果没有就在教程附件下载
import adafruit_imageload
# 导入外部库adafruit_display_text里的lable，用于显示标签
from adafruit_display_text import label
# 导入外部库adafruit_bitmap_font里的lable
from adafruit_bitmap_font import bitmap_font，用于显示字体

# 使用固件自带的屏幕设备，不需要另行初始化屏幕参数
display = board.DISPLAY

In addition to the board and displayio built-in libraries, you also need to import the adafruit_imageload library to load images; import the adafruit_display_text library for custom text labels; import the adafruit_bitmap_font library to load custom fonts.

The corresponding libraries, pictures, and font files will be placed in the attached compressed package.

Step 2: Create an image group

Next, we can create one or more displayio.Group objects, which are used to organize graphic elements. Each object can contain multiple graphic elements, which will be drawn to the display device in the order they are added. Only one object is displayed at a time, and multiple displayio.Group can be created to achieve screen switching.

# 创建本例程里的唯一图像组
group = displayio.Group()

Step 3: Create a background image

Here I would like to emphasize again that CircuitPython runs on the microcontroller, and everything about it revolves around the resources on the microcontroller, not the resources in the computer. For example, the following code will use the image resource /pic/tqbg.png, and its storage path must be pic/tqbg.png in the CIRCUITPY disk directory. In other words, / represents the CIRCUITPY disk root directory, and all local resources of CircuitPython can only be found in the CIRCUITPY disk root directory. It is not that you can put the picture on the computer and it will be displayed on the screen of the board. Since you want to display the picture, you have to load the picture first. For the background picture, you can use Pixso to make a 240x135 resolution picture.

# 加载图片
image, palette = adafruit_imageload.load("/pic/tqbg.png")
# 是否开启透明
palette.make_transparent(0)

# 创建图片布局
grid = displayio.TileGrid(image, pixel_shader=palette)

# 将图片布局添加到图像组，由于是第一个添加的，默认是最下层
group.append(grid)

# 显示当前图像组
display.show(group)

Step 4: Create a text label to display text

We can use the label.Label function to create a text label. This function requires three parameters. The first is the font. To display Chinese, you must use a custom font. The firmware does not have Chinese. The second parameter is the text content to be displayed, and the third parameter is the font color.

As just mentioned, we need to use a custom font, so we have to use the bitmap_font.load_font method to load the font. As shown in the code, just pass the correct font path parameter. Then you can specify the font color. The code uses black. Since we are making a clock, we need to use two different font sizes. Here I use Source Han Sans 16 optimized weather font. It contains only a few words, is relatively small in size, and has a faster loading time. The clock uses a 60-point font, which is larger and only contains numbers.

First, we create a label named date, set the x-axis and y-axis starting point offsets of this label, and finally add this label to the image group. In the same way, we add the labels week, time, temp, and tempzh. The x-axis and y-axis starting points of these labels need to be adjusted slowly.

After adding all the tags, you can use display.show(group) to display them. Finally, define an infinite loop, and the content of the screen will be fixed. From the video, you can see the background and the loading process of each tag, which are displayed one by one in the order they are added.

# 加载字体并定义字体颜色为黑色
font = bitmap_font.load_font("/font/sytq_16.pcf")
nun_font = bitmap_font.load_font("/font/DingTalk_ncn_60.pcf")
color = 0x000000

# 初始化日期标签并设置x，y轴绘图坐标，然后将标签添加到图像组
date = label.Label(font, text="10月3日", color=color)
date.x = 50
date.y = 30
group.append(date)

# 初始化星期标签并设置x，y轴绘图坐标，然后将标签添加到图像组
week = label.Label(font, text="周二", color=color)
week.x = 150
week.y = 30
group.append(week)

# 初始化时间标签并设置x，y轴绘图坐标，然后将标签添加到图像组
time = label.Label(nun_font, text="18:20", color=color)
time.x = 20
time.y = 80
group.append(time)

# 初始化温度标签并设置x，y轴绘图坐标，然后将标签添加到图像组
temp = label.Label(font, text="30°", color=color)
temp.x = 70
temp.y = 140
group.append(temp)

# 初始化天气标签并设置x，y轴绘图坐标，然后将标签添加到图像组
tempzh = label.Label(font, text="晴", color=color)
tempzh.x = 110
tempzh.y = 140
group.append(tempzh)

# 显示修改后的图像组
display.show(group)

while True:
    pass

The homework for this issue is to try to make a background image and modify the layout of the weather clock. Preview of the next issue: How to make the minimized Chinese font for CircuitPython and use Pixso to make a simple background image.

秦天qintian0303

The screen display is very good, thumbs up!

火辣西米秀

First load the image. For the background image, you can use Pixso to create a 240x135 resolution image.

walker2048

Hot Ximi Show published on 2023-10-5 10:09 First load the picture. For the background picture, you can use Pixso to make a 240x135 resolution picture, okay

It's as convenient as you want. The background image has no Chinese characters, but the label shows Chinese characters. It can also be modified dynamically.