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
2021 Real Robot Challenge Phase2 attemp

Real_Robot_Challenge_Phase2_AE_attemp We(team name:thriftysnipe) are the first place winner of Phase1 in 2021 Real Robot Challenge. Please see this pa

Qiang Wang 2 Nov 15, 2021
Python para microcontroladores com MicroPyhton

MicroPython - PyBR2021 Python para microcontroladores com MicroPyhton Repositório de exemplos para tutorial "Python para microcontroladores com MicroP

gabriel aragão 1 Oct 18, 2021
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
Rasberry Pie GPIO memory game. Press the corresponding key to the lit LED.

RPie-keyboard-game Rasberry Pie GPIO memory game. Press the corresponding key to the lit LED. Randem LED (general output) is lit up on rasberrypi rand

Shawn Dowling 1 Oct 24, 2021
Python module for controlling Broadlink RM2/3 (Pro) remote controls, A1 sensor platforms and SP2/3 smartplugs

Python module for controlling Broadlink RM2/3 (Pro) remote controls, A1 sensor platforms and SP2/3 smartplugs

Matthew Garrett 1.2k Jan 04, 2023
Code for the paper "Planning with Diffusion for Flexible Behavior Synthesis"

Planning with Diffusion Training and visualizing of diffusion models from Planning with Diffusion for Flexible Behavior Synthesis. Guided sampling cod

Michael Janner 310 Jan 07, 2023
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
a library for using WS2812b leds (aka neopixels) with Raspberry Pi Pico

pico_ws2812b a library for using WS2812b leds (aka neopixels) with Raspberry Pi Pico You'll first need to save the ws2812b.py file to your device (for

76 Nov 25, 2022
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
Toy robot that traverses on a finite surface

Toy Robot Challenge - Release Notes November 12, 2021 New features Initialisation - Users can set the home position and heading of the robot. Position

Ze Fei Teo 0 Feb 03, 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
DNP3 Stalker is a project to analyze and interact with DNP3 devices

DNP3 Stalker Purpose DNP3 Stalker is a project to analyze and interact with DNP3

Cutaway Security, LLC. 2 Feb 10, 2022
A simple program to make MSI Modern 15 speaker and microphone mute led work.

MSI Modern 15 sound led fixup for linux A simple program to fix the MSI Modern 15 speaker and microphone mute LEDs. Installation Requirements pulsectl

Seyed Danial Movahed 4 Oct 18, 2022
Pihole-eink-display - A simple Python script to display PiHole statistics on an eInk Display

Pihole-eink-display - A simple Python script to display PiHole statistics on an eInk Display

Mark McIntyre 64 Oct 11, 2022
Custom component for interacting with Octopus Energy

Home Assistant Octopus Energy ** WARNING: This component is currently a work in progress ** Custom component built from the ground up to bring your Oc

David Kendall 116 Jan 02, 2023
Using a raspberry pi, we listen to the coffee machine and count the number of coffee consumption

A typical datarootsian consumes high-quality fresh coffee in their office environment. The board of dataroots had a very critical decision by the end of 2021-Q2 regarding coffee consumption.

dataroots 51 Nov 21, 2022
This is an incredible led matrix simulation using the ultimate mosaik co-simulation framework.

This project uses the mosaik co-simulation framework, developed by the brilliant developers at the high-ranked Offis institue for computer science, Oldenburg, Germany, to simulate multidimensional LE

Felix 1 Jan 28, 2022
It is a serial communicator(controller, receiver...), communicate with sensor LP20 which is a laser ranger.

Intro It is a serial communicator(controller, receiver...), communicate with sensor LP20 which is a laser ranger. Its datasheet is contained in this r

3 Sep 19, 2022
A custom mechanical keyboard inspired by the CFTKB Mysterium

Env-KB A custom mechanical keyboard inspired by the CFTKB Mysterium Build Guide and Parts List What is to do? Right now for the first 5 PCBs I have, i

EnviousData 203 Jan 04, 2023
Claussoft Personal Digital Assistant

Claussoft Personal Digital Assistant Install on Linux $ sudo apt update $ sudo apt install espeak ffmpeg libespeak1 portaudio19-dev $ pip install -r r

Christian Clauss 3 Dec 14, 2022