Arduino - How to use U8g2 library to show graphic & UTF8 characters for monochrome displays

In order to use the newly purchased 0.96" OLED SD1306 display, I studied the u8g2 library and made this video to share with you on how to use U8g2 library with monochrome display. In the video, I also included a section on how to use the free 5000+ traditional Chinese font created by Mr. Yang. The file is free for anyone to use. Really appreciated what he did for Arduino community! For those who do not have time to watch the entire video , here is the video timeline.

Video Timeline:

00:22 Install u8g2 01:04 Open PrintUTF8 example 02:00 Define display used 02:23 Explain display naming rules 04:13 Uncomment the line selected 04:33 Explain the code 04:42 enableUTF8Print() for symbol and Chinese 05:14 u8g2 supported font list 06:23 display location setCursor(X,Y) 07:05 Upload the sketch & show characters 07:23 Can't overwrite characters! 08:08 Char overwrite solution 08:37 OledOverlayPrint() function 09:06 Use OledOverlayPrint() in code 10:08 Use Open Iconic Fonts 11:29 Display cloud symbol 11:52 \u with number to show cloud 13:02 Change fonts for different lines 14:34 Download 5000+ Chinese font 15:11 Install 5000+Chinese font 15:39 Test missing fonts again 16:42 Reminder of memory usage 17:45 End of tutorial

References:

U8g2 library: https://github.com/olikraus/u8g2 U8g2 plain font: https://github.com/olikraus/u8g2/wiki... U8g2 setCursor command: https://github.com/olikraus/u8g2/wiki... U8g2 iconic font: https://github.com/olikraus/u8g2/wiki... How to make your own font: https://blog.jmaker.com.tw/chinese_oled/ MQTT & IoT Integration FB group: https://www.facebook.com/groups/36360... Download 5000+ Chinese font: https://drive.google.com/drive/folder...

 END

------------------------------------------------------------------------------------------------------------------------------------------------

Arduino 在單色顯示器上使用 u8g2 程式庫


為了使用 0.96” OLED SD1306 顯示器, 研究了一下 U8G2 的字型程式庫的使用方法. 記錄一下使用方式, 也和大家一起來分享. 影片中14:34也介紹了如何安裝及使用益師傅做的5000+繁中字型. 非常感謝益師傅!!

如果沒有時間看完影片的朋友, 可以直接觀看想知道的片段即可. 影片時間軸: 00:22 安裝 u8g2 01:04 打開 PrintUTF8 範例 02:00 定義使用的顯示器 02:23 顯示器定義檔命名規則 04:13 取消OLED 顯示器的註釋 04:33 範例程式說明 04:42 打開 enableUTF8Print() 以顯示中文及符號 05:14 u8g2 支援的字型清單 06:23 setCursor(X,Y) 指定字顯示位置 07:05 上傳程式到 ESP32 07:23 文字不能重覆顯示在同一行 08:08 如何重覆顯示 08:37 自己寫 OledOverlayPrint() 09:06 如何使用 OledOverlayPrint() 10:08 如何使用 Open Iconic Fonts 等殊字型 11:29 在顯示器顯示一朵雲的符號 11:52 \u 加上16進位數字來指定要顯示的符號 13:02 在不同行上顯示不同的字型 14:34 下載益師傅 5000+ 繁中字型 15:11 安裝 5000+ 繁中字型 15:39 測試遺失的中文字型 16:42 注意 5000+字型記憶體的使用 17:45 教學結束




OledOverLayPrint 程式碼:

//OLED ROW number, position at Verticle pixel
const byte ROW[5] = {0, 15, 31, 47, 63};

void OledOverlayPrint(String printStr, byte row)
{
  
  u8g2.setCursor(0, ROW[row]);
  u8g2.setDrawColor(0);                                                // set color to black to erase partial line
  u8g2.drawBox(0, ROW[row - 1], u8g2.getDisplayWidth() - 1, ROW[row]); // draw a solid box on the particular line
  u8g2.setDrawColor(1);                                                // set the color for the text
  u8g2.print(printStr);
}

PrintUTF8.ino 程式碼:

/*

  PrintUTF8.ino
  
  Use the (Arduino compatible) u8g2 function "print"  to draw a text.

  Universal 8bit Graphics Library (https://github.com/olikraus/u8g2/)

  Copyright (c) 2016, olikraus@gmail.com
  All rights reserved.

  Redistribution and use in source and binary forms, with or without modification, 
  are permitted provided that the following conditions are met:

  * Redistributions of source code must retain the above copyright notice, this list 
    of conditions and the following disclaimer.
    
  * Redistributions in binary form must reproduce the above copyright notice, this 
    list of conditions and the following disclaimer in the documentation and/or other 
    materials provided with the distribution.

  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND 
  CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, 
  INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 
  MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 
  DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR 
  CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 
  SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT 
  NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 
  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 
  CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, 
  STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 
  ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 
  ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.  

*/

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

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


/*
  U8g2lib Example Overview:
    Frame Buffer Examples: clearBuffer/sendBuffer. Fast, but may not work with all Arduino boards because of RAM consumption
    Page Buffer Examples: firstPage/nextPage. Less RAM usage, should work with all Arduino boards.
    U8x8 Text Only Example: No RAM usage, direct communication with display controller. No graphics, 8x8 Text only.
    
*/

// Please UNCOMMENT one of the contructor lines below
// U8g2 Contructor List (Frame Buffer)
// The complete list is available here: https://github.com/olikraus/u8g2/wiki/u8g2setupcpp
// Please update the pin numbers according to your setup. Use U8X8_PIN_NONE if the reset pin is not connected
//U8G2_SSD1306_128X64_NONAME_F_3W_SW_SPI u8g2(U8G2_R0, /* clock=*/ 13, /* data=*/ 11, /* cs=*/ 10, /* reset=*/ 8);
//U8G2_SSD1306_128X64_NONAME_F_3W_HW_SPI u8g2(U8G2_R0, /* cs=*/ 10, /* reset=*/ 8);
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);
//U8G2_SSD1306_128X64_ALT0_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);   // same as the NONAME variant, but may solve the "every 2nd line skipped" problem
//U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /* clock=*/ 13, /* data=*/ 11, /* reset=*/ 8);



// End of constructor list

//OLED ROW number, position at Verticle pixel
const byte ROW[5] = {0, 15, 31, 47, 63};

void OledOverlayPrint(String printStr, byte row)
{
  
  u8g2.setCursor(0, ROW[row]);
  u8g2.setDrawColor(0); // set color to black to erase partial line
  
// draw a solid box on the particular line
  u8g2.drawBox(0, ROW[row - 1], u8g2.getDisplayWidth() - 1, ROW[row]); 
  u8g2.setDrawColor(1); // set the color for the text
  u8g2.print(printStr);
}

void setup(void)
{
  u8g2.begin();
  u8g2.enableUTF8Print(); // enable UTF8 support for the Arduino print() function
}

void loop(void) {
  
  
  u8g2.clearBuffer();
  u8g2.setFont(u8g2_font_unifont_t_chinese1);
  OledOverlayPrint("Hello World!", 1);
  OledOverlayPrint("你好世界", 2);

  u8g2.setFont(u8g2_font_open_iconic_weather_2x_t);
  OledOverlayPrint("\u0040", 3);

  u8g2.setFont(u8g2_font_unifont_t_chinese1);
  OledOverlayPrint("溫度亮度氧度溼度", 4);

  u8g2.sendBuffer();
  
  delay(1000);
}

Comments

Post a Comment

Popular posts from this blog

Arduino - DFPlayer Mini MP3 Module

Image
Arduino - Test DFPlayer Mini MP3 Module I found DFPlayer mini MP3 module on China auction site Taobao when I was looking for a MP3 player module for an Arduino projects.  This module is quite small and it only require few pins connections to Arduino and a speaker to work.  Looks really nice for my little project. Actually, the module is quite capable and complicated, if you were interested, please visit this  page . This tutorial here is just to show you how to connect DFPlayer module with Arduino and speaker and the Arduino sketch provided here just to play few sample sounds I collected from Internet. First, I recycled a 2W, 4Omh small speaker from this little music box. Material Needed: DFPlayer Mini module  Speaker - DFPlayer module support to to 3W SD card - 2GB ~ 32GB formatted with FAT or FAT32 MP3 / WAV - audio files Arduino mini Pro Few jump wires As you can see the illustration below I made in Power Point, hardware connection is quite simple (
Read more

Android control color RGB LED using HC-05 Bluetooth with Arduino (Part I)

Image
Android control color RGB LED using HC-05 Bluetooth with Arduino (Part I) Part II of this tutorial is here! Updated Sketch for ESP32 boards   https://stonez56.blogspot.com/2021/07/android-control-color-rgb-led-with.html This time, I am going to show you how to use Android phone to connect to HC-05 Bluetooth module and Arduino. Hardware needed: Arduino mini pro * 1 HC-05 Bluetooth module * 1 RGB LED * 2 Jump wires * 10 HC-05 Bluetooth Module wiring as follow: TX connect to Arduino Pin 11(RX) RX connect to Arduino Pin 12(TX) Remember to connect TX on the HC-05 to RX on the Arduino and RX on the HC-05 to TX on the Arduino, so Arduino can receive data correctly. VCC connect to 5V power GND connect to Ground RGB LED wiring as follow: Warning: You must connect Arduino mini pro, so your PWM Pin can control LED’s color! For example, Arduino mini pro only has 6 PWM pins and they are 3, 5, 6, 9, 10, and 11, other pins do not have PWM. Refer to Wikipedia for PWM R co
Read more

Arduino #27 AsyncWifimanager ElegantOTA ESP32 (WiFi Password Mgnt. + WiFi Firmware Update)

Image
*** If you are using the ESP8266, Please see this:  ESP8266 It would be great if every IoT device deployed with OTA capability with Wifimanager.  Then the IoT device would be able to change SSID & password without connecting the device to the computer to update SSID and password as well as FOTA at any time when you wanted. In this tutorial, let’s combine ESPAsync_Wifimanager and AsyncElegantOTA into a code base to become a handy tool for future IoT projects!  I have made WiFiManager & AsyncElegantOTA tutorial videos. If you don't know what they are and how they work for IoT projects, I strongly recommend you to watch these videos first. This time, I used ESPAsync_WiFiManager library, it's because WiFiManager does not work with AsyncElegnatOTA together. We have to change to ESPAsync_WiFiManager.  The main reason for this is that AsnycWiFiManager is using Asynchronous technology. Which means it can accept connections from different sources at the same time. So, while WiFi
Read more