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.
