Arduino Uno Tutorial: Displaying Chinese Characters and Images on a 0.96 Inch OLED Screen

Performance Parameters① Main Control Chip: ATmega328P ② Digital Input/Output Pins: 14 ③ PWM Pins: 6 ④ Storage (Code Space): 32KB ⑤ RAM (Runtime Storage): 2KB; EEPROM (Power-off Storage): 1KB ⑥ Oscillator: 16MHz Online Simulation: https://wokwi.com/

Arduino Uno Tutorial ①: Install Arduino IDE

Arduino Uno Tutorial ②: Development Board and LED Test Arduino Uno Tutorial ③: Button Control LED, with Exercises Arduino Uno Tutorial ④: Analog Quantity, Measuring Voltage using ADC Arduino Uno Tutorial ⑤: External Interrupts, with ExercisesArduino Uno Tutorial ⑥: Serial Communication, Sending and ReceivingArduino Uno Tutorial ⑦: 0.96 Inch OLED ScreenArduino Uno Tutorial ⑧: Displaying Chinese Characters & Images on a 0.96 Inch OLED Screen

The previous tutorial discussed displaying English characters on the 0.96 OLED screen using the u8g2 library, and basic drawing. This tutorial covers: ① Using software to acquire images, ② Using a pattern software to acquire Chinese characters (2) Displaying Images① Due to the small screen size, the images we can acquire are also relatively small. Here I recommend Alibaba’s Vector Icon Library, where images can be downloaded for free and are well made: https://www.iconfont.cn/

Arduino Uno Tutorial: Displaying Chinese Characters and Images on a 0.96 Inch OLED Screen

② Download the icons you likeChoose png download

③ Then use an online site to convert png to jpg, because the pattern software used later can only upload jpg filespng to jpg site: https://png2jpg.com/zh/

④ Use Image2Lcd 2.9 software to convert jpg files to bmp filesSoftware download: https://wwmg.lanzouj.com/iQiox2fx8lxi Note that the width and height should preferably be set to 16*16 or 32*32, not too large. After setting, press reload.

⑤ Open the converted bmp file with PCtoLCD2002 pattern softwarePCtoLCD2002 download link: https://wwmg.lanzouj.com/ivUxr2fx90yj Choose graphic mode, upload the bmp file, click on the gear according to my settings, and then click to generate the character pattern.

0x00,0x00,0x70,0x0E,0xC8,0x0B,0xFE,0x7F,0x02,0x40,0x02,0x40,0x02,0x40,0xFE,0x7F,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0xFC,0x3F,0x00,0x00,"C:\Users\XEMOWO\Desktop\liwu.bmp",0

⑥ Arduino Copy and paste the following variable format, “liwu” is the image name, can be changed freely.

const unsigned char liwu[32] U8X8_PROGMEM = {//Gift Image};

Paste the generated character pattern here, be sure to delete the comments at the end of the last line.

const unsigned char liwu[32] U8X8_PROGMEM = {//Gift Image 0x00,0x00,0x70,0x0E,0xC8,0x0B,0xFE,0x7F,0x02,0x40,0x02,0x40,0x02,0x40,0xFE,0x7F,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0xFC,0x3F,0x00,0x00,};

Then you can call the image, we use the u8g2’s u8g2.drawXBMP function.

u8g2.drawXBMP(2, 2, 16, 16, liwu);

The first two items are the x, y coordinates, the third and fourth items are the width and height of the image, the width and height must not be incorrect, the last one is the name you set for the image ⑦ Effect Demonstration

⑧ Complete Code

#include &lt;Arduino.h&gt;#include &lt;U8g2lib.h&gt;#include &lt;Wire.h&gt;
#define BOARD_I2C_SCL   A5
#define BOARD_I2C_SDA   A4
   
U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /* clock=*/ BOARD_I2C_SCL, /* data=*/ BOARD_I2C_SDA, /* reset=*/ U8X8_PIN_NONE);  
const unsigned char liwu[32] U8X8_PROGMEM = {//Gift Image 0x00,0x00,0x70,0x0E,0xC8,0x0B,0xFE,0x7F,0x02,0x40,0x02,0x40,0x02,0x40,0xFE,0x7F,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0xFC,0x3F,0x00,0x00,};
void setup() { // put your setup code here, to run once: Serial.begin(115200); Serial.println("Init u8g2 ...."); u8g2.begin(); u8g2.setFont(u8g2_font_ncenB08_tr); //Set font
 delay(100);}
void loop() { u8g2.clearBuffer();  //Clear buffer      Serial.println("u8g2 showing chars ...."); u8g2.drawXBMP(2, 2, 16, 16, liwu); u8g2.sendBuffer(); delay(1000);}

(3) Displaying Chinese Characters① Use PCtoLCD2002 to select character mode and click the gear, set the options according to my image.

Arduino Uno Tutorial: Displaying Chinese Characters and Images on a 0.96 Inch OLED Screen

Enter the generated text, such as “Temperature and Humidity”, and then click to generate the character pattern.

Arduino Uno Tutorial: Displaying Chinese Characters and Images on a 0.96 Inch OLED Screen

② Arduino Copy the format.

uint8_t day[][32] ={
};

③ Paste the generated character pattern into the format Be sure to delete the brackets } at the end of each character in the first line, and the brackets { at the beginning of the second line.

uint8_t day[][32] ={{0x00,0x00,0xC4,0x1F,0x48,0x10,0x48,0x10,0xC1,0x1F,0x42,0x10,0x42,0x10,0xC8,0x1F,0x08,0x00,0xE4,0x3F,0x27,0x25,0x24,0x25,0x24,0x25,0x24,0x25,0xF4,0x7F,0x00,0x00},/*"Temperature",0*/
{0x00,0x00,0xE4,0x1F,0x28,0x10,0x28,0x10,0xE1,0x1F,0x22,0x10,0x22,0x10,0xE8,0x1F,0x88,0x04,0x84,0x04,0x97,0x24,0xA4,0x14,0xC4,0x0C,0x84,0x04,0xF4,0x7F,0x00,0x00},/*"Humidity",1*/
{0x80,0x00,0x00,0x01,0xFC,0x7F,0x44,0x04,0x44,0x04,0xFC,0x3F,0x44,0x04,0x44,0x04,0xC4,0x07,0x04,0x00,0xF4,0x0F,0x24,0x08,0x42,0x04,0x82,0x03,0x61,0x0C,0x1C,0x70},/*"Degree",2*/
};

④ Use the u8g2.drawXBM function, note that it is different from the previous image tutorial function! u8g2.drawXBM(2,2,16,16,day[0]); The first two items are the display x, y, the third and fourth items are the size of the displayed text 16*16, and the last item is the index of the character in the function.

u8g2.drawXBM(2,2,16,16,day[0]);u8g2.drawXBM(18,2,16,16,day[2]);
u8g2.drawXBM(2,30,16,16,day[1]);u8g2.drawXBM(18,30,16,16,day[2]);

⑤ Effect Demonstration

Arduino Uno Tutorial: Displaying Chinese Characters and Images on a 0.96 Inch OLED Screen

⑥ Complete Code

#include &lt;Arduino.h&gt;#include &lt;U8g2lib.h&gt;#include &lt;Wire.h&gt;
#define BOARD_I2C_SCL   A5
#define BOARD_I2C_SDA   A4
   
U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /* clock=*/ BOARD_I2C_SCL, /* data=*/ BOARD_I2C_SDA, /* reset=*/ U8X8_PIN_NONE);  
const unsigned char liwu[32] U8X8_PROGMEM = {//Gift Image 0x00,0x00,0x70,0x0E,0xC8,0x0B,0xFE,0x7F,0x02,0x40,0x02,0x40,0x02,0x40,0xFE,0x7F,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0x84,0x20,0xFC,0x3F,0x00,0x00,};
uint8_t day[][32] ={{0x00,0x00,0xC4,0x1F,0x48,0x10,0x48,0x10,0xC1,0x1F,0x42,0x10,0x42,0x10,0xC8,0x1F,0x08,0x00,0xE4,0x3F,0x27,0x25,0x24,0x25,0x24,0x25,0x24,0x25,0xF4,0x7F,0x00,0x00},/*"Temperature",0*/
{0x00,0x00,0xE4,0x1F,0x28,0x10,0x28,0x10,0xE1,0x1F,0x22,0x10,0x22,0x10,0xE8,0x1F,0x88,0x04,0x84,0x04,0x97,0x24,0xA4,0x14,0xC4,0x0C,0x84,0x04,0xF4,0x7F,0x00,0x00},/*"Humidity",1*/
{0x80,0x00,0x00,0x01,0xFC,0x7F,0x44,0x04,0x44,0x04,0xFC,0x3F,0x44,0x04,0x44,0x04,0xC4,0x07,0x04,0x00,0xF4,0x0F,0x24,0x08,0x42,0x04,0x82,0x03,0x61,0x0C,0x1C,0x70},/*"Degree",2*/
};
void setup() { // put your setup code here, to run once: Serial.begin(115200); Serial.println("Init u8g2 ...."); u8g2.begin(); u8g2.setFont(u8g2_font_ncenB08_tr); //Set font
 delay(100);}
void loop() { u8g2.clearBuffer();  //Clear buffer      Serial.println("u8g2 showing chars ....");
u8g2.drawXBM(2,2,16,16,day[0]); u8g2.drawXBM(18,2,16,16,day[2]);  u8g2.drawXBM(2,30,16,16,day[1]); u8g2.drawXBM(18,30,16,16,day[2]);
u8g2.sendBuffer(); delay(1000);}

To be continued…

END

Free Application for Development Board

Arduino Uno Tutorial: Displaying Chinese Characters and Images on a 0.96 Inch OLED Screen

Submissions/Promotions/Cooperation/Join Group Please scan the code to add WeChat

(Please note your intention, when joining the group please note city-name-industry position information)

Related posts:

Leave a Comment Cancel reply