ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

Introduction

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

When working on projects, to make them appear more advanced, we can display inspirational quotes on an OLED screen, for example as a desktop ornament, hanging decoration, or secondary screen.

This time, I’ll share how to use the ESP32/ESP8266, or any microcontroller that can connect to the internet, fully compatible with a 0.96-inch OLED screen without complex programming.

Project Resources

(1) ESP32 module (various types of internet-connected microcontrollers)

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

(2) 0.96-inch OLED screen (SSD1306, 4-pin IIC)

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

(3) Inspirational quotes API (automatically wraps for 0.96 OLED)

Example: http://api.xemowo.top/api/yan/yan.php?oled=1

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

Principle

(1) Internet-connected chip accesses API website, retrieves inspirational quotes from the API, which contains over 12,000 quotes to avoid repeating the same quote in a short period.

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

(2) Adapting to the OLED screen

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

In the code, we use a standard Chinese library of 12, allowing us to divide the screen into 4 lines, with 10 characters per line, thus displaying a total of 40 characters on the screen at once.

Therefore, we first select quotes within 40 characters from the API, and then group them into sets of 10 characters each.

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

As shown, ‘one’ displays 10 characters, and the remainder goes to ‘two’, and so on, dividing the quotes into several groups.

Although we could also group the entire sentence in the code, it greatly increases the workload. If we group it in the API, we only need to parse the JSON in the code.

(3) JSON Parsing

The content parsed from the API is in JSON format, so we need to parse the JSON to extract the required content in the code.

① First, load the built-in JSON parsing library

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

② Declare four variables for the JSON content

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

③ If the API is accessed successfully

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

Then, declare a JsonDocument object with StaticJsonDocument<500> doc

String json = http.getString(); Read API information

deserializeJson(doc, json); Deserialize JSON data

Then, we can store the json data in the four variables.

(4) OLED Display

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

For the SSD1306 4-pin OLED screen, I generally use the U8G2 library, which is easy to use and has a built-in Chinese library, allowing direct display of Chinese characters (over 3000 common characters).

Then declare the IIC hardware pins and set the U8G2 display direction R0 for normal display.

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

Set the Chinese font and start U8G2.

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

u8g2.setCursor (0, 55); Set the position of the text on the screen.

u8g2.println(four); Set the content to display.

u8g2.sendBuffer(); Upload the content to the buffer.

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

After obtaining the API information and parsing the JSON, the four segments of content are placed on each line of the OLED, with a spacing of about 15, which can be adjusted according to your screen.

(5) Internet Settings

For different chips and code platforms, this part may vary. I’ll use the ESP32 as an example.

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

Use two libraries, one for WiFi connection and the other for HTTP access.

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

Set the WiFi account password.

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

The HTTP library needs to be declared.

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

In the SETUP part, it continuously connects to WiFi, refreshing every 10 seconds (not too fast, otherwise it may refresh before connecting).

After connecting successfully, set the URL address (API address).

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

In the LOOP part, continuously access the API, with a delay of 5 seconds after each end.

Project Code

Please remember to credit the source when reposting the code.

Download link: https://wwmg.lanzouj.com/itMSC28l2gqb

#include //wifi library
#include //json parsing library
#include //http connection library
#include 
#include //u8g2oled library
#include 
#define BOARD_I2C_SCL   22
#define BOARD_I2C_SDA   21
   U8G2_SSD1306_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /* clock=*/ BOARD_I2C_SCL, /* data=*/ BOARD_I2C_SDA, /* reset=*/ U8X8_PIN_NONE);
   // All Boards without Reset of the Display
const char * ID = "XEMOWO_PC";//wifi account
const char * PASSWORD = "1SUNjiajun";//wifi password
const char*  one;//api first line content
const char*  two;//api second line content
const char*  three;//api third line content
const char*  four;//api fourth line content
String API = "";
String url_xinzhi = "";
String WeatherURL = "";

HTTPClient http;
String GitURL(String api){
  url_xinzhi =  "http://api.xemowo.top/api/yan/yan.php?oled=1";//oled=1 indicates using oled-specific format  
  return url_xinzhi;
}


void ParseWeather(String url){
      http.begin(url);
   int httpGet = http.GET();
   if(httpGet > 0)  {
    Serial.printf("HTTPGET is %d",httpGet);
        if(httpGet == HTTP_CODE_OK)    {
      StaticJsonDocument<500> doc;
          String json = http.getString();
      Serial.println("Parsing");
      Serial.println(json);
              deserializeJson(doc, json);
     one = doc["one"]; // "Life is a train heading towards a grave"
     two = doc["two"]; // "On the way, there will be many stops, and it is difficult for anyone to accompany you from start to finish."
     three = doc["three"]; // ""
     four = doc["four"]; // ""
          }    else    {
      Serial.printf("ERROR1!!");
       ParseWeather(WeatherURL);
    }
  }  else  {
    Serial.printf("ERROR2!!");

     ParseWeather(WeatherURL);
  }
  http.end();
}


void setup() {
  // put your setup code here, to run once:  
u8g2.setFont( u8g2_font_wqy12_t_gb2312 );//set to Chinese font  
u8g2.begin();
  u8g2.enableUTF8Print();
  Serial.begin(115200);
  Serial.println("Init u8g2 ....");
  Serial.println("WiFi:");
  Serial.println(ID);
  Serial.println("PASSWORD:");
  Serial.println(PASSWORD);

  WiFi.begin(ID,PASSWORD);
    u8g2.setCursor (0, 10);
    u8g2.println("Connecting to WiFi...");
    u8g2.sendBuffer();
      while(WiFi.status()!=WL_CONNECTED)  {
    delay(10000);//delay a bit, otherwise it won't connect!
    Serial.println("Connecting...");
    u8g2.setCursor (0, 10);
    u8g2.println("Connecting to WiFi...");
    u8g2.sendBuffer();
      }   
  Serial.println("Connected successfully!");  //==================WiFi Connection==================  
u8g2.clearBuffer();
  WeatherURL = GitURL(API);   
  
delay(100);
}
void loop() {
    ParseWeather(WeatherURL);
    Serial.println(WeatherURL);
    u8g2.clearBuffer();//clear the screen
    delay(10);
        u8g2.setCursor (0, 10);
    u8g2.println(one);
    u8g2.setCursor (0, 25);
    u8g2.println(two);
    u8g2.setCursor (0, 40);
    u8g2.println(three);
    u8g2.setCursor (0, 55);
    u8g2.println(four);   
    u8g2.sendBuffer();//upload content to the buffer
    delay(5000);
}

Author: Xiao Evil Demon owo, Source: Breadboard Community

END

Free application for development board

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

Submission/Promotion/Cooperation/Join Group Please scan to add WeChat

(Please indicate your intention, for joining groups please indicate city-name-industry job information)

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

Visit the exhibition for surprises!Watch the disassembly! Get development boards on-site!👇 Hurry up and sign up!

ESP32/ESP8266 Module Tutorial: Inspirational Quotes on OLED with Auto Line Breaks

Leave a Comment

×