【實(shí)例演示】ESP8266+U8g2庫,玩轉(zhuǎn)OLED顯示

首先來看一下ESP8266的引腳定義,因?yàn)楸酒枰饨覱LED,就要先看看ESP8266具有哪些功能的引腳。
ESP8266的引腳定義如下:

可以看出,ESP8266的功能引腳包括:
3個(gè)串口:TXD、RXD
2個(gè)SPI接口:MOSI、MISO、SCLK、CS
1個(gè)IIC接口:SDA、SCL
多個(gè)數(shù)字輸入/輸出接口:D1~D8
1個(gè)模擬輸入/輸出接口:A0
2 OLED簡(jiǎn)介
OLED模塊的尺寸多種多樣,比較常用的是0.96寸的矩形的,也有其它尺寸的OLED。
此外,屏幕的接口,一般有IIC接口和SPI接口兩種。加上電源,IIC接口需要4根線,而SPI接口需要6根線,IIC的通信比SPI通信慢,但4線接線更方便。

本篇使用最為常用的0.96寸的OLED,分辨率128x64,黃藍(lán)雙色。
注意這里的雙色,不是值一個(gè)像素點(diǎn)可以顯示兩種顏色,而是屏幕的上部1/4只能顯示黃色,下部的3/4只能顯示藍(lán)色,并且黃色和藍(lán)色之間,不是緊密靠在一起的,而是有約一個(gè)像素點(diǎn)的間隙。

3 U8g2庫簡(jiǎn)介與安裝
3.1 U8g2庫簡(jiǎn)介
U8g2 是一個(gè)用于嵌入式設(shè)備的單色圖形庫。U8g2支持單色OLED和LCD,并支持如SSD1306等多種類型的OLED驅(qū)動(dòng)。
U8g2源碼的開源庫地址:https://github.com/olikraus/u8g2
U8g2專為Arduino提供的方便安裝的庫地址:https://github.com/olikraus/U8g2_Arduino
想要研究U8g2源碼的可以看看這里的源代碼,C和C++寫的。
比如畫直線這個(gè)函數(shù)和具體實(shí)現(xiàn)如下:

3.2 U8g2庫安裝
和上篇介紹ESP8266庫的安裝類似, U8g2庫的安裝也有兩種方式:
在線安裝
在線安裝,在Arduino IDE的菜單的“項(xiàng)目->加載庫->管理庫”中搜索u8g2后安裝即可,對(duì)網(wǎng)絡(luò)環(huán)境要求較高

源碼安裝
將U8g2專為Arduino提供的庫(https://github.com/olikraus/U8g2_Arduino)整個(gè)下載下來,然后還是在Arduino IDE的菜單的“項(xiàng)目->加載庫”中選擇“添加.ZIP庫...”,然后選到你剛下載的U8g2_Arduino源碼文件夾后即可安裝,也十分的方便。

3.3 U8g2庫的基礎(chǔ)使用
使用U8g2庫進(jìn)行OLED的顯示十分簡(jiǎn)單,首先要包含兩個(gè)庫,U8g2lib和Wire,后者是IIC通信需要用。
對(duì)于IIC接口的OLED,需要在程序中指定一下引腳的接口定義,如果是SPI接口,可以參考U8g2庫自帶例程中SPI接口是使用方法。
然后在Ardunio的setup中進(jìn)行u8g2的初始化。
最后在Ardunio的loop中就可以編寫自己的邏輯了。
另外,U8g2庫在loop中的通用寫法是使用do{}while()的形式:
一個(gè)簡(jiǎn)單的HelloWord在OLED中的顯示如下:
注意,setCursor(0, 15),是將畫圖位置移動(dòng)到x=0,y=15處,然后以這個(gè)點(diǎn)的右上區(qū)域進(jìn)行字符串的顯示,這樣看起來就是顯示在OLED的第一行,如果你設(shè)置setCursor(0, 0),字符串實(shí)際是到屏幕外面了,不會(huì)顯示!

4U8g2常用API函數(shù)
4.1 基礎(chǔ)設(shè)置
setFont(font) 設(shè)置字體
font
:u8g2的字體,比較常用的有u8g2_font_unifont_t_symbols(通常使用這個(gè))和u8g2_font_wqy12_t_gb2312b(用于顯示漢字)等setFontMode(num) 設(shè)置字體背景顏色模式
num
:?jiǎn)⒂?1
)透明模式num
:禁用(0
)透明模式setDrawColor(color) 設(shè)置所有繪圖函數(shù)的位值
color
:0
(顯示RAM中的清晰像素值)color
:1
(設(shè)置像素值)color
:2
(異或模式)
4.2 畫像素點(diǎn)
drawPixel(x,y)
只有指定位置即可顯示像素點(diǎn),比如把所有的點(diǎn)都顯示出來:
效果如下面的右圖:

注意測(cè)試程序中,我定義了一個(gè)宏定義,用于延時(shí)顯示每一次的畫圖,方便觀察OLED的顯示過程:
可以指定延時(shí)時(shí)間,如500毫秒或1000毫秒等。
4.3 畫直線
drawLine(x0,y0,x1,y1) 畫一條線
x0,y0
線的起點(diǎn)x1,y1
線的終點(diǎn)drawHLine(x,y,w) 畫一條水平線
x,y
線的起點(diǎn)w
水平線的長(zhǎng)度(寬度)drawVLine(x,y,h) 畫一條豎直線
x,y
線的起點(diǎn)h
豎直線的長(zhǎng)度(高度)
測(cè)試函數(shù):
顯示效果如下面的左上圖:

4.4 畫空心/實(shí)心(圓角)矩形
drawFrame(x,y,w,h) 繪制一個(gè)空心框
drawBox(x,y,w,h) 繪制一個(gè)實(shí)心矩形
drawRFrame(x,y,w,h,r) 繪制一個(gè)空心框(圓角)
drawRBox(x,y,w,h,r) 繪制一個(gè)實(shí)心矩形 (圓角)
x,y
起點(diǎn)坐標(biāo)w,h
框的寬度和高度r
圓角的半徑
測(cè)試函數(shù):
顯示效果如下面的右下圖:

4.5 畫空心/實(shí)心圓
drawCircle(x,y,rad,opt) 繪制一個(gè)空心圓
drawDisc(x,y,rad,opt) 繪制一個(gè)實(shí)心圓
U8G2_DRAW_UPPER_RIGHT
(右上)U8G2_DRAW_UPPER_LEFT
(左上)U8G2_DRAW_LOWER_LEFT
(左下)U8G2_DRAW_LOWER_RIGHT
(右下)U8G2_DRAW_ALL
(全部)x,y
為圓心坐標(biāo)rad
為圓的半徑opt
為選擇畫的部分,分為:
空心圓
顯示效果如下面的左圖:

注意,U8g2庫畫出的圓,因像素點(diǎn)的顯示原理,圓的直徑占用的寬度不是半徑的2倍,而是2倍再加一個(gè)像素點(diǎn)。
4.6 畫空心/實(shí)心橢圓
drawEllipse(x,y,rx,ry,opt) 繪制一個(gè)空心橢圓
drawFilledEllipse(x,y,rx,ry,opt) 繪制一個(gè)實(shí)心橢圓
x,y
為圓心坐標(biāo)rx,ry
為與橢圓x和y方向的半徑opt
與畫圓時(shí)的作用一致
橢圓的顯示與圓的顯示類似,只是橢圓可以分別指定x和y方向的半徑

4.7 字符串、漢字和變量顯示
字符串的顯示,可以使用drawStr函數(shù),也可以使用通用風(fēng)格的print函數(shù)。
drawStr(x,y,string) 繪制一個(gè)字符串
x,y
起點(diǎn)坐標(biāo)string
字符串
如果想要使用print顯示漢字,需要先設(shè)置如下兩句:
u8g2.enableUTF8Print();//enable UTF8
u8g2.setFont(u8g2_font_wqy12_t_gb2312b);//設(shè)置中文字符集
如果想要顯示變量,使用print函數(shù)即可:
字符串、漢字、變量的測(cè)試函數(shù)如下:
顯示效果:

4.8 畫內(nèi)置圖標(biāo)
drawGlyph(x,y,addr) 繪制U8g2內(nèi)置的圖標(biāo)
x,y
起點(diǎn)坐標(biāo)addr
內(nèi)置圖標(biāo)的地址
U8g2庫內(nèi)置了需要預(yù)先定義的圖形,通過drawGlyp函數(shù)以及指定的地址,即可看OLED上顯示對(duì)應(yīng)的圖標(biāo):
各個(gè)圖形的地址定義如下:

編寫一個(gè)測(cè)試程序:
測(cè)試效果如下:

4.9 畫自定義圖片
drawXBM(x,y,w,h,addr) 繪制一個(gè)實(shí)心矩形 (圓角)
x,y
起點(diǎn)坐標(biāo)w,h
圖片的寬度和高度`addr
圖片(數(shù)組)的地址
自定義圖片的顯示,需要先將圖形轉(zhuǎn)換為數(shù)組,可以使用如下工具進(jìn)行圖片到數(shù)組的轉(zhuǎn)換:
https://tools.clz.me/image-to-bitmap-array

編寫測(cè)試程序:
效果如下:

5 總結(jié)
本篇介紹了ESP8266的引腳定義以及U8g2庫在OLED的使用基礎(chǔ),并重點(diǎn)介紹了U8g2庫的各種畫圖函數(shù),這個(gè)函數(shù)總結(jié)下來如下下表所示:

借助U8g2庫,可以十分方便的在OLED上進(jìn)行圖形的顯示。