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
Watson-Assistant with integration capabilities

Watson-Assistant-Integration Watson-Assistant with integration capabilities "main.py" should be deployed as Cloud Function (Action) on IBM Cloud. For

Sergey Usachev 1 Dec 20, 2021
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
Huawei Solar sensors for Home Assistant

Huawei Solar Sensors This integration splits out the various values that are fetched from your Huawei Solar inverter into separate HomeAssistant senso

Thijs Walcarius 151 Dec 31, 2022
Final-project-robokeeper created by GitHub Classroom

RoboKeeper! Jonny Bosnich, Joshua Cho, Lio Liang, Marco Morales, Cody Nichoson Demonstration Videos Grabbing the paddle: https://youtu.be/N0HPvFNHrTw

Cody Nichoson 1 Dec 12, 2021
🐱🖨Cat printer is a portable thermal printer sold on AliExpress for around $20.

Cat printer is a portable thermal printer sold on AliExpress for around $20. This repository contains Python code for talking to the cat printer over

671 Jan 05, 2023
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
Micropython automatic watering

micropython-automatic-watering micropython automatic watering his code was developed to be used with nodemcu esp8266, but can be modified to work with

1 Nov 24, 2021
A IC scan test interface for Arduino

ICSCAN_ARDUINO Prerequisites Python 3.6 or higher arduino uno or nano what is this It is a bitstream tranceiver to test IC chip It sends bitstream to

Nifty Chips Laboratory 0 Sep 15, 2022
A PYTHON Library for Controlling Motors using SOLO Motor Controllers with RASPBERRY PI, Linux, windows, and more!

A PYTHON Library for Controlling Motors using SOLO Motor Controllers with RASPBERRY PI, Linux, windows, and more!

SOLO Motor Controllers 3 Apr 29, 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
Water quality integration for Home Assistant with data provided by Budapest FVM

Water Quality FVM (Budapest, HU) custom integration for Home Assistant This custom component integrates water quality information provided by Budapest

Atticus Maximus 3 Dec 23, 2021
A dashboard for Raspberry Pi to display environmental weather data, rain radar, weather forecast, etc. written in Python

Weather Clock for Raspberry PI This project is a dashboard for Raspberry Pi to display environmental weather data, rain radar, weather forecast, etc.

Markus Geiger 1 May 01, 2022
Code reimplementation of some papers published in SAIL-Lab

SAIL SAIL-Lab统一代码库 Motivation 创建这个项目的动机最早来源于实验室组内成员相互Debug代码的时候遇到的麻烦。

Jianwen Chen 8 Nov 15, 2022
DongshanPI Seven for STM32MP157DAC.

STM32MP1 Buildroot External Tree

DongshanPI 14 May 06, 2022
Scapy: the Python-based interactive packet manipulation program & library. Supports Python 2 & Python 3.

Scapy Scapy is a powerful Python-based interactive packet manipulation program and library. It is able to forge or decode packets of a wide number of

SecDev 8.3k Jan 08, 2023
Create a low powered, renewable generation forecast display with a Raspberry Pi Zero & Inky wHAT.

GB Renewable Forecast Display This Raspberry Pi powered eInk display aims to give you a quick way to time your home energy usage to help balance the g

Andy Brace 32 Jul 02, 2022
Alarm Control Panel component for Zigbee Keypads using action_transaction field

hass_transaction_alarm_panel Alarm Control Panel component for Zigbee Keypads using action_transaction field. Works together with zigbee2mqtt Supporte

Konstantin 4 Jun 09, 2022
Home Assistant custom integration to fetch data from Powerpal

Powerpal custom component for Home Assistant Component to integrate with powerpal. This repository and integration is not affiliated with Powerpal. Th

Lawrence 32 Jan 07, 2023
ArduinoWaterHeaterIOT - IoT Probe of a solar PV water heating system - Arduino, Python, MQTT, MySQL

ArduinoWaterHeaterIOT IoT Probe of a solar PV water heating system - Arduino, Raspberry Pi, Python, MQTT, MySQL The Arduino sends the AC and DC watts

Jacques Fourie 1 Jan 11, 2022
Repo for the esp32s2 version of the Wi-Fi Nugget

Repo for the esp32s2 version of the Wi-Fi Nugget

HakCat 30 Nov 05, 2022