STM32掌机教程4，STM32驱动OLED屏幕

迷南。 2022-03-25 03:36 425阅读 0赞

## 屏幕显示英文字符 ##

有个屏幕，掌机的可玩性可以大大增强，打地鼠玩腻了，可以玩个贪吃蛇，俄罗斯方块，以及其他需要开动想象力的游戏。并且，以前总是玩别人的游戏，现在可以自己写游戏，岂不美哉。  
  后来我感觉0.96的OLED屏幕太小了，搞个更大的全彩屏，换成STM32F4系列单片机，跑个ucos，运行NES模拟器，然后我是不是就能拳打任天堂，脚踢PSP了？哈哈哈  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70]  
  打地鼠的游戏，可以显示生命值，得分，关卡或难度。所以要定义几个变量。

//main.c
    //默认参数
    #define LIFE_NUM 3 // 默认几条命
    
    //全局变量定义
    u8 life = LIFE_NUM;    //生命
    u32 score = 0;          //得分记录
    u8 level = 1;           //当前难度，数字越大难度越高

一般来说，显示英文字符都会有配套的显示函数。我参考的代码也提供了这些函数。直接调用即可。`formatScreen`用于清屏，就像老师板书之前要擦黑板一样。`showString`用于在指定的坐标显示英文字符，每个参数的含义可以跳转，看函数说明。

int main(void)
    { 
    	LED_Init();
    	KEY_Init();
    	delay_init();
    	initIIC();
    	initOLED();
    	
    	formatScreen(0x00);
    	showString(0,0,"yoodao",FONT_16_EN);
    	showString(0,2,"life:",FONT_16_EN);
    	showString(0,4,"level:",FONT_16_EN);
    	showString(0,6,"score:",FONT_16_EN);
    	
    	showNumber(56,2,life,DEC,8,FONT_16_EN);
    	showNumber(56,4,level,DEC,8,FONT_16_EN);
    	showNumber(56,6,score,DEC,8,FONT_16_EN);
    	
    	while(1)
    	{ 
    		score++;
    		showNumber(56,6,score,DEC,8,FONT_16_EN);
    		delay_ms(1000);
    	}
    }

## 屏幕显示汉字 ##

汉字的显示可能就稍微复杂些，因为我们选用的屏幕没有中文字库，所以要自行取模。在取模之前，我先试了试人家显示汉字的函数`showCNString`与显示图片的函数showImage’’,成功。  
**在此感谢风媒电子。**

//main.c
    	formatScreen(0x00);
    	showImage(0,0,128,8,FM_LOGO_ENUM);
    	delay_ms(1000);
    // showString(0,0,"yoodao",FONT_16_EN);
    	showCNString(0,0,"风媒电子",FONT_16_CN);

然后把显示的LOGO和汉字改一改。

formatScreen(0x00);
    // showImage(0,0,128,8,Y_LOGO_ENUM);
    // delay_ms(1000);
     // formatScreen(0x00);
    // showString(0,0,"yoodao",FONT_16_EN);
    	showCNString(0,0,"小极客打地鼠掌机",FONT_16_CN);

然后用取模软件，生成“小极客打地鼠掌机”的字模  
  取模软件的使用:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 1]  
  取得字模以后，替换原先的汉字数组。

/************************************16*16 汉字************************************/
    const unsigned char CN1616[8][32] = 
    {
    	{0x00,0x00,0x00,0xE0,0x00,0x00,0x00,0xFF,0x00,0x00,0x00,0x20,0x40,0x80,0x00,0x00,0x08,0x04,0x03,0x00,0x00,0x40,0x80,0x7F,0x00,0x00,0x00,0x00,0x00,0x01,0x0E,0x00},/*"小",0*/
    
    {0x10,0x10,0xD0,0xFF,0x90,0x10,0x02,0x02,0xFE,0x02,0x02,0x62,0x5A,0xC6,0x00,0x00,0x04,0x03,0x00,0xFF,0x00,0x43,0x30,0x8F,0x80,0x43,0x2C,0x10,0x2C,0x43,0x80,0x00},/*"极",1*/
    
    {0x10,0x0C,0x84,0x44,0xB4,0xA4,0x25,0x26,0x24,0xA4,0x64,0x24,0x04,0x14,0x0C,0x00,0x04,0x04,0x04,0xFA,0x4A,0x4A,0x49,0x49,0x49,0x4A,0x4A,0xFA,0x04,0x04,0x04,0x00},/*"客",2*/
    
    {0x10,0x10,0x10,0xFF,0x10,0x90,0x04,0x04,0x04,0x04,0xFC,0x04,0x04,0x04,0x04,0x00,0x04,0x44,0x82,0x7F,0x01,0x00,0x00,0x00,0x40,0x80,0x7F,0x00,0x00,0x00,0x00,0x00},/*"打",3*/
    
    {0x20,0x20,0x20,0xFF,0x20,0x20,0x80,0xF8,0x80,0x40,0xFF,0x20,0x10,0xF0,0x00,0x00,0x10,0x30,0x10,0x0F,0x08,0x08,0x00,0x3F,0x40,0x40,0x5F,0x42,0x44,0x43,0x78,0x00},/*"地",4*/
    
    {0x00,0x00,0x7E,0x4A,0x4A,0x49,0x40,0x40,0x40,0x4A,0x4A,0x4A,0x7E,0x00,0x00,0x00,0x00,0x00,0xFF,0x80,0x49,0x12,0x00,0xFF,0x80,0x49,0x12,0x00,0x3F,0x40,0xF0,0x00},/*"鼠",5*/
    
    {0x00,0x10,0x0C,0x05,0x76,0x54,0x54,0x57,0xD4,0xD4,0xF6,0x85,0x14,0x0C,0x00,0x00,0x00,0x10,0x15,0x15,0x15,0x55,0x95,0x7F,0x14,0x14,0x14,0x14,0x14,0x10,0x00,0x00},/*"掌",6*/
    
    {0x10,0x10,0xD0,0xFF,0x90,0x10,0x00,0xFE,0x02,0x02,0x02,0xFE,0x00,0x00,0x00,0x00,0x04,0x03,0x00,0xFF,0x00,0x83,0x60,0x1F,0x00,0x00,0x00,0x3F,0x40,0x40,0x78,0x00},/*"机",7*/
    
    };
    
    unsigned char CN1616_Index[] = "小极客打地鼠掌机"; //16*16中文字库索引表

编译，下载程序，可以看出汉字能够正常显示出来。  
  这里有个注意事项，**工程中所有文件设置的编码格式必须统一**。因为编译器不认识汉字，只认识汉字的编码，同一个汉字，其UTF-8与GB2312的编码是不一样。不同的编码在编译器看来，就是不同的汉字。所以要保证，工程里所有文件的编码方式都一致。我发的源码工程采用UTF-8的编码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 2]

## 图片的显示 ##

显示图片与显示汉字的原理是一样的，毕竟，，，，汉字也是被当成图片处理的嘛。话说，外国人眼里的汉字，可能就是图片。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 4]  
  我打算显示的图片是我自己的LOGO，像是刻在石碑上的字母Y。也需要借助取模软件把图片变成一个数组。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 5]  
  然后模仿人家的程序，把数组名字和枚举类型修改下。

//main.c
    showImage(0,0,128,8,Y_LOGO_ENUM);
    //OLED.c
    /** * 功能：在制定区域显示图片 * 参数： * x:x轴坐标 0-127 * y:y轴坐标 0-7 * x_len:显示区域横坐标长度 0-128 * y_len:显示区域纵坐标长度 0-8 * image_index:图片枚举索引 * 说明：该函数一般用于显示全屏LOGO，另外灵活运用可以显示PPT切换特效 * * 返回值：None */ 
    void showImage(u8 xpos, u8 ypos,u8 x_len, u8 y_len,IMAGE_INDEX  image_index)
    {  	
    	u16 i,j;
    
    	for(i=0;i<y_len;++i)					//页地址控制
    	{ 
    		setPos(xpos,ypos++);
    		
    		for(j=i*128+xpos;j<i*128+x_len;++j) //列地址控制
    		{ 
    			switch(image_index)
    			{ 
    				case Y_LOGO_ENUM        :writeData(Y_LOGO[j]);        break;
    
    				default                  :                              break;
    			}
    			
    		}
    	}
    }

显示大LOGO一次成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 6]  
  接着我设计了几个位图，都是32像素见方的，分别是上下左右，ABCD，圆和圆圈。万一以后要扩展炫舞或者太鼓达人的游戏呢，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 7]  
  代码也相应修改了下。数组里内容太长，就不列出来了。数组和位图都上传了。

//main.c
    	//显示几个小LOGO
    	formatScreen(0x00);
    	showImage(0,0,32,4,UP_LOGO_ENUM);
    	showImage(32,0,32,4,DOWN_LOGO_ENUM);
    	showImage(64,0,32,4,LEFT_LOGO_ENUM);
    	showImage(96,0,32,4,RIGHT_LOGO_ENUM);
    	showImage(0,4,32,4,A_LOGO_ENUM);
    	showImage(32,4,32,4,B_LOGO_ENUM);
    	showImage(64,4,32,4,C_LOGO_ENUM);
    	showImage(96,4,32,4,D_LOGO_ENUM);
    	delay_ms(1000);

显示图片的函数也做了修改

void showImage(u8 xpos, u8 ypos,u8 x_len, u8 y_len,IMAGE_INDEX  image_index)
    {  	
    	u16 i,j;
    
    	for(i=0;i<y_len;++i)					//页地址控制
    	{ 
    		setPos(xpos,ypos++);		
    		for(j=i*128+xpos;j<i*128+x_len;++j) //列地址控制
    		{ 
    			switch(image_index)
    			{ 
    				case Y_LOGO_ENUM        :writeData(Y_LOGO[j]);        break;
    				case UP_LOGO_ENUM       :writeData(UP_LOGO[j]);       break;
    				case DOWN_LOGO_ENUM     :writeData(DOWN_LOGO[j]);     break;
    				case LEFT_LOGO_ENUM     :writeData(LEFT_LOGO[j]);     break;
    				case RIGHT_LOGO_ENUM    :writeData(RIGHT_LOGO[j]);    break;
    				case A_LOGO_ENUM        :writeData(A_LOGO[j]);        break;
    				case B_LOGO_ENUM        :writeData(B_LOGO[j]);        break;
    				case C_LOGO_ENUM        :writeData(C_LOGO[j]);        break;
    				case D_LOGO_ENUM        :writeData(D_LOGO[j]);        break;
    				case CIRCLE_LOGO_ENUM   :writeData(CIRCLE_LOGO[j]);   break;
    				case EMPTY_LOGO_ENUM    :writeData(EMPTY_LOGO[j]);    break;
    				default                 :                             break;
    			}//switch 
    		}//for j
    	}//for i
    }

**结果却出现了乱码，这是怎么回事？**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 8]

## 解决乱码 ##

我首先分析了`showImage`函数。函数的说明中，这句话引起了我的注意：  
说明：该函数一般用于**显示全屏LOGO**，另外灵活运用可以显示PPT切换特效  
  全屏LOGO？全屏是128×64像素 ，我的Y-LOGO显示没有问题。而箭头是32×32像素的图片，显示出来却有问题，这说明，此函数可以显示128×64的图片，不能显示32×32的图片。  
  然后我开始分析显示函数的坐标体系。屏幕是黑白的，共有128×64个像素，每个像素有黑白两种状态，正好对应0和1两种状态，所以一个图片需要128×64个bit（二进制位），也就是需要128×8个byte（字节）来表示。x坐标取值范围是0-127，y坐标的取值范围是0-7，所以能猜出来，竖直方向上的8个二进制位，组成了一个字节。这对应了在使用取模软件时的一个细节：取模方式为列行式。先取最左边一列上的8个点，再往右取一列上的8个点。  
![在这里插入图片描述][20190118135141489.png]  
  还有一个需要说明的点：取字方向是低位在前。为了说明位图与数组的关系，我们来分析一下上箭头的图与数组的关系。  
![在这里插入图片描述][20190118135153612.png]  
  取模结果的前16位是  
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x80,0xC0,0xE0,0xF0,0xF8,0xFC,0xFC,0xFC,  
  为了看的更清楚，我把位图与取模得到的数组结合在一起了。已经具体到这种地步了，就不用再说明图片是怎么变成数组了吧？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 9]  
  接下来把数组还原为图片。  
  首先要明确一个问题：**数组是一维的，图片是二维的**。是否可以使用二维数组？可以，但没有必要。用一维的数组储存二维的图片，假设图片的尺寸是x×y，那么图片中个点的坐标系是这样的。

最后一个点也可以写为(y-1)x+(x-1)，与xy-1在数学上等价。  
  储存到数组中是这样的：

就像大家去操作做广播体操，做操时，排成阵列。然而操场的门很小，只能让一个人通过，因此离开操场时，要排成一队。  
  明白这一点以后，来分析代码

for(i=0;i<y_len;++i)	//1 //页地址控制
    	{ 
    		setPos(xpos,ypos++); //2 
    		for(j=i*128+xpos;j<i*128+x_len;++j) //3 //列地址控制
    		{ 
    			switch(image_index)
    			{ 
    				case Y_LOGO_ENUM        :writeData(Y_LOGO[j]);        break;//4
    			}//switch 
    		}//for j

代码1，`i<y_len` 说明一次显示一横行。但由于竖直方向上的8个二进制位，组成了一个字节，为了方便描述，**我们假设数值方向上的8个二进制位是一个排**，所以`i<y_len` 实际上显示了一横“排”。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 10]  
  代码2，设置原点，直接使用了传入的坐标系，没毛病  
  代码4，把参数j作为数组索引来显示，如果想显示第一个“像素排”，那么j = 0，如果想显示第二排的第一个“像素排”，那么j = 0+x\_len。  
  那么代码3，为什么i要×128？  
  问题就出现在这里了。显示大LOGO的时候，这个函数是可以用的，因为大LOGO的宽度正好是128。显示32×32的小图片的时候，函数就用不了了，因为，图片的宽度是32啊！  
  稍作修改，用传入的图片宽度参数替换掉128。大功告成。

//for(j=i*128+xpos;j<i*128+x_len;++j) //3 //列地址控制
    for(j=i*x_len;j<i*x_len+x_len;++j) //列地址控制

![在这里插入图片描述][20190118135228955.png]

## 代码其实还可以优化 ##

我发现屏幕刷新的速度太慢了，玩游戏的朋友都知道，FPS太低，画面看起来就卡顿。这怎么能忍，FPS太低会影响我超神的啊！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 11]  
  只显示分数当然没问题，但如果需要玩太鼓达人，或者炫舞之类，依赖屏幕刷新图片的游戏，肯定会卡顿。我分析了一下，可能是IIC总线太慢。代码里IIC操作的延迟都是1us，OLED屏幕最小支持350ns。但是STM32做纳秒级的延时，理论计算并不可靠，需要实测，且提升有限，未做尝试。  
  也考虑过使用SPI，理论上快不少。用一个大数组把屏幕上所有点的信息都记下来，数组也就1024个元素就能存储所有的的信息，然后使用定时器+DMA+SPI，每隔一小段时间就刷新一下屏幕，只修改有变化的像素点，理论上速度快很多。暂时先做打地鼠的游戏，有空再折腾吧。  
[最终代码][Link 1]在这里。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70]: /images/20220325/1e033a153ec745e2bb608dc7d2bc8645.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 1]: /images/20220325/104398577f6d4d249e22f5a734492142.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 2]: /images/20220325/573bbdd603cc4620afb645c230b55f43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 3]: /images/20220325/493f13e81d96427dae569c8fb5305ae4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 4]: /images/20220325/d33f34133e8d4101bb31a922b4fc2616.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 5]: /images/20220325/b2cc67df8ca44de0aa50caeaaf45e9c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 6]: /images/20220325/4df2fae365ea4355a48f79cfb6f0e594.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 7]: /images/20220325/da3a5df1785944c38de024e0ae9a0e52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 8]: /images/20220325/4dd2ab4fe3bf4ed88a3cb9e563e1c0ea.png
[20190118135141489.png]: /images/20220325/36e7d4c4596e4be18b41c8f35a96c70a.png
[20190118135153612.png]: /images/20220325/59e4cc89e8e847cf9bac7ef2a650c449.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 9]: /images/20220325/39629c4391484340be98ae78d34c4090.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 10]: /images/20220325/9a42ed47704a4945b3d056a1a0f91706.png
[20190118135228955.png]: /images/20220325/2ea2851ed5334651ba667f2eae043af4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZWtfbW9ua2V5_size_16_color_FFFFFF_t_70 11]: /images/20220325/a801eefb86074976a95251a8a3f80b78.png
[Link 1]: https://download.csdn.net/download/geek_monkey/10925599