🚀 ESP8266 Web Server Timer Project

Overview

Welcome to the ESP8266 Web Server Timer Project! A Simple "Remote Smart Timer"

• Connect with your SmartPhone to the ESP8266 WiFi Access Point + password
• Open the Home Page provided by the Access Point
• Enter a name for the event you want to Time & click "Add"
• READY, SET...GO! Hit the START Button & start the activity
  • You can either STOP the Timer from the SmartPhone (the way you started it)
  • OR, by pressing the Push Button on the ESP8266, at a target location
• This unique feature is helpfull for activities where a coach starts the timer (from the phone) and needs the trainee to reach to a remote button & stop timer himself/herself for accurate timing.
• This was successfully tested for climbing, running and Physical Education activities. eg. ESP8266 Button would be set on top of the climbing wall.

The project is designed for electronic hobbyists to get familiar with a tiny fullstack IoT, on inexpensive ESP8266 boards. All web design can be tweaked and adapted for other sports & usage. Timer stores & displays all results on a local partition in RAM, with extra capabilities such as: sorting, loading, downloading as CSV.

Features

• Soft Access Point (AP): The ESP8266 board starts a soft AP for easy connectivity.
• Captive Web Portal: Provides a redirection to friendly web interface once connected to Access Point.
• LittleFS Filesystem: Uses LittleFS to manage web files (css, js) and store timer results in RAM, to keep them available directly on the ESP8266 partition, even after power-off
• Web Timer: Times multiple events, stored in a table, with filtering and exporting capabilities
• ESP8266 Stop Button: Start the timer from a web page (e.g., smartphone) and stop it physically upon reaching the destination (e.g., climbing, running, self-timing).
• Responsive Web Interface: Fully customizable and fits most smartphones or computers.
• Public and Open Source: Available for everyone to enjoy, enhance & improve!

Bill of Material

• ESP8266 Wemos D1 mini (~3.30 EUR)
• Switch Button (~4.40 EUR)
• 3xAA Battery Case (~5.20 EUR) or Mini PowerBank USB (~10.00 EUR)

Files

To Build Project in Arduino IDE

• ESP8266_WebServer.ino: The main Arduino sketch.
• my_littlefs_lib.cpp & my_littlefs_lib.h: Custom libraries for handling LittleFS operations.

To Copy on the ESP8266 LittleFS Partition

• index.html: The main web page served by the server.
• style.css: Stylesheet to make the web interface look sleek.
• script.js: JavaScript to add interactivity to the web page.
• *.svg, *.png: Icons used in Web Interface & Favicon. Png file is background image.

Getting Started

1. Clone this repository: git clone https://github.com/your-username/ESP8266_WebServer_Project.git
2. Upload the sketch: Compile and upload ESP8266_WebServer.ino to your ESP8266 board.
3. Install LittleFS Plugin for Arduino IDE
4. Copy index.html, style.css, script.js, *.svg, *.png to the LittleFS partition (see step 3)
5. Attach a Push Button to ESP8266, connecting Pin "D2" and "G" (Ground)
6. Power-On ESP8266 using one of 2 options:
   • PowerBank plugged to USB connector of the board, or
   • a 3xAA Battery Case connected to +5 VCC Pin (red wire) and Ground (black wire)
7. Connect your SmartPhone to the Soft AP: "Climbing_WiFi" network is created by the ESP8266 (pwd: climbclimb)
8. Open the Web Portal: Visit the captive web portal using your web browser.

Contributing

We welcome contributions from everyone! Feel free to fork the repository, submit pull requests, or simply suggest improvements through issues. Let's make this project even more awesome together! 🎉