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
🔆 A Python module for controlling power and brightness of the official Raspberry Pi 7

rpi-backlight A Python module for controlling power and brightness of the official Raspberry Pi 7" touch display. Note: This GIF was created using the

Linus Groh 238 Jan 08, 2023
Run this code to blink your ThinkPad LED with a hidden mysterious Morse code! ;)

TMorse Run this code to blink your ThinkPad LED with a hidden mysterious Morse code! ;) Compatible with python3.9+. No third-party library is required

Mahyar 2 Jul 11, 2022
A Simple Python KeyLogger App

✨ Kurulum Uygulamayı bilgisayarınızda kullana bilmek için bazı işlemler yapmanız gerekiyor. Aşağıdaki yönlendirmeleri takip ederek bunu yapabilirsiniz

VorteX 7 Jun 11, 2022
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
Home Assistant custom integration for e-distribución

e-Distribución is an energy distribution company that covers most of South Spain area. If you live in this area, you probably are able to register into their website to get some information about you

VMG 17 Sep 07, 2022
An IoT Trivia app that shows you how to take a JSON web API such as the opentdb.com API and stream and display it on a FeatherS2 in an OLED display.

CircuitPython IoT Trivia ESP32-S2 OLED Version An IoT Trivia app that shows you how to take a JSON web API such as the opentdb.com API and stream and

Kevin Thomas 1 Nov 27, 2021
🎃 Some spooky code samples to hack yourself a pumpkin 👻

🎃 Tech Or Treat 👻 It's spooky season for those who celebrate Halloween, and to get in the spirit (spirit - get it? 👻 ) we thought it would be fun t

Jim Bennett 5 Feb 07, 2022
Doughskript interpreter for converting simple command sequences into executable Arduino C++ code.

Doughskript interpreter for converting simple command sequences into executable Arduino C++ code.

Svjatoslav 2 Jan 11, 2022
Micro Displays for Raspberry Pi

micro-displays Micro Displays for Raspberry Pi Why? I'm super bored in lockdown. Add a Raspberry Pi 400 and a few tiny displays... The top half of the

ig 291 Jul 06, 2022
For use with an 8-bit parallel TFT touchscreen using micropython

ILI9341-parallel-TFT-driver-for-micropython For use with an 8-bit parallel TFT touchscreen using micropython. Many thanks to prenticedavid and his MCU

3 Aug 02, 2022
A python project based on a TV show Wheel of Fortune

Wheel-of-Fortune-using-Python Wheel of Fortune in python this game is the hands-on project in Python 3 Programming Specialization offered By Universit

Eszter Pai 1 Jan 03, 2022
Projet d'integration SRI 3A ROS

projet-integration-sri-2021-2022 Projet d'intégration ROS SRI 2021 2022 Organization: Planification de tâches Perception Saisie: Cédérick Mouliets Sim

AIP Primeca Occitanie 3 Jan 07, 2022
Python Wrapper for Homeassistant's REST API

HomeassistantAPI Python Wrapper for Homeassistant's REST API Please ⭐️ the repo if you find this project useful or cool! Here is a quick example. from

Nate 29 Dec 31, 2022
Add filters (background blur, etc) to your webcam on Linux.

webcam-filters Add filters (background blur, etc) to your webcam on Linux. Video conferencing applications tend to either lack video effects altogethe

Jashandeep Sohi 480 Dec 14, 2022
Software framework to enable agile robotic assembly applications.

ConnTact Software framework to enable agile robotic assembly applications. (Connect + Tactile) Overview Installation Development of framework was done

Southwest Research Institute Robotics 29 Dec 01, 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
Lego Mindstorms EV3 and Lego Spike Prime

Lego Mindstorms EV3 and Lego Spike Prime What is FLL? The FIRST LEGO League Challenge Robotics Tournament challenges students from 9 to 16 years old t

Danimar Campos da Costa 1 Nov 14, 2021
An embedded application for toy-car controlling based on Raspberry Pi 3 Model B and AlphaBot2-Pi.

An embedded application for toy-car controlling based on Raspberry Pi 3 Model B and AlphaBot2-Pi. This is the source codes of my programming assignmen

StardustDL 4 Oct 19, 2022
Modi2-firmware-updater - MODI+ Firmware Updater With Python

MODI+ Firmware Updater 실행 준비 python3(파이썬3.9 혹은 그 이상의 버전)를 컴퓨터에 설치 python3 -m pip

LUXROBO 1 Feb 04, 2022
A LiteX project which builds a SoC with DRAM / HDIM output via the GPDI SYZYGY addon.

ButterStick GPDI LiteX demo A LiteX project which builds a SoC with DRAM / HDIM output via the GPDI SYZYGY addon. Getting started Connect GPDI board t

4 Nov 21, 2021