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
[unmaintained] WiFi tools for linux

Note: This project is unmaintained. While I would love to keep up the development on this project, it is difficult for me for several reasons: I don't

Rocky Meza 288 Dec 13, 2022
Resmed_myair_sensors - This is a Home Assistant custom component to pull daily CPAP data from ResMed's myAir service using an undocumented API

resmed_myair This component will set up the following platforms. Platform Description sensor Show info from the myAir API. Installation Using the tool

Preston Tamkin 17 Dec 29, 2022
Self Driving Car Prototype

Package Delivery Rover 🚀 This project is a prototype of Self Driving Car. It's based on embedded systems, to meet the current requirement of delivery

Abhishek Pawar 1 Oct 31, 2021
Play music on Raspberry Pi Pico Without CPU involvement

MicroPython_PIO_Music_DMA Play music on Raspberry Pi Pico Without CPU involvement This is based on PIOBeep (https://github.com/benevpi/pico_pio_buzz)

3 Nov 27, 2022
A script that publishes power usage data of iDrac enabled servers to an MQTT broker for integration into automation and power monitoring systems

iDracPowerMonitorMQTT This script publishes iDrac power draw data for iDrac 6 enabled servers to an MQTT broker. This can be used to integrate the pow

Lucas Zanchetta 10 Oct 06, 2022
LifeSaver automatically, periodically saves USB flash drive data into the PC

LifeSaver automatically, periodically saves USB flash drive data into the PC. Theoriticaly it will work with any any connected drive ex - Hard Disk ,SSD ... But, can't handle Backing up multipatition

siddharth dhaka 4 Sep 26, 2021
3d printable macropad

Pico Mpad A 3D printable macropad for automating frequently repeated actions. Hardware To build this project you need access to a 3d printer. The mode

Dmytro Panin 94 Jan 07, 2023
This repository hosts the code for Stanford Pupper and Stanford Woofer, Raspberry Pi-based quadruped robots that can trot, walk, and jump.

This repository hosts the code for Stanford Pupper and Stanford Woofer, Raspberry Pi-based quadruped robots that can trot, walk, and jump.

Stanford Student Robotics 1.2k Dec 25, 2022
HA-Edge-Connector - HA Edge Connector For Python

HA-Edge-Connector 1. Required a. Smartthings Hub & Homeassistant must be in same

chals 21 Dec 29, 2022
Point Density-Aware Voxels for LiDAR 3D Object Detection (CVPR 2022)

PDV PDV is LiDAR 3D object detection method. This repository is based off [OpenPCDet]. Point Density-Aware Voxels for LiDAR 3D Object Detection Jordan

Toronto Robotics and AI Laboratory 114 Dec 21, 2022
2D waypoints will be predefined in ROS based robots to navigate to the destination avoiding obstacles.

A number of 2D waypoints will be predefined in ROS based robots to navigate to the destination avoiding obstacles.

Arghya Chatterjee 5 Nov 05, 2022
Workshop for student hackathons focused on IoT dev

Scenario: The Mutt Matcher (IoT version) According to the World Health Organization there are more than 200 million stray dogs worldwide. The American

Microsoft 15 Aug 10, 2022
Modeling and Simulation of Satellite Servicing Manipulators

Modeling and Simulation of Satellite Servicing Manipulators Final Project for the course ENPM662: Introduction to Robot Modeling (Fall 2021). This pro

Adarsh M 1 Jan 24, 2022
How to configure IOMMU device for nested Proxmox hypervisor (PVE) VM - PCIe Passthrough

Configuring PCIe Passthrough for Nested Virtualization on Proxmox Summary: If you are running bare-metal L0 (level 0) Proxmox (PVE) hypervisor with ne

Travis Johnson 6 Aug 30, 2022
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 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
Testing additional addon devices, and their working scripts

ESP32-addon-devices-potpurri Testing additional addon devices, and their micropython working scripts 📑 List of device addons tested so far Ethernet P

f-caro 0 Nov 26, 2022
A circle of LEDs

This repository contains all the design files, production files and example code for a simple circular LED display.

Pim de Groot 15 Aug 21, 2022
Fener ROS2 package version 2

Fener's ROS2 codes that runs on the vehicle. This node contains basic sensing and actuation nodes for vehicle control. Also example applications will be added.

Muhammed Sezer 1 Jan 18, 2022
CPU benchmark by calculating Pi, powered by Python3

cpu-benchmark Info: CPU benchmark by calculating Pi, powered by Python 3. Algorithm The program calculates pi with an accuracy of 10,000 decimal place

Alex Dedyura 20 Jan 03, 2023