Stasiun Cuaca Rumah Berbasis NodeMCU ESP8266 dan BME280 dengan WebSocket

Skema & Diagram Sirkuit

Skema Rangkaian NodeMCU dan BME280

Rangkaian utama terdiri dari NodeMCU ESP8266 V1.0 berbasis ESP-12E dan satu sensor SparkFun Atmospheric Sensor Breakout BME280. Komunikasi sensor menggunakan protokol I2C sehingga hanya diperlukan dua jalur komunikasi utama, yaitu SDA dan SCL, selain VCC dan GND.

1. Koneksi BME280 ke NodeMCU ESP8266

Koneksi tersebut mengikuti keterangan langsung pembuat proyek: VIN to 3v, GRD to grd, SCL to D1, SDA to D2. Perhatikan bahwa pembuat proyek menggunakan SparkFun BME280 dan secara khusus menyebutkan bahwa modul yang digunakan bukan Adafruit BME280.

2. Sistem Catu Daya

• NodeMCU: Dapat menggunakan USB 5V melalui konektor Micro USB.
• BME280 VIN: Terhubung ke pin 3V NodeMCU sesuai dokumentasi pembuat proyek.
• GND sensor: Harus terhubung ke GND NodeMCU sebagai ground bersama.

Pastikan tegangan VIN sesuai dengan spesifikasi breakout BME280 yang digunakan. Jangan menghubungkan pin 3.3V sensor ke tegangan yang melebihi batas operasinya.

3. Arsitektur Komunikasi dan Server

4. Jalur Data Sensor ke Dashboard

1. BME280 mengukur temperatur, kelembapan, dan tekanan atmosfer.
2. NodeMCU membaca data menggunakan library BME280I2C.
3. NodeMCU menghitung dew point menggunakan fungsi bme.dew().
4. NodeMCU mengubah hasil pembacaan menjadi String.
5. WebSocket mengirimkan data setiap satu detik ke browser.
6. JavaScript memperbarui elemen dashboard berdasarkan kode pesan 1 sampai 5.

5. Jalur Data ke ThingSpeak

1. NodeMCU membuat koneksi TCP ke api.thingspeak.com pada port 80.
2. Data dikirim melalui HTTP POST menggunakan Write API Key.
3. Field 1 menyimpan temperatur.
4. Field 2 menyimpan kelembapan udara.
5. Field 3 menyimpan dew point.
6. Field 4 menyimpan tekanan atmosfer.
7. Pengiriman diatur pada interval 60 detik.

6. Diagram Alur Sistem

Sensor BME280 → I2C → NodeMCU ESP8266 → WebSocket Server → Dashboard Browser. Secara paralel, NodeMCU mengirim data melalui Wi-Fi ke ThingSpeak untuk penyimpanan historis dan menampilkan grafik melalui halaman history.html.

Catatan: Proyek menyediakan satu gambar diagram wiring pada bagian Schematics. Foto utama proyek juga tersedia melalui thumbnail Hackster. Tidak ada foto perakitan tambahan yang dapat diidentifikasi sebagai attachment proyek pada hasil ekstraksi halaman.

Kode Program

Kode Arduino Lengkap: Weather_Station_W4U

Kode berikut merupakan sketch Arduino yang dipublikasikan oleh Scott Wilson pada proyek Hackster.io. Program menjalankan pembacaan sensor BME280, dashboard HTTP, komunikasi WebSocket, pengiriman data ke ThingSpeak, HTTP firmware updater, serta Arduino OTA. Nilai SSID, password Wi-Fi, API Key, dan Channel ThingSpeak harus diganti dengan kredensial masing-masing.

/* Home Weather Station
   Connect to a WiFi network and provide a web server on it so show Temperature, Humidity, Dew Point, Pressure, and Uptime as well as
   a forecast widget from weatherforyou.com.
   Refactored and added to for 4 readings by Scott Wilson 03-25-2017
   Arduino 1.6.12 on Windows 10 64-bit compiled: 03-25-2017 by Scott Wilson
   Sketch is running on a NodeMCU ESP-12E reading a BME280 sensor.
   Connect to http://ip:8890/update for webpage updater.
   Can be flashed OTA or http updater.
   Send all sensor readings to Thingspeak.com once every minute.
   History.html is hosted on another server.
   Webpage auto refreshes every 6 hours to update the forecast widget.
   I am using this to display the page on a tablet 24/7.
   BME280 connection: VIN to 3v, GRD to grd, SCL to D1, SDA to D2.
   Forward ports 8888 - 8890 to this ip in your router to access remotely.
*/

#include <ESP8266HTTPUpdateServer.h>
#include <ArduinoOTA.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <BME280I2C.h>
#include <FS.h>
#include <WebSocketsServer.h>

// FUNCTION DECLARATION
char *getipstr(void);
void setupAP(void);

// CONSTANTS
const char* host = "esp8266-weather";
const char* update_path = "/update";
const char* update_username = "admin";
const char* update_password = "password";
const char *ssid = "ssid";
const char *password = "password";

// ThingSpeak
char thingSpeakAddress[] = "api.thingspeak.com";
String APIKey = "YOUR-API-KEY";
const int updateThingSpeakInterval = 60 * 1000;
long lastConnectionTime = 0;
boolean lastConnected = false;
WiFiClient client;

// BME280
BME280I2C bme;
bool metric = false;
String temp_str;
String humid_str;
String pres_str;
String dew_str;

// HTTP and WebSocket servers
ESP8266WebServer server(8888);
ESP8266WebServer httpServer(8890);
ESP8266HTTPUpdateServer httpUpdater;
WebSocketsServer webSocket = WebSocketsServer(8889);

uint32_t time_poll = 0;
uint32_t bme_poll = 0;

// HTTP START
const char HEAD_BEGIN[] PROGMEM = "\\
<!DOCTYPE html>\r\n\\
<html lang=\"en\">\r\n\\
<head>\r\n\\
<meta charset=\"utf-8\"/>\r\n\\
<meta http-equiv=\"refresh\" content=\"21600\">\r\n\\
";

const char WEBSOCKET_SCRIPT[] PROGMEM = R"rawliteral(
<script language="javascript" type="text/javascript">
var connection = new WebSocket('ws://'+location.hostname+':8889/', ['arduino']);
connection.onmessage = function (e) {
  console.log('Server: ', e.data);
  if(e.data.slice(0,2)=="1:") document.getElementById('ActUptime').value = e.data.slice(2);
  if(e.data.slice(0,2)=="2:") document.getElementById('ActTemp').value = e.data.slice(2);
  if(e.data.slice(0,2)=="3:") document.getElementById('ActHum').value = e.data.slice(2);
  if(e.data.slice(0,2)=="4:") document.getElementById('ActDew').value = e.data.slice(2);
  if(e.data.slice(0,2)=="5:") document.getElementById('ActPres').value = e.data.slice(2);
};
connection.onclose = function(){
  console.log('closed!');
  check();
}
function check(){
  if(!connection || connection.readyState == 3){
    setInterval(check, 5000);
  }
}
</script>
)rawliteral";

const char STYLE[] PROGMEM = R"rawliteral(
<style>
body { background-color: #000000; font-family: Arial, Helvetica, Sans-Serif; Color: #ffffff; }
a { text-decoration: none; color: #d3d3d3; }
</style>
)rawliteral";

const char TITLE[] PROGMEM = "<title>[TITLE]</title>\r\n";
const char HEAD_END[] PROGMEM = "</head>\r\n";

// WEBPAGE HTTP ROOT
void http_root() {
  String sResponse;

  sResponse = FPSTR(HEAD_BEGIN);
  sResponse += FPSTR(WEBSOCKET_SCRIPT);
  sResponse.replace("[IP]", getipstr());
  sResponse += FPSTR(TITLE);
  sResponse.replace("[TITLE]", "Home Weather Station");
  sResponse += FPSTR(STYLE);
  sResponse += FPSTR(HEAD_END);

  sResponse += R"rawliteral(
<body>
<center>
<table>
<tbody>
<tr>
<td colspan="3" align="center">
<a href="history.html" target="_new">Temperature<br></a>
<font size="+5"><output name="ActTemp" id="ActTemp"></output> &degF</font><p>
</td>
</tr>
<tr>
<td align="left"><a href="history.html" target="_new">Humidity<br></a>
<font size="+2"><output name="ActHum" id="ActHum"></output> &#37</font><p></td>
<td align="center"><a href="history.html" target="_new">Dew Point<br></a>
<font size="+2"><output name="ActDew" id="ActDew"></output> &degF</font><p></td>
<td align="right"><a href="history.html" target="_new">Pressure<br></a>
<font size="+2"><output name="ActPres" id="ActPres"></output> in</font><p></td>
</tr>
<tr>
<td colspan="3" align="center">Uptime: <output name="ActUptime" id="ActUptime"></output><p></td>
</tr>
<tr width="250">
<td colspan="3">
<div style='width: 300px; overflow: auto;'>
<a href="https://www.weatherforyou.com/weather/state/city.html" target="_new">
<img src="https://www.weatherforyou.net/fcgi-bin/hw3/hw3.cgi?config=png&forecast=zone&alt=hwizone7day5&place=city&state=state&country=us&hwvbg=black&hwvtc=white&hwvdisplay=&daysonly=2&maxdays=7" width="500" height="200" border="0" alt="City, State, weather forecast">
</a>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
)rawliteral";

  server.send(200, "text/html", sResponse);
  Serial.println("Client disonnected");
}

// WEBPAGE HTTP HISTORY
void http_history() {
  String sResponse;

  sResponse = FPSTR(HEAD_BEGIN);
  sResponse += FPSTR(HEAD_END);

  sResponse += R"rawliteral(
<body>
<center>
<button type="button" onclick="javascript:window.close()">Close Window</button><br>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/YOUR_CHANNEL/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&title=Temperature&type=line"></iframe><br>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/YOUR_CHANNEL/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&title=Humidity&type=line"></iframe><br>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/YOUR_CHANNEL/charts/3?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&title=Dew+Point&type=line"></iframe><br>
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/YOUR_CHANNEL/charts/4?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&title=Pressure&type=line"></iframe>
</center>
</body>
</html>
)rawliteral";

  server.send(200, "text/html", sResponse);
  Serial.println("Client disonnected");
}

// WebSocket Event
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  switch (type) {
    case WStype_DISCONNECTED:
      Serial.printf("[%u] Disconnected!\n", num);
      webSocket.disconnect(num);
      break;

    case WStype_CONNECTED:
      {
        IPAddress ip = webSocket.remoteIP(num);
        Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);
        webSocket.sendTXT(num, "Connected");
      }
      break;

    case WStype_TEXT:
      Serial.printf("[%u] got Text: %s\n", num, payload);
      break;

    case WStype_BIN:
      Serial.printf("[%u] got binary length: %u\n", num, length);
      hexdump(payload, length);
      break;

    default:
      Serial.println("webSocketEvent else");
  }
}

// Handle Not Found
void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\n Method: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\n Arguments: ";
  message += server.args();
  message += "\n";

  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }

  server.send(404, "text/plain", message);
}

// BME280
void bmeSample() {
  if (bme_poll <= millis()) {
    float temp(NAN), hum(NAN), pres(NAN);
    float dewPoint = bme.dew(metric);
    uint8_t pressureUnit(2);
    bme.read(pres, temp, hum, metric, pressureUnit);

    temp_str = (temp);
    humid_str = (hum);
    pres_str = (pres);
    dew_str = (dewPoint);

    Serial.print("Temperature"); Serial.println(": " + temp_str + "F");
    Serial.print("Humidity"); Serial.println(": " + humid_str + "%");
    Serial.print("Dew Point"); Serial.println(": " + dew_str + "F");
    Serial.print("Pressure"); Serial.println(": " + pres_str + "in");

    bme_poll = millis() + 1000;
  }
}

// ThingSpeak
void updateThingSpeak(String tsData) {
  if (client.connect(thingSpeakAddress, 80)) {
    client.print("POST /update HTTP/1.1\n");
    client.print("Host: api.thingspeak.com\n");
    client.print("Connection: close\n");
    client.print("X-THINGSPEAKAPIKEY: " + APIKey + "\n");
    client.print("Content-Type: application/x-www-form-urlencoded\n");
    client.print("Content-Length: ");
    client.print(tsData.length());
    client.print("\n\n");
    client.print(tsData);
    lastConnectionTime = millis();

    if (client.connected()) {
      Serial.println("Connecting to ThingSpeak...");
      Serial.println();
    }
  }
}

void thingSpeak() {
  if (client.available()) {
    char c = client.read();
    Serial.print(c);
  }

  if (!client.connected() && lastConnected) {
    Serial.println("...disconnected");
    Serial.println();
    client.stop();
  }

  if (!client.connected() && (millis() - lastConnectionTime > updateThingSpeakInterval)) {
    updateThingSpeak("field1=" + temp_str + "&field2=" + humid_str + "&field3=" + dew_str + "&field4=" + pres_str);
  }

  lastConnected = client.connected();
}

// SETUP
void setup(void) {
  Serial.begin(115200);

  Serial.println("Trying wifi config");
  WiFi.begin(ssid, password);
  uint8_t i = 0;
  while (WiFi.status() != WL_CONNECTED && i < 10) {
    delay(500);
    Serial.print(".");
    i++;
  }

  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  Serial.print("Own MAC: ");
  Serial.println(WiFi.macAddress());

  // HTTP updater
  MDNS.begin(host);
  httpUpdater.setup(&httpServer, update_path, update_username, update_password);
  httpServer.begin();
  MDNS.addService("http", "tcp", 8890);

  Serial.print("Use this URL to connect: ");
  Serial.print("http://");
  Serial.print(WiFi.localIP());
  Serial.print(":8890");
  Serial.println("/update");

  // Arduino OTA
  ArduinoOTA.onStart([]() {
    Serial.println("Start");
  });

  ArduinoOTA.onEnd([]() {
    Serial.println("\n End");
  });

  ArduinoOTA.onProgress([](unsigned int progress, unsigned int total) {
    Serial.printf("Progress: %u%%\r", (progress / (total / 100)));
  });

  ArduinoOTA.onError([](ota_error_t error) {
    Serial.printf("Error[%u]: ", error);
    if (error == OTA_AUTH_ERROR) Serial.println("Auth Failed");
    else if (error == OTA_BEGIN_ERROR) Serial.println("Begin Failed");
    else if (error == OTA_CONNECT_ERROR) Serial.println("Connect Failed");
    else if (error == OTA_RECEIVE_ERROR) Serial.println("Receive Failed");
    else if (error == OTA_END_ERROR) Serial.println("End Failed");
  });

  ArduinoOTA.begin();

  SPIFFS.begin();
  // SPIFFS.format(); // only uncomment if you want to format SPIFFS

  // SERVER HANDLES
  server.on("/", http_root);
  server.on("/history.html", http_history);
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");

  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
  Serial.println("Socket server started");

  Serial.println(F("BME280 test"));
  if (!bme.begin()) {
    Serial.println("Could not find a valid BME280 sensor, check wiring!");
    delay(1000);
  }
}

// LOOP
void loop(void) {
  server.handleClient();
  ArduinoOTA.handle();
  httpServer.handleClient();
  webSocket.loop();
  thingSpeak();
  bmeSample();

  if (time_poll <= millis()) {
    int sec = millis() / 1000;
    int min = sec / 60;
    int hr = min / 60;
    int day = hr / 24;
    char Uptime[15];

    sprintf(Uptime, "1:%02dd:%02dh:%02dm:%02ds", day, hr % 24, min % 60, sec % 60);
    webSocket.broadcastTXT(Uptime);
    webSocket.broadcastTXT("2:" + temp_str);
    webSocket.broadcastTXT("3:" + humid_str);
    webSocket.broadcastTXT("4:" + dew_str);
    webSocket.broadcastTXT("5:" + pres_str);

    time_poll = millis() + 1000;
  }
}

char *getipstr(void) {
  static char cOut[20];
  IPAddress ip = WiFi.localIP();
  sprintf(cOut, "%d.%d.%d.%d", ip[0], ip[1], ip[2], ip[3]);
  return cOut;
}

Catatan Penting tentang Kode Asli

• Kredensial Wi-Fi: Ganti SSID dan password bawaan pada source code.
• ThingSpeak API Key: Ganti YOUR-API-KEY dan YOUR_CHANNEL dengan nilai channel milik sendiri.
• Keamanan updater: Username admin dan password password adalah kredensial default pada contoh proyek, bukan konfigurasi aman untuk perangkat yang dapat diakses melalui jaringan.
• Zona waktu dan satuan: Variabel metric bernilai false. Perhatikan satuan Fahrenheit dan inch of mercury yang digunakan oleh tampilan sumber.
• WebSocket: Server menggunakan port 8889 dan mengirim data setiap satu detik.
• ThingSpeak: Data dikirim setiap 60 detik.
• HTTP dan OTA: Program menyediakan dua mekanisme pembaruan firmware, yaitu HTTP Update Server dan Arduino OTA.
• Catatan struktur: Kode di atas mempertahankan fungsi utama sketch sumber, dengan bagian HTML yang ditulis menggunakan raw string literal agar struktur HTML dan JavaScript lebih mudah dibaca. Sesuaikan sintaks string dan karakter khusus jika menggunakan versi compiler ESP8266 yang lebih lama.

Referensi Proyek Asli

Nama sketch: Weather_Station_W4U.

Pembuat: Scott Wilson (S Wilson).

Lisensi proyek: GPL3+.

Dokumentasi: https://www.hackster.io/s-wilson/nodemcu-home-weather-station-with-websocket-7c77a3

Library WebSocket yang dirujuk: https://github.com/Links2004/arduinoWebSockets

Platform penyimpanan data: https://thingspeak.com/

Platform pembuatan aplikasi Android: http://ai2.appinventor.mit.edu/