第3课显示文字与图片

超、凢脫俗 2023-10-10 23:47 24阅读 0赞

## 一、认识OLED显示屏 ##

掌控板板载1.3英寸OLED显示屏，分辨率为128x64，可显示文字也可显示图片。OLED屏幕上有坐标系，坐标原点（0，0）为OLED左上角的顶点， 水平的正方向向右，数值逐渐递增，范围是0~127，竖直的正方向向下，范围是0~63，可通过调整坐标来改变显示文字或图片的位置。

![493aa0d758c74e27ae78b57021cab5a2.png][]

## 二、OLED显示屏显示文字 ##

1. 在mpython软件的“显示”模块中找到显示文本的指令，有两种编写方式，分别是行显示与坐标显示。如下图所示。

![61d053fed32f47e09a894036b229f4e9.png][]

2. OLED显示文字或图片主要由两条指令来控制，分别是“OLED显示（内容）”与“OLED显示生效”的指令，另外在使用过程中也常常会在指令的最前端加入“OLED清空”的指令， 来去除屏幕上多余的内容。以行显示为例，显示文本的程序指令如下图所示。

![40bc86e4541f4e9ea156fbcc4096e693.png][]

3. 点击软件中的刷入按钮，将行显示的程序刷入到掌控板中，效果如图所示。

![d7b5a8521aae4033b9e63a0d23fd54a5.png][]

4. 用坐标来显示文本时，需要注意，文本也有坐标原点，汉字的字体高度约为16像素点，宽度约为12像素点，可以将文本看成一个长方形， 文本的坐标原点（0，0）也是在文本的左上角。所以通过坐标来调整文字的位置时，实际调整的是文本左上角的顶点位置。

![78f2b3a716394301907c2dbe2e380de2.png][]

用坐标将文本调整至OLED显示屏的中央位置，可以通过调整或计算x、y坐标来实现。具体的程序及刷入掌控板后的效果如图所示。

![75bfa941dc7d427982603434fd903d72.png][]

![cb7672e7b5bd4c2eba53d11ea2565872.png][]

## 三、OLED显示屏显示图片 ##

1. 在mpython软件的“显示”模块中找到显示图片的指令，如下图所示。

![2efdda95172347e68142dc61dd1f70c8.png][]

2. 点击图片中的复选框，可以看到掌控板内置的众多图片。

![7437b8e2eadf4f8d98decba26b734541.png][]

3. 与显示文本的指令相同，OLED显示图片也需要“OLED显示生效”的指令，最好也要加上“OLED清空”的指令，将之前的内容清空掉，OLED显示图片的指令如下图所示。

![ae2008898bef4d32b513634d1a324c5e.png][]

4. 将程序刷入到掌控板中，效果如下图所示。

![cceb6a4783264da2837514539e5d4853.png][]

[493aa0d758c74e27ae78b57021cab5a2.png]: https://img-blog.csdnimg.cn/493aa0d758c74e27ae78b57021cab5a2.png
[61d053fed32f47e09a894036b229f4e9.png]: https://img-blog.csdnimg.cn/61d053fed32f47e09a894036b229f4e9.png
[40bc86e4541f4e9ea156fbcc4096e693.png]: https://img-blog.csdnimg.cn/40bc86e4541f4e9ea156fbcc4096e693.png
[d7b5a8521aae4033b9e63a0d23fd54a5.png]: https://img-blog.csdnimg.cn/d7b5a8521aae4033b9e63a0d23fd54a5.png
[78f2b3a716394301907c2dbe2e380de2.png]: https://img-blog.csdnimg.cn/78f2b3a716394301907c2dbe2e380de2.png
[75bfa941dc7d427982603434fd903d72.png]: https://img-blog.csdnimg.cn/75bfa941dc7d427982603434fd903d72.png
[cb7672e7b5bd4c2eba53d11ea2565872.png]: https://img-blog.csdnimg.cn/cb7672e7b5bd4c2eba53d11ea2565872.png
[2efdda95172347e68142dc61dd1f70c8.png]: https://img-blog.csdnimg.cn/2efdda95172347e68142dc61dd1f70c8.png
[7437b8e2eadf4f8d98decba26b734541.png]: https://img-blog.csdnimg.cn/7437b8e2eadf4f8d98decba26b734541.png
[ae2008898bef4d32b513634d1a324c5e.png]: https://img-blog.csdnimg.cn/ae2008898bef4d32b513634d1a324c5e.png
[cceb6a4783264da2837514539e5d4853.png]: https://img-blog.csdnimg.cn/cceb6a4783264da2837514539e5d4853.png