Tutorial, Pendidikan, Media Pembelajaran, Ilmu Pengetahuan.

Thursday, October 24, 2024

Belajar IoT-006- Monitoring Water level dengan Ultrasonic dan protokol MQTT


Postingan kali ini, kita akan membuat water level monitoring, dengan menggunakan Ultrasonic sensor.

dimana nanti hasil pembacaan berupa : Volume air, ketinggian air dan prosentase pengisian, yang ditampilkan di browser seperti ini.

untuk alat dan bahannya :

1. sensor ultrasonic SR-04


2. esp 8266 

3. kabel usb

4. kabel jumper


Rangkaialah rangkaian dengan skema berikut ini :

Kemudian buatlah dashboard atau tampilan website, dengan file html berikut, yang dibuka di browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WATER LEVEL MONITORING</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Label "Terhubung" -->
  <div class="status">
    <h4> status server</h4>
    <p id="status">Terputus</p>
  </div>

  <div class="status">
    <h2> Monitoring tandon air</h2>

  <div class="container">
    <div class="card">    
    <p class="data"   >Volume air : <b  id="volumeAir">?</b></p>
    </div>
 
  <div class="container">
    <div class="card">  
    <p class="data">Ketinggian Air  <b id="tinggiAir">?</b></p>
   </div>

   <div class="container">
    <div class="card">  
    <p class="data">
      Prosentase isi  <b id="prosentaseAir">?</b></p>
   </div>


     <!-- tampilan air -->
     <div class="tangki">    
     <div class="air" id="tandon" style="width: 100%;  color: black; ">

  </div>




 <!-- script tandon -->
  <style type="text/css">
    .tangki {
      border-style:solid ;
      width:300px ;
      height:200px;
      left:45%;
      transform: translate(-50%);
      position:sticky ;
      border-bottom-left-radius:40px ;
      border-bottom-right-radius:40px ;
    }
    .air{    
      left:50%;
      bottom:0px ;
      transform: translate(-50%);
      position:absolute ;
      border-bottom-left-radius:40px ;
      border-bottom-right-radius:40px ;
      background-color:#87CEFA ;
 
    }
  </style>


 <!-- Label "KONEKSI DENGAN MQTT" -->
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
    <script>
        const clientId = Math.random().toString(16).substr(2, 8);
        const host = 'wss://broker.emqx.io:8084/mqtt';

        const options = {
          keepalive: 30,
          clientId: clientId,
          protocolId: 'MQTT',
          protocolVersion: 4,
          clean: true,
          reconnectPeriod: 1000,
          connectTimeout: 30 * 1000
        }

        console.log("Menghubungkan ke Broker");
        const client = mqtt.connect(host, options);

        client.on('connect', () => {
          console.log('Terhubung ke broker:' + clientId)
          client.subscribe('rokhmad.com/#', { qos: 1 })
          document.getElementById("status").innerHTML = "Terhubung";
          document.getElementById("status").style.color= "green";
          document.getElementById("tandon").style.backgroundColor= "green";
         
        })
        client.on('message', (topic, message, packet) => {        
          if(topic === "rokhmad.com/tandon"){
          document.getElementById("tandon").style.height= message+"%";
         
          }
          if(topic === "rokhmad.com/liter"){
            document.getElementById("volumeAir").innerHTML= message+" liter";
          }
          if(topic === "rokhmad.com/tinggiAir"){
            document.getElementById("tinggiAir").innerHTML= message+" cm";
          }
          if(topic === "rokhmad.com/prosentaseAir"){
            document.getElementById("prosentaseAir").innerHTML= message+" %";
          }
        })

           
    </script>
</html>




Tampilan file HTML diatas adalah seperti berikut :


Kemudian masukan sketch ke esp 8266 lolin. dengan sketch berikut ini, modiflah topic sesuai dengan kebutuhan kamu ya, 


#include <ESP8266WiFi.h>

#include <PubSubClient.h>

#define LED 13 // GPIO13 (D7) for LED


#define triggerPin 12 //d6

#define echoPin 14//d5

long durasi;


int tandon, tinggi = 0;


bool ledState = false;

// WiFi settings

const char *ssid = "Rohmad.com";             // Replace with your WiFi name

const char *password = "1122334455";    // Replace with your WiFi password

// MQTT Broker settings

const char *mqtt_broker = "broker.emqx.io";  // EMQX broker endpoint

const char *mqtt_topic = "rokhmad.com/#";     // MQTT topic

const char *mqtt_username = "emqx";  // MQTT username for authentication

const char *mqtt_password = "public";  // MQTT password for authentication

const int mqtt_port = 1883;  // MQTT port (TCP)

WiFiClient espClient;

PubSubClient mqtt_client(espClient);

void connectToWiFi();

void connectToMQTTBroker();

void mqttCallback(char *topic, byte *payload, unsigned int length);

void setup() {

  Serial.begin(115200);

  pinMode (echoPin, INPUT);

  pinMode (triggerPin, OUTPUT);

  connectToWiFi();

  mqtt_client.setServer(mqtt_broker, mqtt_port);

  mqtt_client.setCallback(mqttCallback);

  pinMode(LED, OUTPUT);

  connectToMQTTBroker();

}

void connectToWiFi() {

  WiFi.begin(ssid, password);

  Serial.print("Connecting to WiFi");

  while (WiFi.status() != WL_CONNECTED) {

    delay(500);

    Serial.print(".");

  }

  Serial.println("\nConnected to the WiFi network");

}

void connectToMQTTBroker() {

  while (!mqtt_client.connected()) {

    String client_id = "esp8266-client-" + String(WiFi.macAddress());

    Serial.printf("Connecting to MQTT Broker as %s.....\n", client_id.c_str());

    if (mqtt_client.connect(client_id.c_str(), mqtt_username, mqtt_password)) {

      Serial.println("Connected to MQTT broker");

      mqtt_client.subscribe(mqtt_topic);

      // Publish message upon successful connection

    } else {

      Serial.print("Failed to connect to MQTT broker, rc=");

      Serial.print(mqtt_client.state());

      Serial.println(" try again in 5 seconds");

      delay(5000);

    }

  }

}

void mqttCallback(char *topic, byte *payload, unsigned int length) {

  Serial.print("Message received on topic: ");

  Serial.println(topic);

  Serial.print("Message:");

  String message;

  for (int i = 0; i < length; i++) {

    message += (char) payload[i];  // Convert *byte to string

  }

  // Control the LED based on the message received

  if (message == "on" && !ledState) {

    digitalWrite(LED, HIGH);  // Turn on the LED

    ledState = true;

    Serial.println("LED is turned on");

  }

  if (message == "off" && ledState) {

    digitalWrite(LED, LOW); // Turn off the LED

    ledState = false;

    Serial.println("LED is turned off");

  }


  Serial.println(message);

  Serial.println();

  Serial.println("-----------------------");

}

void loop() {

  if (!mqtt_client.connected()) {

    connectToMQTTBroker();

  }


  digitalWrite (triggerPin, LOW);

  delayMicroseconds(2);

  digitalWrite (triggerPin, HIGH);

  delayMicroseconds(10);

  digitalWrite (triggerPin, LOW);

  durasi = pulseIn(echoPin, HIGH);

  tinggi = durasi * 0.034 / 2;

  delay(1000);

  ///////////////


  float tinggi_max_tangki = 40; //tinggi tangki dlm cm

  float jari2 = 1; //jari2 dalam meter

  float phi = 3.14; //volume

  float tinggi_air = tinggi_max_tangki - tinggi;

  float prosentase_tinggi_air = (tinggi_air / tinggi_max_tangki) * 100; //hasil persen

  float volume = phi * (jari2 * jari2) * (tinggi_air / 100);

  float liter = volume * 1000;

  //////////////////


  ///////////////




  if (tandon != tinggi) {

    mqtt_client.subscribe("rokhmad.com/tandon");

    mqtt_client.publish("rokhmad.com/tandon", String (prosentase_tinggi_air).c_str());

    mqtt_client.subscribe("rokhmad.com/liter");

    mqtt_client.publish("rokhmad.com/liter", String (liter).c_str());

    mqtt_client.subscribe("rokhmad.com/tinggiAir");

    mqtt_client.publish("rokhmad.com/tinggiAir", String (tinggi_air).c_str());

        mqtt_client.subscribe("rokhmad.com/prosentaseAir");

    mqtt_client.publish("rokhmad.com/prosentaseAir", String (prosentase_tinggi_air).c_str());

    Serial.println("mqtt uplod");

    Serial.print("tinggi air; ");

    Serial.println(tinggi_air);

    Serial.print("tinggi max air : ");

    Serial.println(tinggi_max_tangki);

    Serial.print("prosentasetinggi air: ");

    Serial.println(prosentase_tinggi_air);

    Serial.print("volume air :");

    Serial.println(volume);

    Serial.print("Liter air: ");

    Serial.println(liter);

    Serial.print("tinggi ultra sonic: ");

    Serial.println(tinggi);

    tinggi = tandon;

  }

  mqtt_client.loop();

}






Hasil akhirnya adalah, kita dapat memantau level air secara realtime dengan browser seperti gambar diatas.



Share:

0 comments:

About me

About me
Tentang Saya

ebook Implementasi Internet of Things dengan Arduino ESP8266/ESP32

ebook Implementasi Internet of Things dengan Arduino ESP8266/ESP32
Implementasi Internet of Things dengan Arduino ESP8266/ESP32, MQTT, dan integrasi Web menggunakan JavaScript, PHP, HTML5, dan MySQL.

E-Book Jobsheet Praktek Instalasi Motor Listrik

E-Book Jobsheet Praktek Instalasi Motor Listrik
Terjual lebih dari 100 pcs, E-Book Kumpulan Jobsheet Praktek Instalasi Motor Listrik, untuk mengajar, belajar, maupun untuk koleksi.

e-book Mengembangkan Proyek IoT dengan ESP32-CAM

e-book Mengembangkan Proyek IoT dengan ESP32-CAM
Mengembangkan Proyek IoT dengan ESP32-CAM: Kamera, CCTV, Sensor, MQTT, MySQL, Web, dan Notifikasi Gambar di Telegram/WhatsApp.

Ebook Tutorial Jam digital

Ebook Tutorial Jam digital
Sudah terjual 200 pcs !! E-Book tutorial membuat jam digital dari basic : Dasar pemrograman arduino, jam simple dengan 7 segmen, jam digital dengan panel P10, Jam waktu sholat digital arduino. dilengkapi dengan layout PCB dan Link Coding.

www.rokhmad.com

Blog edukasi Tutorial, Pendidikan, Media Pembelajaran, Ilmu Pengetahuan.

toko Online

SKETCH JWSD ESP

VIDEO PERAKITAN JWSD WIFI

Unduh Library Project jws 1000m

kumpulan sketch JWSD 1000 M

kumpulan sketch JWSD 1000 M
kumpulan sketch JWSD 1000 M

Kumpulan Sketch JWSD

JWSD 2 Panel Full Bluetooth

JWSD 2 Panel Full Bluetooth
JWSD 2 Panel Bluetooth

JWSD 3 panel Bluetooth

JWSD 3 panel Bluetooth
JWSD 3 panel Bluetooth

Sketch JWS 4 Panel, Bluetooth Kontrolled

Sketch JWS 4 Panel, Bluetooth Kontrolled
JWSD- 2019 NEW ! !

Sketch Jam Sholat 1 Panel

Sketch Jam Sholat 1 Panel
Jam sholat 1 Panel

Sketch Jam Sholat 2 Panel

Sketch Jam Sholat 2 Panel
Jam dua panel

Sketch Jam Sholat 3 Panel

Sketch Jam Sholat 3 Panel
Sketch Jam Sholat 3 Panel

Sketch Jam Sholat 5 Panel

Sketch Jam Sholat 5 Panel
Jam Sholat 5 Panel

Toko Kami

Daftar isi

Blog Archive

Tryout UNBK

e-learning

e-learning
Belajar mudah, dimana saja

my Edmodo

Buku Digital

Buku Tamu

Komentar Terkini

Live Traffic

Donasi

Donasi
Donasi

Total Pengunjung