Mirrored_Repos/ESP-WebOTA
1
0
Fork 0
mirror of https://github.com/scottchiefbaker/ESP-WebOTA.git synced 2024-08-30 18:12:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the HTML a little more modern

Browse Source
This commit is contained in:
Scott Baker 2023-02-27 20:30:45 -08:00
parent 434b6eeab0
commit 9caeb17598
1 changed files with 81 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/WebOTA.cpp
View File

@ -81,15 +81,73 @@ long WebOTA::max_sketch_size() {
const char ota_version_html[] PROGMEM = "<h1>WebOTA Version: " WEBOTA_VERSION "</h1>";
const char ota_upload_form[] PROGMEM = R"!^!(
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebOTA upload form</title>
<style>
body {
margin: 2em;
font-family: sans-serif;
}
input[type=file]::file-selector-button, .btn {
margin-right: 20px;
border: 1px solid gray;
background: #37b837;
background-image: linear-gradient(to bottom,#59ef59 0, #55982f 100%%);
padding: 10px 20px;
border-radius: 4px;
color: #fff;
cursor: pointer;
transition: background .2s ease-in-out;
width: 10em;
}
.btn {
width: 10em;
margin-top: 12px;
background-image: linear-gradient(to bottom,#428bca 0,#2d6ca2 100%%);
}
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
<input type="file" name="update" id="file">
<input type="submit" value="Update">
</form>
input[type=file]::file-selector-button:hover {
background-image: linear-gradient(to bottom,#8ef88e 0, #4e9029 100%%);
}
.prog_bar {
margin: 12px 0;
text-shadow: 2px 2px 3px black;
padding: 5px 0;
display: none;
border: 1px solid #7c7c7c;
background-image: linear-gradient(to right,#d2d2d2 0,#2d2d2d 100%%);
line-height: 1.3em;
border-radius: 4px;
text-align: center;
color: white;
font-size: 250%%;
}
<div id="prg_wrap" style="border: 0px solid; width: 100%;">
<div id="prg" style="text-shadow: 2px 2px 3px black; padding: 5px 0; display: none; border: 1px solid #008aff; background: #002180; text-align: center; color: white;"></div>
</div>
</style>
</head>
<body>
<h1>WebOTA Version: %s</h1>
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
<div><input class="" type="file" name="update" id="file"></div>
<div><input class="btn" type="submit" value="Upload"></div>
</form>
<div id="prg_wrap" style="border: 0px solid; width: 100%%;">
<div id="prg" class="prog_bar" style=""></div>
</div>
</body>
</html>
<script>
var domReady = function(callback) {
@ -115,10 +173,17 @@ domReady(function() {
if (evt.lengthComputable) {
var per = Math.round((evt.loaded / evt.total) * 100);
var prg = document.getElementById('prg');
prg.innerHTML = per + "%"
prg.style.width = per + "%"
prg.style.display = "block"
var str = per + "%%";
prg.style.width = str;
if (per == 100) {
str += " - Rebooting...";
}
prg.innerHTML = str;
prg.style.display = "block";
}
}, false);
xhr.open('POST', location.href, true);
@ -135,7 +200,8 @@ domReady(function() {
xhr.send(formData);
}
});
</script>)!^!";
</script>
)!^!";
#ifdef ESP8266
@ -158,8 +224,9 @@ int WebOTA::add_http_routes(WebServer *server, const char *path) {
html += FPSTR(ota_version_html);
}
html += FPSTR(ota_upload_form);
server->send_P(200, "text/html", html.c_str());
char buf[4096];
snprintf(buf, 4096, ota_upload_form, WEBOTA_VERSION); // Put the version string in the HTML
server->send_P(200, "text/html", buf);
});
// Handling uploading firmware file