【得捷电子Follow me第2期】你好, 世界!

Vaintory · 发表于2023-10-24 21:53

【得捷电子Follow me第2期】你好, 世界! [复制链接]

<i class="pstatus"> 本帖最后由 Vaintory 于 2023-10-24 21:54 编辑 </i>

# 【得捷电子Follow me第2期】你好, 世界!

> 任务1：控制屏幕显示中文
> 使用器件：Adafruit ESP32-S3 TFT Feather开发板

[TOCM]

## 烧写CircuitPython固件

1. [下载固件](https://circuitpython.org/board/adafruit_feather_esp32s3_tft/)，注意需要下载ENGLISH版本，CHINESE版本显示的是拼音

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_744092_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>download_UF2.png</strong> <em class="xg1">(549.02 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_744092" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=744092&handlekey=savephoto_744092">保存到相册</a>

</p>

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

</ignore_js_op>

1. 开发板上电后，1s内按下两次Reset键，即可进入UF2固件烧写模式

<ignore_js_op>

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

</p>

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

</ignore_js_op>

1. 此时电脑上会出现一个名为xx的新磁盘，将UF2固件拖入，等待即可完成安装

## 使用VSCode进行CircuitPython开发

1. 在VSCode应用商店中安装CircuitPython扩展

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_744090_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>CPy_addon.png</strong> <em class="xg1">(19.25 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_744090" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=744090&handlekey=savephoto_744090">保存到相册</a>

</p>

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

</ignore_js_op>

1. 在工作区中添加CIRCUITPY磁盘，其中的`code.py`文件就是我们需要编写的主文件

> There are four options: code.txt, code.py, main.txt and main.py. CircuitPython looks for those files, in that order, and then runs the first one it finds. While code.py is the recommended name for your code file, it is important to know that the other options exist.
  
  可以将`code.py`重命名为`main.py`，这样VSCode就不会发出`WARNING`

1. 在右下角选择正确的开发板型号和端口号（不同电脑不一样）

1. 使用命令行

1. 三个快捷键
  `Ctrl+C` 在任意情况下输入，中断当前运行的程序
  `Ctrl+D` 在空行的情况下输入，软重启开发板环境
  `Ctrl+E` 在空行的情况下输入，进入粘贴模式，粘贴后`Ctrl+D`运行

1. Hello World
  这个命令行与普通的Python命令行相同，输入`print("hello world")`并回车，即可得到相应语句的输出
  
<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_744093_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>helloworld.png</strong> <em class="xg1">(60.89 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_744093" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=744093&handlekey=savephoto_744093">保存到相册</a>

</p>

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

</ignore_js_op>

## 使用FontForge制作中文字体文件

内置的terminal字体并不包含中文字库，我们需要手动将`.otf`或`.ttf`字体文件制作成能被直接使用的`.bdf`或`.pcf`格式。

1. 在软件中打开字体源文件

1. 打开 Element - Font Info，将General选项卡下的Has Vertical Metrics取消勾选

1. 打开 Element - Bitmap Strikes Available，设置导出字体的像素高度（根据实际需求，设置合适的高度即可）。需要注意的是，随着字体高度的增加，导出的字体文件体积也随之增大

1. 选择 Encoding - Compact (hide unused glyphs)，这一步可以删除未使用的编码，精简字体文件（在进行这一步之前，也可以删除无用的字符编码，只留下需要的字符/字符集）

1. 将设置好的字体导出为`.bdf`格式

1. 使用[网页bdf转pcf工具](https://honestqiao.gitee.io/web_bdf2pcf/)，进一步减小字体文件的体积

## 屏幕显示中文字体

CircuitPython中显示被分为了3个层级：
1. `TileGrid` 区块
1. `Group` TileGrid或显示元素的集合
1. `Display` 显示屏对象

我们希望在屏幕上显示内容时，也要按照这3个层级定义变量：
1. 要显示的文字被视为一个**区块**或**元素**：
  ```python
  text = "你好, 我是V!"
  text_area = label.Label(font=font, text=text,
          color=0Xfefae0, x=32, y=65)
  ```

1. 将**区块**或**元素**添加到`Group`中：
  ```python
  text_group = displayio.Group(scale=1, x=0, y=0)
  text_group.append(text_area)
  ```

1. 屏幕对象在`board`模块中被定义，可以直接使用一行代码定义：
  ```python
  display = board.DISPLAY
  ```
  在屏幕对象上显示`Group`：
  ```python
  display.show(text_group)
  ```

再配合使用中文字体文件的代码：
```python
font_file = "fonts/FZSKBXK-25.pcf" # 存放中文字体的路径
font = bitmap_font.load_font(font_file)
```
就可以在屏幕上显示中文了！

<ignore_js_op>

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

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

</p>

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

</ignore_js_op>

# 附件

## 完整代码

```python
import board
import displayio
from adafruit_display_text import label
from adafruit_bitmap_font import bitmap_font

# 1. 屏幕基础配置
display = board.DISPLAY

# 2. 使用字体
font_file = "fonts/FZSKBXK-25.pcf"
font = bitmap_font.load_font(font_file)

text_group = displayio.Group(scale=1, x=0, y=0)

text = "你好, 我是V!"
text_area = label.Label(font=font, text=text, 
        color=0Xfefae0, x=32, y=65)
text_group.append(text_area)
display.show(text_group)

while True:
  pass
```

## [视频链接](https://training.eeworld.com.cn/video/38036)

<strong>补充内容 (2023-11-1 01:40):</strong>
代码下载链接：<a href="https://download.eeworld.com.cn/detail/Vaintory/629767" target="_blank">https://download.eeworld.com.cn/detail/Vaintory/629767</a>