Task Indicator - Iot Todo List

Project Overview

At its core, the Task Indicator - IoT To-Do List is a web-based task management application developed using Laravel. However, it goes beyond traditional to-do list applications by integrating with an ESP microcontroller, which is programmed to control a series of LEDs. Each LED corresponds to a task in the to-do list, providing a visual representation of the task's status.

Whenever a task is added, completed, or deleted, the corresponding LED on the ESP device reacts in real time, either lighting up, changing color, or turning off entirely. This project exemplifies how IoT can enhance user interaction by making abstract concepts, such as task completion, more tangible and immediate.

Key Features

Real-Time LED Feedback:

- Each task in the web application is linked to an LED on the ESP device.

- Adding a task lights up an LED with a designated color, visually indicating that the task is active.

- Completing a task changes the LED's color, signifying its new status.

- Deleting a task turns off the associated LED, reflecting its removal from the task list.

Seamless Integration:

- The project leverages MQTT (Message Queuing Telemetry Transport) to facilitate communication between the.

- Laravel application and the ESP microcontroller. MQTT is lightweight and efficient, making it ideal for IoT applications where quick and reliable message delivery is critical.

Customisable Settings:

- Users can easily configure various parameters, such as the WiFi credentials, MQTT broker details, and LED settings (e.g., data pin, number of LEDs, brightness) to match their specific setup.

Scalability:

- The project can be expanded to accommodate more tasks by simply adding more LEDs or using an LED strip.

- The code is designed to be flexible, allowing for easy modifications and scaling as needed.

Configuration and Setup

You can find the source code and steps to set up the whole project on your system from my github repositories:

1. Laravel Code: iot-todo-list
2. Arduino Code: task-indicator-arduino

1. ESP32: Amazon
2. WS2812B: Amazon

So for this project I used ESP32-CAM, cause that was available for me at the earliest. You can also use ESP-32 Dev Kit.

Now, to set up the hardware for this project:

Powering the ESP32-CAM:

- The ESP32-CAM dev board is powered via a micro USB port.

Soldering Connections:

- 5V Connection: Soldered the 5V pin on the ESP32-CAM to the 5V power input on the LED strip.

- Ground Connection: Soldered the ground pin on the ESP32-CAM to the ground point on the LED strip.

- Data Connection: Soldered the data pin (GPIO14) on the ESP32-CAM to the D-IN point on the LED strip.

This straightforward wiring setup ensures the LED strip is powered and controlled by the ESP32-CAM, allowing it to respond to the task management system.

Note: I do not have much experience with soldering so my connections are pretty rough, but it works tho.

The firmware for this project was developed using the Arduino framework and is available on the task-indicator-arduino repository. Detailed instructions on how to set up the software can be found there.

Development Environment

- IDE: The code was written using Microsoft Visual Studio Code (VS Code).

- PlatformIO Extension: The PlatformIO extension was utilized within VS Code to compile the code and program the ESP module. PlatformIO simplifies the development process by managing dependencies, providing a robust environment for embedded programming.

Libraries Used

- PubSubClient: This library was used to handle communication with the MQTT broker. It enables the ESP module to subscribe to MQTT topics and receive updates in real-time.

- FastLED: This library was employed to control the WS2812B LEDs. FastLED provides a flexible and efficient way to manage the LED strip, allowing for smooth color transitions and precise control over each LED.

These tools and libraries were integral in developing a responsive and efficient firmware that interfaces seamlessly with the task management system.

Server-Side Development

The server-side of this project was developed using Laravel, a powerful PHP web application framework known for its expressive and elegant syntax. For this project, Laravel 11 was used, providing a robust foundation for building a scalable and maintainable application. The Laravel documentation is thorough and user-friendly, making it easy to get started and find the information needed.

The source code for the server is available on my GitHub repository iot-todo-list.

MQTT Integration

To enable communication between the Laravel application and the MQTT broker, I used the php-mqtt/laravel-client composer package. This package simplifies the process of publishing messages to MQTT topics directly from Laravel, ensuring seamless integration with the IoT device.

Configuration

After setting up the Laravel project, the following entries were added to the .env file for MQTT configuration:

These configurations allow the Laravel application to connect to the MQTT broker, publish task-related updates, and communicate effectively with the ESP module.