Merge pull request #72 from omersiar/dev

Firmware update is now live.
esprfid · Mar 8, 2018 · 2768abd · 2768abd
2 parents 1f78e4c + 1e9ebef
commit 2768abd
Show file tree

Hide file tree

Showing 11 changed files with 175 additions and 85 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,9 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
-## [Unreleased]
+## [0.5.3] - 2018-03-08
 #### Added
-- [webui] Update checker
+- [webui] Firmware Update is now live with latest version check on GitHub.
 
 ## [0.5hotfix2] - 2018-03-07
 #### Added

diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@
 
 Access Control demonstration using a cheap MFRC522 RFID Hardware or Wiegand RFID readers and Espressif's ESP8266 Microcontroller. This is a community driven project.
 
+![Showcase Gif](https://raw.githubusercontent.com/omersiar/esp-rfid/stable/demo/showcase.gif)
+
 ## Features
 ### For Users
 * Minimal effort for setting up your Access Control system, just flash and everything can be configured via Web UI
@@ -25,7 +27,7 @@ This project still in its development phase. New features (and also bugs) are in
 * Get the latest release from [here.](https://github.com/omersiar/esp-rfid/releases)
 * See [Known Issues](https://github.com/omersiar/esp-rfid#known-issues) before starting right away.
 * See [Security](https://github.com/omersiar/esp-rfid#security) for your safety.
-* See [ChangeLog](https://github.com/omersiar/esp-rfid/blob/development/CHANGELOG.md)
+* See [ChangeLog](https://github.com/omersiar/esp-rfid/blob/dev/CHANGELOG.md)
 
 ### What You Will Need
 ### Hardware
@@ -80,10 +82,8 @@ For Wiegand based readers, you can configure D0 and D1 pins via settings page. B
 
 ### Steps
 * First, flash firmware (you can use /bin/flash.bat on Windows) to your ESP either using Arduino IDE or with your favourite flash tool
-* Flash webfiles data to SPIFFS (ignore this step if you used flash.bat for flashing) either using ESP8266FS Uploader tool or with your favourite flash tool
 * (optional) Fire up your serial monitor to get informed
-* Power on your ESP
-* Search for Wireless Network "esp-rfid" and connect to it (It should be an open network and does not reqiure password)
+* Search for Wireless Network "esp-rfid-xxxxxx" and connect to it (It should be an open network and does not reqiure password)
 * Open your browser and type either "http://192.168.4.1" or "http://esp-rfid.local" (.local needs Bonjour installed on your computer) on address bar.
 * Log on to ESP, default password is "admin"
 * Go to "Settings" page
@@ -156,7 +156,7 @@ Thanks to the community, ESP-RFID come to alive with their great effort:
 - @nardev
 - @romanzava
 
-See [ChangeLog](https://github.com/omersiar/esp-rfid/blob/development/CHANGELOG.md)
+See [ChangeLog](https://github.com/omersiar/esp-rfid/blob/dev/CHANGELOG.md)
 
 ## Donations
 If this project helps you in a way, you can buy us a beer. You can make a donation to the ESP-RFID community with [Bountysource](https://salt.bountysource.com/teams/esp-rfid)

diff --git a/bin/firmware.bin b/bin/firmware.bin
diff --git a/demo/showcase.gif b/demo/showcase.gif
diff --git a/src/main.cpp b/src/main.cpp
@@ -950,11 +950,13 @@ void setupWebServer() {
 
     // Simple Firmware Update Handler
     server.on("/update", HTTP_POST, [](AsyncWebServerRequest * request) {
-        shouldReboot = !Update.hasError();
         AsyncWebServerResponse * response = request->beginResponse(200, "text/plain", shouldReboot ? "OK" : "FAIL");
         response->addHeader("Connection", "close");
         request->send(response);
     }, [](AsyncWebServerRequest * request, String filename, size_t index, uint8_t * data, size_t len, bool final) {
+        if (!request->authenticate(http_username, http_pass)) {
+            return;
+        }
         if (!index) {
             Serial.printf("[ UPDT ] Firmware update started: %s\n", filename.c_str());
             Update.runAsync(true);
@@ -970,6 +972,7 @@ void setupWebServer() {
         if (final) {
             if (Update.end(true)) {
                 Serial.printf("[ UPDT ] Firmware update finished: %uB\n", index + len);
+                shouldReboot = !Update.hasError();
             } else {
                 Update.printError(Serial);
             }

diff --git a/src/webh/esprfid.htm.gz.h b/src/webh/esprfid.htm.gz.h
diff --git a/src/webh/esprfid.js.gz.h b/src/webh/esprfid.js.gz.h
diff --git a/src/webh/index.html.gz.h b/src/webh/index.html.gz.h
diff --git a/src/websrc/esprfid.htm b/src/websrc/esprfid.htm
@@ -44,6 +44,30 @@ <h4 class="modal-title">Please wait while restoring user data...</h4>
     <br>
     <br>
 </div>
+<div id="progresscontent">
+    <br>
+    <br>
+    <div class="container">
+         <div class="row">
+            <br>
+            <div class="col-md-4 col-md-offset-4">
+               <div class="panel panel-default">
+                  <div class="panel-heading">
+                     <h3 class="panel-title">Please wait while your ESP restarts...</h3>
+                  </div>
+                  <div class="panel-body">
+<div class="progress">
+  <div id="updateprog" class="progress-bar progress-bar-striped active" role="progressbar"
+  aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">
+    0%
+  </div>
+</div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+</div>
 <div id="generalcontent">
     <br>
     <br>

diff --git a/src/websrc/index.html b/src/websrc/index.html
@@ -94,24 +94,6 @@ <h6 class="text-center">esp-rfid v0.5 New Fields</h6>
             </button>
             <div id="ajaxcontent">
             </div>
-            <!-- Modal -->
-            <div id="noimp" class="modal fade" role="dialog">
-                <div class="modal-dialog">
-                    <!-- Modal content-->
-                    <div class="modal-content">
-                        <div class="modal-header">
-                            <button type="button" class="close" data-dismiss="modal">&times;</button>
-                            <h4 class="modal-title">Sorry :(</h4>
-                        </div>
-                        <div class="modal-body">
-                            <p>This is not implemented yet</p>
-                        </div>
-                        <div class="modal-footer">
-                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                        </div>
-                    </div>
-                </div>
-            </div>
             <div id="revcommit" class="modal fade" role="dialog">
                 <div class="modal-dialog">
                     <!-- Modal content-->
@@ -139,13 +121,19 @@ <h4 class="modal-title">Please review changes</h4>
                             <h4 class="modal-title">Are you absolutely sure?</h4>
                         </div>
                         <div class="alert alert-warning">
-                            <strong>Warning!</strong> Unexpected bad things will happen if you don’t read this!
+                            <h4><strong>Warning!</strong> Unexpected bad things will happen if you don’t read this!</h4>
                         </div>
                         <div class="modal-body">
-                            <p>
-                                This action <strong>cannot</strong> be undone. This will permanently delete <strong>all the user data and settings.</strong> Please make sure you made a backup first.
-                            </p>
-                            <p>Please type in the hostname of the device to confirm.</p>
+                            <h5>
+                                This action <strong>cannot</strong> be undone. This will permanently delete <strong>all the user data, settings and logs.</strong> Please make sure you made a backup first.
+                            </h5>
+                            <div style="clear:both;">
+                                <br>
+                            </div>
+                            <h5>Please type in the hostname of the device to confirm.</h5>
+                            <div style="clear:both;">
+                                <br>
+                            </div>
                             <p>
                                 <input type="text" class="form-control input-block" id="compare" oninput="compareDestroy()">
                             </p>
@@ -168,11 +156,39 @@ <h4 class="modal-title">Update Firmware</h4>
                             <strong>Warning!</strong> Please make sure you made a backup first
                         </div>
                         <div class="modal-body">
-                            <pre id="releaseinfo">Getting update information from GitHub...</pre>
-
+                            <div>
+                                <h4>Latest Version Online</h4>
+                                <div id="onlineupdate">
+                                    <h5 id=releasehead></h5>
+                                    <div style="clear:both;">
+                                        <br>
+                                    </div>
+                                    <pre id="releasebody">Getting update information from GitHub...</pre>
+                                    <div class="pull-right">
+                                        <a class="pull-right" id="downloadupdate">
+                                            <button type="button" class="btn btn-primary">Download</button>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div style="clear:both;">
+                                <br>
+                            </div>
+                            <div>
+                                <h4>Current Version:</h4>
+                                <h5 id="versionhead"></h5>
+                                <div class="form-group">
+                                    <input id="binform" onchange="allowUpload();" type="file" name="update">
+                                </div>
+                                <div class="pull-right">
+                                    <button onclick="upload();" class="btn btn-primary" id="upbtn" disabled="">Update</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div style="clear:both;">
+                            <br>
                         </div>
                         <div class="modal-footer">
-                            <a id="downloadupdate"><button type="button" class="btn btn-success">Download</button></a>
                         </div>
                     </div>
                 </div>

diff --git a/src/websrc/js/esprfid.js b/src/websrc/js/esprfid.js
@@ -491,8 +491,7 @@ function initEventTable() {
     $("#dismiss").click();
     jQuery(function($) {
         FooTable.init("#eventtable", {
-            columns: [
-                {
+            columns: [{
                     "name": "type",
                     "title": "Event Type",
                     "type": "text"
@@ -909,7 +908,7 @@ function compareDestroy() {
 
 function destroy() {
     websock.send("{\"command\":\"destroy\"}");
-    document.location = "about:blank";
+    inProgress();
 }
 
 
@@ -945,11 +944,7 @@ $(".noimp").on("click", function() {
     $("#noimp").modal("show");
 });
 
-$(document).ajaxComplete(function() {
-    $("[data-toggle=\"popover\"]").popover({
-        container: "body"
-    });
-});
+
 
 FooTable.MyFiltering = FooTable.Filtering.extend({
     construct: function(instance) {
@@ -1067,37 +1062,88 @@ function logout() {
     return false;
 }
 
-$("#update").on("shown.bs.modal", function (e) {
-  GetLatestReleaseInfo();
+$("#update").on("shown.bs.modal", function(e) {
+    GetLatestReleaseInfo();
 })
 
+function inProgress() {
+    $("body").load("esprfid.htm #progresscontent", function(responseTxt, statusTxt, xhr) {
+        if (statusTxt === "success") {
+            $(".progress").css("height", "40");
+            $(".progress").css("font-size", "xx-large");
+            var i = 0;
+            var prg = setInterval(function() {
+                $(".progress-bar").css("width", i + "%").attr("aria-valuenow", i).html(i + "%");
+                i++;
+                if (i === 101) {
+                    clearInterval(prg);
+                    document.getElementById("updateprog").className = "progress-bar progress-bar-success";
+                    document.getElementById("updateprog").innerHTML = "Completed";
+                }
+
+            }, 500);
+
+
+
+        }
+
+    });
+}
+
+function upload() {
+    var formData = new FormData();
+    formData.append("bin", $("#binform")[0].files[0]);
+    $.ajax({
+        url: "/update",
+        type: "POST",
+        data: formData,
+        processData: false,
+        contentType: false
+    });
+    inProgress();
+}
+
+
+
 function GetLatestReleaseInfo() {
-  $.getJSON("https://api.github.com/repos/omersiar/esp-rfid/releases/latest").done(function(release) {
-    var asset = release.assets[0];
-    var downloadCount = 0;
-    /*
-    console.log(asset);
-    for (var i = 0; i < release.assets.length; i++) {
-      downloadCount += release.assets[i].download_count;
-    }
-    */
-    var oneHour = 60 * 60 * 1000;
-    var oneDay = 24 * oneHour;
-    var dateDiff = new Date() - new Date(release.published_at);
-    var timeAgo;
-    if (dateDiff < oneDay) {
-      timeAgo = (dateDiff / oneHour).toFixed(1) + " hours ago";
-    } else {
-      timeAgo = (dateDiff / oneDay).toFixed(1) + " days ago";
-    }
 
-    var releaseInfo = release.name + " was updated " + timeAgo + " and downloaded " + downloadCount.toLocaleString() + " times." + release.body;
-    $("#downloadupdate").attr("href", release.url);
-    $("#releaseinfo").text(releaseInfo);
-    $("#releaseinfo").fadeIn("slow");
-  });
+    $.getJSON("https://api.github.com/repos/omersiar/esp-rfid/releases/latest").done(function(release) {
+        var asset = release.assets[0];
+        onlinebin = asset.browser_download_url;
+        var downloadCount = 0;
+        for (var i = 0; i < release.assets.length; i++) {
+            downloadCount += release.assets[i].download_count;
+        }
+        var oneHour = 60 * 60 * 1000;
+        var oneDay = 24 * oneHour;
+        var dateDiff = new Date() - new Date(release.published_at);
+        var timeAgo;
+        if (dateDiff < oneDay) {
+            timeAgo = (dateDiff / oneHour).toFixed(1) + " hours ago";
+        } else {
+            timeAgo = (dateDiff / oneDay).toFixed(1) + " days ago";
+        }
+
+        var releaseInfo = release.name + " was updated " + timeAgo + " and downloaded " + downloadCount.toLocaleString() + " times.";
+        $("#downloadupdate").attr("href", asset.browser_download_url);
+        $("#releasehead").text(releaseInfo);
+        $("#releasebody").text(release.body);
+        $("#releaseinfo").fadeIn("slow");
+        $("#versionhead").text(config.general.version);
+    }).error(function() { $("#onlineupdate").html("<h5>Couldn't get release info. Are you connected to Internet?</h5>"); });
 }
 
+$(document).ajaxComplete(function(e, xhr, settings) {
+    $("[data-toggle=\"popover\"]").popover({
+        container: "body"
+    });
+});
+
+function allowUpload() {
+    $("#upbtn").prop("disabled", false);
+}
+
+
 function start() {
     if (window.location.protocol === "https:") {
         wsUri = "wss://" + window.location.hostname + "/ws";