好搭掌控的OLED屏的功能不仅仅显示文字,我们还可以利用它显示各种图像,甚至上传、显示自己本地的图片。这节课我们就来学习如何显示图像,并通过按键切换显示不同的图片。
1、学习目标
l掌握OLED显示图片内容;
l掌握调用内置图像;
l掌握动态显示图像;
l学会图片取模的方法,并将取模的图片显示到OLED屏幕上;
l了解变量及它的使用。
2、指令学习
经过好搭Block软件烧录固件的好搭掌控,内置有一些图片,我们可以通过调用相关指令来将这些图片显示出来。在“板载”→“OLED显示”分类中,有许多与显示图片相关的指令。另外还有一些本节课中会用到的其他指令。
![1671072932631204.png 表1.1.png](/ueditor/php/upload/image/20221215/1671072932631204.png)
![1671072962836810.png 表1.2.png](/ueditor/php/upload/image/20221215/1671072962836810.png)
3、显示内置图案
3.1 显示内置图像
![1671073656711667.png 11.png](/ueditor/php/upload/image/20221215/1671073656711667.png)
显示效果:
![1671073673913308.jpg 14.jpg](/ueditor/php/upload/image/20221215/1671073673913308.jpg)
3.2 A、B按键控制图案显示
![1671073793811796.png 12.png](/ueditor/php/upload/image/20221215/1671073793811796.png)
显示效果:
![1671074346404164.jpg 16.jpg](/ueditor/php/upload/image/20221215/1671074346404164.jpg)
3.3 跳动的爱心
![1671074505798803.png 13.png](/ueditor/php/upload/image/20221215/1671074505798803.png)
4、显示自定义图案(好搭小电视)
4.1 图片处理与取模
OLED屏幕只能显示颜色深度为1,或者就是黑白模式的图片,可以使用Photoshop、“画图”或者其他图片显示软件进行格式转换。本节课以“画图”工具为例。注意:
n转换好格式的图片需要使用取模工具对图片进行取模;
n转换的图片分辨率大小应该小于等于128×24,也就是好搭掌控屏幕的大小;
n所选的图片线条要分明,且颜色不能太过丰富。
首先我们需要对图片进行转换,选择图片后右键点击,选择“编辑”按键打开画图工具。
![1671075597840237.png 14.png](/ueditor/php/upload/image/20221215/1671075597840237.png)
然后在画图工具栏中点击“重新调整大小”,在“保持纵横比”选项勾选的条件下,设置图片的像素,将“垂直”改为64,“水平”改为128。注意这里要根据实际图片比例进行设置,设置的图片大小可以小于128×64分辨率。
![1671075861928576.png 17.png](/ueditor/php/upload/image/20221215/1671075861928576.png)
最后另存为BMP格式图片:
![1671075895700678.png 18.png](/ueditor/php/upload/image/20221215/1671075895700678.png)
接着使用取模工具对转换格式后的图片进行取模。网上有PCtoLCD、lcd image converter等取模软件,可根据自己喜好自行选择。本课程以Img2Lcd工具为例。
Img2Lcd下载地址:阅读材料:取模工具Img2Lcd(显示自定义图案) (haohaodada.com)
这里提供三张图片作为示例图片:
![1671076171149367.jpg 1.jpg](/ueditor/php/upload/image/20221215/1671076171149367.jpg)
![1671076195101055.jpg 2.jpg](/ueditor/php/upload/image/20221215/1671076195101055.jpg)
![1671076231326997.jpg 3.jpg](/ueditor/php/upload/image/20221215/1671076231326997.jpg)
用Img2Lcd软件打开格式为bmp的图片:
![1671076753752380.png 19.png](/ueditor/php/upload/image/20221215/1671076753752380.png)
选择参数,输出数据类型[C语言数组]、扫描模式[水平扫描]、输出灰度[单色]、宽高[128×64],可以适当调整亮度、对比度,直到图片显示清晰。然后点击保存,会提示你保存为一个“.c”后缀的文件,给这个文件合适的命名即可。
![1671084555707187.png 111.png](/ueditor/php/upload/image/20221215/1671084555707187.png)
用记事本程序打开保存的“.c”后缀的文件,去掉红色标记的首尾两行。复制中间的16进制图像数据,这些数组就代表着图片的像素点。
![1671084594428941.png 222.png](/ueditor/php/upload/image/20221215/1671084594428941.png)
![1671084617863024.png 333.png](/ueditor/php/upload/image/20221215/1671084617863024.png)
4.2 显示第一张图
![1671084669661805.png 22.png](/ueditor/php/upload/image/20221215/1671084669661805.png)
显示效果:
![1671084805592428.jpg 20.jpg](/ueditor/php/upload/image/20221215/1671084805592428.jpg)
4.3 按键控制切换
想要利用按键来切换图片,可以使用变量,通过创建一个变量Num,来代表按键按下的次数,按键每按动一次,变量便会加1,根据Num的数值来决定显示哪一张图片。
每当按键A被按下,设定的变量Num就会增加1,当变量达到4时,将变量重设定为0,重置按键次数。我们也可以加入一个手动重置的功能,当按键B被按下,变量复原为0,达到重置按键次数的效果。
![1671085303744972.png 21.png](/ueditor/php/upload/image/20221215/1671085303744972.png)
编写程序,通过判断变量值的数值,使好搭掌控显示不同的图片。
![1671085976213966.png 23.png](/ueditor/php/upload/image/20221215/1671085976213966.png)
显示效果:
![1671086105378730.jpg 26.jpg](/ueditor/php/upload/image/20221215/1671086105378730.jpg)