System Booting OLED Display
In this project, we’re
creating a simple, animated boot screen using an OLED display and an Arduino.
If you've ever been curious about how those sleek loading screens work or
wanted to add a bit of visual flair to your projects.
We’ll be displaying a few
custom icons, like a network symbol and battery indicator, alongside a dynamic
progress bar that gradually fills up to show "System Booting." Using
the U8g2 library, which makes OLED display integration straightforward, this
code uses I2C communication to render icons, display text, and animate a
progress bar, giving your Arduino project a polishedstartup screen.
Code:
-----------------------------------------------------------------------
#include <Arduino.h>
#include <U8g2lib.h>
#include <Wire.h> // Required for I2C
communication
// Initialize the OLED display with SSD1306 128x64
resolution over I2C
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /*
reset=*/ U8X8_PIN_NONE);
// Icon bitmaps for various statuses
static const unsigned char image_Lock_7x8_bits[]
U8X8_PROGMEM = {0x1c, 0x22, 0x22, 0x7f, 0x7f, 0x77, 0x7f, 0x3e};
static const unsigned char
image_Bluetooth_Idle_5x8_bits[] U8X8_PROGMEM = {0x04, 0x0d, 0x16, 0x0c, 0x0c,
0x16, 0x0d, 0x04};
static const unsigned char image_network_3_bars_bits[]
U8X8_PROGMEM = {0x00, 0x70, 0x00, 0x50, 0x00, 0x50, 0x00, 0x50, 0x00, 0x57, 0x00,
0x57, 0x00, 0x57, 0x00, 0x57, 0x70, 0x57, 0x70, 0x57, 0x70, 0x57, 0x70, 0x57,
0x77, 0x57, 0x77, 0x57, 0x77, 0x77, 0x00, 0x00};
static const unsigned char image_battery_80_bits[]
U8X8_PROGMEM = {0xfe, 0xff, 0x0f, 0x01, 0x00, 0x10, 0x55, 0x55, 0x11, 0x55,
0x55, 0x71, 0x55, 0x55, 0x81, 0x55, 0x55, 0x81, 0x55, 0x55, 0x81, 0x55, 0x55,
0x81, 0x55, 0x55, 0x71, 0x55, 0x55, 0x11, 0x01, 0x00, 0x10, 0xfe, 0xff, 0x0f};
static const unsigned char image_wifi_50_bits[]
U8X8_PROGMEM = {0x80, 0x0f, 0x00, 0x60, 0x30, 0x00, 0x18, 0xc0, 0x00, 0x84,
0x0f, 0x01, 0x62, 0x30, 0x02, 0x11, 0x40, 0x04, 0x0a, 0x87, 0x02, 0xc4, 0x1f,
0x01, 0xe8, 0xb8, 0x00, 0x70, 0x77, 0x00, 0xa0, 0x2f, 0x00, 0xc0, 0x1d, 0x00,
0x80, 0x0a, 0x00, 0x00, 0x07, 0x00, 0x00, 0x02, 0x00, 0x00, 0x00, 0x00};
int progress = 0; // Progress bar position (0 - 72 for
full bar)
char buffer[32]; // Buffer to store the
formatted percentage
void setup() {
u8g2.begin(); // Initialize the OLED
display
}
void loop() {
u8g2.clearBuffer(); // Clear the display
buffer for a new frame
// Draw outer frame for the main display
area
u8g2.drawFrame(1, 15, 126, 48);
// Draw status icons (network, battery,
WiFi) at the top of the screen
u8g2.drawXBMP(2, 1, 15, 16, image_network_3_bars_bits);
u8g2.drawXBMP(103, 1, 24, 13,
image_battery_80_bits);
u8g2.drawXBMP(82, 1, 19, 16,
image_wifi_50_bits);
// Draw and fill the progress bar
u8g2.drawFrame(25, 47, 76,
10); // Progress bar outline
u8g2.drawBox(27, 49, progress,
6); // Progress fill based on 'progress' variable
// Display text labels
u8g2.setFont(u8g2_font_5x8_tr);
u8g2.drawStr(28, 45, "System
Booting");
u8g2.setFont(u8g2_font_6x13_tr);
u8g2.drawStr(42, 29, "Welcome");
// Calculate and display the progress
percentage
int percentage = (progress * 100) / 72; //
Calculate percentage of the bar
sprintf(buffer, "%d%%",
percentage); // Convert to string
u8g2.drawStr(104, 55,
buffer); // Display
formatted percentage
// Send buffer to the display to render it
u8g2.sendBuffer();
// Increment the progress bar and reset if
it exceeds the limit
progress += 1;
if (progress > 72) {
progress = 0;
}
delay(50); // Update rate for animation
}
-----------------------------------------------------------------------
Code Breakdown
Setup and Libraries
1. Libraries:
· The code includes the U8g2lib library for working
with OLED displays, specifically the SSD1306 OLED.
· It also includes Wire.h for I2C communication
with the Arduino.
2. OLED Display Initialization:
· The U8G2_SSD1306_128X64_NONAME_F_HW_I2C line initializes the OLED display object
for a 128x64 resolution screen.
· U8G2_R0 specifies the
rotation, and U8X8_PIN_NONE means no hardware reset pin is used.
Icon Definitions
3. Icon Bitmaps:
· Several icons (like lock, Bluetooth, network,
battery, and Wi-Fi) are stored as bitmaps.
· For example, image_Lock_7x8_bits is
a small icon that will show a lock symbol.
Variables
4. Progress Variable:
· progress is used to track the
width of the progress bar.
5. Buffer for Text:
· buffer is a character array
used to format the progress percentage into a string before displaying it.
setup() Function
6. Initialize Display:
· The setup() function calls u8g2.begin() to initialize the
OLED display.
loop() Function
7. Clearing the Display Buffer:
· u8g2.clearBuffer() clears the display’s
buffer, preparing it for new content.
8. Drawing the Frame and Icons:
· A large frame is drawn on the display as the
main area.
· Icons for network, battery, and Wi-Fi are drawn
at the top of the screen using drawXBMP.
9. Progress Bar and Labels:
· The progress bar’s outline is drawn with drawFrame.
· A filled section of the progress bar is drawn
based on the progress variable with drawBox.
· The label “System Booting” is displayed just
above the progress bar, while “Welcome” is displayed in the center of the main
display area.
10. Calculating and Displaying Progress Percentage:
· percentage calculates how full
the progress bar is as a percentage.
· The percentage is then converted to a string
format (e.g., "50%") and displayed in the bottom right corner.
11. Render and Update:
· sendBuffer() sends the contents of
the buffer to the display for rendering.
· The progress variable is incremented to animate the bar
filling up, and it resets back to 0 once it reaches 72 (full bar).
· delay(50) slows down the loop
to make the animation smooth.
This code sets up a small
boot screen with icons, a progress bar, and a loading message. It continuously
increments and displays the progress bar percentage, looping back to the start
when the bar fills up.
… Thank you …