A ESP32 project template with a web interface built in React

Overview

ESP AP Webserver

demo.mp4

This is my experiment with "mobile app development" for the ESP32. The project consists of two parts, the ESP32 code and the React Web Application. The ESP32 acts as a WiFi hotspot with captive portal, similar to the free WiFi without password but a website will pop up prompting you to log in or agree their terms of services. The ESP32 will serve a website in its captive portal as well as opening a websocket for real-time interaction with the mobile interface.

ESP32 Sketch

By default, the ESP32 sketch will create a SoftAP WiFi hotspot named "ESP32 SoftAP" without password. You can change the definition of the SSID and password inside main.cpp. Modify wsEventHandler.cpp for your custom implementation of the websocket server that handles recieving and sending messages to all clients.

In Platform IO -> Project Tasks -> esp32dev -> Platform, there are options to build and upload the SPIFFS filesystem image. Scripts placed in the scripts folder will be called to build the react project into a web app, rename the files to shorten the filenames and compress them using gzip to save on storage and delivery time. You may rename your react project directory and modify the react_proj_dir variable in scripts/prepare_React.py

In the included example, websocket clients are saved and all will be alerted of any state changes of the ESP32. Each and every websocket messages are expected to update all the state variables of the ESP32 and will be pushed to all clients. The ESP32 will only relay the string to other connected clients and new clients.

React Web App

The React Web App acts as a websocket client and generates the interface based on what it recieves from the ESP32 server. Feel free to rip apart everything and make it your own.

In the included application, setState is only called on websocket message so that disconnecting from the server will not make the interface update anymore.

Installation and setup

  1. Install Arduino IDE
  2. Install VSCode or VSCodium
  3. Install Node.js for npm and your extension of choice for JavaScript

Uploading to ESP32

There are two actions required to upload this to your ESP32.

  1. Upload the code (Platform IO -> Project Tasks -> esp32dev -> General -> Upload)
  2. Upload the React Web App (Platform IO -> Project Tasks -> esp32dev -> Platform -> Upload Filesystem Image)
Owner
I am Harry Tsang, a year-4 CS major in HKUST
Home Assistant integration for energy consumption data from UK SMETS (Smart) meters using the Hildebrand Glow API.

Hildebrand Glow (DCC) Integration Home Assistant integration for energy consumption data from UK SMETS (Smart) meters using the Hildebrand Glow API. T

Aniket 153 Dec 30, 2022
A Python program that makes it easy to manage modules on a CircuitPython device!

CircuitPython-Bundle-Manager-v2 A Python program that makes it easy to manage modules on a CircuitPython device! The CircuitPython Bundle Manager v2 i

Ckyiu 1 Dec 18, 2021
Hourglass on the pi pico using circuitpython

hourglass-on-pico "Hourglass" on the raspberry pi pico using circuitpython circuitpython version 7.0.0 Components used: Raspberry Pi Pico ADXL345 acce

4 Jul 18, 2022
The example shows using local self-hosted runners on-premises by making use of a runner on a Raspberry Pi with LED's attached to it

The example shows using local self-hosted runners on-premises by making use of a runner on a Raspberry Pi with LED's attached to it

Martin Woodward 6 Nov 13, 2021
Hardware-accelerated ROS2 packages for camera image processing.

Isaac ROS Image Pipeline Overview This metapackage offers similar functionality as the standard, CPU-based image_pipeline metapackage, but does so by

NVIDIA Isaac ROS 52 Dec 15, 2022
Philippe 1 Jan 09, 2022
Switch predictor for Home Assistant with AppDeamon

Home Assistant AppDeamon - Event predictor WORK IN PROGRESS - CURRENTLY NOT COMPLETE AND NOT WORK This is an idea under development (when I have free

37 Dec 17, 2022
Home Assistant custom components MPK-Lodz

MPK Łódź sensor This sensor uses unofficial API provided by MPK Łódź. Configuration options Key Type Required Default Description name string False MP

Piotr Machowski 3 Nov 01, 2022
Robot Framework keyword library wrapper for atlassian-python-api

Robot Framework keyword library wrapper for atlassian-python-api

Marcin Koperski 3 Jul 29, 2022
I made this so I can control my Tapo L510 light bulb and Govee H6159 light strip using the PyP100 module and the Govee public API

TAPO-And-Govee-Controller I made this so I can control my Tapo L510 light bulb and Govee H6159 light strip using the PyP100 module and the Govee publi

James Westhead 0 Nov 23, 2021
Raspberry Pi Power Button - Wake/Power Off/Restart(Double Press)

Control Raspberry pi with physically attached button. Wake, Power Off, and Restart (Double Press) . Python3 script runs as a service with easy installation.

Stas Yakobov 16 Oct 22, 2022
Raspberry Pi Spectrometer

PySpectrometer 2021-03-05 Raspberry Pi Spectrometer The PySpectrometer is a Python (OpenCV and Tkinter) implementation of an optical spectrometer. The

Les Wright 538 Jan 05, 2023
Isaac Gym Environments for Legged Robots

Isaac Gym Environments for Legged Robots This repository provides the environment used to train ANYmal (and other robots) to walk on rough terrain usi

Robotic Systems Lab - Legged Robotics at ETH Zürich 372 Jan 08, 2023
GUI wrapper designed for convenient service work with TI CC1352/CC2538/CC2652 based Zigbee sticks or gateways. Packed into single executable file

ZigStar GW Multi tool is GUI wrapper firtsly designed for convenient service work with Zig Star LAN GW, but now supports any TI CC1352/CC2538/CC2652 b

133 Jan 01, 2023
Python code written to utilize the Korlan usb2can hardware to send and receive data over the can-bus on a 2008 Nissan 350z

nissan_ecu_hacking Python code written to utilize the Korlan usb2can hardware to send and receive data over the can-bus on a 2008 Nissan 350z My goal

Liam Goss 11 Sep 24, 2022
A simple Python script for toggling Philips Hue Lights by clapping

LightsClap A simple Python script for toggling Philips Hue Lights by clapping Usage pip3 install -r requirements.txt python3 main.py and press the Ent

Flux Industries 2 Nov 16, 2021
A Python class for controlling the Pimoroni RGB Keypad for Raspberry Pi Pico

rgbkeypad A Python class for controlling the Pimoroni RGB Keypad for the Raspberry Pi Pico. Compatible with MicroPython and CircuitPython. keypad = RG

Martin O'Hanlon 43 Nov 11, 2022
Open source home automation that puts local control and privacy first.

Home Assistant Open source home automation that puts local control and privacy first. Powered by a worldwide community of tinkerers and DIY enthusiast

Home Assistant 57k Jan 01, 2023
OctoPrint is the snappy web interface for your 3D printer!

OctoPrint OctoPrint provides a snappy web interface for controlling consumer 3D printers. It is Free Software and released under the GNU Affero Genera

OctoPrint 7.1k Jan 03, 2023
A python script for macOS to enable scrolling with the 3M ergonomic mouse EM500GPS in any application.

A python script for macOS to enable scrolling with the 3M ergonomic mouse EM500GPS in any application.

3 Feb 19, 2022