问题由来
前两天有网友留言,能否做一个显示波形的实例,之前也有人提过类似问题,那么今天我们就来安排一下。
问题分析
我们在网上经常能看到一些大佬用0.96寸OLED制作的迷你示波器。
制作这个mini示波器,界面中的曲线绘制是一个难点。
小哈哥的主要工作是做上位机VC++开发的,由于要做谱图显示,所以也用到了曲线的绘制,下图中就是使用VC++进行曲线绘制的部分代码,我们可以看出,曲线是由一系列首尾相连的直线组成,所以要想绘制曲线,首先要实现移动到线条起点
的函数MoveTo,以及实现画线
的函数LineTo。
因为直线(其实说成线段更好)是由多个点组成,所以我们要实现画线的函数,只要实现画点的函数即可,然后在计算出来的位置依次画点,即可实现直线的绘制。
实现目标
- 实现画点函数
- 封装画点函数,进而实现画线函数
- 绘制一个三角形
显示原理
OLED的核心驱动芯片是SSD1306,单片机与SSD1306通信,SSD1306再驱动OLED点亮对应的OLED像素点。
要想实现绘制三角形,我们就要先实现画点和绘制直线的函数,在这之前,我们先了解一下OLED的显示原理。
OLED的构造
OLED由128*64个像素组成,64行和128列。
图中每个晶格表示一位图像数据,这些像素点对应SSD1306内部的一个GDDRAM数据内存,它有128*8字节,即128*64bit,每一个位对应一个像素点。
其中,每8行组成一个PAGE,该OLED一共分为8个PAGE(PAGE0~PAGE7)。
我们控制显示的内容,只需要控制SSD1306的内部GDDRAM即可。下面是封装的刷新GDDRAM的函数,其中 unsigned char OLED_GRAM[128][8];
中缓存的就是待显示的内容,我们先将要显示的内容赋值给这个数组,然后将这个数组整体写入GDDRAM即可,如果这个数组内的数据都为0,则相当于将显示屏清屏(不显示内容)。
画点函数
由于 OLED_WR_Byte(OLED_GRAM[n][i],1);
函数一次操作一个字节,所以我们不能一次控制一个像素点,只能8个像素点一起控制;而且是垂直方向扫描控制;如下图所示。因此垂直方向坐标可选为0~7;(8*8=64);水平方向可选坐标0~127。
我们封装的画点函数,即随便给一个点的坐标(x,y),我们要计算出,这个像素点所属的PAGE,然后看控制的是这列8个像素(对应一个字节数据)中的哪一个(对应1 bit数据)。
参数说明:
- x:显示的横坐标,即一行128个像素中的哪一个像素点
- y:显示的纵坐标,即一列64个像素中的哪一个像素点
- t:0表示该像素不显示,1表示该像素显示
画线函数
画点的函数我们已经实现了,那么要想画一条直线,我们就要计算出直线上都有哪些点,将直线上的点依次用画点函数绘制出来,即完成了直线的绘制。
那怎么来求得直线上的任意点的坐标呢?如下图所示,一般绘制一个直线都会给两个已知点(x1,y1),(x2,y2),有了这两个点的坐标,我们就可以求出这条直线的斜率,然后根据这个斜率和横轴的范围(x1,x2),依次代入直线方程,即可求出所有直线上的点的坐标。
我们举个栗子,加深一下理解:
如果(x1=32,y1=48),(x2=96,y2=16),那么:
曲线斜率:K =(16-48)/(96-32)= -0.5
==>该曲线上任意点坐标关系为:y = 48+K*(x – 32)
如果x=64, 因为 K=-0.5,所以 y=48-0.5*(64-32)=32 。
所以,(x=64,y=32)。
利用斜率法,我们封装画线函数如下:
注意:因为水平线和垂直线比较特殊,所以上面函数中对这两种情况进行了单独的绘制,没有使用斜率法计算直线上的坐标。
结果展示
我们按如下坐标绘制一个三角形:
有了画线函数,我们只要将上面三个点的坐标依次代入画线函数即可,绘制三角形的代码具体如下所示:
编译代码生成结果如下: