How to use OTA from web browser on ESP8266?

Projects Programming
1

I am working on cutomizing a sketch I downloaded from GitHub and it contains activation of Arduino OTA. This is used from the IDE to upload new firmware as it is compiled. So far so good!

But since it sits there as a service on the ESP-12 I am using, I would like to be able to upload new f/w without having to fire up the IDE and recompiling it every time. I already have the bin file which I like to send to a number of devices easily.
Preferably I would like to access the ESP via the network using a browser suchg as FireFox and do the upload from there.

How can that be done?
Do I have to prepare the firmware with more stuff than what is there for the IDE to be able to upload?

Here is the setup_ota code which is executed from the setup() of the sketch:

// **********************************
// * Setup OTA                      *
// **********************************

void setup_ota()
{
    Serial.println(F("Arduino OTA activated."));

    // * Port defaults to 8266
    ArduinoOTA.setPort(8266);

    // * Set hostname for OTA
    ArduinoOTA.setHostname(HOSTNAME);
    ArduinoOTA.setPassword(OTA_PASSWORD);

    ArduinoOTA.onStart([]()
    {
        Serial.println(F("Arduino OTA: Start"));
    });

    ArduinoOTA.onEnd([]()
    {
        Serial.println(F("Arduino OTA: End (Running reboot)"));
    });

    ArduinoOTA.onProgress([](unsigned int progress, unsigned int total)
    {
        Serial.printf("Arduino OTA Progress: %u%%\r", (progress / (total / 100)));
    });

    ArduinoOTA.onError([](ota_error_t error)
    {
        Serial.printf("Arduino OTA Error[%u]: ", error);
        if (error == OTA_AUTH_ERROR)
            Serial.println(F("Arduino OTA: Auth Failed"));
        else if (error == OTA_BEGIN_ERROR)
            Serial.println(F("Arduino OTA: Begin Failed"));
        else if (error == OTA_CONNECT_ERROR)
            Serial.println(F("Arduino OTA: Connect Failed"));
        else if (error == OTA_RECEIVE_ERROR)
            Serial.println(F("Arduino OTA: Receive Failed"));
        else if (error == OTA_END_ERROR)
            Serial.println(F("Arduino OTA: End Failed"));
    });

    ArduinoOTA.begin();
    Serial.println(F("Arduino OTA finished"));
}

And here is how it is called from within the loop():

void loop()
{
    ArduinoOTA.handle();
//Other code follows

Obviously the OTA_PASSWORD is known to me in the code...

Is it possible to do or must I dig down and read hundreds of posts from Google to find out? I tried googling for it before coming here and ask, but I could not find the solution...

2

in the folder of the ESP8266WebServer examples, there is an example for WebUpdate.

But just to be clear:

first you need a hex file to be uploaded.
And to generate that file you will need some kind of compiler, for example the Arduino IDE.

But once you have the hex file, you could upload it to several ESPs via the WebUpdate. - Without the Arduino IDE.

3

requires a compiled hex-file.
The hexfile is the code the microcontroller executes.

If you would like to have it without any compiler you can look into interpreted script languages
nodeMCU-Lua or micropython.
I have no experience with Lua /micropython. But the basic principle is:

An always the same interpreter-firmware resides in the microcontroller and the code (= the script) is a simple-texfile which is uploaded into the microcontroller

best regards Stefan

1 Like
4

Thanks, but I think that the file to upload is not a hex file, instead it is a bin file!
Apart from that you are correct! :slight_smile:

I have found the documentation for the updateserver but it was a bit dense for me.
So I finally found another howto, which was easier to follow.
And finally as you remarked, the library ESP8266HTTPUpdateServer on disk has deposited a simple example Webupdater, which I used to copy some code for my own sketch.
Here is that example, my own code is full of other stuff too so it is not so readable:


#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <ESP8266HTTPUpdateServer.h>

#ifndef STASSID
#define STASSID "your-ssid"
#define STAPSK  "your-password"
#endif

const char* host = "esp8266-webupdate";
const char* ssid = STASSID;
const char* password = STAPSK;

ESP8266WebServer httpServer(80);
ESP8266HTTPUpdateServer httpUpdater;

void setup(void) {

  Serial.begin(115200);
  Serial.println();
  Serial.println("Booting Sketch...");
  WiFi.mode(WIFI_AP_STA);
  WiFi.begin(ssid, password);

  while (WiFi.waitForConnectResult() != WL_CONNECTED) {
    WiFi.begin(ssid, password);
    Serial.println("WiFi failed, retrying.");
  }

  MDNS.begin(host);

  httpUpdater.setup(&httpServer);
  httpServer.begin();

  MDNS.addService("http", "tcp", 80);
  Serial.printf("HTTPUpdateServer ready! Open http://%s.local/update in your browser\n", host);
}

void loop(void) {
  httpServer.handleClient();
  MDNS.update();
}

In my case I have set up a different port than 80 and added user/password login, but basically it is using the essentials from the example.
Just tested and it does work as far as I could re-upload the OTA enabled firmwware to the device and it restarted after a while. No feedback except for a bouncing dot on the FireFox tab title. But when it was done there was a confirmation message. And it connected to my MQTT broker just fine.

So I am basically done now.

5

Now I have a follow-up question:

Is it possible (and if so how) to add one extra button to the page to request a device reset without uploading now firmware?
The screen looks like this now:
image

Another button that says [Reset Device] is what I need.

It would be good to have once the device has been deployed to the remote location.

6

just guessing:
as the page with the update buttons comes from the library ESP8266HTTPUpdateServer you will need to modify the library to get an additional button.
One reason more, why I would have done it with the other example

7

I had a look at it where it was well hidden:

C:\Users\myusername.platformio\packages\framework-arduinoespressif8266@3.20701.0\libraries\ESP8266WebServer\examples\WebUpdate

I never store dev files on C:\ but that seems not to be possible to change using PlatformIO...

Anyway I looked at it and it did not show any code to even add the File browse or Update Firmware buttons, so I guess I am out of luck here...

Except if this is the line you refer to:

ESP8266WebServer server(80);
const char* serverIndex = "<form method='POST' action='/update' enctype='multipart/form-data'><input type='file' name='update'><input type='submit' value='Update'></form>";
8

yes, that line.

that is not a complete HTML, but most browsers will handle it.
You could extend this line to a full HTML5 and add a "Restart Button" or a Link (href) and execute a ESP.restart().
Do you have experience with the esp8266WebServer?

9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.