[Arduino範例] Nokia 5110 LCD與u8g2函式庫

Nokia 5110系列實在賣太好了，銷售量大到驚人，而且神奇的是，它的拆機零件目前都還很暢銷！是的，目前大家上網買到的Nokia 5110 LCD都是從舊的Nokia 5110拆來下整新的。雖然不是新品，但依然還是很好用、很耐用！

購買Nokia 5110 LCD：
https://www.jmaker.com.tw/products/5110-lcd

84x48的解析度，可顯示文字、點陣圖，有背光，低功耗，Nokia 5110 LCD真的是搭配Arduino的最佳拍擋！

共有8個PIN，如果要控制背光，就要接滿8條線：

RST >> PIN 8
CE(CS) >> PIN 10
DC >> PIN 9
DIN(Data) >> PIN 11
CLK >> PIN 13
VCC >> 3.3V
BL >> PIN 6
GND >> GND

先安裝u8g2函式庫，在程式管理員就能找到。

因為我們也要測試圖形的顯示，所以先準備一張圖。先在你熟悉的圖形軟體畫好圖，傑森是習慣用Photoshop，再到Image2LCD打開它。

Image2LCD下載網址：
http://www.e-paper-display.com/download_detail/downloadsId=625.html

先在繪圖軟體中畫好圖，存成JPG格式，在Image2LCD打開，基本上只有「輸出灰度」改成「單色」，寬度和高度設成48、48，然後就可以進行「保存」了。然後把得到的陣列COPY到我們的程式中即可。

有一點非常重要，如果這個圖是要給u8g2使用，一定要勾選「位元組內象素數據反序」這個選項哦！不然到時圖一定是破碎的。

傑森把程式精簡了一下，本範例主要是針對Arduino與5110，所以用下面這行來驅動：

U8G2_PCD8544_84X48_1_4W_SW_SPI u8g2(U8G2_R0, /* clock=*/ 13, /* data=*/ 11, /* cs=*/ 10, /* dc=*/ 9, /* reset=*/ 8);

程式中「img」就是我們從Image2LCD輸出的圖形陣列。

u8g2.setFont(u8g2_font_HelvetiPixelOutline_te);

這行是設定字型，在u8g2裡，字形和大小是一起的，從字形清單中，你可以挑一個適合的字型和大小。字型從3像素高到92像素都有，不過有些只有數字，或是只有大寫英文，大家要注意一下。

完整字型清單請參考：
https://github.com/olikraus/u8g2/wiki/fntlistall

文字輸出很容易：

u8g2.drawStr(0,20,"Hello");  //x,y,文字。這裡的y是從文字的底部去算的哦！

至於圖形就更簡單，一行搞定！

u8g2.drawXBMP(36, 0, 48, 48, img); //x,y,寬度,高度,陣列名稱);

背光的控制很簡單，BL(BackLight)接腳，傑森刻意接到了可以控制PWM的PIN 6，這樣我們不止可以控制背光亮或不亮，甚至我們還可以控制亮度哦！

pinMode(6,OUTPUT);
analogWrite(6,100);

完整程式如下，大家可以參考看看，真的超簡單的哦！

#include <Arduino.h>
#include <U8g2lib.h>

#ifdef U8X8_HAVE_HW_SPI
#include <SPI.h>
#endif
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif

U8G2_PCD8544_84X48_1_4W_SW_SPI u8g2(U8G2_R0, /* clock=*/ 13, /* data=*/ 11, /* cs=*/ 10, /* dc=*/ 9, /* reset=*/ 8);	// Nokia 5110 Display

static const unsigned char img[] PROGMEM  = {
0XFF,0XFF,0XFF,0X81,0XFF,0XFF,0XFF,0XFC,0XFF,0X81,0XFF,0XFF,0XFF,0XE0,0XFF,0XC3,
0XFF,0XFF,0X7F,0X80,0XFF,0XF3,0XFF,0XFF,0X7F,0X00,0XFC,0XFB,0XFF,0XFF,0X67,0X00,
0XF0,0XFB,0XFF,0XFF,0X27,0X00,0X80,0XFD,0XFF,0XFF,0X23,0X00,0X00,0XFC,0XFF,0XFF,
0X33,0XF8,0X00,0XF0,0XFF,0XFF,0X13,0XFC,0X01,0X80,0XFF,0XFF,0X11,0XFE,0X03,0X00,
0XFC,0XFF,0X19,0XFF,0X07,0X00,0XF0,0XFF,0X09,0XFF,0X07,0X00,0X80,0XFF,0X09,0XFF,
0X07,0X00,0X00,0XFE,0X0D,0XFF,0X07,0X00,0X00,0XF8,0X07,0XFF,0X07,0X00,0X00,0XFC,
0X07,0XFE,0X03,0X78,0X00,0XFC,0X07,0XFC,0X01,0XFC,0X00,0XFC,0X03,0XF8,0X00,0XFE,
0X01,0XFE,0X07,0X00,0X00,0XFE,0X01,0XFA,0X3F,0X00,0X00,0XFE,0X01,0XF1,0XFB,0X00,
0X00,0XFE,0X01,0XF1,0XC1,0X07,0X00,0XFC,0X80,0XF9,0X01,0X3F,0X00,0X78,0X80,0XF8,
0X01,0XF8,0X00,0X00,0XC0,0XFC,0X01,0XE0,0X07,0X00,0X40,0XFC,0X07,0X00,0X3F,0X00,
0X40,0XFC,0X3F,0X00,0XF8,0X00,0X20,0X0E,0XFF,0X00,0XE0,0X07,0X60,0X0F,0XF1,0X07,
0X00,0X1F,0XE0,0X8F,0X31,0X0F,0X00,0XF8,0XF0,0X87,0X31,0X38,0X00,0XE0,0XF7,0X87,
0X31,0XE1,0X01,0X00,0XFF,0X07,0X31,0X8F,0X37,0X00,0XF8,0X07,0X61,0X3C,0XFC,0X00,
0XF8,0X0F,0XC1,0XE1,0XE1,0X07,0XFC,0X3F,0X01,0X0F,0X0F,0X1F,0XFC,0XEF,0X01,0X78,
0X3C,0XFC,0XFE,0X8F,0X01,0XE2,0X61,0XFE,0XFF,0X3F,0X01,0X0F,0X0F,0XC3,0XFF,0X73,
0X01,0X7F,0XF8,0X01,0XFE,0XC1,0X01,0XFF,0XE3,0X18,0XBE,0XC1,0X01,0XFC,0X03,0X18,
0X0B,0XE3,0X01,0XF0,0X03,0X80,0X09,0XF3,0X81,0XF9,0X03,0X80,0X19,0XFE,0X81,0X7B,
0X00,0XC0,0X98,0XFF,0XC1,0X3F,0X00,0X40,0XF8,0XFF,0XC1,0X3F,0X00,0X60,0XFC,0XFF,
};

void setup(void) {
  u8g2.begin();  
  u8g2.setDisplayRotation(U8G2_R2); //LCD反轉，如果不用，這行就不用加
  pinMode(6,OUTPUT);
  analogWrite(6,100); //控制LED的亮度，0~255，如果沒有加電阻，建議不要超過200
}

void loop(void) {
  u8g2.firstPage();
  do {
    u8g2.drawXBMP(36, 0, 48, 48, img);
    u8g2.setFont(u8g2_font_DigitalDiscoThin_tf);
    u8g2.drawStr(0,20,"Hello");
    u8g2.setFont(u8g2_font_sticker_mel_tr);
    u8g2.drawStr(0,38,"5110");
  } while ( u8g2.nextPage() );
  //delay(1000);
}

自訂中文字型

u8g2還有一個特異功能，就是自訂字型，中文自然也是可以的！如此一來，5110是不是也可以顯示真正的中文，不用圖片式的文字呢？是的，沒錯！

有關u8g2自訂中文字型的部份，傑森之前已經寫過教學，有興趣的人可以參考看看哦：

使用u8g2函式庫建立自訂字庫，讓OLED顯示中文

以下附上5110使用自訂中文字型的範例，也讓大家參考：

#include <Arduino.h>
#include <U8g2lib.h>

#ifdef U8X8_HAVE_HW_SPI
#include <SPI.h>
#endif
#ifdef U8X8_HAVE_HW_I2C
#include <Wire.h>
#endif

U8G2_PCD8544_84X48_1_4W_SW_SPI u8g2(U8G2_R0, /* clock=*/ 13, /* data=*/ 11, /* cs=*/ 10, /* dc=*/ 9, /* reset=*/ 8);	// Nokia 5110 Display

void setup(void) {
  u8g2.begin();
  u8g2.enableUTF8Print();		// 支援UTF8字型
  u8g2.setDisplayRotation(U8G2_R2);  //LCD反轉，如果不用，這行就不用加
  pinMode(6,OUTPUT);
  //analogWrite(6,100); //控制LED的亮度，0~255，如果沒有加電阻，建議不要超過200
  
}

void loop(void) {
  u8g2.setFont(u8g2_font_unifont_t_chinese1);  // 設定自訂的中文字型
  u8g2.setFontDirection(0);
  u8g2.firstPage();
  do {
    u8g2.drawUTF8(0,20,"傑森創工");
    u8g2.drawUTF8(0,38,"創客好朋友");
  } while ( u8g2.nextPage() );
  //delay(1000);
}

購買Nokia 5110 LCD：
https://www.jmaker.com.tw/products/5110-lcd