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
Minimal and clean dashboard to visualize some stats of Pi-Hole with an E-Ink display attached to your Raspberry Pi

Clean Dashboard for Pi-Hole Minimal and clean dashboard to visualize some stats of Pi-Hole with an E-Ink display attached to your Raspberry Pi.

Alessio Santoru 104 Dec 14, 2022
What if home automation was homoiconic? Just transformations of data? No more YAML!

radiale what if home-automation was also homoiconic? The upper or proximal row contains three bones, to which Gegenbaur has applied the terms radiale,

Felix Barbalet 21 Mar 26, 2022
A script and GUI for controlling stepper motors from an arduino

A script and GUI for controlling stepper motors from an arduino (nema 23 in my case but should work for others in general)

Pip 2 Aug 01, 2022
Activate Numpad inside the touchpad with top right corner switch or F8 key

This is a python service which enables switching between numpad and touchpad for the Asus UX433. It may work for other models.

Mohamed Badaoui 230 Jan 08, 2023
Home Assistant custom integration for Yi cameras: yi-hack-MStar, yi-hack-Allwinner and yi-hack-Allwinner-v2

yi-hack Home Assistant integration Overview yi-hack Home Assistant is a custom integration for Yi cameras (or Sonoff camera) with one of the following

roleo 131 Jan 03, 2023
Python library to interact with the GCE Electronics IPX800 device

A python library to control a GCE-Electronics IPX800 V4 device through its API.

Marc-Aurèle Brothier 2 Oct 20, 2021
Pi-hole with Inky pHAT ePaper display

Pi-hole with Inky pHAT ePaper display This is my Pi-hole with an ePaper display.

11 Sep 13, 2022
🏡 My Home Assistant Configs. Be sure to 🌟 my repo to follow the updates!

Home Assistant Configuration Here's my Home Assistant configuration. I have installed HA on a Lenovo ThinkCentre M93P Tiny with an Intel Dual-Core i5-

iLyas Bakouch 25 Dec 30, 2022
Segger Embedded Studio project for building & debugging Flipper Zero firmware.

Segger Embedded Studio project for Flipper Zero firmware Установка Добавить данный репозиторий в качестве сабмодуля в корень локальной копии репозитор

25 Dec 28, 2022
DOS-like OS for RP2040 basic microcontroller boards

Micropython DOS-like OS for RP2040 microcontroller boards. Check out the demo video at https://www.youtube.com/watch?v=Az_oiq8GE4Y To start the OS typ

RetiredWizard 58 Dec 27, 2022
MicroPython driver for 74HC595 shift registers

MicroPython 74HC595 A MicroPython library for 74HC595 8-bit shift registers. There's both an SPI version and a bit-bang version, each with a slightly

Mike Causer 17 Nov 29, 2022
Python Keylogger for Linux

A keylogger is a program that records your keystrokes, this program saves them in a .txt file on your local computer and, after 30 seconds (or as long as you want), it will close the .txt file and se

Darío Mazzitelli 4 Jul 31, 2021
Like htop (CPU and memory usage), but for your case LEDs. 😄

Like htop (CPU and memory usage), but for your case LEDs. 😄

Derek Anderson 3 Dec 08, 2021
Example Python code for building RPi-controlled robotic systems

RPi Example Code Example Python code for building RPi-controlled robotic systems These python files have been compiled / developed by the Neurobionics

Elliott Rouse 2 Feb 04, 2022
A battery pack simulation tool that uses the PyBaMM framework

Overview of liionpack liionpack takes a 1D PyBaMM model and makes it into a pack. You can either specify the configuration e.g. 16 cells in parallel a

PyBaMM Team 40 Jan 05, 2023
The PicoEMP is a low-cost Electromagnetic Fault Injection (EMFI) tool,

ChipSHOUTER-PicoEMP The PicoEMP is a low-cost Electromagnetic Fault Injection (EMFI) tool, designed specifically for self-study and hobbiest research.

NewAE Technology Inc. 312 Jan 07, 2023
Automatic Watering System using Soil Moisture Sensor and RTC Timer with Arduino

Automatic-Watering-System - Technical Answers to Real-World Problems. Evolution of Watering Manually to Watering Automatically.

Vaishnavi Pothugunta 4 Dec 31, 2021
MPY tool - manage files on devices running MicroPython

mpytool MPY tool - manage files on devices running MicroPython It is an alternative to ampy Target of this project is to make more clean code, faster,

Pavel Revak 5 Aug 17, 2022
Python script for printing to the Hanshow price-tag

This repository contains Python code for talking to the ATC_TLSR_Paper open-source firmware for the Hanshow e-paper pricetag. Installation # Clone the

12 Oct 06, 2022
A Raspberry Pi Pico powered Macro board, like a Streamdeck but cheaper and simpler.

Env-MCRO A Raspberry Pi Pico powered Macro board, like a Streamdeck but cheaper and simpler. (btw this image is a bit outdated, some of the silkscreen

EnviousData 68 Oct 14, 2022