STM32GUI_使用 TouchGFX 二进制字体(Binary Font)功能实现字体动态更新

STMCU小助手 · 2022-08-03T12:00:01+00:00

1、引言 & ~: g: l+ K3 s5 Y+ D$ ^/ s 2 S) F5 g# j/ Q1 H自从 2013 年第一款侧重于 GUI 应用的 STM32F429x【内嵌 Chrom-ART 图形加速和 LTDC 控制器】开始，ST 就为大家提供了 STM32MCU + X-Cube-TouchGFX 一站式 GUI 开发平台。越来越多的客户使用 STM32 + TouchGFX 开发智能手表/智能家居控制面板等嵌入式设备。) k2 @" }' a1 p# | 3 R9 Y8 {! X2 l/ p. u$ n r 在嵌入式GUI开发的应用中，设备厂家希望自己的设备支持用户根据自己喜好来定义所选用的字体类型。从技术上讲，可以将字体和应用程序分离开，这样可以在嵌入式设备有限的存储空间上根据需要更新和升级字体的类型。 - ]# K+ ^& L5 A" N, I( [ 5 Z8 w9 [$ l6 p% q4 w * N9 A5 v A& y4 A# s; F, {2、TouchGFX Binary font 介绍 7 k+ A8 l1 _+ L: f; e# C; s 6 j: c+ a6 a3 l$ l) Q6 L# K2 |. KTouchGFX为客户提供了二进制字体(Binary Font)的方法，这些字体没有链接到应用程序中，而是作为文件与应用程序分开存储，这些文件在运行时由应用程序加载并提供给TouchGFX。8 }9 n; b3 O; A3 _ u4 m# p / O/ L+ g8 f' b6 y0 a; s6 y$ ?5 M2 q % I3 J8 O, V8 }8 H4 l1 [: o, S, l# w' W0 Y , ]* |+ \ x5 o9 b4 ` 当应用程序加载了二进制字体后，可以在TouchGFX字体系统中安装二进制字体。这里内置的 Font2 被应用程序加载的Binaryfont 替换。此后，TouchGFX 不再使用链接的Font2，使用自定义的Binary font进行显示。9 E: Y, {" |% u8 H/ r+ L: I + ~9 }; j$ \# ~6 P5 t4 P; j 下面例程展示了如何使用BinaryFont进行字体动态更新。5 @5 H$ J4 a4 Q, e" J1 \ 0 E7 F# h: ?6 C2 d, p g$ _# k/ s. C; o, J( G 3、演示例程实现过程 7 y' d5 f5 C" i- d% h0 g0 i" m$ W" H; t6 V& o# u 3.1.打开 TouchGFX Designer 4.18.0 8 z# |0 ~# [9 j7 r , L4 h0 |# a( M- ^# n0 @3 B- TouchGFX4.18.0 (本文使用 4.18.0 举例，其他版本操作过程相同)2 }/ y6 p4 l4 c$ V1 }# \, Z 3 ?3 [- a1 E( O- VSCode" R b1 E* k% ?: R$ d$ a7 W4 t 9 i4 c; L* x5 I U- q! L6 t; r0 R1 Y/ B0 H! ~# G. i. b 3.2.打开 TouchGFX Designer 4.18.0 5 }$ L, ~. l# l' E \ ( X8 y6 A& [( J. p" k+ \. r选择 STM32F746DK 探索板,生成工程 :* J8 @( S3 `3 n& M , E% _% E& j7 F 1 z- o- ^* O% P ^5 U# _ " {: g) G! t; h, q3 k4 e$ s # y; \5 Y" o x; B K7 b; @2 [ l; ~: I+ V* A3.3 选择 “文本配置”，选择 “二进制字体文件” $ T+ h% j7 o4 v- C2 V( w . q$ d3 g' ~' q8 g 4 t& g% F5 _- u" X8 ^2 G ! b1 r/ r4 m- V& y3.4 设计 Screen1 (添加 Images/TextArea/Buttons)! l( ]8 H8 ~: e* I' d% d, n 8 S+ H' m" I8 k8 ] 5 v+ v. ?7 w2 a5 p3 H " r3 u5 C0 j0 P# Q$ k6 z/ ]3.5 设置 Typographies : " ~- t/ H' p: v; {, G5 _% F! j- Typographies 设置 :" @" y, O4 ?3 v6 c# Y _) {- I6 o # A2 z. [9 U7 j 4 Y: D9 ~. Q2 {. ?) C# _6 S7 s0 s/ H- F - Single Use 设置: ' M4 n% w% p- e: _5 q0 _ / W# L4 S* U* f( n- z8 [5 K6 m9 y- i' C + q) _8 {5 E5 n7 B $ \% ^$ W+ J! ?4 H7 e8 O 2 e7 m" {% w. S; ` 3.6 TouchGFX Designer 生成项目 K0 h+ Y8 x: X' L: r7 p( _ 1 C& ]: u+ ?4 E8 e8 a" U9 _可以在以下目录下找到verdana和verdana italic的二进制字体文件 :) a U/ Z1 M L7 r 7 Y' W" f9 {: B+ e# r6 c5 \! Q+ S0 y # ~: q, j2 P3 }' R9 B8 Q- F6 r- h$ ~: u* U' Z : b* s" v- E. u 3.7 在代码中安装二进制字体 7 K# |8 M9 b5 u# R+ Z6 k: L# @$ x8 U R 在 TouchGFX 使用文本前，二进制字体必须从文件或其他存储中复制到可直接寻址的存储空间。当应用程序将二进制字体加载到内存时，它可以在 TouchGFX 中安装字体，之后 TouchGFX 将使用该字体而不是编译后的字体。2 A& j/ V S! G: g1 _3 b5 [ _- ]& c * j: i9 d+ l8 A, @! c7 S - 在FrontApplication.cpp安装默认的二进制字体: , |6 D2 X0 ?! ~0 \' w; ?+ g- j / c4 L0 }7 l' i2 c& ~ , {0 F6 }& p9 p- n / _: i) D8 x! Q; `: a) M4 e- a0 j: n , B5 N( M' A/ a- g/ h6 S4 a$ v2 \ $ P) f- l2 [/ N6 S" x3 X; I 3.7 添加 Button 交互，用于选择使用不同的二进制字体3 r3 B! D4 f' q B1 x ) A, n' h/ `: j- 添加交互，当按键按下，切换成相应的二进制字体 :# r+ ^) Q) G9 Y% d# V N+ x7 F + r4 g; u2 Q4 i* D ! p6 |! y7 p8 U: p* p6 O2 M& a * z. b/ f* Q/ a; K; H3 f* t * B7 D/ N/ A# _1 `8 e$ C: ?% } $ H8 x( C& F# H" I! j9 b- 添加代码 Screen1View.hpp ) C0 y6 F4 P7 }1 G& w 2 K* `5 J. @# W& N. N r 2 k& K9 d$ ^: M. |$ y% | 6 i" v; j4 ^4 Q ; g# X3 g5 U3 k& h. L / k: B, z- k6 C' o* j" M( F- _ 3 Y9 Y) }+ q% P6 q) ]1 w9 f, G- 添加代码 Screen1View.cpp & X" L2 @7 j* w8 @) z( F9 F) _5 _' k2 j% W( q$ ~ 6 f p7 z7 W2 f* H2 ^! u ! Q6 I1 i" a9 \3 {, `6 U. t& n 7 F: ?# B$ J3 S) ?* d2 T. s; P- S0 z5 I9 Z! r * h Y2 d* s# I2 ^: ^ 3.8 编译运行结果如下 :9 C* ^: I1 k3 u) [7 Q 8 _* c1 S/ _" B, i5 ] . X# _# t: ^# M! T7 V% f - z( j, N; |- ]& m( z; y$ {" J5 s6 h3 ^7 W7 c% s 验证( |8 ]! \3 U2 ^ ; c2 |- Q" [8 R( B8 l$ Q( S 从以上的演示可以看到，通过TouchGFX Designer的简单配置和调用其提供的API，就可以轻松实现字体的动态更新。 4 P/ u: m; ^; W, l$ D7 U+ v- n& D/ E k8 z w" d g( {3 Y' X厂家和用户可以根据场景需求灵活使用本功能。比如，厂家可以通过针对的不同用户群体来提供OTA服务，让用户动态更新自己的字体类型。这样由于各二进制字体可以占用同一块内存区域，厂家的硬件成本也会得到降低。 ' X4 ~- K+ c1 T0 S, J1 Z) D' F& M g; v & G1 G6 @: R6 p; V( h% F5 d

STM32GUI_使用 TouchGFX 二进制字体(Binary Font)功能实现字体动态更新

[复制链接]

STMCU小助手发布时间：2022-8-3 20:00

技术帖
文章封面:
文章简介:	STM32GUI_使用 TouchGFX 二进制字体(Binary Font)功能实现字体动态更新

1、引言
& ~: g: l+ K3 s5 Y+ D$ ^/ s
自从 2013 年第一款侧重于 GUI 应用的 STM32F429x【内嵌 Chrom-ART 图形加速和 LTDC 控制器】开始，ST 就为大家提供了 STM32MCU + X-Cube-TouchGFX 一站式 GUI 开发平台。越来越多的客户使用 STM32 + TouchGFX 开发智能手表/智能家居控制面板等嵌入式设备。

在嵌入式GUI开发的应用中，设备厂家希望自己的设备支持用户根据自己喜好来定义所选用的字体类型。从技术上讲，可以将字体和应用程序分离开，这样可以在嵌入式设备有限的存储空间上根据需要更新和升级字体的类型。

2、TouchGFX Binary font 介绍

TouchGFX为客户提供了二进制字体(Binary Font)的方法，这些字体没有链接到应用程序中，而是作为文件与应用程序分开存储，这些文件在运行时由应用程序加载并提供给TouchGFX。

微信图片_20220803195825.png

当应用程序加载了二进制字体后，可以在TouchGFX字体系统中安装二进制字体。这里内置的 Font2 被应用程序加载的Binaryfont 替换。此后，TouchGFX 不再使用链接的Font2，使用自定义的Binary font进行显示。

下面例程展示了如何使用BinaryFont进行字体动态更新。

3、演示例程实现过程

3.1.打开 TouchGFX Designer 4.18.0

- TouchGFX4.18.0 (本文使用 4.18.0 举例，其他版本操作过程相同)

- VSCode

3.2.打开 TouchGFX Designer 4.18.0

选择 STM32F746DK 探索板,生成工程 :
微信图片_20220803195818.png

3.3 选择 “文本配置”，选择 “二进制字体文件”

微信图片_20220803195811.png

3.4 设计 Screen1 (添加 Images/TextArea/Buttons)

微信图片_20220803195805.png

3.5 设置 Typographies :
- Typographies 设置 :

微信图片_20220803195758.png

- Single Use 设置:

微信图片_20220803195753.png

3.6 TouchGFX Designer 生成项目

可以在以下目录下找到verdana和verdana italic的二进制字体文件 :

微信图片_20220803195748.png

3.7 在代码中安装二进制字体

在 TouchGFX 使用文本前，二进制字体必须从文件或其他存储中复制到可直接寻址的存储空间。当应用程序将二进制字体加载到内存时，它可以在 TouchGFX 中安装字体，之后 TouchGFX 将使用该字体而不是编译后的字体。

- 在FrontApplication.cpp安装默认的二进制字体:

微信图片_20220803195744.jpg

3.7 添加 Button 交互，用于选择使用不同的二进制字体

- 添加交互，当按键按下，切换成相应的二进制字体 :

微信图片_20220803195732.png

- 添加代码 Screen1View.hpp

微信图片_20220803195722.png

- 添加代码 Screen1View.cpp

微信图片_20220803195710.png

3.8 编译运行结果如下 :

微信图片_20220803195647.png

验证

从以上的演示可以看到，通过TouchGFX Designer的简单配置和调用其提供的API，就可以轻松实现字体的动态更新。

厂家和用户可以根据场景需求灵活使用本功能。比如，厂家可以通过针对的不同用户群体来提供OTA服务，让用户动态更新自己的字体类型。这样由于各二进制字体可以占用同一块内存区域，厂家的硬件成本也会得到降低。