14. Interface and application programming

Week: Interface & Application Programming Real-Time Water Flow Monitoring System 1. Assignment Goal This assignment required developing an application that interfaces a user with an input/output device. In this project, I built a system that reads water flow data using a sensor, processes it with an ESP32-C3, communicates via MQTT, and visualizes it on a Node-RED dashboard.

1. System Overview The system consists of a flow sensor connected to an ESP32-C3, which sends data over WiFi using MQTT. Node-RED subscribes to the data and displays it on a dashboard.

Architecture: Flow Sensor → ESP32-C3 → MQTT Broker → Node-RED → Dashboard 3. Hardware Setup Components used: - XIAO ESP32-C3

• Water Flow Sensor

Connections: VCC → 5V GND → GND OUT → D2

The sensor outputs pulses proportional to water flow. 4. Software Setup

Install node-js using the command below;

*npm install -g node-red*

Installed Arduino IDE and required libraries: - WiFi - PubSubClient

Installed Node-RED using npm and added node-red-dashboard. 5. ESP32 Application Code The ESP32 reads pulses using interrupts, calculates flow rate, and sends data via MQTT.

Key logic: Flow Rate = pulses / 7.5 Total Liters += flowRate / 60

Code

#include <WiFi.h>
#include <PubSubClient.h>

// WiFi 
const char* ssid = "MT";
const char* password = "#@Innovate";

// MQTT
const char* mqtt_server = "broker.emqx.io";

WiFiClient espClient;
PubSubClient client(espClient);

// Flow sensor pin
const int flowPin = D2;
volatile int pulseCount = 0;

float flowRate = 0.0;
float totalLiters = 0.0;

unsigned long previousMillis = 0;

// Interrupt function
void IRAM_ATTR pulseCounter() {
  pulseCount++;
}

// Connect WiFi
void setup_wifi() {
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
  }
}

// Reconnect MQTT
void reconnect() {
  while (!client.connected()) {
    client.connect("ESP32FlowClient");
  }
}

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

  pinMode(flowPin, INPUT_PULLUP);
  attachInterrupt(digitalPinToInterrupt(flowPin), pulseCounter, FALLING);

  setup_wifi();
  client.setServer(mqtt_server, 1883);
}

void loop() {
  if (!client.connected()) reconnect();
  client.loop();

  unsigned long currentMillis = millis();

  if (currentMillis - previousMillis >= 1000) {
    previousMillis = currentMillis;

    noInterrupts();
    int pulses = pulseCount;
    pulseCount = 0;
    interrupts();

    // Flow rate calculation
    flowRate = pulses / 7.5;

    // Total water accumulation
    totalLiters += (flowRate / 60.0);

    char flowMsg[20];
    char totalMsg[20];

    sprintf(flowMsg, "%.2f", flowRate);
    sprintf(totalMsg, "%.2f", totalLiters);

    client.publish("water/flow", flowMsg);
    client.publish("water/total", totalMsg);

    Serial.print("Flow: ");
    Serial.print(flowRate);
    Serial.print(" L/min | Total: ");
    Serial.println(totalLiters);
  }
}

generated the above code using chatgpt prompt below

Write an ESP32-C3 (Arduino) program that reads a water flow sensor using interrupts, calculates flow rate (L/min) and total liters, connects to WiFi, and publishes real-time data to MQTT topics water/flow and water/total using broker.emqx.io

1. MQTT Communication Broker used: broker.emqx.io

Topics: - water/flow

- water/total

Data is sent as simple numeric values. 7. Node-RED Interface Created a dashboard with:

• Tab: Water Monitor
• Group: Flow System - Groups were used to organize dashboard elements into logical sections. In this project, the “Flow System” group contains related data such as flow rate and total water usage

Widgets: - Gauge for flow rate - Chart for total water usage

Flow: mqtt in (water/flow) → gauge mqtt in (water/total) → chart

1. Running the System Start Node-RED using ‘node-red’

Access dashboard: http://localhost:1880/ui

To access on other devices, use local IP: http://192.168.x.x:1880/ui

http://localhost:1880/ui/#!/0?socketid=X2dBa4p0O1GuNTjrAAAB

1. Testing Verified sensor using Serial Monitor, tested MQTT using MQTTX, and confirmed dashboard updates.
2. Challenges & Solutions Sensor not working → fixed pin (D2) Chart showing JSON → used numeric values MQTT mixing → separated topics
3. Conclusion This project demonstrates application programming, device interfacing, MQTT communication, and user interface development using Node-RED.