├── Arduino Sketch └── main │ ├── BLE.cpp │ ├── BLE.h │ └── main.ino ├── GithubRepo ├── v2.0.bin └── version.json ├── LICENSE.md └── WebApp ├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── serviceWorker.js └── setupTests.js /Arduino Sketch/main/BLE.cpp: -------------------------------------------------------------------------------- 1 | #include "BLE.h" 2 | 3 | #define SERVICE_UUID_ESPOTA "d804b643-6ce7-4e81-9f8a-ce0f699085eb" 4 | #define CHARACTERISTIC_UUID_ID "d804b644-6ce7-4e81-9f8a-ce0f699085eb" 5 | 6 | #define SERVICE_UUID_OTA "c8659210-af91-4ad3-a995-a58d6fd26145" // UART service UUID 7 | #define CHARACTERISTIC_UUID_FW "c8659211-af91-4ad3-a995-a58d6fd26145" 8 | #define CHARACTERISTIC_UUID_HW_VERSION "c8659212-af91-4ad3-a995-a58d6fd26145" 9 | 10 | #define FULL_PACKET 512 11 | #define CHARPOS_UPDATE_FLAG 5 12 | 13 | esp_ota_handle_t otaHandler = 0; 14 | 15 | bool updateFlag = false; 16 | bool readyFlag = false; 17 | int bytesReceived = 0; 18 | int timesWritten = 0; 19 | 20 | void otaCallback::onWrite(BLECharacteristic *pCharacteristic) 21 | { 22 | std::string rxData = pCharacteristic->getValue(); 23 | if (!updateFlag) { //If it's the first packet of OTA since bootup, begin OTA 24 | Serial.println("BeginOTA"); 25 | esp_ota_begin(esp_ota_get_next_update_partition(NULL), OTA_SIZE_UNKNOWN, &otaHandler); 26 | updateFlag = true; 27 | } 28 | if (_p_ble != NULL) 29 | { 30 | if (rxData.length() > 0) 31 | { 32 | esp_ota_write(otaHandler, rxData.c_str(), rxData.length()); 33 | if (rxData.length() != FULL_PACKET) 34 | { 35 | esp_ota_end(otaHandler); 36 | Serial.println("EndOTA"); 37 | if (ESP_OK == esp_ota_set_boot_partition(esp_ota_get_next_update_partition(NULL))) { 38 | delay(2000); 39 | esp_restart(); 40 | } 41 | else { 42 | Serial.println("Upload Error"); 43 | } 44 | } 45 | } 46 | } 47 | 48 | uint8_t txData[5] = {1, 2, 3, 4, 5}; 49 | //delay(1000); 50 | pCharacteristic->setValue((uint8_t*)txData, 5); 51 | pCharacteristic->notify(); 52 | } 53 | 54 | // 55 | // Constructor 56 | BLE::BLE(void) { 57 | 58 | } 59 | 60 | // 61 | // Destructor 62 | BLE::~BLE(void) 63 | { 64 | 65 | } 66 | 67 | // 68 | // begin 69 | bool BLE::begin(const char* localName = "UART Service") { 70 | // Create the BLE Device 71 | BLEDevice::init(localName); 72 | 73 | // Create the BLE Server 74 | pServer = BLEDevice::createServer(); 75 | pServer->setCallbacks(new BLECustomServerCallbacks()); 76 | 77 | // Create the BLE Service 78 | pESPOTAService = pServer->createService(SERVICE_UUID_ESPOTA); 79 | pService = pServer->createService(SERVICE_UUID_OTA); 80 | 81 | // Create a BLE Characteristic 82 | pESPOTAIdCharacteristic = pESPOTAService->createCharacteristic( 83 | CHARACTERISTIC_UUID_ID, 84 | BLECharacteristic::PROPERTY_READ 85 | ); 86 | 87 | pVersionCharacteristic = pService->createCharacteristic( 88 | CHARACTERISTIC_UUID_HW_VERSION, 89 | BLECharacteristic::PROPERTY_READ 90 | ); 91 | 92 | pOtaCharacteristic = pService->createCharacteristic( 93 | CHARACTERISTIC_UUID_FW, 94 | BLECharacteristic::PROPERTY_NOTIFY | BLECharacteristic::PROPERTY_WRITE 95 | ); 96 | 97 | pOtaCharacteristic->addDescriptor(new BLE2902()); 98 | pOtaCharacteristic->setCallbacks(new otaCallback(this)); 99 | 100 | // Start the service(s) 101 | pESPOTAService->start(); 102 | pService->start(); 103 | 104 | // Start advertising 105 | pServer->getAdvertising()->addServiceUUID(SERVICE_UUID_ESPOTA); 106 | pServer->getAdvertising()->start(); 107 | 108 | uint8_t hardwareVersion[5] = {HARDWARE_VERSION_MAJOR, HARDWARE_VERSION_MINOR, SOFTWARE_VERSION_MAJOR, SOFTWARE_VERSION_MINOR, SOFTWARE_VERSION_PATCH}; 109 | pVersionCharacteristic->setValue((uint8_t*)hardwareVersion, 5); 110 | return true; 111 | } 112 | -------------------------------------------------------------------------------- /Arduino Sketch/main/BLE.h: -------------------------------------------------------------------------------- 1 | #ifndef _BLE_H_ 2 | #define _BLE_H_ 3 | 4 | #include "Arduino.h" 5 | 6 | #include 7 | #include 8 | #include 9 | #include 10 | 11 | #include "esp_ota_ops.h" 12 | 13 | #define SOFTWARE_VERSION_MAJOR 0 14 | #define SOFTWARE_VERSION_MINOR 1 15 | #define SOFTWARE_VERSION_PATCH 0 16 | #define HARDWARE_VERSION_MAJOR 1 17 | #define HARDWARE_VERSION_MINOR 2 18 | 19 | class BLE; // forward declaration 20 | 21 | class BLECustomServerCallbacks: public BLEServerCallbacks { 22 | void onConnect(BLEServer* pServer) { 23 | // deviceConnected = true; 24 | // // code here for when device connects 25 | }; 26 | 27 | void onDisconnect(BLEServer* pServer) { 28 | // deviceConnected = false; 29 | // // code here for when device disconnects 30 | } 31 | }; 32 | 33 | class otaCallback: public BLECharacteristicCallbacks { 34 | public: 35 | otaCallback(BLE* ble) { 36 | _p_ble = ble; 37 | } 38 | BLE* _p_ble; 39 | 40 | void onWrite(BLECharacteristic *pCharacteristic); 41 | }; 42 | 43 | class BLE 44 | { 45 | public: 46 | 47 | BLE(void); 48 | ~BLE(void); 49 | 50 | bool begin(const char* localName); 51 | 52 | private: 53 | String local_name; 54 | 55 | BLEServer *pServer = NULL; 56 | 57 | BLEService *pESPOTAService = NULL; 58 | BLECharacteristic * pESPOTAIdCharacteristic = NULL; 59 | 60 | BLEService *pService = NULL; 61 | BLECharacteristic * pVersionCharacteristic = NULL; 62 | BLECharacteristic * pOtaCharacteristic = NULL; 63 | }; 64 | 65 | #endif 66 | -------------------------------------------------------------------------------- /Arduino Sketch/main/main.ino: -------------------------------------------------------------------------------- 1 | #include "BLE.h" 2 | /**Bluetooth**/ 3 | BLE BT; 4 | 5 | void setup(void) { 6 | Serial.begin(115200); 7 | Serial.println("Serial Begin"); 8 | Serial.println(); 9 | 10 | Serial.print("HW v"); 11 | Serial.print(HARDWARE_VERSION_MAJOR); 12 | Serial.print("."); 13 | Serial.println(HARDWARE_VERSION_MINOR); 14 | 15 | Serial.print("SW v"); 16 | Serial.print(SOFTWARE_VERSION_MAJOR); 17 | Serial.print("."); 18 | Serial.print(SOFTWARE_VERSION_MINOR); 19 | Serial.print("."); 20 | Serial.println(SOFTWARE_VERSION_PATCH); 21 | 22 | BT.begin("ESP32 OTA Updates"); 23 | } 24 | 25 | void loop(void) { 26 | 27 | } 28 | -------------------------------------------------------------------------------- /GithubRepo/v2.0.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkfun/ESP32_OTA_BLE_React_WebApp_Demo/adef93855b2e59e251198ec1f5e5391f186db57c/GithubRepo/v2.0.bin -------------------------------------------------------------------------------- /GithubRepo/version.json: -------------------------------------------------------------------------------- 1 | { 2 | "firmware": [ 3 | { 4 | "software": "v2.0.0", 5 | "hardware": [ 6 | "v2.0" 7 | ] 8 | }, 9 | { 10 | "software": "v0.1.1", 11 | "hardware": [ 12 | "v1.3", 13 | "v1.2" 14 | ] 15 | }, 16 | { 17 | "software": "v0.1.0", 18 | "hardware": [ 19 | "v1.3", 20 | "v1.2", 21 | "v1.1" 22 | ] 23 | } 24 | ] 25 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkfun/ESP32_OTA_BLE_React_WebApp_Demo/adef93855b2e59e251198ec1f5e5391f186db57c/LICENSE.md -------------------------------------------------------------------------------- /WebApp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /WebApp/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /WebApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tet-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-dropdown": "^1.7.0", 12 | "react-popup": "^0.10.0", 13 | "react-scripts": "3.4.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": "react-app" 23 | }, 24 | "browserslist": { 25 | "production": [ 26 | ">0.2%", 27 | "not dead", 28 | "not op_mini all" 29 | ], 30 | "development": [ 31 | "last 1 chrome version", 32 | "last 1 firefox version", 33 | "last 1 safari version" 34 | ] 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /WebApp/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkfun/ESP32_OTA_BLE_React_WebApp_Demo/adef93855b2e59e251198ec1f5e5391f186db57c/WebApp/public/favicon.ico -------------------------------------------------------------------------------- /WebApp/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | ESP32 OTA via Bluetooth 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /WebApp/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkfun/ESP32_OTA_BLE_React_WebApp_Demo/adef93855b2e59e251198ec1f5e5391f186db57c/WebApp/public/logo192.png -------------------------------------------------------------------------------- /WebApp/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sparkfun/ESP32_OTA_BLE_React_WebApp_Demo/adef93855b2e59e251198ec1f5e5391f186db57c/WebApp/public/logo512.png -------------------------------------------------------------------------------- /WebApp/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /WebApp/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /WebApp/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: left; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | 11 | 12 | .App-header { 13 | background-color: #282c34; 14 | min-height: 100vh; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | justify-content: center; 19 | font-size: calc(10px + 2vmin); 20 | color: white; 21 | } 22 | 23 | .App-link { 24 | color: #61dafb; 25 | } 26 | 27 | .mm-popup { 28 | display: none; 29 | } 30 | 31 | .mm-popup--visible { 32 | display: block; 33 | } 34 | 35 | .mm-popup__overlay { 36 | position: fixed; 37 | top: 0; 38 | left: 0; 39 | width: 100%; 40 | height: 100%; 41 | z-index: 1000; 42 | overflow: auto; 43 | background: rgba(0, 0, 0, .1); 44 | } 45 | 46 | .mm-popup__close { 47 | position: absolute; 48 | top: 15px; 49 | right: 20px; 50 | padding: 0; 51 | width: 20px; 52 | height: 20px; 53 | cursor: pointer; 54 | outline: none; 55 | text-align: center; 56 | border-radius: 10px; 57 | border: none; 58 | text-indent: -9999px; 59 | background: transparent url('data:image/png;base64,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') no-repeat center center; 60 | background-size: 100%; 61 | margin: 0; 62 | } 63 | 64 | .mm-popup__input { 65 | display: block; 66 | width: 100%; 67 | height: 30px; 68 | border-radius: 3px; 69 | background: #f5f5f5; 70 | border: 1px solid #e9ebec; 71 | outline: none; 72 | -moz-box-sizing: border-box !important; 73 | -webkit-box-sizing: border-box !important; 74 | box-sizing: border-box !important; 75 | font-size: 14px; 76 | padding: 0 12px; 77 | color: #808080; 78 | } 79 | 80 | .mm-popup__btn { 81 | border-radius: 3px; 82 | -moz-box-sizing: border-box; 83 | -webkit-box-sizing: border-box; 84 | box-sizing: border-box; 85 | padding: 0 10px; 86 | margin: 0; 87 | line-height: 32px; 88 | height: 32px; 89 | border: 1px solid #666; 90 | text-align: center; 91 | display: inline-block; 92 | font-size: 12px; 93 | font-weight: 400; 94 | color: #333; 95 | background: transparent; 96 | outline: none; 97 | text-decoration: none; 98 | cursor: pointer; 99 | font-family: "Open Sans", sans-serif; 100 | } 101 | 102 | .mm-popup__btn--success { 103 | background-color: #27ae60; 104 | border-color: #27ae60; 105 | color: #fff; 106 | } 107 | 108 | .mm-popup__btn--danger { 109 | background-color: #c5545c; 110 | border-color: #c5545c; 111 | color: #fff; 112 | } 113 | 114 | .mm-popup__box { 115 | width: 350px; 116 | position: fixed; 117 | top: 10%; 118 | left: 50%; 119 | margin-left: -175px; 120 | background: #fff; 121 | box-shadow: 0px 5px 20px 0px rgba(126,137,140,0.20); 122 | border-radius: 5px; 123 | border: 1px solid #B8C8CC; 124 | overflow: hidden; 125 | z-index: 1001; 126 | } 127 | 128 | .mm-popup__box__header { 129 | padding: 15px 20px; 130 | background: #EDF5F7; 131 | color: #454B4D; 132 | } 133 | 134 | .mm-popup__box__header__title { 135 | margin: 0; 136 | font-size: 16px; 137 | text-align: left; 138 | font-weight: 600; 139 | } 140 | 141 | .mm-popup__box__body { 142 | padding: 20px; 143 | line-height: 1.4; 144 | font-size: 14px; 145 | color: #454B4D; 146 | background: #fff; 147 | position: relative; 148 | z-index: 2; 149 | } 150 | 151 | .mm-popup__box__body p { 152 | margin: 0 0 5px; 153 | } 154 | 155 | .mm-popup__box__footer { 156 | overflow: hidden; 157 | padding: 40px 20px 20px; 158 | } 159 | 160 | .mm-popup__box__footer__right-space { 161 | float: right; 162 | } 163 | 164 | .mm-popup__box__footer__right-space .mm-popup__btn { 165 | margin-left: 5px; 166 | } 167 | 168 | .mm-popup__box__footer__left-space { 169 | float: left; 170 | } 171 | 172 | .mm-popup__box__footer__left-space .mm-popup__btn { 173 | margin-right: 5px; 174 | } 175 | 176 | .mm-popup__box--popover { 177 | width: 300px; 178 | margin-left: -150px; 179 | } 180 | 181 | .mm-popup__box--popover .mm-popup__close { 182 | position: absolute; 183 | top: 5px; 184 | right: 5px; 185 | padding: 0; 186 | width: 20px; 187 | height: 20px; 188 | cursor: pointer; 189 | outline: none; 190 | text-align: center; 191 | border-radius: 10px; 192 | border: none; 193 | text-indent: -9999px; 194 | background: transparent url('data:image/png;base64,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') no-repeat center center; 195 | background-size: 100%; 196 | margin: 0; 197 | z-index: 3; 198 | } 199 | 200 | .mm-popup__box--popover .mm-popup__box__body { 201 | padding: 20px; 202 | } 203 | 204 | @media (max-width: 420px) { 205 | .mm-popup__box { 206 | width: auto; 207 | left: 10px; 208 | right: 10px; 209 | top: 10px; 210 | margin-left: 0; 211 | } 212 | 213 | .mm-popup__box__footer__left-space { 214 | float: none; 215 | } 216 | 217 | .mm-popup__box__footer__right-space { 218 | float: none; 219 | } 220 | 221 | .mm-popup__box__footer { 222 | padding-top: 30px; 223 | } 224 | 225 | .mm-popup__box__footer .mm-popup__btn { 226 | display: block; 227 | width: 100%; 228 | text-align: center; 229 | margin-top: 10px; 230 | } 231 | } -------------------------------------------------------------------------------- /WebApp/src/App.js: -------------------------------------------------------------------------------- 1 | 2 | /*************************************************** 3 | This is a React WebApp written to Flash an ESP32 via BLE 4 | 5 | Written by Andrew England (SparkFun) 6 | BSD license, all text above must be included in any redistribution. 7 | *****************************************************/ 8 | 9 | import React from 'react'; 10 | import Popup from 'react-popup'; 11 | import './App.css'; 12 | 13 | var myESP32 = 'd804b643-6ce7-4e81-9f8a-ce0f699085eb' 14 | 15 | var otaServiceUuid = 'c8659210-af91-4ad3-a995-a58d6fd26145' 16 | var versionCharacteristicUuid = 'c8659212-af91-4ad3-a995-a58d6fd26145' 17 | var fileCharacteristicUuid = 'c8659211-af91-4ad3-a995-a58d6fd26145' 18 | 19 | let esp32Device = null; 20 | let esp32Service = null; 21 | let readyFlagCharacteristic = null; 22 | let dataToSend = null; 23 | let updateData = null; 24 | 25 | var totalSize; 26 | var remaining; 27 | var amountToWrite; 28 | var currentPosition; 29 | 30 | var currentHardwareVersion = "N/A"; 31 | var softwareVersion = "N/A"; 32 | var latestCompatibleSoftware = "N/A"; 33 | 34 | const characteristicSize = 512; 35 | 36 | /* BTConnect 37 | * Brings up the bluetooth connection window and filters for the esp32 38 | */ 39 | function BTConnect(){ 40 | navigator.bluetooth.requestDevice({ 41 | filters: [{ 42 | services: [myESP32] 43 | }], 44 | optionalServices: [otaServiceUuid] 45 | }) 46 | .then(device => { 47 | return device.gatt.connect() 48 | }) 49 | .then(server => server.getPrimaryService(otaServiceUuid)) 50 | .then(service => { 51 | esp32Service = service; 52 | }) 53 | .then(service => { 54 | return service; 55 | }) 56 | .then(_ => { 57 | return CheckVersion(); 58 | }) 59 | .catch(error => { console.log(error); }); 60 | } 61 | 62 | /* onDisconnected(event) 63 | * If the device becomes disconnected, prompt the user to reconnect. 64 | */ 65 | function onDisconnected(event) { 66 | Popup.create({ 67 | content: esp32Device.name + ' is disconnected, would you like to reconnect?', 68 | buttons: { 69 | left: [{ 70 | text: 'Yes', 71 | action: function () { 72 | Popup.close(); 73 | BTConnect(); 74 | } 75 | }], 76 | right: [{ 77 | text: 'No', 78 | action: function () { 79 | Popup.close(); 80 | } 81 | }] 82 | } 83 | }) 84 | } 85 | 86 | /* CheckVersion() 87 | * Grab most current version from Github and Server, if they don't match, prompt the user for firmware update 88 | */ 89 | function CheckVersion(){ 90 | if(!esp32Service) 91 | { 92 | return; 93 | } 94 | return esp32Service.getCharacteristic(versionCharacteristicUuid) 95 | .then(characteristic => characteristic.readValue()) 96 | .then(value => { 97 | currentHardwareVersion = 'v' + value.getUint8(0) + '.' + value.getUint8(1); 98 | softwareVersion = 'v' + value.getUint8(2) + '.' + value.getUint8(3) + '.' + value.getUint8(4); 99 | document.getElementById('hw_version').innerHTML = "Hardware: " + currentHardwareVersion; 100 | document.getElementById('sw_version').innerHTML = "Software: " + softwareVersion; 101 | }) 102 | //Grab our version numbers from Github 103 | .then(_ => fetch('https://raw.githubusercontent.com/sparkfun/ESP32_OTA_BLE_React_WebApp_Demo/master/GithubRepo/version.json')) 104 | .then(function (response) { 105 | // The API call was successful! 106 | return response.json(); 107 | }) 108 | .then(function (data) { 109 | // JSON should be formatted so that 0'th entry is the newest version 110 | if (latestCompatibleSoftware === softwareVersion) 111 | { 112 | //Software is updated, do nothing. 113 | } 114 | else { 115 | var softwareVersionCount = 0; 116 | latestCompatibleSoftware = data.firmware[softwareVersionCount]['software']; 117 | versionFindLoop: 118 | while (latestCompatibleSoftware !== undefined) { 119 | var compatibleHardwareVersion = "N/A" 120 | var hardwareVersionCount = 0; 121 | while (compatibleHardwareVersion !== undefined) { 122 | compatibleHardwareVersion = data.firmware[softwareVersionCount]['hardware'][hardwareVersionCount++]; 123 | if (compatibleHardwareVersion === currentHardwareVersion) 124 | { 125 | latestCompatibleSoftware = data.firmware[softwareVersionCount]['software']; 126 | if (latestCompatibleSoftware !== softwareVersion) 127 | { 128 | console.log(latestCompatibleSoftware); 129 | PromptUserForUpdate(); 130 | } 131 | break versionFindLoop; 132 | } 133 | } 134 | softwareVersionCount++; 135 | } 136 | } 137 | }) 138 | .catch(error => { console.log(error); }); 139 | } 140 | 141 | /* PromptUserForUpdate() 142 | * Asks the user if they want to update, if yes downloads the firmware based on the hardware version and latest software version and begins sending 143 | */ 144 | function PromptUserForUpdate(){ 145 | Popup.create({ 146 | content: "Version " + softwareVersion + " is out of date. Update to " + latestCompatibleSoftware + "?", 147 | buttons: { 148 | left: [{ 149 | text: 'Yes', 150 | action: function () { 151 | fetch('https://raw.githubusercontent.com/sparkfun/ESP32_OTA_BLE_React_WebApp_Demo/' + latestCompatibleSoftware + '/GithubRepo/' + currentHardwareVersion + '.bin') 152 | .then(function (response) { 153 | return response.arrayBuffer(); 154 | }) 155 | .then(function (data) { 156 | Popup.close(); 157 | 158 | updateData = data; 159 | return SendFileOverBluetooth(); 160 | }) 161 | .catch(function (err) { console.warn('Something went wrong.', err); }); 162 | } 163 | }], 164 | right: [{ 165 | text: 'No', 166 | action: function () { 167 | Popup.close(); 168 | } 169 | }] 170 | } 171 | }) 172 | } 173 | 174 | /* SendFileOverBluetooth(data) 175 | * Figures out how large our update binary is, attaches an eventListener to our dataCharacteristic so the Server can tell us when it has finished writing the data to memory 176 | * Calls SendBufferedData(), which begins a loop of write, wait for ready flag, write, wait for ready flag... 177 | */ 178 | function SendFileOverBluetooth() { 179 | if(!esp32Service) 180 | { 181 | console.log("No esp32 Service"); 182 | return; 183 | } 184 | 185 | totalSize = updateData.byteLength; 186 | remaining = totalSize; 187 | amountToWrite = 0; 188 | currentPosition = 0; 189 | esp32Service.getCharacteristic(fileCharacteristicUuid) 190 | .then(characteristic => { 191 | readyFlagCharacteristic = characteristic; 192 | return characteristic.startNotifications() 193 | .then(_ => { 194 | readyFlagCharacteristic.addEventListener('characteristicvaluechanged', SendBufferedData) 195 | }); 196 | }) 197 | .catch(error => { 198 | console.log(error); 199 | }); 200 | SendBufferedData(); 201 | } 202 | 203 | 204 | /* SendBufferedData() 205 | * An ISR attached to the same characteristic that it writes to, this function slices data into characteristic sized chunks and sends them to the Server 206 | */ 207 | function SendBufferedData() { 208 | if (remaining > 0) { 209 | if (remaining >= characteristicSize) { 210 | amountToWrite = characteristicSize 211 | } 212 | else { 213 | amountToWrite = remaining; 214 | } 215 | dataToSend = updateData.slice(currentPosition, currentPosition + amountToWrite); 216 | currentPosition += amountToWrite; 217 | remaining -= amountToWrite; 218 | console.log("remaining: " + remaining); 219 | esp32Service.getCharacteristic(fileCharacteristicUuid) 220 | .then(characteristic => RecursiveSend(characteristic, dataToSend)) 221 | .then(_ => { 222 | return document.getElementById('completion').innerHTML = (100 * (currentPosition/totalSize)).toPrecision(3) + '%'; 223 | }) 224 | .catch(error => { 225 | console.log(error); 226 | }); 227 | } 228 | } 229 | 230 | 231 | /* resursiveSend() 232 | * Returns a promise to itself to ensure data was sent and the promise is resolved. 233 | */ 234 | function RecursiveSend(characteristic, data) { 235 | return characteristic.writeValue(data) 236 | .catch(error => { 237 | return RecursiveSend(characteristic, data); 238 | }); 239 | } 240 | 241 | 242 | /* App() 243 | * The meat and potatoes of our web-app; where it all comes together 244 | */ 245 | function App() { 246 | return ( 247 |
248 |
249 | 250 |

Hardware: Not Connected

251 |

Software: Not Connected

252 |

253 | 258 |
259 |
260 | ) 261 | } 262 | 263 | export default App; -------------------------------------------------------------------------------- /WebApp/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /WebApp/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /WebApp/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want your app to work offline and load faster, you can change 15 | // unregister() to register() below. Note this comes with some pitfalls. 16 | // Learn more about service workers: https://bit.ly/CRA-PWA 17 | serviceWorker.unregister(); 18 | -------------------------------------------------------------------------------- /WebApp/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /WebApp/src/serviceWorker.js: -------------------------------------------------------------------------------- 1 | // This optional code is used to register a service worker. 2 | // register() is not called by default. 3 | 4 | // This lets the app load faster on subsequent visits in production, and gives 5 | // it offline capabilities. However, it also means that developers (and users) 6 | // will only see deployed updates on subsequent visits to a page, after all the 7 | // existing tabs open on the page have been closed, since previously cached 8 | // resources are updated in the background. 9 | 10 | // To learn more about the benefits of this model and instructions on how to 11 | // opt-in, read https://bit.ly/CRA-PWA 12 | 13 | const isLocalhost = Boolean( 14 | window.location.hostname === 'localhost' || 15 | // [::1] is the IPv6 localhost address. 16 | window.location.hostname === '[::1]' || 17 | // 127.0.0.0/8 are considered localhost for IPv4. 18 | window.location.hostname.match( 19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ 20 | ) 21 | ); 22 | 23 | export function register(config) { 24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { 25 | // The URL constructor is available in all browsers that support SW. 26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); 27 | if (publicUrl.origin !== window.location.origin) { 28 | // Our service worker won't work if PUBLIC_URL is on a different origin 29 | // from what our page is served on. This might happen if a CDN is used to 30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374 31 | return; 32 | } 33 | 34 | window.addEventListener('load', () => { 35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; 36 | 37 | if (isLocalhost) { 38 | // This is running on localhost. Let's check if a service worker still exists or not. 39 | checkValidServiceWorker(swUrl, config); 40 | 41 | // Add some additional logging to localhost, pointing developers to the 42 | // service worker/PWA documentation. 43 | navigator.serviceWorker.ready.then(() => { 44 | console.log( 45 | 'This web app is being served cache-first by a service ' + 46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA' 47 | ); 48 | }); 49 | } else { 50 | // Is not localhost. Just register service worker 51 | registerValidSW(swUrl, config); 52 | } 53 | }); 54 | } 55 | } 56 | 57 | function registerValidSW(swUrl, config) { 58 | navigator.serviceWorker 59 | .register(swUrl) 60 | .then(registration => { 61 | registration.onupdatefound = () => { 62 | const installingWorker = registration.installing; 63 | if (installingWorker == null) { 64 | return; 65 | } 66 | installingWorker.onstatechange = () => { 67 | if (installingWorker.state === 'installed') { 68 | if (navigator.serviceWorker.controller) { 69 | // At this point, the updated precached content has been fetched, 70 | // but the previous service worker will still serve the older 71 | // content until all client tabs are closed. 72 | console.log( 73 | 'New content is available and will be used when all ' + 74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' 75 | ); 76 | 77 | // Execute callback 78 | if (config && config.onUpdate) { 79 | config.onUpdate(registration); 80 | } 81 | } else { 82 | // At this point, everything has been precached. 83 | // It's the perfect time to display a 84 | // "Content is cached for offline use." message. 85 | console.log('Content is cached for offline use.'); 86 | 87 | // Execute callback 88 | if (config && config.onSuccess) { 89 | config.onSuccess(registration); 90 | } 91 | } 92 | } 93 | }; 94 | }; 95 | }) 96 | .catch(error => { 97 | console.error('Error during service worker registration:', error); 98 | }); 99 | } 100 | 101 | function checkValidServiceWorker(swUrl, config) { 102 | // Check if the service worker can be found. If it can't reload the page. 103 | fetch(swUrl, { 104 | headers: { 'Service-Worker': 'script' }, 105 | }) 106 | .then(response => { 107 | // Ensure service worker exists, and that we really are getting a JS file. 108 | const contentType = response.headers.get('content-type'); 109 | if ( 110 | response.status === 404 || 111 | (contentType != null && contentType.indexOf('javascript') === -1) 112 | ) { 113 | // No service worker found. Probably a different app. Reload the page. 114 | navigator.serviceWorker.ready.then(registration => { 115 | registration.unregister().then(() => { 116 | window.location.reload(); 117 | }); 118 | }); 119 | } else { 120 | // Service worker found. Proceed as normal. 121 | registerValidSW(swUrl, config); 122 | } 123 | }) 124 | .catch(() => { 125 | console.log( 126 | 'No internet connection found. App is running in offline mode.' 127 | ); 128 | }); 129 | } 130 | 131 | export function unregister() { 132 | if ('serviceWorker' in navigator) { 133 | navigator.serviceWorker.ready 134 | .then(registration => { 135 | registration.unregister(); 136 | }) 137 | .catch(error => { 138 | console.error(error.message); 139 | }); 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /WebApp/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom/extend-expect'; 6 | --------------------------------------------------------------------------------