U8g2图形库使用技巧记录（2）

~恍恍惚惚中，感觉瓦力已经慢慢悠悠的向我走来，看了他的孤独，感觉自己的也就不算什么了~

目录

前言

第一步选图：

第二步取模：

第三步显示：

小结：

后续的计划：

---

前言

这一次和大家分享一下怎么使用U8g2的图形库把瓦力搬到自己的屏幕上显示，通过下面三张图，我们可以把这个实现分为三个步骤进行：

一.选图--->                                             

二.取模--->                                             

三.显示--->                            

第一步选图：

        其实就是收集选取你想要显示在屏幕上的图片，保存下来后通过图片编辑器对图像进行大小调整操作（调整大小的时候选择以像素的方式进行，图片的水平、垂直像素大小最好和你屏幕的实际水平、垂直像素分辨率是成比例的，不然得出的图像会被压扁变形，瓦力会变得矮胖，或者高瘦，比例不协调，显示效果不佳；调整好大小之后就把图片另存为“bmp格式的单色位图”图片，这样就可以都得到黑白的瓦力位图图片了）：

 

第二步取模：

        知识点：取模的工作主要就是实现把黑白位图的黑白像素信息通过数字方式表示出来，例如0表示白色，1表示黑色，因为黑白两个信息只需要一个位（bit）就可以表示完成，一个字节可以保存八个像素点的位图图像数据，所以分辨率为128x64的oled，一张满分辨率的瓦力位图图像占用（128x64/8）=1024字节的数据；

        实操：将位图图片转换成图像数据需要使用一个取模工具“PCtoLCD2002”绿色免安装版下载链接，注意字模选项里面的配置，一定要按照截图里面的参数进行设置，才能得到可以正常显示的位图数据（该工具软件的功能也是十分强大，可以取图模也可以取字模，看看后面有机会可以慢慢研究一下然后写一些教程~~使劲挖坑，反正不一定会填~~） 

 以下是我用取模工具提取的瓦力图片的位图数据：

#define wall_e_bmp01_x 128
#define wall_e_bmp01_y 64
 
static const unsigned char wall_e_bmp01[] U8X8_PROGMEM = {
	0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x0E,0x38,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xC0,0x1B,0xEC,0x01,0x00,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x00,0xF0,0x34,0x9C,0x0F,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x1E,0xF4,0x17,0x3C,0x00,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x80,0xE7,0xE1,0xC7,0xE7,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x80,0xF1,0xE3,0xE3,0x87,0x01,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0xC0,0x38,0xE6,0x63,0x0C,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x40,0x99,0xE7,0xF3,0x48,0x03,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x60,0xF8,0xE7,0xF3,0x0F,0x02,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x60,0xF8,0xE7,0xE3,0x0F,0x02,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x60,0xF0,0x73,0xE7,0x07,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x40,0xE0,0xF9,0x9F,0x03,0x03,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0xC0,0x04,0x6F,0x72,0x90,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x80,0xC3,0x63,0xC2,0xC3,0x00,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x00,0x7F,0x60,0x02,0x7F,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x60,0x02,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xF0,0x0F,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x10,0x0C,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x10,0x0C,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xF8,0x0F,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0xE0,0xFF,0xFF,0xFF,0xFF,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x20,0x00,0x00,0x00,0x00,0x06,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0xE0,0xFF,0xFF,0xFF,0xFF,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xE0,0xFF,0x01,0xFF,0xFF,0x03,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x60,0x80,0x01,0x83,0x00,0x02,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x20,0x80,0x3F,0x83,0x00,0x02,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x80,0xFF,0x83,0x3F,0x83,0xE0,0xFF,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xC0,0xFF,0x87,0x1D,0x83,0xE0,0xFF,0x01,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0xC0,0x00,0xFE,0xFB,0xFF,0x3F,0x00,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xC0,0x00,0xFE,0xFF,0xFF,0x3F,0x00,0x01,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0xC0,0x38,0x06,0x00,0x00,0x20,0x1E,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xC0,0x38,0x06,0x00,0x00,0x20,0x1E,0x01,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0xC0,0xFF,0x07,0x00,0x00,0xE0,0xFF,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xC0,0x00,0x0E,0x00,0x00,0x70,0x80,0x01,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0xC0,0x00,0x0E,0x00,0x00,0x30,0x00,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xC0,0x38,0x0E,0x00,0x00,0x30,0x1E,0x01,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0xC0,0x38,0x0E,0x00,0x00,0x30,0x1E,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xC0,0xFF,0x0F,0x00,0x00,0xF0,0xFF,0x01,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x80,0xFF,0x0F,0x00,0x00,0xF0,0xFF,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xFC,0x0F,0x00,0x00,0x70,0x3F,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0xFC,0x07,0x00,0x00,0xF0,0x3F,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xE0,0x07,0x00,0x00,0xF0,0x03,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0xE0,0x03,0xD6,0x45,0xE8,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x60,0x00,0xD6,0x45,0x42,0x02,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x60,0x7F,0x7F,0xDF,0xF9,0x02,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xE0,0xFF,0xFF,0xFF,0xFF,0x07,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0xE0,0xFF,0xFF,0xFF,0xFF,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xE0,0xFF,0xFF,0xFF,0xFF,0x03,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x20,0x00,0x60,0x02,0x00,0x02,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x20,0x00,0x60,0x02,0x00,0x06,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0xE0,0xFF,0x7F,0xFE,0xFF,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xE0,0xFF,0x7F,0xFE,0xFF,0x03,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x20,0x00,0x60,0x02,0x00,0x02,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x60,0x00,0x70,0x06,0x00,0x03,0x00,0x00,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0xE0,0xFF,0x3F,0xFE,0xFF,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x70,0xFE,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0x7F,0x0E,0x00,0x00,0x00,
	0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00
};

第三步显示：

        到了第三步就又回到我们U8g2的图形库操作了，找了一下，U8g2库操作位图的方法主要有

void u8g2_DrawBitmap(u8g2_t *u8g2, u8g2_uint_t x, u8g2_uint_t y, u8g2_uint_t cnt, u8g2_uint_t h, const uint8_t *bitmap);
void u8g2_DrawXBM(u8g2_t *u8g2, u8g2_uint_t x, u8g2_uint_t y, u8g2_uint_t w, u8g2_uint_t h, const uint8_t *bitmap);
void u8g2_DrawXBMP(u8g2_t *u8g2, u8g2_uint_t x, u8g2_uint_t y, u8g2_uint_t w, u8g2_uint_t h, const uint8_t *bitmap);

 几种方法的实现都大同小异，所以选取了如下的方法进行绘制操作

	u8g2_DrawXBMP(&u8g2, 0, 0, wall_e_bmp01_x, wall_e_bmp01_y, wall_e_bmp01);

至此呆萌的瓦力成功搬到了屏幕上进行显示：

小结：

        这次完成了通过U8g2图形库把瓦力显示到oled屏幕上面，当看到瓦力在oled上显示出来的那一刻，突然有了一丁点的小感动，看到自己非常喜欢的卡通形象通过屏幕上的像素跳动显示出来，总感觉与它的距离越来越近了，多少动手实践的动力源自于纯粹的爱好，多少灵感的迸发源自于纯粹的爱好，每个人心中都有属于自己的小瓦力，去打磨，去实现它吧~~~

以下是一些和本文相关的文章链接和U8g2的wiki链接：

一、~~呆萌的瓦力平衡机器人~~链接：

        1.基于ESP32双无刷FOC电机的瓦力平衡机器人（1）；

        2.基于ESP32双无刷FOC电机的瓦力平衡机器人（2）；

二、 ~~U8g2图形库使用技巧记录~~链接：

        1.U8g2图形库使用技巧记录（1）；

        2.U8g2图形库使用技巧记录（2）；

        3.U8g2图形库使用技巧记录（3）；

三、U8g2 wiki链接：

        1.U8g2_wiki；

后续的计划：

        ~~到目前为止，U8g2图形库的基本接口都已经验证完毕，后续会继续研究U8g2图形库动态绘图(动画)的相关操作，同时也继续优化底层驱动方法，也会抽时间把细节记录分享出来~~

                  大家如果也感兴趣，可以加qun交流学习（群里提供了丰富的esp32资料）：

                                        

                                                 燥起来吧，sao年！！！！！！