How to Build an ESP32 Weather Station with Clothing Advice

// Weather Station for Amsterdam
// Uses open-meteo.com (no API key required)
// Displays weather decisions on Waveshare 1.83" LCD Rev2
// Simplified "what to wear" display with full screen coverage

#include <Arduino.h>
#include <WiFi.h>
#include <HTTPClient.h>
#include <ArduinoJson.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ST7789.h>
#include <SPI.h>

// Pin definitions
#define TFT_MOSI  23
#define TFT_CLK   18
#define TFT_CS    5
#define TFT_DC    2
#define TFT_RST   4
#define TFT_BL    13

// Display resolution - Waveshare 1.83" Rev2 is 240x280
#define SCREEN_WIDTH  240
#define SCREEN_HEIGHT 280

// The ST7789 controller has a 320-row frame buffer.
// For a 280-row panel we need a row offset so the controller
// maps its internal RAM correctly to the visible pixels.
// We init with (240, 320) and apply PANEL_OFFSET to all drawing.
#define PANEL_OFFSET  20

// Left margin to avoid content being clipped by rounded display corners
#define LEFT_MARGIN   10

// WiFi credentials
const char* ssid     = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

// Open-Meteo API for Amsterdam
const char* weatherURL =
  "http://api.open-meteo.com/v1/forecast"
  "?latitude=52.3676&longitude=4.9041"
  "&current_weather=true"
  "&hourly=precipitation_probability,relativehumidity_2m"
  "&timezone=Europe%2FAmsterdam"
  "&forecast_days=1";

// Colors (RGB565)
#define COLOR_BLACK   0x0000
#define COLOR_WHITE   0xFFFF
#define COLOR_GRAY    0x8410
#define COLOR_DGRAY   0x3186
#define COLOR_YELLOW  0xFFE0
#define COLOR_CYAN    0x07FF
#define COLOR_RED     0xF800
#define COLOR_GREEN   0x07E0
#define COLOR_ORANGE  0xFD20
#define COLOR_LBLUE   0x5D9F
#define COLOR_AMBER   0xFBA0

// Create display object (software SPI)
Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST);

// Weather data structure
struct WeatherData {
  float temperature;
  float windspeed;
  int   weathercode;
  int   precipProbability;
  int   humidity;
  bool  valid;
};

WeatherData currentWeather;
unsigned long lastUpdate = 0;
const unsigned long UPDATE_INTERVAL = 600000; // 10 minutes

// WMO weather code description
String getWeatherDescription(int code) {
  if (code == 0)               return "CLEAR SKY";
  if (code <= 3)               return "PARTLY CLOUDY";
  if (code <= 49)              return "FOGGY";
  if (code <= 59)              return "DRIZZLE";
  if (code <= 69)              return "RAIN";
  if (code <= 79)              return "SNOW";
  if (code <= 82)              return "RAIN SHOWERS";
  if (code <= 86)              return "SNOW SHOWERS";
  if (code <= 99)              return "THUNDERSTORM";
  return "UNKNOWN";
}

// Items to wear
struct WearItems {
  bool jacket;
  bool umbrella;
  bool sunglasses;
  bool shorts;
  bool scarf;
};

// Returns which items are needed
WearItems getAdvice(WeatherData &w) {
  WearItems a = {false, false, false, false, false};
  if (w.temperature < 18 || w.windspeed > 40) a.jacket     = true;
  if (w.temperature < 5)                       a.scarf      = true;
  if (w.temperature > 22)                      a.shorts     = true;
  if (w.temperature > 18 && w.weathercode <= 3) a.sunglasses = true;
  if (w.precipProbability > 40)                a.umbrella   = true;
  return a;
}

// Draw a wear item row: label on left, YES/NO status on right
// GREEN = need it, RED = don't need it
void drawWearItem(int x, int y, int w, int h, String label, bool active) {
  uint16_t acol = active ? COLOR_GREEN : COLOR_RED;
  uint16_t lcol = active ? COLOR_WHITE : COLOR_GRAY;

  // Apply panel offset
  int oy = y + PANEL_OFFSET;

  // Row background
  for (int row = oy; row < oy + h; row++) {
    tft.drawFastHLine(x, row, w, COLOR_BLACK);
  }

  // Left accent bar - offset from left edge to avoid corner clipping
  tft.fillRect(x + LEFT_MARGIN, oy + 2, 4, h - 4, acol);

  // Label text - offset from left edge
  tft.setTextSize(2);
  tft.setTextColor(lcol);
  tft.setCursor(x + LEFT_MARGIN + 12, oy + (h - 16) / 2);
  tft.print(label);

  // Status indicator on right
  String status = active ? "YES" : "NO";
  tft.setTextSize(2);
  tft.setTextColor(acol);
  int sw = status.length() * 12;
  tft.setCursor(x + w - sw - 8, oy + (h - 16) / 2);
  tft.print(status);

  // Divider line at bottom of row
  tft.drawFastHLine(x, oy + h - 1, w, COLOR_DGRAY);
}

// Draw large retro temperature text (with panel offset)
// x is now offset from LEFT_MARGIN to avoid corner clipping
void drawBigTemp(int x, int y, float temp) {
  int oy = y + PANEL_OFFSET;
  int tempInt = (int)round(temp);
  String tempStr = String(tempInt);

  // Shadow effect
  tft.setTextSize(5);
  tft.setTextColor(COLOR_DGRAY);
  tft.setCursor(x + 2, oy + 2);
  tft.print(tempStr);

  // Main text
  tft.setTextColor(COLOR_WHITE);
  tft.setCursor(x, oy);
  tft.print(tempStr);

  // Degree + C
  int tw = tempStr.length() * 30;
  tft.setTextSize(2);
  tft.setTextColor(COLOR_GRAY);
  tft.setCursor(x + tw + 4, oy + 2);
  tft.print("oC");
}

void drawUI(WeatherData &w) {
  // Full screen black fill (entire controller buffer)
  tft.fillScreen(COLOR_BLACK);

  // ========== CITY + WEATHER INFO ==========
  // "AMSTERDAM" label - offset from left to avoid corner clipping
  tft.setTextColor(COLOR_AMBER);
  tft.setTextSize(1);
  tft.setCursor(LEFT_MARGIN + 2, 6 + PANEL_OFFSET);
  tft.print("AMSTERDAM, NL");

  // Weather description on same line, right side
  String desc = getWeatherDescription(w.weathercode);
  if (desc.length() > 12) desc = desc.substring(0, 12);
  tft.setTextColor(COLOR_GRAY);
  tft.setTextSize(1);
  int descX = SCREEN_WIDTH - (desc.length() * 6) - 8;
  tft.setCursor(descX, 6 + PANEL_OFFSET);
  tft.print(desc);

  // Thin separator
  tft.drawFastHLine(0, 18 + PANEL_OFFSET, SCREEN_WIDTH, COLOR_DGRAY);

  // ========== TEMPERATURE ==========
  // Moved right by LEFT_MARGIN to avoid rounded corner clipping
  drawBigTemp(LEFT_MARGIN + 4, 24, w.temperature);

  // Wind + Rain info to the right of temperature
  tft.setTextColor(COLOR_DGRAY);
  tft.setTextSize(1);
  tft.setCursor(155, 26 + PANEL_OFFSET);
  tft.print("WIND:");
  tft.setTextColor(COLOR_CYAN);
  tft.setCursor(155, 38 + PANEL_OFFSET);
  tft.print(String((int)w.windspeed) + " KM/H");

  tft.setTextColor(COLOR_DGRAY);
  tft.setTextSize(1);
  tft.setCursor(155, 54 + PANEL_OFFSET);
  tft.print("RAIN:");
  tft.setTextColor(COLOR_LBLUE);
  tft.setCursor(155, 66 + PANEL_OFFSET);
  tft.print(String(w.precipProbability) + "%");

  // ========== DIVIDER ==========
  tft.drawFastHLine(0, 90 + PANEL_OFFSET, SCREEN_WIDTH, COLOR_AMBER);
  tft.drawFastHLine(0, 91 + PANEL_OFFSET, SCREEN_WIDTH, COLOR_DGRAY);

  // ========== WEAR TODAY HEADER ==========
  tft.setTextSize(1);
  tft.setTextColor(COLOR_AMBER);
  tft.setCursor(LEFT_MARGIN + 2, 96 + PANEL_OFFSET);
  tft.print("WEAR TODAY?");
  tft.drawFastHLine(0, 108 + PANEL_OFFSET, SCREEN_WIDTH, COLOR_DGRAY);

  // ========== WEAR ITEM ROWS ==========
  WearItems adv = getAdvice(w);

  struct WearRow {
    bool    active;
    String  label;
  };

  WearRow rows[5] = {
    { adv.jacket,      "JACKET"     },
    { adv.umbrella,    "UMBRELLA"   },
    { adv.sunglasses,  "SUNGLASSES" },
    { adv.shorts,      "SHORTS"     },
    { adv.scarf,       "SCARF"      },
  };

  // 5 rows from y=109 to y=SCREEN_HEIGHT, covering every visible pixel
  int rowAreaTop    = 109;
  int rowAreaBottom = SCREEN_HEIGHT;
  int rowAreaHeight = rowAreaBottom - rowAreaTop; // 171px
  int rowH          = rowAreaHeight / 5;          // ~34px each

  for (int i = 0; i < 5; i++) {
    int ry = rowAreaTop + i * rowH;
    // Last row stretches all the way to the very last visible pixel row
    int rh = (i == 4) ? (rowAreaBottom - ry) : rowH;
    drawWearItem(0, ry, SCREEN_WIDTH, rh, rows[i].label, rows[i].active);
  }
}

void drawError(String msg) {
  tft.fillScreen(COLOR_BLACK);
  tft.drawRect(8,   100 + PANEL_OFFSET, SCREEN_WIDTH - 16, 80, COLOR_RED);
  tft.drawRect(9,   101 + PANEL_OFFSET, SCREEN_WIDTH - 18, 78, COLOR_RED);
  tft.setTextColor(COLOR_RED);
  tft.setTextSize(2);
  tft.setCursor(LEFT_MARGIN + 4, 110 + PANEL_OFFSET);
  tft.print("!! ERROR !!");
  tft.setTextSize(1);
  tft.setTextColor(COLOR_GRAY);
  tft.setCursor(LEFT_MARGIN + 4, 132 + PANEL_OFFSET);
  tft.print(msg);
}

void drawConnecting() {
  tft.fillScreen(COLOR_BLACK);
  tft.drawRect(8,   110 + PANEL_OFFSET, SCREEN_WIDTH - 16, 60, COLOR_DGRAY);
  tft.drawRect(9,   111 + PANEL_OFFSET, SCREEN_WIDTH - 18, 58, COLOR_DGRAY);
  tft.setTextColor(COLOR_AMBER);
  tft.setTextSize(2);
  tft.setCursor(18, 120 + PANEL_OFFSET);
  tft.print("CONNECTING...");
  tft.setTextSize(1);
  tft.setTextColor(COLOR_GRAY);
  tft.setCursor(18, 144 + PANEL_OFFSET);
  tft.print(ssid);
}

void drawSplash() {
  tft.fillScreen(COLOR_BLACK);

  // Simple centered splash - no bars, just text blocks
  tft.setTextColor(COLOR_AMBER);
  tft.setTextSize(3);
  // Center "WEATHER" horizontally: 7 chars * 18px = 126px wide
  tft.setCursor((SCREEN_WIDTH - 126) / 2, 80 + PANEL_OFFSET);
  tft.print("WEATHER");

  tft.setTextColor(COLOR_DGRAY);
  tft.setTextSize(3);
  // Center "STATION"
  tft.setCursor((SCREEN_WIDTH - 126) / 2, 112 + PANEL_OFFSET);
  tft.print("STATION");

  // Thin separator line
  tft.drawFastHLine(40, 145 + PANEL_OFFSET, SCREEN_WIDTH - 80, COLOR_AMBER);

  tft.setTextColor(COLOR_GRAY);
  tft.setTextSize(1);
  tft.setCursor(64, 154 + PANEL_OFFSET);
  tft.print("AMSTERDAM, NL");

  tft.setTextColor(COLOR_DGRAY);
  tft.setTextSize(1);
  tft.setCursor(40, 168 + PANEL_OFFSET);
  tft.print("OPEN-METEO EDITION");
}

void drawFetching() {
  // Only overwrite a small status strip at bottom of visible area
  tft.fillRect(0, SCREEN_HEIGHT - 16 + PANEL_OFFSET, SCREEN_WIDTH, 16, COLOR_DGRAY);
  tft.setTextColor(COLOR_AMBER);
  tft.setTextSize(1);
  tft.setCursor(4, SCREEN_HEIGHT - 11 + PANEL_OFFSET);
  tft.print("FETCHING WEATHER...");
}

bool fetchWeather() {
  if (WiFi.status() != WL_CONNECTED) {
    Serial.println("WiFi not connected");
    return false;
  }

  HTTPClient http;
  http.begin(weatherURL);
  http.setTimeout(10000);
  int httpCode = http.GET();

  if (httpCode != 200) {
    Serial.print("HTTP error: ");
    Serial.println(httpCode);
    http.end();
    return false;
  }

  String payload = http.getString();
  http.end();

  DynamicJsonDocument doc(8192);
  DeserializationError err = deserializeJson(doc, payload);
  if (err) {
    Serial.print("JSON error: ");
    Serial.println(err.c_str());
    return false;
  }

  JsonObject cw = doc["current_weather"];
  currentWeather.temperature  = cw["temperature"].as<float>();
  currentWeather.windspeed    = cw["windspeed"].as<float>();
  currentWeather.weathercode  = cw["weathercode"].as<int>();
  currentWeather.valid        = true;

  JsonArray precipArr = doc["hourly"]["precipitation_probability"];
  JsonArray humidArr  = doc["hourly"]["relativehumidity_2m"];

  currentWeather.precipProbability = precipArr[0].as<int>();
  currentWeather.humidity          = humidArr[0].as<int>();

  // Use hour 8 (8am) as morning reference
  if (!precipArr[8].isNull()) {
    currentWeather.precipProbability = precipArr[8].as<int>();
  }
  if (!humidArr[8].isNull()) {
    currentWeather.humidity = humidArr[8].as<int>();
  }

  Serial.print("Temp: ");    Serial.println(currentWeather.temperature);
  Serial.print("Wind: ");    Serial.println(currentWeather.windspeed);
  Serial.print("Code: ");    Serial.println(currentWeather.weathercode);
  Serial.print("Precip%: "); Serial.println(currentWeather.precipProbability);

  return true;
}

void setup() {
  Serial.begin(115200);
  delay(100);

  // Backlight ON
  pinMode(TFT_BL, OUTPUT);
  digitalWrite(TFT_BL, HIGH);

  // Init display with full controller buffer height (320)
  // Panel is 280px tall at offset of PANEL_OFFSET (20) rows inside the controller.
  tft.init(240, 320);
  tft.setRotation(0);

  // Fill the entire controller frame buffer black (all 320 rows)
  tft.fillScreen(COLOR_BLACK);

  // ---- Splash Screen ----
  drawSplash();
  delay(1800);

  // ---- Connect WiFi ----
  drawConnecting();
  WiFi.begin(ssid, password);
  WiFi.setAutoReconnect(true);

  int attempts = 0;
  while (WiFi.status() != WL_CONNECTED && attempts < 40) {
    delay(500);
    Serial.print(".");
    tft.setTextColor(COLOR_DGRAY);
    tft.setTextSize(2);
    int dotX = 18 + (attempts % 18) * 8;
    tft.fillRect(18, 162 + PANEL_OFFSET, SCREEN_WIDTH - 36, 14, COLOR_BLACK);
    tft.setCursor(dotX, 162 + PANEL_OFFSET);
    tft.print(".");
    attempts++;
  }

  if (WiFi.status() != WL_CONNECTED) {
    Serial.println("
WiFi failed");
    drawError("WIFI CONNECTION FAILED");
    currentWeather.valid = false;
    return;
  }

  Serial.println("
WiFi connected: " + WiFi.localIP().toString());

  // Fetch initial weather
  drawFetching();
  delay(300);
  if (fetchWeather()) {
    lastUpdate = millis();
    drawUI(currentWeather);
  } else {
    drawError("COULD NOT FETCH DATA");
  }
}

void loop() {
  // Reconnect WiFi if needed
  if (WiFi.status() != WL_CONNECTED) {
    Serial.println("WiFi lost, reconnecting...");
    WiFi.reconnect();
    delay(5000);
    return;
  }

  unsigned long now = millis();
  if (now - lastUpdate >= UPDATE_INTERVAL || lastUpdate == 0) {
    Serial.println("Updating weather...");
    drawFetching();
    if (fetchWeather()) {
      lastUpdate = now;
      drawUI(currentWeather);
    } else {
      if (currentWeather.valid) {
        drawUI(currentWeather);
        // Show stale data warning - small text at very top, no bar
        tft.fillRect(0, 0 + PANEL_OFFSET, SCREEN_WIDTH, 14, COLOR_BLACK);
        tft.setTextColor(COLOR_RED);
        tft.setTextSize(1);
        tft.setCursor(LEFT_MARGIN + 2, 4 + PANEL_OFFSET);
        tft.print("STALE - UPDATE FAILED");
      } else {
        drawError("WEATHER FETCH FAILED");
      }
    }
  }

  delay(5000);
}

// Run this and build other cool things at schematik.io