ESP8266 Sensor Display, a ESP32 project

This project builds a connected display that shows the current time and weather information on a small OLED screen. The ESP8266 microcontroller fetches weather data from the internet and updates the display every few minutes, cycling between temperature and weather condition pages.

The guide includes a complete parts list, wiring diagram for connecting the OLED display to the microcontroller, and step-by-step assembly instructions. Builders will also receive the full Arduino firmware with WiFi configuration, weather API integration, and display rendering code ready to upload.

Wiring diagram

Assemble it in 3 steps

1. Leg de klokprint klaar

Leg de ESP-12F-print met het vaste OLED-scherm op een niet-geleidende ondergrond, bijvoorbeeld hout of karton. Raak de onderkant niet op metaal aan; daardoor kunnen aansluitingen elkaar per ongeluk raken.

Het kleine scherm hoort direct bij deze print; er zijn geen extra draadjes nodig voor de klok.
Sluit nog geen losse 5V- of 3,3V-voeding op willekeurige pinnen aan — een verkeerde aansluiting kan de print beschadigen.

2. Sluit de USB-kabel aan

Steek een gegevens-USB-kabel in de USB-aansluiting van de print en daarna in je computer. De USB-kabel geeft stroom aan de klok en wordt ook gebruikt om de software erop te zetten.

Gebruik een USB-kabel waarmee je normaal ook bestanden kunt overzetten; sommige dunne laadkabels geven alleen stroom.
Forceer de USB-stekker niet; als hij niet soepel past, draai je hem om.

3. Stel het wifi-netwerk van de klok in

Na het plaatsen van de software maakt de klok tijdelijk een wifi-netwerk met de naam Gorinchem-Klok-Setup. Verbind met dat netwerk met wachtwoord klokinstellen en volg de geopende instelpagina om je eigen wifi te kiezen. Daarna haalt de klok vanzelf tijd en weer voor Gorinchem op.

Na het instellen bewaart de print de wifi-gegevens en verbindt hij bij volgende keren vanzelf.
De onderste regel wisselt ongeveer elke zes seconden tussen de temperatuur en de weersbeschrijving.
De klok heeft wifi met internet nodig om de tijd en het weer bij te werken; zonder verbinding blijft het scherm wel aan, maar worden tijd en weer niet vernieuwd.

Deploy the firmware

main.cppOpen in Schematik

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <WiFiManager.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClient.h>
#include <ArduinoJson.h>
#include <Wire.h>
#include <U8g2lib.h>
#include <time.h>


// Forward declarations
void fetchWeather();
void drawClockAndWeather();

constexpr uint8_t OLED_SDA_PIN = 14;
constexpr uint8_t OLED_SCL_PIN = 12;
constexpr unsigned long WEATHER_INTERVAL_MS = 15UL * 60UL * 1000UL;
constexpr unsigned long PAGE_INTERVAL_MS = 6000UL;

U8G2_SSD1306_128X64_NONAME_F_HW_I2C display(U8G2_R0, U8X8_PIN_NONE);

String temperatureText = "weer laden...";
String weatherText = "verbinden met wifi";
unsigned long lastWeatherFetch = 0;
unsigned long lastPageChange = 0;
bool showTemperaturePage = true;

const char *weatherDescription(int code) {
  switch (code) {
    case 0: return "helder";
    case 1: case 2: return "licht bewolkt";
    case 3: return "bewolkt";
    case 45: case 48: return "mist";
    case 51: case 53: case 55: return "motregen";
    case 56: case 57: return "ijzel";
    case 61: case 63: case 65: return "regen";
    case 66: case 67: return "ijzelregen";
    case 71: case 73: case 75: case 77: return "sneeuw";
    case 80: case 81: case 82: return "buien";
    case 85: case 86: return "sneeuwbuien";
    case 95: return "onweer";
    case 96: case 99: return "onweer met hagel";
    default: return "onbekend weer";
  }
}

void fetchWeather() {
  if (WiFi.status() != WL_CONNECTED) {
    weatherText = "geen wifi";
    return;
  }

  WiFiClient client;
  HTTPClient http;
  const char *url = "http://api.open-meteo.com/v1/forecast?latitude=51.8365&longitude=4.9740&current_weather=true&timezone=Europe%2FAmsterdam";
  if (!http.begin(client, url)) {
    weatherText = "weer niet bereikbaar";
    return;
  }

  int status = http.GET();
  if (status == HTTP_CODE_OK) {
    JsonDocument document;
    DeserializationError error = deserializeJson(document, http.getStream());
    if (!error) {
      float temperature = document["current_weather"]["temperature"] | NAN;
      int code = document["current_weather"]["weathercode"] | -1;
      if (!isnan(temperature) && code >= 0) {
        temperatureText = String(temperature, 1) + " C in Gorinchem";
        weatherText = weatherDescription(code);
        lastWeatherFetch = millis();
      } else {
        weatherText = "weerdata ontbreekt";
      }
    } else {
      weatherText = "weerdata fout";
    }
  } else {
    weatherText = "weer niet bereikbaar";
  }
  http.end();
}

void drawClockAndWeather() {
  struct tm timeInfo;
  bool clockReady = getLocalTime(&timeInfo, 10);

  char timeBuffer[6] = "--:--";
  char dateBuffer[18] = "tijd instellen";
  if (clockReady) {
    strftime(timeBuffer, sizeof(timeBuffer), "%H:%M", &timeInfo);
    strftime(dateBuffer, sizeof(dateBuffer), "%a %d-%m-%Y", &timeInfo);
  }

  display.clearBuffer();
  display.setFont(u8g2_font_logisoso24_tf);
  display.drawStr(1, 25, timeBuffer);
  display.setFont(u8g2_font_6x10_tf);
  display.drawStr(2, 37, dateBuffer);
  display.drawHLine(0, 40, 128);
  display.setFont(u8g2_font_7x14_tf);

  String line = showTemperaturePage ? temperatureText : weatherText;
  int width = display.getStrWidth(line.c_str());
  if (width <= 126) {
    display.drawStr((128 - width) / 2, 58, line.c_str());
  } else {
    display.setFont(u8g2_font_6x10_tf);
    display.drawStr(1, 56, line.substring(0, 20).c_str());
  }
  display.sendBuffer();
}

void setup() {
  Wire.begin(OLED_SDA_PIN, OLED_SCL_PIN);
  display.begin();
  display.setContrast(180);
  display.clearBuffer();
  display.setFont(u8g2_font_6x10_tf);
  display.drawStr(0, 18, "Gorinchem klok");
  display.drawStr(0, 34, "wifi instellen...");
  display.sendBuffer();

  WiFiManager wifiManager;
  wifiManager.setConfigPortalTimeout(180);
  bool connected = wifiManager.autoConnect("Gorinchem-Klok-Setup", "klokinstellen");
  if (!connected) {
    ESP.restart();
  }

  configTime("CET-1CEST,M3.5.0/2,M10.5.0/3", "nl.pool.ntp.org", "pool.ntp.org");
  fetchWeather();
  lastPageChange = millis();
}

void loop() {
  unsigned long now = millis();
  if (now - lastWeatherFetch >= WEATHER_INTERVAL_MS) {
    fetchWeather();
  }
  if (now - lastPageChange >= PAGE_INTERVAL_MS) {
    showTemperaturePage = !showTemperaturePage;
    lastPageChange = now;
  }
  drawClockAndWeather();
  delay(250);
}