mirror of
https://github.com/dalathegreat/Battery-Emulator.git
synced 2025-10-06 12:00:13 +02:00
Added wait effect during ESP32 reboot with a loading animation and 'Rebooting...' message. Displays the latest installed firmware and hardware version once the reboot is complete.
This commit is contained in:
amarofarinha
parent
4a4eff43ba
commit
6cb5fe77a6
3 changed files with 53 additions and 17 deletions
|
|
@ -5,6 +5,32 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Battery Emulator OTA Update</title>
|
||||
<script>
|
||||
async function checkEmulatorStatusReboot() {
|
||||
const data = await getData('/GetFirmwareInfo');
|
||||
if (data) {
|
||||
document.getElementById('firmwareVersion').textContent = data.firmware;
|
||||
document.getElementById('hardwareID').textContent = data.hardware;
|
||||
document.getElementById('rebooting-container').classList.add('hidden');
|
||||
document.getElementById('content').classList.remove('rebootingOn');
|
||||
resetView();
|
||||
} else {
|
||||
// Emulator not online, keep waiting
|
||||
setTimeout(checkEmulatorStatusReboot, 2000); // Check again in 2 seconds
|
||||
}
|
||||
};
|
||||
function startRebootEfect(){
|
||||
document.getElementById('rebooting-container').classList.remove('hidden');
|
||||
document.getElementById('content').classList.add('rebootingOn');
|
||||
}
|
||||
|
||||
function startRebootWait(){
|
||||
const div1 = document.getElementById('successColumn');
|
||||
|
||||
if (!div1.classList.contains('hidden')) {
|
||||
setTimeout(startRebootEfect, 1000);
|
||||
setTimeout(checkEmulatorStatusReboot, 5000);
|
||||
}
|
||||
};
|
||||
function syncHiddenClass() {
|
||||
const div1 = document.getElementById('progressColumn');
|
||||
const div2 = document.getElementById('actionsButtons');
|
||||
|
|
@ -14,10 +40,13 @@ function syncHiddenClass() {
|
|||
} else {
|
||||
div2.style.display='none'
|
||||
}
|
||||
}
|
||||
};
|
||||
const observer = new MutationObserver(() => {
|
||||
syncHiddenClass();
|
||||
});
|
||||
const observerFinisgUpdating = new MutationObserver(() => {
|
||||
startRebootWait();
|
||||
});
|
||||
async function getData(relativePath) {
|
||||
try {
|
||||
const response = await fetch(relativePath);
|
||||
|
|
@ -30,30 +59,26 @@ async function getData(relativePath) {
|
|||
//console.error('Fetch error:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
const rplc = (txt, val) => {
|
||||
document.querySelectorAll('p').forEach(p => {
|
||||
if (p.textContent.trim().includes(txt) && p.nextElementSibling)
|
||||
p.nextElementSibling.outerHTML = val;
|
||||
});
|
||||
};
|
||||
window.onload = () => {
|
||||
let hardware ="?";
|
||||
let firmware="?";
|
||||
let hardware ="";
|
||||
let firmware="";
|
||||
getData('/GetFirmwareInfo').then(data => {
|
||||
if (data) {
|
||||
rplc('Firmware Version', data.firmware);
|
||||
rplc('Hardware ID', data.hardware);
|
||||
document.getElementById('firmwareVersion').textContent = data.firmware;
|
||||
document.getElementById('hardwareID').textContent = data.hardware;
|
||||
}
|
||||
});
|
||||
|
||||
const div1 = document.getElementById('progressColumn');
|
||||
observer.observe(div1, { attributes: true, attributeFilter: ['class'] });
|
||||
const div2 = document.getElementById('successColumn');
|
||||
observerFinisgUpdating.observe(div2, { attributes: true, attributeFilter: ['class'] });
|
||||
};
|
||||
//init dark ui
|
||||
document.documentElement.classList.add("dark");
|
||||
localStorage.theme="dark";
|
||||
</script>
|
||||
|
||||
<script type="module" crossorigin>
|
||||
(function(){const f=document.createElement("link").relList;if(f&&f.supports&&f.supports("modulepreload"))return;for(const a of document.querySelectorAll('link[rel="modulepreload"]'))d(a);new MutationObserver(a=>{for(const c of a)if(c.type==="childList")for(const i of c.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&d(i)}).observe(document,{childList:!0,subtree:!0});function s(a){const c={};return a.integrity&&(c.integrity=a.integrity),a.referrerPolicy&&(c.referrerPolicy=a.referrerPolicy),a.crossOrigin==="use-credentials"?c.credentials="include":a.crossOrigin==="anonymous"?c.credentials="omit":c.credentials="same-origin",c}function d(a){if(a.ep)return;a.ep=!0;const c=s(a);fetch(a.href,c)}})();localStorage.theme==="dark"||!("theme"in localStorage)&&window.matchMedia("(prefers-color-scheme: dark)").matches?(document.documentElement.classList.add("dark"),document.getElementById("darkModeCheckbox").checked=!0):(document.documentElement.classList.remove("dark"),document.getElementById("darkModeCheckbox").checked=!1);document.getElementById("darkModeCheckbox").addEventListener("click",function(){document.getElementById("darkModeCheckbox").checked?(document.documentElement.classList.add("dark"),localStorage.theme="dark"):(document.documentElement.classList.remove("dark"),localStorage.theme="light")});function A(l){return l&&l.__esModule&&Object.prototype.hasOwnProperty.call(l,"default")?l.default:l}var L={exports:{}},x={exports:{}};(function(){var l="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",f={rotl:function(s,d){return s<<d|s>>>32-d},rotr:function(s,d){return s<<32-d|s>>>d},endian:function(s){if(s.constructor==Number)return f.rotl(s,8)&16711935|f.rotl(s,24)&4278255360;for(var d=0;d<s.length;d++)s[d]=f.endian(s[d]);return s},randomBytes:function(s){for(var d=[];s>0;s--)d.push(Math.floor(Math.random()*256));return d},bytesToWords:function(s){for(var d=[],a=0,c=0;a<s.length;a++,c+=8)d[c>>>5]|=s[a]<<24-c%32;return d},wordsToBytes:function(s){for(var d=[],a=0;a<s.length*32;a+=8)d.push(s[a>>>5]>>>24-a%32&255);return d},bytesToHex:function(s){for(var d=[],a=0;a<s.length;a++)d.push((s[a]>>>4).toString(16)),d.push((s[a]&15).toString(16));return d.join("")},hexToBytes:function(s){for(var d=[],a=0;a<s.length;a+=2)d.push(parseInt(s.substr(a,2),16));return d},bytesToBase64:function(s){for(var d=[],a=0;a<s.length;a+=3)for(var c=s[a]<<16|s[a+1]<<8|s[a+2],i=0;i<4;i++)a*8+i*6<=s.length*8?d.push(l.charAt(c>>>6*(3-i)&63)):d.push("=");return d.join("")},base64ToBytes:function(s){s=s.replace(/[^A-Z0-9+\/]/ig,"");for(var d=[],a=0,c=0;a<s.length;c=++a%4)c!=0&&d.push((l.indexOf(s.charAt(a-1))&Math.pow(2,-2*c+8)-1)<<c*2|l.indexOf(s.charAt(a))>>>6-c*2);return d}};x.exports=f})();var H=x.exports,F={utf8:{stringToBytes:function(l){return F.bin.stringToBytes(unescape(encodeURIComponent(l)))},bytesToString:function(l){return decodeURIComponent(escape(F.bin.bytesToString(l)))}},bin:{stringToBytes:function(l){for(var f=[],s=0;s<l.length;s++)f.push(l.charCodeAt(s)&255);return f},bytesToString:function(l){for(var f=[],s=0;s<l.length;s++)f.push(String.fromCharCode(l[s]));return f.join("")}}},I=F;/*!
|
||||
* Determine if an object is a Buffer
|
||||
|
|
@ -68,9 +93,18 @@ localStorage.theme="dark";
|
|||
html {font-family: Arial; display: inline-block; text-align: center;}
|
||||
h2 {font-size: 3rem; margin: 0.83em 0 0.10em 0; font-weight: bold; font-family: Arial; display: inline-block; text-align: center;}
|
||||
h3 {font-size: 2rem; margin: 0.00em 0 0.00em 0; font-weight: bold; font-family: Arial; display: inline-block; text-align: center;}
|
||||
#rebooting-container { position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 10;text-align: center;}
|
||||
#rebooting-message{font-size:1.5em;margin-bottom:20px}
|
||||
.spinner{border:16px solid #f3f3f3;border-top-color:#3498db;border-radius:50%;width:120px;height:120px;animation:spin 2s linear infinite;margin:auto}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
.rebootingOn {filter: blur(2px);opacity: 0.9;pointer-events: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body class="dark:bg-[#18191a] bg-white dark:text-[#e4e6eb] px-6">
|
||||
<div id="rebooting-container" class="hidden">
|
||||
<div id="rebooting-message">Rebooting...</div>
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
<h2>Battery Emulator</h2>
|
||||
<p><h3>OTA update</h3></p>
|
||||
<p class="text-sm ml-2 pr-5">based on <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 197" width="110" height="30" class="dark:text-[#e4e6eb]" style="display: inline;">
|
||||
|
|
@ -78,6 +112,7 @@ h3 {font-size: 2rem; margin: 0.00em 0 0.00em 0; font-weight: bold; font-family:
|
|||
<path fill="currentColor" d="m257.1 130v-17.1h-33.3v-15.5h30.1v-15.9h-30.1v-15.3h33.2v-17h-51.2v80.8zm31.3 0v-82.5h-17.3v82.5zm28.4-35.1c0.3-4.2 4-9.6 11.3-9.6 8.2 0 11.1 5.3 11.4 9.6zm23.9 14.7c-1.6 4.4-5.1 7.4-11.4 7.4-6.7 0-12.5-4.6-12.9-10.9h39.5c0.1-0.4 0.3-3 0.3-5.4 0-18.2-10.8-29.1-28.4-29.1-14.7 0-28.2 11.7-28.2 29.9 0 19 13.9 30.2 29.5 30.2 14.3 0 23.4-8.2 26.1-18zm22.7 23.6c1.6 10.1 11.9 20.2 28.2 20.2 21.3 0 30.4-14.2 30.4-30.5v-49.6h-16.6v6.1c-1.6-3-6.5-7.1-15.7-7.1-15.5 0-26.3 12.8-26.3 27.7 0 15.8 11.3 27.6 26.3 27.6 8.2 0 13.1-3.3 15.2-6.4v2.6c0 10.3-5.4 14.5-14.1 14.5-6.4 0-11-4-12.1-9.4zm29.5-20.7c-7 0-12.2-4.8-12.2-12.5 0-7.8 5.7-12.5 12.2-12.5 6.5 0 12.1 4.7 12.1 12.5 0 7.7-5.1 12.5-12.1 12.5zm39.6 1.9c0 9 7.2 17.2 19.7 17.2 7.5 0 13-3.2 15.9-8 0 3.9 0.5 5.9 0.6 6.4h15.6c-0.1-0.6-0.7-4.4-0.7-8.8v-27.7c0-11.6-6.7-21.9-25.1-21.9-16.6 0-24.1 10.7-24.8 18.8l15 3.1c0.4-4.2 3.7-8.3 9.7-8.3 5.5 0 8.3 2.8 8.3 6.1 0 2-1 3.4-4.1 3.9l-13.3 2.1c-9.3 1.3-16.8 7-16.8 17.1zm23.9 4.6c-4.8 0-6.7-2.8-6.7-5.8 0-4 2.7-5.7 6.3-6.3l10.7-1.7v2.5c0 8.8-5.2 11.3-10.3 11.3zm59.1-21.5c0-5.7 3.7-9.9 9.4-9.9 6.3 0 9.2 4.2 9.2 9.8v32.6h17.4v-35.6c0-12.4-6.4-22.6-20.7-22.6-5.8 0-12.8 2.7-15.8 8v-6.5h-16.8v56.7h17.3zm71.3-40.7h-15.5v7.3c0 5.2-2.9 9.2-8.8 9.2h-2.8v15.2h10v24.2c0 11.3 7.2 18.3 18.9 18.3 5.5 0 8.3-1.3 9-1.6v-14.4c-1 0.3-2.7 0.6-4.5 0.6-3.8 0-6.3-1.3-6.3-5.9v-21.2h11v-15.2h-11zm38 32.7c0-16.8 12-24.5 23.3-24.5 11.2 0 23.3 7.7 23.3 24.5 0 16.9-12.1 24.4-23.3 24.4-11.3 0-23.3-7.5-23.3-24.4zm-18.7 0.1c0 25.6 19.2 42.1 42 42.1 22.7 0 42-16.5 42-42.1 0-25.6-19.3-42.1-42-42.1-22.8 0-42 16.5-42 42.1zm156.3-23.2v-17.2h-67.9v17.2h24.9v63.6h18v-63.6zm57.7 63.6h19.6l-30.1-80.8h-20.9l-30.4 80.8h18.9l5.8-16.4h31.3zm-21.2-60.8l9.6 27.9h-19.6zm-27.6 126.8v-8.3h-16.9v-30.7h-8.7v39zm13.5 0v-27.3h-8.4v27.3zm-9.1-35.7c0 2.7 2.2 4.9 4.9 4.9 2.7 0 4.9-2.2 4.9-4.9 0-2.7-2.2-4.9-4.9-4.9-2.7 0-4.9 2.2-4.9 4.9zm26.4 0.4h-7.5v3.5c0 2.5-1.3 4.5-4.2 4.5h-1.4v7.3h4.9v11.7c0 5.4 3.4 8.8 9.1 8.8 2.6 0 4-0.6 4.4-0.8v-6.9c-0.5 0.1-1.4 0.3-2.2 0.3-1.9 0-3.1-0.6-3.1-2.9v-10.2h5.4v-7.3h-5.4zm17.3 18.3c0.2-2 1.9-4.6 5.4-4.6 4 0 5.4 2.6 5.5 4.6zm11.6 7.1c-0.8 2.2-2.5 3.6-5.5 3.6-3.3 0-6.1-2.2-6.2-5.3h19c0.1-0.1 0.2-1.4 0.2-2.6 0-8.8-5.3-14-13.7-14-7.1 0-13.7 5.6-13.7 14.4 0 9.2 6.7 14.6 14.3 14.6 6.9 0 11.3-4 12.6-8.7z"></path>
|
||||
</svg>
|
||||
</p>
|
||||
<div id="content" class="">
|
||||
<div class="flex flex-col items-center mt-12 mb-16">
|
||||
<!-- Upload Column -->
|
||||
<div id="uploadColumn" class="flex flex-col justify-center mt-12 mb-4">
|
||||
|
|
@ -152,13 +187,13 @@ h3 {font-size: 2rem; margin: 0.00em 0 0.00em 0; font-weight: bold; font-family:
|
|||
<p>
|
||||
Hardware ID
|
||||
</p>
|
||||
<label></label>
|
||||
<label id="hardwareID"/>
|
||||
</div>
|
||||
<div class="flex flex-row justify-between items-center gap-4">
|
||||
<p>
|
||||
Firmware Version
|
||||
</p>
|
||||
<label></label>
|
||||
<label id="firmwareVersion" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -172,5 +207,6 @@ h3 {font-size: 2rem; margin: 0.00em 0 0.00em 0; font-weight: bold; font-family:
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -3,6 +3,6 @@
|
|||
|
||||
#include <Arduino.h>
|
||||
|
||||
extern const uint8_t ELEGANT_HTML[39251];
|
||||
extern const uint8_t ELEGANT_HTML[40500];
|
||||
|
||||
#endif
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue