A web server built on the ESP32 platform. It uses a React-Native app for Android to set up the Wi-Fi credentials, and it serves the web frontend from an external CDN to save space in the microcontroller.
The first commit was a rudimentary web server as taken from the example ESP32 Web Server with some small changes. The code was changed so that requests from other clients are not blocked, so that multiple connections can be made.
This is my first Bluetooth project with the ESP32 but it was having a lot of problems communicating with the React-Native app. To isolate the problems, the BletiaCS project was created to test Bluetooth communications between a client and a server that are both ESP32 devices.
Project homepage on SiliconTao.com
Project repository on GitLab
|
||
Haruspex ESP32 Bluetooth & Wi-Fi with React-Native Android app |
This project was developed with VSCodium and the PlatformIO extension.
VSCodium is not supported by Microsoft, and so these plugins must be manually installed.
- Download cpptools-linux.vsix
- Install cpptools-linux.vsix in vscodium under extensions / install from vsix
- Download PlatformIO vsix (download button on right side)
- Install PlatformIO vsix in vscodium under extensions / install from vsix
I used Fritzing to create a circuit board layout.
EPS32 part for Fritzing can be found here ESP32S-HiLetgo Dev Board with Pinout Template
# esptool flash_id
esptool.py v2.8
Found 1 serial ports
Serial port /dev/ttyUSB0
Connecting....
Detecting chip type... ESP32
Chip is ESP32D0WDQ5 (revision 3)
Features: WiFi, BT, Dual Core, 240MHz, VRef calibration in efuse, Coding Scheme None
Crystal is 40MHz
MAC: 08:d1:f9:e6:b1:68
Enabling default SPI flash mode...
Manufacturer: 5e
Device: 4016
Detected flash size: 4MB
Hard resetting via RTS pin...
An Android app developed using React-Native Expo
First attempt to use Bluetooth was with react-native-ble-manager, which seems like a great choice with support for Android 4 and newer APIs. Unfortunately, it does not seem to be compatible with Expo because it requires setting AndroidManifest that is not supported by Expo, or at least not in this way.
Expo has a different module react-native-ble-plx
Big thanks to the developers of Punch Through LightBlue app. It made debugging BLE issues much easier.
Expo Go does not support using Bluetooth hardware but is great for quickly testing screen layouts and designs, it will automatically update with live changes.
Installing packages uses npx expo install <package name>
.
Uninstalling packages uses npm uninstall <package name>
.
Originally tried using react-native-ble-manager
but could not get it to work.
npm uninstall react-native-ble-manager
npx expo install react-native-ble-plx
Installing VSCode plugins:
- Expo Tools
Installing Android Studio
brew install --cask android-platform-tools
rehash
adb device
#npx npm install eas-cli
npm install --global eas-cli
npx expo prebuild
npx expo install expo-dev-client
npx expo run:android
To build the APK, use eas-cli
Set the Android SDK path and environment variable in the shell profile. These values are specific to my environment. You will need to adjust them to match your environment.
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/emulator
export JAVA_HOME=/Library/Java/JavaVirtualMachines/amazon-corretto-21.jdk/Contents/Home
Once you have set up your Java environment variables, compile the DEV version of the code like so.
cd configApp
npm install
npm run dev_build # Builds HaruspexDev.apk to debug with Expo Metro
npm run release_build # Build Haruspex.apk as a standalone app
If you are not able to compile the APK, this prebuilt one is available. Haruspex.apk Validate the file with MD5SUM Haruspex.md5.
md5sum -c Haruspex.md5
Connect the Android phone via USB and upload using either of these
npm run upload # To install HaruspexDev.apk
npm run release # To install Haruspex.apk
# or
adb install Haruspex.apk
To run the DEV version, Metro must be running on the dev computer inside the configApp
directory.
npx expo start
ADB requires that the phone be in developer mode and that USB Debugging
be enabled in Settings
-> Developer Options
.
ADB is a command-line tool that can be used for file management of the Android device.
List files in the Screenshots folder
adb shell ls -R "/storage/self/primary/DCIM//Screenshots/"
Download a screenshot
adb pull /storage/self/primary/DCIM//Screenshots/Screenshot_20241112-092414_Haruspex.jpg ~/Screenshot_20241112-092414_Haruspex.jpg
/storage/self/primary/DCIM//Screenshots/Screenshot_20241112-092414_Ha...pex.jpg: 1 file pulled, 0 skipped. 13.0 MB/s (191856 bytes in 0.014s)
AVD does not support BLE hardware but can be used to design the screen layout.
Android Virtual Device must be set up in Android Studio before running in this way.
npx expo run:android
Connect to the ESP32 using the Haruspex BLE app for Android and set Wi-Fi credentials.
This version of the project no longer supports a secrets.txt
file.
Adding Bluetooth libraries made the binary 1.5MB and was to large for the default 1.3MB app partition.
A custom partition was made to remove OTA partitions and increase the app partition size.
NOTE: Offset must be multiple of 4kB (0x1000) and for app partitions it must be aligned by 64kB (0x10000).
The data partition is used to store files that are not compiled code.
The ./data
directory must be built as a Filesystem Image in PlatformIO and uploaded to the ESP32.
The LibreOffice Calc file is configured to calculate the partition sizes and offsets. It uses a function to convert HEX2DEC, perform the calculations, and convert back to HEX with a prefix 0x
=CONCAT("0x", DEC2HEX(HEX2DEC(RIGHT(D3, LEN(D3)-2))+HEX2DEC(RIGHT(E3, LEN(E3)-2))))
The frontend files are served from a CDN (Content Delivery Network).
To do this Access-Control-Allow-Origin
is set in the header served by webServer.cpp
and in the CDN.
For development, the frontend can be served locally using webServer.py that has CORS enabled.
The Web Type is a configuration value that selects the front-end web pages to load.
Available Web Types:
- haruspex loads haruspex.js
- leds loads leds.js