ESP32 Plot Chart Web Server

Halo, kembali lagi bersama saya melanjutkan proyek ESP32, kali ini temanya visualisasi data, dibuat dalam chart.

Kali ini, sumbernya dari siini:

Disini saya akan bercerita mengenai masalah-masalah saya ketika mempraktikkan percobaan dari sumber tersebut supaya pembaca yang mengalami hal yang sama dapat membaca tulisan ini dan tidak kebingungan seperti saya.

Ternyata, kita harus melakkan beberapa instalasi terlebih dahulu.
1. Install ESP32 di Arduino IDE (kalau sudah melakukan proyek proyek ESP32 sebelumnya, langkah ini tidak perlu dilakukan)
2. Install plugin Filesystem Uploader
3. Install 2 library, yaitu ESPAsyncWebServer dan AsyncTCP.

Oke, jadi sejak langkah ke dua saya mulai ada masalah.
Langkah kedua ini install plugin.

Caranya bisa dilihat disini:

Saya bingung harus memasukkan file esp32fs.jar nya di mana, haha!
Menurut instruksi, harus dimasukkan ke dalam folder "arduino-<version>", dan bahkan saya nggak punya nama folder semacam itu!

Yang membingungkannya lagi, folder tools, jika tidak ada di dalam folder arduino-<version> tersebut, harus dibuat sendiri. Lalu saya menemukan folder bernama ArduinoData, dan membuat folder tools dan memasukkan file esp32fs.jar disana. Ternyata masih tidak bisa!

Akhirnya, saya menemukan folder yang tepat bernama "Arduino" di folder Documents, yang akhirnya berhasil.


Kemudian, saya membuka serial monitor dan klik tombol EN pada ESP32, dan muncul IP addressnya. Namun, ketika saya buka, muncul tulisan error 404. Apa lagi yang salah?

Ternyata, saya  lupa belum mengupload file HTML nya, yang SPIFFS. Nah, awalnya, saat sketch file tersebut akan diupload terjadi failed berkali-kali, yang katanya unable to find COM3. Lalu akhirnya saya memindahkan kabel USB terhubung ke ESP32 dari sisi kanan ke sisi kiri laptop, dan akhirnya, berhasil diupload.

Selanjutnya, program dijalankan, dan berhasil!

Nah, berhubung saya menggunakan DHT11 alih-alih BME280, jadi terdapat beberapa bagian dari kode program yang diganti.
Kode program yang saya gunakan:

#ifdef ESP32
  #include <WiFi.h>
  #include <ESPAsyncWebServer.h>
  #include <SPIFFS.h>
#else
  #include <Arduino.h>
  #include <ESP8266WiFi.h>
  #include <Hash.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
  #include <FS.h>
#endif
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include "DHT.h"

#define DHTPIN 4
#define DHTTYPE DHT11

DHT dht(DHTPIN, DHTTYPE); // I2C

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

String readDHT11Temperature() {
  // Read temperature as Celsius (the default)
  float t = dht.readTemperature();
  // Convert temperature to Fahrenheit
  //t = 1.8 * t + 32;
  if (isnan(t)) { 
    Serial.println("Failed to read from DHT11 sensor!");
    return "";
  }
  else {
    Serial.println(t);
    return String(t);
  }
}

String readDHT11Humidity() {
  float h = dht.readHumidity();
  if (isnan(h)) {
    Serial.println("Failed to read from DHT11 sensor!");
    return "";
  }
  else {
    Serial.println(h);
    return String(h);
  }
}


void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);

  dht.begin();

  // Initialize SPIFFS
  if(!SPIFFS.begin()){
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(SPIFFS, "/index.html");
  });
  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHT11Temperature().c_str());
  });
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/plain", readDHT11Humidity().c_str());
  });

  // Start server
  server.begin();
}

void loop(){

}



Nah, kemudian untuk file HTML nya:
<!DOCTYPE HTML><html>
<!-- Rui Santos - Complete project details at https://RandomNerdTutorials.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software. -->
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <style>
    body {
      min-width: 310px;
      max-width: 800px;
      height: 400px;
      margin: 0 auto;
    }
    h2 {
      font-family: Arial;
      font-size: 2.5rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <h2>ESP Weather Station</h2>
  <div id="chart-temperature" class="container"></div>
  <div id="chart-humidity" class="container"></div>
</body>
<script>
var chartT = new Highcharts.Chart({
  chart:{ renderTo : 'chart-temperature' },
  title: { text: 'DHT11 Temperature' },
  series: [{
    showInLegend: false,
    data: []
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    },
    series: { color: '#059e8a' }
  },
  xAxis: { type: 'datetime',
    dateTimeLabelFormats: { second: '%H:%M:%S' }
  },
  yAxis: {
    title: { text: 'Temperature (Celsius)' }
    //title: { text: 'Temperature (Fahrenheit)' }
  },
  credits: { enabled: false }
});
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var x = (new Date()).getTime(),
          y = parseFloat(this.responseText);
      //console.log(this.responseText);
      if(chartT.series[0].data.length > 40) {
        chartT.series[0].addPoint([x, y], true, true, true);
      } else {
        chartT.series[0].addPoint([x, y], true, false, true);
      }
    }
  };
  xhttp.open("GET", "/temperature", true);
  xhttp.send();
}, 30000 ) ;

var chartH = new Highcharts.Chart({
  chart:{ renderTo:'chart-humidity' },
  title: { text: 'DHT11 Humidity' },
  series: [{
    showInLegend: false,
    data: []
  }],
  plotOptions: {
    line: { animation: false,
      dataLabels: { enabled: true }
    }
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { second: '%H:%M:%S' }
  },
  yAxis: {
    title: { text: 'Humidity (%)' }
  },
  credits: { enabled: false }
});
setInterval(function ( ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var x = (new Date()).getTime(),
          y = parseFloat(this.responseText);
      //console.log(this.responseText);
      if(chartH.series[0].data.length > 40) {
        chartH.series[0].addPoint([x, y], true, true, true);
      } else {
        chartH.series[0].addPoint([x, y], true, false, true);
      }
    }
  };
  xhttp.open("GET", "/humidity", true);
  xhttp.send();
}, 30000 ) ;
</script>
</html>


Sekian dari saya
-

Komentar

Posting Komentar

Postingan populer dari blog ini

DHT 11 dan Sensor LCD

Haloo, aku mau menjelaskan soal penggabungan antara DHT11, yang akhirnya outputnya ditunjukkin lewat LCD. Nah,  awalnya yang kami lakukan adalah melihat dari referensi di randomnerdtutorials, cuma ternyata entah kenapa di LCD yang muncul NaN. Lalu kami mencoba hanya DHT11 nya saja, yang ternyata dia memang nggak mendetect kelembapan dll, sehingga kami berasumsi DHT11 kami sudah tidak berfungsi. Tapi, setelah itu kami coba lagi, dengan cara memasang rangkaian satu per satu. Yang pertama memasang rangkaian DHT11, lalu memasang rangkaian LCD seperti di proyek-proyek sebelumnya. Dengan cara ini, akhirnya kami berhasil menjalankannya. Hore.
Baca selengkapnya

Rumah Anti Maling dengan Sensor Ultrasonic dan ESP32

Gambar
Halo, sekarang aku mempelajari sensor baru karena bosan dengan DHT11, jadi sekarang aku pakai sensor ultrasonik! Sensor ultrasonik ini aku biasa nyebutnya sensor jarak karena dia bisa mendeteksi alat yang ada di depannya jaraknya seberapa jauh. Sumbernya dari sini tapi aku nggak pake LED https://www.instructables.com/id/ESP32-With-Ultrasonic-Sensor/ Kenapa aku pake sensor ultrasonik dan buzzer? Ini terinspirasi dari kosku. Jadi aku baru pindah kos dan sempet kaget setiap aku ngelewatin tangga bakal ada bunyi suara gitu. Ternyata, emang berguna sih, jadi kita tau kalo ada orang lewat dan yang di pos satpam bakal tau siapa yang lewat karena tangga nya ada di deket pos satpam. Nah, jadi menurutku ini bisa diapply di ESP32 yang didukung sensor jarak dan buzzer ini. Tapi, yang kubuat ini buzzernya selalu bunyi tiap outputnya ganti soalnya biar kedengeran di video karena suaranya sekecil itu(?) Tapi ternyata tetep nggak kedengeran sih:( Tapi intinya, konsep ini bisa diapply, mi
Baca selengkapnya

Bluetooth for ESP32

Halo! Kegiatan kelompokku selanjutnya di pelajaran sistem embedded ini adalah bluetooth di ESP32. Nah, ternyata, susah susah gampang karena mesti gabungin beberapa kode sebelumnya. Untuk rangkaian juga begitu. Jadi memasang rangkaian sesuai LCD, dan kemudian memasang rangkaian sessuai DHT11. Kegiatannya ada 2. 1. Mengirimkan hasil dari DHT11 ke HP 2. Mengirimkan pesan dari HP yang akan ditunjukkin ke LCD Nah, kami langsung menggabungkan keduanya di saat yang bersamaan. Kemudian, pesan dari HP sudah diatur sejak awal, yang berupa tombol-tombol di bagian bawah interface yang tulisannya M1-M5. Nah, yang kami atur hanya M1 dan M2 M1: hallo M2: Tari-Sulis-Salsa Hasilnya seperti ini: Dan entah kenapa, saat mengerjakan ini kami lancar-lancar saja tanpa kendala. Tapi, yang ada kendala adalah saat ingin mencoba BLE dan mengoneksikan 2 ESP32, karena kami masih bingung mengoneksikan keduanya. Walaupun kode program menggunakan example dari Arduino, tetapi yang kami coba masih be
Baca selengkapnya