Skip to content

Commit 0161e28

Browse files
karan6190me-no-dev
karan6190
authored and
me-no-dev
committed
Added OTAWebUpdater Doc (espressif#1583)
1 parent 4e5cbda commit 0161e28

File tree

7 files changed

+149
-81
lines changed

7 files changed

+149
-81
lines changed

Diff for: ‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ Most of the framework is implemented. Most noticable is the missing analogWrite.
2828
- [Using PlatformIO](docs/platformio.md)
2929
- [Building with make](docs/make.md)
3030
- [Using as ESP-IDF component](docs/esp-idf_component.md)
31+
- [Using OTAWebUpdater](docs/OTAWebUpdate/OTAWebUpdate.md)
3132

3233
#### Decoding exceptions
3334

Diff for: ‎docs/OTAWebUpdate/OTAWebUpdate.md

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Over the Air through Web browser
2+
OTAWebUpdate is done with a web browser that can be useful in the following typical scenarios:
3+
- Once the application developed and loading directly from Arduino IDE is inconvenient or not possible
4+
- after deployment if user is unable to expose Firmware for OTA from external update server
5+
- provide updates after deployment to small quantity of modules when setting an update server is not practicable
6+
7+
## Requirements
8+
- The ESP and the computer must be connected to the same network
9+
10+
## Implementation
11+
The sample implementation has been done using:
12+
- example sketch OTAWebUpdater.ino
13+
- ESP32 (Dev Module)
14+
15+
You can use another module also if it meets Flash chip size of the sketch
16+
17+
1-Before you begin, please make sure that you have the following software installed:
18+
- Arduino IDE
19+
- Host software depending on O/S you use:
20+
- Avahi http://avahi.org/ for Linux
21+
- Bonjour http://www.apple.com/support/bonjour/ for Windows
22+
- Mac OSX and iOS - support is already built in / no any extra s/w is required
23+
24+
Prepare the sketch and configuration for initial upload with a serial port
25+
- Start Arduino IDE and load sketch OTAWebUpdater.ino available under File > Examples > OTAWebUpdater.ino
26+
- Update ssid and pass in the sketch so the module can join your Wi-Fi network
27+
- Open File > Preferences, look for “Show verbose output during:” and check out “compilation” option
28+
29+
![verbrose](esp32verbose.PNG)
30+
31+
- Upload sketch (Ctrl+U)
32+
- Now open web browser and enter the url, i.e. http://esp32.local. Once entered, browser should display a form
33+
34+
![login](esp32login.PNG)
35+
36+
> username= admin
37+
38+
> password= admin
39+
40+
**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*.
41+
42+
Now click on Login button and browser will display a upload form
43+
44+
![upload](esp32upload.PNG)
45+
46+
For Uploading the New Firmware you need to provide the Binary File of your Code.
47+
48+
Exporting Binary file of the Firmware (Code)
49+
- Open up the Arduino IDE
50+
- Open up the Code, for Exporting up Binary file
51+
- Now go to Sketch > export compiled Binary
52+
![export](exportTobinary.PNG)
53+
54+
- Binary file is exported to the same Directory where your code is present
55+
56+
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
57+
58+
59+

Diff for: ‎docs/OTAWebUpdate/esp32login.PNG

12.2 KB
Loading

Diff for: ‎docs/OTAWebUpdate/esp32upload.PNG

8.83 KB
Loading

Diff for: ‎docs/OTAWebUpdate/esp32verbose.PNG

13.5 KB
Loading

Diff for: ‎docs/OTAWebUpdate/exportTobinary.PNG

19 KB
Loading

Diff for: ‎libraries/ArduinoOTA/examples/OTAWebUpdater/OTAWebUpdater.ino

+89-81
Original file line numberDiff line numberDiff line change
@@ -4,93 +4,101 @@
44
#include <ESPmDNS.h>
55
#include <Update.h>
66

7-
const char* host = "ESP32";
7+
const char* host = "esp32";
88
const char* ssid = "xxx";
99
const char* password = "xxxx";
1010

1111
WebServer server(80);
1212

13-
const char* loginIndex = "<form name='loginForm'>"
14-
"<table width='20%' bgcolor='A09F9F' align='center'>"
15-
"<tr>"
16-
"<td colspan=2><center><font size=4><b>ESP32 Login Page</b></font></center>"
17-
"<br>"
13+
/*
14+
* Login page
15+
*/
1816

19-
"</td>"
20-
"<br>"
21-
"<br>"
22-
"</tr>"
23-
"<td>Username:</td>"
24-
"<td><input type='text' size=25 name='userid'><br></td>"
25-
"</tr>"
26-
"<br>"
27-
"<br>"
28-
"<tr>"
29-
"<td>Password:</td>"
30-
"<td><input type='Password' size=25 name='pwd'><br></td>"
31-
"<br>"
32-
"<br>"
33-
"</tr>"
17+
const char* loginIndex =
18+
"<form name='loginForm'>"
19+
"<table width='20%' bgcolor='A09F9F' align='center'>"
20+
"<tr>"
21+
"<td colspan=2>"
22+
"<center><font size=4><b>ESP32 Login Page</b></font></center>"
23+
"<br>"
24+
"</td>"
25+
"<br>"
26+
"<br>"
27+
"</tr>"
28+
"<td>Username:</td>"
29+
"<td><input type='text' size=25 name='userid'><br></td>"
30+
"</tr>"
31+
"<br>"
32+
"<br>"
33+
"<tr>"
34+
"<td>Password:</td>"
35+
"<td><input type='Password' size=25 name='pwd'><br></td>"
36+
"<br>"
37+
"<br>"
38+
"</tr>"
39+
"<tr>"
40+
"<td><input type='submit' onclick='check(this.form)' value='Login'></td>"
41+
"</tr>"
42+
"</table>"
43+
"</form>"
44+
"<script>"
45+
"function check(form)"
46+
"{"
47+
"if(form.userid.value=='admin' && form.pwd.value=='admin')"
48+
"{"
49+
"window.open('/serverIndex')"
50+
"}"
51+
"else"
52+
"{"
53+
" alert('Error Password or Username')/*displays error message*/"
54+
"}"
55+
"}"
56+
"</script>";
57+
58+
/*
59+
* Server Index Page
60+
*/
61+
62+
const char* serverIndex =
63+
"<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
64+
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
65+
"<input type='file' name='update'>"
66+
"<input type='submit' value='Update'>"
67+
"</form>"
68+
"<div id='prg'>progress: 0%</div>"
69+
"<script>"
70+
"$('form').submit(function(e){"
71+
"e.preventDefault();"
72+
"var form = $('#upload_form')[0];"
73+
"var data = new FormData(form);"
74+
" $.ajax({"
75+
"url: '/update',"
76+
"type: 'POST',"
77+
"data: data,"
78+
"contentType: false,"
79+
"processData:false,"
80+
"xhr: function() {"
81+
"var xhr = new window.XMLHttpRequest();"
82+
"xhr.upload.addEventListener('progress', function(evt) {"
83+
"if (evt.lengthComputable) {"
84+
"var per = evt.loaded / evt.total;"
85+
"$('#prg').html('progress: ' + Math.round(per*100) + '%');"
86+
"}"
87+
"}, false);"
88+
"return xhr;"
89+
"},"
90+
"success:function(d, s) {"
91+
"console.log('success!')"
92+
"},"
93+
"error: function (a, b, c) {"
94+
"}"
95+
"});"
96+
"});"
97+
"</script>";
3498

35-
"<tr>"
36-
"<td><input type='submit' onclick='check(this.form)' value='Login'></td>"
37-
"</tr>"
38-
"</table>"
39-
"</form>"
40-
"<script>"
41-
"function check(form)"
42-
"{"
43-
"if(form.userid.value=='admin' && form.pwd.value=='admin')"
44-
"{"
45-
"window.open('/serverIndex')"
46-
"}"
47-
"else"
48-
"{"
49-
" alert('Error Password or Username')/*displays error message*/"
50-
51-
"}"
52-
"}"
53-
"</script>";
54-
55-
56-
57-
58-
59-
const char* serverIndex = "<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
60-
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
61-
"<input type='file' name='update'>"
62-
"<input type='submit' value='Update'>"
63-
"</form>"
64-
"<div id='prg'>progress: 0%</div>"
65-
"<script>"
66-
"$('form').submit(function(e){"
67-
"e.preventDefault();"
68-
"var form = $('#upload_form')[0];"
69-
"var data = new FormData(form);"
70-
" $.ajax({"
71-
"url: '/update',"
72-
"type: 'POST',"
73-
"data: data,"
74-
"contentType: false,"
75-
"processData:false,"
76-
"xhr: function() {"
77-
"var xhr = new window.XMLHttpRequest();"
78-
"xhr.upload.addEventListener('progress', function(evt) {"
79-
"if (evt.lengthComputable) {"
80-
"var per = evt.loaded / evt.total;"
81-
"$('#prg').html('progress: ' + Math.round(per*100) + '%');"
82-
"}"
83-
"}, false);"
84-
"return xhr;"
85-
"},"
86-
"success:function(d, s) {"
87-
"console.log('success!')"
88-
"},"
89-
"error: function (a, b, c) {"
90-
"}"
91-
"});"
92-
"});"
93-
"</script>";
99+
/*
100+
* setup function
101+
*/
94102
void setup(void) {
95103
Serial.begin(115200);
96104

@@ -110,7 +118,7 @@ void setup(void) {
110118
Serial.println(WiFi.localIP());
111119

112120
/*use mdns for host name resolution*/
113-
if (!MDNS.begin(host)) { //http://esp32.local
121+
if (!MDNS.begin(host)) { //http://esp32.local
114122
Serial.println("Error setting up MDNS responder!");
115123
while (1) {
116124
delay(1000);

0 commit comments

Comments
 (0)