Added OTAWebUpdater Doc (#1583)
This commit is contained in:
Karan Sharma
Me No Dev
parent
4e5cbdaa7f
commit
0161e28614
@ -28,6 +28,7 @@ Most of the framework is implemented. Most noticable is the missing analogWrite.
|
||||
- [Using PlatformIO](docs/platformio.md)
|
||||
- [Building with make](docs/make.md)
|
||||
- [Using as ESP-IDF component](docs/esp-idf_component.md)
|
||||
- [Using OTAWebUpdater](docs/OTAWebUpdate/OTAWebUpdate.md)
|
||||
|
||||
#### Decoding exceptions
|
||||
|
||||
|
||||
59
docs/OTAWebUpdate/OTAWebUpdate.md
Normal file
59
docs/OTAWebUpdate/OTAWebUpdate.md
Normal file
@ -0,0 +1,59 @@
|
||||
# Over the Air through Web browser
|
||||
OTAWebUpdate is done with a web browser that can be useful in the following typical scenarios:
|
||||
- Once the application developed and loading directly from Arduino IDE is inconvenient or not possible
|
||||
- after deployment if user is unable to expose Firmware for OTA from external update server
|
||||
- provide updates after deployment to small quantity of modules when setting an update server is not practicable
|
||||
|
||||
## Requirements
|
||||
- The ESP and the computer must be connected to the same network
|
||||
|
||||
## Implementation
|
||||
The sample implementation has been done using:
|
||||
- example sketch OTAWebUpdater.ino
|
||||
- ESP32 (Dev Module)
|
||||
|
||||
You can use another module also if it meets Flash chip size of the sketch
|
||||
|
||||
1-Before you begin, please make sure that you have the following software installed:
|
||||
- Arduino IDE
|
||||
- Host software depending on O/S you use:
|
||||
- Avahi http://avahi.org/ for Linux
|
||||
- Bonjour http://www.apple.com/support/bonjour/ for Windows
|
||||
- Mac OSX and iOS - support is already built in / no any extra s/w is required
|
||||
|
||||
Prepare the sketch and configuration for initial upload with a serial port
|
||||
- Start Arduino IDE and load sketch OTAWebUpdater.ino available under File > Examples > OTAWebUpdater.ino
|
||||
- Update ssid and pass in the sketch so the module can join your Wi-Fi network
|
||||
- Open File > Preferences, look for “Show verbose output during:” and check out “compilation” option
|
||||
|
||||
|
||||
|
||||
- Upload sketch (Ctrl+U)
|
||||
- Now open web browser and enter the url, i.e. http://esp32.local. Once entered, browser should display a form
|
||||
|
||||
|
||||
|
||||
> username= admin
|
||||
|
||||
> password= admin
|
||||
|
||||
**Note**-*If entering “http://ESP32.local” does not work, try replacing “ESP32” with module’s IP address.This workaround is useful in case the host software installed does not work*.
|
||||
|
||||
Now click on Login button and browser will display a upload form
|
||||
|
||||
|
||||
|
||||
For Uploading the New Firmware you need to provide the Binary File of your Code.
|
||||
|
||||
Exporting Binary file of the Firmware (Code)
|
||||
- Open up the Arduino IDE
|
||||
- Open up the Code, for Exporting up Binary file
|
||||
- Now go to Sketch > export compiled Binary
|
||||
|
||||
|
||||
- Binary file is exported to the same Directory where your code is present
|
||||
|
||||
Once you are comfortable with this procedure go ahead and modify OTAWebUpdater.ino sketch to print some additional messages, compile it, Export new binary file and upload it using web browser to see entered changes on a Serial Monitor
|
||||
|
||||
|
||||
|
||||
BIN
docs/OTAWebUpdate/esp32login.PNG
Normal file
BIN
docs/OTAWebUpdate/esp32login.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/OTAWebUpdate/esp32upload.PNG
Normal file
BIN
docs/OTAWebUpdate/esp32upload.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
BIN
docs/OTAWebUpdate/esp32verbose.PNG
Normal file
BIN
docs/OTAWebUpdate/esp32verbose.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
docs/OTAWebUpdate/exportTobinary.PNG
Normal file
BIN
docs/OTAWebUpdate/exportTobinary.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@ -4,93 +4,101 @@
|
||||
#include <ESPmDNS.h>
|
||||
#include <Update.h>
|
||||
|
||||
const char* host = "ESP32";
|
||||
const char* host = "esp32";
|
||||
const char* ssid = "xxx";
|
||||
const char* password = "xxxx";
|
||||
|
||||
WebServer server(80);
|
||||
|
||||
const char* loginIndex = "<form name='loginForm'>"
|
||||
"<table width='20%' bgcolor='A09F9F' align='center'>"
|
||||
"<tr>"
|
||||
"<td colspan=2><center><font size=4><b>ESP32 Login Page</b></font></center>"
|
||||
"<br>"
|
||||
/*
|
||||
* Login page
|
||||
*/
|
||||
|
||||
"</td>"
|
||||
"<br>"
|
||||
"<br>"
|
||||
"</tr>"
|
||||
"<td>Username:</td>"
|
||||
"<td><input type='text' size=25 name='userid'><br></td>"
|
||||
"</tr>"
|
||||
"<br>"
|
||||
"<br>"
|
||||
"<tr>"
|
||||
"<td>Password:</td>"
|
||||
"<td><input type='Password' size=25 name='pwd'><br></td>"
|
||||
"<br>"
|
||||
"<br>"
|
||||
"</tr>"
|
||||
const char* loginIndex =
|
||||
"<form name='loginForm'>"
|
||||
"<table width='20%' bgcolor='A09F9F' align='center'>"
|
||||
"<tr>"
|
||||
"<td colspan=2>"
|
||||
"<center><font size=4><b>ESP32 Login Page</b></font></center>"
|
||||
"<br>"
|
||||
"</td>"
|
||||
"<br>"
|
||||
"<br>"
|
||||
"</tr>"
|
||||
"<td>Username:</td>"
|
||||
"<td><input type='text' size=25 name='userid'><br></td>"
|
||||
"</tr>"
|
||||
"<br>"
|
||||
"<br>"
|
||||
"<tr>"
|
||||
"<td>Password:</td>"
|
||||
"<td><input type='Password' size=25 name='pwd'><br></td>"
|
||||
"<br>"
|
||||
"<br>"
|
||||
"</tr>"
|
||||
"<tr>"
|
||||
"<td><input type='submit' onclick='check(this.form)' value='Login'></td>"
|
||||
"</tr>"
|
||||
"</table>"
|
||||
"</form>"
|
||||
"<script>"
|
||||
"function check(form)"
|
||||
"{"
|
||||
"if(form.userid.value=='admin' && form.pwd.value=='admin')"
|
||||
"{"
|
||||
"window.open('/serverIndex')"
|
||||
"}"
|
||||
"else"
|
||||
"{"
|
||||
" alert('Error Password or Username')/*displays error message*/"
|
||||
"}"
|
||||
"}"
|
||||
"</script>";
|
||||
|
||||
/*
|
||||
* Server Index Page
|
||||
*/
|
||||
|
||||
const char* serverIndex =
|
||||
"<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
|
||||
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
|
||||
"<input type='file' name='update'>"
|
||||
"<input type='submit' value='Update'>"
|
||||
"</form>"
|
||||
"<div id='prg'>progress: 0%</div>"
|
||||
"<script>"
|
||||
"$('form').submit(function(e){"
|
||||
"e.preventDefault();"
|
||||
"var form = $('#upload_form')[0];"
|
||||
"var data = new FormData(form);"
|
||||
" $.ajax({"
|
||||
"url: '/update',"
|
||||
"type: 'POST',"
|
||||
"data: data,"
|
||||
"contentType: false,"
|
||||
"processData:false,"
|
||||
"xhr: function() {"
|
||||
"var xhr = new window.XMLHttpRequest();"
|
||||
"xhr.upload.addEventListener('progress', function(evt) {"
|
||||
"if (evt.lengthComputable) {"
|
||||
"var per = evt.loaded / evt.total;"
|
||||
"$('#prg').html('progress: ' + Math.round(per*100) + '%');"
|
||||
"}"
|
||||
"}, false);"
|
||||
"return xhr;"
|
||||
"},"
|
||||
"success:function(d, s) {"
|
||||
"console.log('success!')"
|
||||
"},"
|
||||
"error: function (a, b, c) {"
|
||||
"}"
|
||||
"});"
|
||||
"});"
|
||||
"</script>";
|
||||
|
||||
"<tr>"
|
||||
"<td><input type='submit' onclick='check(this.form)' value='Login'></td>"
|
||||
"</tr>"
|
||||
"</table>"
|
||||
"</form>"
|
||||
"<script>"
|
||||
"function check(form)"
|
||||
"{"
|
||||
"if(form.userid.value=='admin' && form.pwd.value=='admin')"
|
||||
"{"
|
||||
"window.open('/serverIndex')"
|
||||
"}"
|
||||
"else"
|
||||
"{"
|
||||
" alert('Error Password or Username')/*displays error message*/"
|
||||
|
||||
"}"
|
||||
"}"
|
||||
"</script>";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const char* serverIndex = "<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
|
||||
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
|
||||
"<input type='file' name='update'>"
|
||||
"<input type='submit' value='Update'>"
|
||||
"</form>"
|
||||
"<div id='prg'>progress: 0%</div>"
|
||||
"<script>"
|
||||
"$('form').submit(function(e){"
|
||||
"e.preventDefault();"
|
||||
"var form = $('#upload_form')[0];"
|
||||
"var data = new FormData(form);"
|
||||
" $.ajax({"
|
||||
"url: '/update',"
|
||||
"type: 'POST',"
|
||||
"data: data,"
|
||||
"contentType: false,"
|
||||
"processData:false,"
|
||||
"xhr: function() {"
|
||||
"var xhr = new window.XMLHttpRequest();"
|
||||
"xhr.upload.addEventListener('progress', function(evt) {"
|
||||
"if (evt.lengthComputable) {"
|
||||
"var per = evt.loaded / evt.total;"
|
||||
"$('#prg').html('progress: ' + Math.round(per*100) + '%');"
|
||||
"}"
|
||||
"}, false);"
|
||||
"return xhr;"
|
||||
"},"
|
||||
"success:function(d, s) {"
|
||||
"console.log('success!')"
|
||||
"},"
|
||||
"error: function (a, b, c) {"
|
||||
"}"
|
||||
"});"
|
||||
"});"
|
||||
"</script>";
|
||||
/*
|
||||
* setup function
|
||||
*/
|
||||
void setup(void) {
|
||||
Serial.begin(115200);
|
||||
|
||||
@ -110,7 +118,7 @@ void setup(void) {
|
||||
Serial.println(WiFi.localIP());
|
||||
|
||||
/*use mdns for host name resolution*/
|
||||
if (!MDNS.begin(host)) { //http://esp32.local
|
||||
if (!MDNS.begin(host)) { //http://esp32.local
|
||||
Serial.println("Error setting up MDNS responder!");
|
||||
while (1) {
|
||||
delay(1000);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user