|
|
@@ -0,0 +1,103 @@
|
|
|
+#pragma once
|
|
|
+#include <pgmspace.h>
|
|
|
+
|
|
|
+static const char OTA_HTML[] PROGMEM = R"HTML(
|
|
|
+<!doctype html>
|
|
|
+<html lang="en-AU">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+ <link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
|
+ <link rel="stylesheet" href="yeti-bootstrap.min.css">
|
|
|
+ <link rel="stylesheet" href="font-awesome.min.css">
|
|
|
+ <script src="jquery-3.7.1.slim.min.js" crossorigin="anonymous"></script>
|
|
|
+
|
|
|
+ <title>Modulos DSP - Firmware Update</title>
|
|
|
+ <style>
|
|
|
+ body { padding-top: 40px; }
|
|
|
+ .ota-card { max-width: 520px; margin: 0 auto; }
|
|
|
+ #progressWrap { display: none; margin-top: 1.2rem; }
|
|
|
+ #resultBox { display: none; margin-top: 1rem; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div class="container ota-card">
|
|
|
+
|
|
|
+ <h4 class="mb-1"><i class="fa fa-microchip"></i> Firmware Update (OTA)</h4>
|
|
|
+ <p class="text-muted small mb-4">Device: <strong>{{IP}}</strong></p>
|
|
|
+
|
|
|
+ <form id="otaForm" action="/ota_do" method="POST" enctype="multipart/form-data">
|
|
|
+ <div class="mb-3">
|
|
|
+ <label class="form-label fw-semibold">Firmware binary (.bin)</label>
|
|
|
+ <input class="form-control" type="file" id="fwFile" name="firmware" accept=".bin" required>
|
|
|
+ <div class="form-text">Export from Arduino IDE: <em>Sketch → Export Compiled Binary</em></div>
|
|
|
+ </div>
|
|
|
+ <button type="submit" id="flashBtn" class="btn btn-warning w-100">
|
|
|
+ <i class="fa fa-upload"></i> Flash Firmware
|
|
|
+ </button>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <div id="progressWrap">
|
|
|
+ <div class="progress" style="height:22px">
|
|
|
+ <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning"
|
|
|
+ style="width:100%; font-size:0.8rem; line-height:22px">
|
|
|
+ Uploading…
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="text-center text-muted small mt-2">
|
|
|
+ <i class="fa fa-spinner fa-spin"></i>
|
|
|
+ Do not power off the device.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="resultBox" class="alert" role="alert"></div>
|
|
|
+
|
|
|
+ <hr class="mt-4">
|
|
|
+ <a href="/" class="text-muted small"><i class="fa fa-arrow-left"></i> Back to EEPROM Uploader</a>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script>
|
|
|
+document.getElementById('otaForm').addEventListener('submit', function(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ var file = document.getElementById('fwFile').files[0];
|
|
|
+ if (!file) return;
|
|
|
+
|
|
|
+ document.getElementById('flashBtn').disabled = true;
|
|
|
+ document.getElementById('progressWrap').style.display = 'block';
|
|
|
+ document.getElementById('resultBox').style.display = 'none';
|
|
|
+
|
|
|
+ var fd = new FormData(this);
|
|
|
+ var xhr = new XMLHttpRequest();
|
|
|
+ xhr.open('POST', '/ota_do', true);
|
|
|
+
|
|
|
+ xhr.onload = function() {
|
|
|
+ document.getElementById('progressWrap').style.display = 'none';
|
|
|
+ var box = document.getElementById('resultBox');
|
|
|
+ box.style.display = 'block';
|
|
|
+ if (xhr.status === 200) {
|
|
|
+ box.className = 'alert alert-success';
|
|
|
+ box.innerHTML = '<i class="fa fa-check-circle"></i> ' + xhr.responseText +
|
|
|
+ '<br><small>Reconnecting in 5 seconds…</small>';
|
|
|
+ setTimeout(function(){ window.location.href = '/'; }, 5500);
|
|
|
+ } else {
|
|
|
+ box.className = 'alert alert-danger';
|
|
|
+ box.innerHTML = '<i class="fa fa-times-circle"></i> ' + xhr.responseText;
|
|
|
+ document.getElementById('flashBtn').disabled = false;
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ xhr.onerror = function() {
|
|
|
+ document.getElementById('progressWrap').style.display = 'none';
|
|
|
+ var box = document.getElementById('resultBox');
|
|
|
+ box.style.display = 'block';
|
|
|
+ box.className = 'alert alert-danger';
|
|
|
+ box.innerHTML = '<i class="fa fa-times-circle"></i> Upload error — check Serial log.';
|
|
|
+ document.getElementById('flashBtn').disabled = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ xhr.send(fd);
|
|
|
+});
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+)HTML";
|