ECO PING

In this project, you'll learn how to build a smart plant monitoring system using an ESP32 (XIAO ESP32S3), a capacitive soil moisture sensor, and a modern web dashboard. The dashboard updates in real time, shows a plant image that changes color based on soil moisture.

Click here to see my dashboard.

Supplies

Hardware

Xiao ESP32 S3
Soil Moisture Sensor - Capacitive
Battery - 3.7v 1000mAh

Software

Arduino IDE
Supabase
Github or any other webhosting serverice

Set Up Supabase for Database

Go to Supabase and create a free account.
Create a new project. Note your Project URL and anon/public key from Project Settings > API.

Setup Sql

In the SQL Editor, run:

create table sensor_data (

id bigint generated by default as identity primary key,

sensor_value integer not null,

timestamp bigint not null,

created_at timestamp with time zone default timezone('utc'::text, now()) not null);

Enable Row Level Security (RLS) for the table. Add SELECT and INSERT policies for the `anon` role with `TRUE` as the USING expression.

Circuit Diagram

GND TO GND

VCC TO 3.7v

AOUT TO GPIO 10

Program the ESP32

Install the required libraries in Arduino IDE: `WiFi`, `HTTPClient`, `ArduinoJson`.
Use the provided `eco-ping.ino` code.

Update:

Your WiFi credentials

Your Supabase URL and anon key

The correct sensor pin

3. Upload the code to your ESP32. It will send sensor data to Supabase every few seconds.

Code

#include <WiFi.h>

#include <HTTPClient.h>

#include <ArduinoJson.h>

// WiFi credentials

const char* ssid = "SSID";

const char* password = "PASSWD";

// Supabase configuration

const char* supabaseUrl = "ENTER YOUR URL";

const char* supabaseKey = "ENTER YOUR KEY";

// Capacitor sensor pin

const int sensorPin = 10; // Adjust this pin according to your wiring

// Timing configuration

const unsigned long SEND_INTERVAL = 500; // Send data every 5 seconds

unsigned long lastSendTime = 0;

void setup() {

Serial.begin(115200);

Serial.println("Starting Capacitor Sensor...");

// Initialize WiFi

WiFi.begin(ssid, password);

Serial.print("Connecting to WiFi");

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

delay(500);

Serial.print(".");

}

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

Serial.print("IP Address: ");

Serial.println(WiFi.localIP());

}

void loop() {

unsigned long currentTime = millis();

// Check if it's time to send data

if (currentTime - lastSendTime >= SEND_INTERVAL) {

if (WiFi.status() == WL_CONNECTED) {

sendSensorData();

lastSendTime = currentTime;

} else {

Serial.println("WiFi connection lost. Reconnecting...");

WiFi.reconnect();

}

void sendSensorData() {

// Read sensor value

int sensorValue = analogRead(sensorPin);

Serial.print("Sensor Value: ");

Serial.println(sensorValue);

// Create JSON document

StaticJsonDocument<200> doc;

doc["sensor_value"] = sensorValue;

doc["timestamp"] = millis();

String jsonString;

serializeJson(doc, jsonString);

// Send data to Supabase

HTTPClient http;

String url = String(supabaseUrl) + "/rest/v1/sensor_data";

http.begin(url);

http.addHeader("Content-Type", "application/json");

http.addHeader("apikey", supabaseKey);

http.addHeader("Authorization", "Bearer " + String(supabaseKey));

int httpResponseCode = http.POST(jsonString);

if (httpResponseCode > 0) {

String response = http.getString();

Serial.println("HTTP Response code: " + String(httpResponseCode));

Serial.println("Response: " + response);

} else {

Serial.println("Error sending data: " + String(httpResponseCode));

}

http.end();

}

Webapp

The dashboard is a static web app (HTML, CSS, JS) with Bootstrap for styling.

The app fetches the latest sensor value from Supabase and updates in real time.

The plant image changes (green/yellow/orange/red) based on the moisture percentage.

Clone my webapp files from this github repo and change supabase api keys with yours. you can run the webapp on computer as a local host or host in github or other platforms.

Alternative Options

Incase you can't setup the supabase and web hostings, you can use other platforms like blynk iot or arduino iot. but customization options have limitations.

Final

Based on the moisture level , the plant emote changes its emotion and the realtime moisture percentage is shown in the website.

Visit https://basheerbk.github.io/eco-ping/ To view my plants moisture level.