Halo, apa kabar semuanya? Perkenalkan kembali saya Muhammad Vito Ibrahim. Pada kesempatan kali ini saya akan mencoba fitur WiFi yang sudah tertanam di ESP32 Development Board dan sensor bmp180.

Nah , project kali ini juga merangkap sebagai rekam jejak atau laporan saya untuk mata kuliah ( II2260 Sistem Embedded ). Agar lebih detail kali ini saya akan mencoba membuat webserver stasiun cuaca dengan bantuan sensor bmp180.

Web Server Cuaca menggunakan ESP32 dan BMP180

Perangkat dan komponen yang digunakan:

1. Mikrokontroler ESP32 Development Board.

2. Arduino IDE.

3. Laptop/Desktop dengan USB port.

4. Kabel micro usb to USB A ( kabel data/charger pada umumnya).

5. Breadboard ( dapat digunakan maupun tidak).

6. Kabel Jumper ( siapkan ketiga jenis model kabel yaitu F-F, F-M, dan M-M untuk antisipasi).

7. Sensor BMP180

8. Perangkat tambahan untuk mengakses server contohnya hp, web browser, dll.

Penjelasan beberapa perangkat dan komponen:

1. Mikrokontroler adalah sebuah komputer kecil yang dikemas dalam bentuk chip IC (Integrated Circuit) dan dirancang untuk melakukan tugas atau operasi tertentu.

2. ESP-32 Development Board adalah adalah mikrokontroler chip dengan rangkaian sistem hemat biaya dan rendah daya pada dilengkapi WiFi yang terintegrasi dan Bluetooth.

3. Arduino IDE (Integrated Development Environment) adalah software yang digunakan untuk memprogram di arduino, dengan kata lain Arduino IDE sebagai media untuk memprogram board Arduino. Pada kali ini bisa juga digunakan untuk memprogram mikrokontoler lainnya yaitu ESP32 dengan konfigurasi tambahan.

4. Breadboard adalah papan tempat komponen elektronik tanpa harus disolder.

5. Kabel jumper adalah kawat listrik, atau kabel, dengan konektor atau pin di setiap ujungnya, yang biasanya digunakan untuk menghubungkan komponen pada breadboard.

6. Sensor BMP-180

Pendahuluan :

Kali ini saya akan mencoba memanfaatkan WiFi yang terdapat di ESP32. Dengan fitur WiFi tersebut akan dibuat webserver yang digunakan untuk mengendalikan status dan atau memberi perintah ke LED yang terhubung pada pin GPIO ESP32. Dengan ESP32 yang terhubung ke WiFi proses menyalakan dan mematikan LED dapat dilakukan secara wireless.

Langkah pengerjaan :

a.siapkan perangkat dan komponen

a.1. Menyiapkan dan konfigurasi perangkat lunak

Melakukan instalasi library BMP180 di ArduinoIDE dengan cara membuka :

Sketch > Include Library > Manage Libraries > Cari adafruit BMP180 > Klik install

Melakukan instalasi library Adafuit_sensor di ArduinoIDE dengan cara membuka :

Sketch > Include Library > Manage Libraries > Cari adafruit unified sensor > Klik install

b. wiring

Dengan mengikuti skema berikut ini, hubungkan pin GPIO 26, GPIO 27, dan Ground (GND) ke LED yang tersambung dengan resistor.

c. coding dan implementasi

Pada ArduinoIDE buka :

File > Examples > Adafruit BMP180 library > bmp180 test

Kemudian akan menampilkan kode berikut :

#include <Adafruit_BMP085.h>

/*************************************************** 
  This is an example for the BMP085 Barometric Pressure & Temp Sensor

  Designed specifically to work with the Adafruit BMP085 Breakout 
  ----> https://www.adafruit.com/products/391

  These pressure and temperature sensors use I2C to communicate, 2 pins
  are required to interface
  Adafruit invests time and resources providing this open source code, 
  please support Adafruit and open-source hardware by purchasing 
  products from Adafruit!

  Written by Limor Fried/Ladyada for Adafruit Industries.  
  BSD license, all text above must be included in any redistribution
 ****************************************************/

// Connect VCC of the BMP085 sensor to 3.3V (NOT 5.0V!)
// Connect GND to Ground
// Connect SCL to i2c clock - on '168/'328 Arduino Uno/Duemilanove/etc thats Analog 5
// Connect SDA to i2c data - on '168/'328 Arduino Uno/Duemilanove/etc thats Analog 4
// EOC is not used, it signifies an end of conversion
// XCLR is a reset pin, also not used here

Adafruit_BMP085 bmp;
  
void setup() {
  Serial.begin(9600);
  if (!bmp.begin()) {
	Serial.println("Could not find a valid BMP085 sensor, check wiring!");
	while (1) {}
  }
}
  
void loop() {
    Serial.print("Temperature = ");
    Serial.print(bmp.readTemperature());
    Serial.println(" *C");
    
    Serial.print("Pressure = ");
    Serial.print(bmp.readPressure());
    Serial.println(" Pa");
    
    // Calculate altitude assuming 'standard' barometric
    // pressure of 1013.25 millibar = 101325 Pascal
    Serial.print("Altitude = ");
    Serial.print(bmp.readAltitude());
    Serial.println(" meters");

    Serial.print("Pressure at sealevel (calculated) = ");
    Serial.print(bmp.readSealevelPressure());
    Serial.println(" Pa");

  // you can get a more precise measurement of altitude
  // if you know the current sea level pressure which will
  // vary with weather and such. If it is 1015 millibars
  // that is equal to 101500 Pascals.
    Serial.print("Real altitude = ");
    Serial.print(bmp.readAltitude(101500));
    Serial.println(" meters");
    
    Serial.println();
    delay(500);
}

Mendesain web berbasis html

Gunakan kode berikut :

/*********
  sumber: https://randomnerdtutorials.com  
*********/
<table>
  <tr>
    <th>MEASUREMENT</th>
    <th>VALUE</th>
  </tr>
  <tr>
    <td>Temp. Celsius</td>
    <td>--- *C</td>
  </tr>
  <tr>
    <td>Temp. Fahrenheit</td>
    <td>--- *F</td>
  </tr>
  <tr>
    <td>Pressure</td>
    <td>--- hPa</td>
  </tr>
  <tr>
    <td>Approx. Altitude</td>
    <td>--- meters</td></tr>
  <tr>
    <td>Humidity</td>
    <td>--- %</td>
  </tr>
</table>

Membuat web servernya

Gunakan kode berikut ini :

// Load Wi-Fi library
#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>

//uncomment the following lines if you're using SPI
/*#include <SPI.h>
#define BME_SCK 18
#define BME_MISO 19
#define BME_MOSI 23
#define BME_CS 5*/

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI

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

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);
  bool status;

  // default settings
  // (you can also pass in a Wire library object like &Wire2)
  //status = bme.begin();  
  if (!bme.begin(0x76)) {
    Serial.println("Could not find a valid BME280 sensor, check wiring!");
    while (1);
  }

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected() && currentTime - previousTime <= timeoutTime) {  // loop while the client's connected
      currentTime = millis();
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == '\n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the table 
            client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
            client.println("table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }");
            client.println("th { padding: 12px; background-color: #0043af; color: white; }");
            client.println("tr { border: 1px solid #ddd; padding: 12px; }");
            client.println("tr:hover { background-color: #bcbcbc; }");
            client.println("td { border: none; padding: 12px; }");
            client.println(".sensor { color:white; font-weight: bold; background-color: #bcbcbc; padding: 1px; }");
            
            // Web Page Heading
            client.println("</style></head><body><h1>ESP32 with BME280</h1>");
            client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
            client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
            client.println(bme.readTemperature());
            client.println(" *C</span></td></tr>");  
            client.println("<tr><td>Temp. Fahrenheit</td><td><span class=\"sensor\">");
            client.println(1.8 * bme.readTemperature() + 32);
            client.println(" *F</span></td></tr>");       
            client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
            client.println(bme.readPressure() / 100.0F);
            client.println(" hPa</span></td></tr>");
            client.println("<tr><td>Approx. Altitude</td><td><span class=\"sensor\">");
            client.println(bme.readAltitude(SEALEVELPRESSURE_HPA));
            client.println(" m</span></td></tr>"); 
            client.println("<tr><td>Humidity</td><td><span class=\"sensor\">");
            client.println(bme.readHumidity());
            client.println(" %</span></td></tr>"); 
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Melakukan pengubahan pada kedua baris kode berikut dengan menyesuaikan identitas jaringan yang terhubung.

const char* ssid     = ""; 
const char* password = "";

Mengubah bagian yang diberi tanda petik sesuaikan dengan SSID (nama jaringan wifi yang terkoneksi) dan passwordnya.

Mengintegrasikan kode-kode di atas ke satu laman di ArduinoIDE :

// Load Wi-Fi library
#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BMP085.h>
Adafruit_BMP085 bmp;
// Replace with your network credentials
const char* ssid = "";
const char* password = "";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;
void setup() {
 Serial.begin(115200);
 bool status;
// default settings
 // (you can also pass in a Wire library object like &Wire2)
 //status = bmp.begin(); 
 if (!bmp.begin(0x76)) {
 Serial.println("Could not find a valid bmp180 sensor, check wiring!");
 while (1);
 }
// Connect to Wi-Fi network with SSID and password
 Serial.print("Connecting to ");
 Serial.println(ssid);
 WiFi.begin(ssid, password);
 while (WiFi.status() != WL_CONNECTED) {
 delay(500);
 Serial.print(".");
 }
 // Print local IP address and start web server
 Serial.println("");
 Serial.println("WiFi connected.");
 Serial.println("IP address: ");
 Serial.println(WiFi.localIP());
 server.begin();
}
void loop(){
 WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
 currentTime = millis();
 previousTime = currentTime;
 Serial.println("New Client."); // print a message out in the serial port
 String currentLine = ""; // make a String to hold incoming data from the client
 while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
 currentTime = millis();
 if (client.available()) { // if there's bytes to read from the client,
 char c = client.read(); // read a byte, then
 Serial.write(c); // print it out the serial monitor
 header += c;
 if (c == '\n') { // if the byte is a newline character
 // if the current line is blank, you got two newline characters in a row.
 // that's the end of the client HTTP request, so send a response:
 if (currentLine.length() == 0) {
 // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
 // and a content-type so the client knows what's coming, then a blank line:
 client.println("HTTP/1.1 200 OK");
 client.println("Content-type:text/html");
 client.println("Connection: close");
 client.println();
 
 // Display the HTML web page
 client.println("<!DOCTYPE html><html>");
 client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
 client.println("<link rel=\"icon\" href=\"data:,\">");
 // CSS to style the table 
 client.println("<style>#weather {font-family: Trebuchet MS, sans-serif;border-collapse: collapse;width: 100%;}");
 client.println("#weather td, #customers th {border: 1px solid #ddd;padding: 8px;}");
 client.println("#weather tr:nth-child(even){background-color: #f2f2f2;}");
 client.println("#weather tr:hover {background-color: #ddd;}");
 client.println("#weather th {padding-top: 12px;padding-bottom: 12px;text-align: center;background-color: #FF9ABB;color: black;}");
 client.println("body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
 client.println(".sensor { color:black; font-weight: bold; background-color: white; padding: 1px; }");
 
// Web Page Heading
client.println("</style></head><body><h1>ESP32 with bmp180</h1>");
client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
client.println("<tr><td>Suhu. Celsius</td><td><span class=\"sensor\">");
client.println(bmp.readTemperature());
client.println(" *C</span></td></tr>"); 
client.println("<tr><td>Suhu. Fahrenheit</td><td><span class=\"sensor\">");
client.println(1.8 * bmp.readTemperature() + 32);
client.println(" *F</span></td></tr>"); 
client.println("<tr><td>Tekanan</td><td><span class=\"sensor\">");
client.println(bmp.readPressure() / 100.0F);
client.println(" hPa</span></td></tr>");
client.println("<tr><td>Approx. Ketinggian</td><td><span class=\"sensor\">");
client.println(bmp.readAltitude());
client.println(" %</span></td></tr>"); 
client.println("</body></html>");
 
 // The HTTP response ends with another blank line
 client.println();
 // Break out of the while loop
 break;
 } else { // if you got a newline, then clear currentLine
 currentLine = "";
 }
 } else if (c != '\r') { // if you got anything else but a carriage return character,
 currentLine += c; // add it to the end of the currentLine
 }
 }
 }
 // Clear the header variable
 header = "";
 // Close the connection
 client.stop();
 Serial.println("Client disconnected.");
 Serial.println("");
 }
}

d. compile dan upload kode dari ArduinoIDE ke ESP32

Compile dan upload kode kemudian buka serial monitor dan pilih rate baud 115200, kemudian tekan tombol en pada esp32 untuk menghubungkan ke jaringan wifi dan membuat webserver.

Setelah itu buka alamat ip webserver di browser maupun perangkat lainnya dan hasilnya akan menampilkan sebagai berikut :

Kompilasi video pengerjaan :

Error dan troubleshooting:

Pada project kali ini tidak terdapat error.

Kesimpulan:

Membuat webserver stasiun cuaca dengan memanfaatkan fitur pada ESP32 dan sensor bmp180.

Referensi :

1. randomnerdtutorials.com

2. wikipedia

Project #9 ESP32 - Web Server Stasiun Cuaca

Web Server Cuaca menggunakan ESP32 dan BMP180

Perangkat dan komponen yang digunakan:

Penjelasan beberapa perangkat dan komponen:

Pendahuluan :

Langkah pengerjaan :

a.siapkan perangkat dan komponen

a.1. Menyiapkan dan konfigurasi perangkat lunak

b. wiring

c. coding dan implementasi

d. compile dan upload kode dari ArduinoIDE ke ESP32

Kompilasi video pengerjaan :

Error dan troubleshooting:

Kesimpulan:

Referensi :

Terimakasih, sampai jumpa pada project berikutnya!

Posting Komentar

0 Komentar

Search

Blog Archive

Recent Posts

Tags

Popular Posts

Studi kasus : Midsouth Chamber of Commerce

Project#2 ON/OFF LED dengan ESP32 melalui GPIO (Digital Input/Output)

Youtube

Recent Project

Categories

Tags

Ameblo「ブログ」

Menu Footer Widget

Project #9 ESP32 - Web Server Stasiun Cuaca

Web Server Cuaca menggunakan ESP32 dan BMP180

Perangkat dan komponen yang digunakan:

Penjelasan beberapa perangkat dan komponen:

Pendahuluan :

Langkah pengerjaan :

a.siapkan perangkat dan komponen

a.1. Menyiapkan dan konfigurasi perangkat lunak

b. wiring

c. coding dan implementasi

d. compile dan upload kode dari ArduinoIDE ke ESP32

Kompilasi video pengerjaan :

Error dan troubleshooting:

Kesimpulan:

Referensi :

Terimakasih, sampai jumpa pada project berikutnya!

Anda mungkin menyukai postingan ini

Posting Komentar

0 Komentar

Search

Blog Archive

Recent Posts

Social

Tags

Popular Posts

Studi kasus : Midsouth Chamber of Commerce

Project#2 ON/OFF LED dengan ESP32 melalui GPIO (Digital Input/Output)

Youtube

Recent Project

Categories

Tags

Ameblo「ブログ」

Menu Footer Widget