Cirkit Designer LogoCirkit DesignerYour all-in-one circuit design IDE Launch Cirkit Designer App

Arduino Leonardo Controlled OLED Display with Pushbutton Interaction

View and Edit Project In Cirkit DesignerImage of Arduino Leonardo Controlled OLED Display with Pushbutton Interaction

Circuit Documentation

Summary of the Circuit

The circuit in question consists of an Arduino Leonardo microcontroller, a pushbutton, a resistor, and a 0.96" OLED display. The Arduino Leonardo serves as the central processing unit, controlling the OLED display and reading the state of the pushbutton. The resistor is used to provide a pull-down for the pushbutton, ensuring a stable logic level when the button is not pressed. The OLED display is interfaced with the Arduino via I2C communication, using the SDA and SCL lines for data transfer.

Component List

Pushbutton

Resistor

0.96" OLED

Arduino Leonardo (Rev3b)

Wiring Details

Pushbutton

Resistor

0.96" OLED

Arduino Leonardo (Rev3b)

Documented Code

#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_SH1106_128X64_NONAME_F_SW_I2C u8g2(U8G2_R0, /* clock=*/SCL, /* data=*/SDA, /* reset=*/U8X8_PIN_NONE); 

int button = 10; // Button connected to D10
int menu = 1; // Variable to track the menu state

void setup() {
  u8g2.begin(); // Initialize the OLED display
  pinMode(button, INPUT); // Set the button pin as input
  Serial.begin(9600); // Start serial communication
  drawOverview(u8g2); // Draw the initial screen
}

void loop() {
  int pinState = digitalRead(button); // Read the state of the button

  if (pinState == HIGH) { // If the button is pressed
    menu++; // Increment the menu state
    if (menu > 2) {
      menu = 1; // Reset the menu state if it exceeds the number of menus
    }

    // Update the display based on the current menu state
    if (menu == 1) {
      drawOverview(u8g2);
    }
    if (menu == 2) {
      drawPlayerStats(u8g2);
    }
    delay(500); // Debounce delay
  }
}

// Function to draw the overview screen on the OLED
void drawOverview(U8G2 & u8g2) {
  u8g2.clearBuffer();
  u8g2.setFont(u8g2_font_ncenB08_tr);
  u8g2.drawStr(10, 20, "current speed:");
  u8g2.drawStr(10, 35, "12 km/h");
  
  u8g2.setFont(u8g2_font_baby_tr);
  u8g2.drawStr(10, 55, "EXP:");
  u8g2.drawFrame(10, 60, 100, 4);
  u8g2.drawBox(10, 60, 30, 4);
  
  u8g2.sendBuffer();
}

// Function to draw the player stats screen on the OLED
void drawPlayerStats(U8G2 & u8g2) {
  u8g2.clearBuffer();
  u8g2.setFont(u8g2_font_baby_tr);
  u8g2.drawStr(10, 20, "Logged in as:");
  u8g2.drawStr(70, 20, "DasSaffe");
  u8g2.drawStr(10, 30, "Profile:");
  u8g2.drawStr(70, 30, "Cycling");
  u8g2.drawStr(10, 40, "Connection:");
  u8g2.drawStr(70, 40, "connected");
  u8g2.sendBuffer();
}

This code is responsible for controlling the OLED display and reading the state of the pushbutton. It includes two main functions for drawing on the display: drawOverview and drawPlayerStats. The loop function checks the state of the pushbutton and updates the display accordingly.