imports/imhex
1
0
Fork 0
mirror of https://github.com/WerWolv/ImHex.git synced 2026-03-28 07:47:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

web: Make progress bar prettier

Browse Source
This commit is contained in:
WerWolv
2024-02-01 10:18:54 +01:00
parent e3c3233b3a
commit 26eec66f89
3 changed files with 101 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
dist/web/source/index.html vendored
View File

@@ -61,38 +61,44 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loading" class="centered">
<img src="https://raw.githubusercontent.com/WerWolv/ImHex/master/plugins/builtin/romfs/assets/dark/banner.png" id="logo" alt="ImHex Logo">
<h1>A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.</h1>
<h2>Available both natively and on the web</h2>
<h5>ImHex runs directly in your web browser with the help of Emscripten and WebAssembly.</h5>
<div id="loading" class="centered">
<img src="https://raw.githubusercontent.com/WerWolv/ImHex/master/plugins/builtin/romfs/assets/dark/banner.png" id="logo" alt="ImHex Logo">
<h1>A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.</h1>
<h2>Available both natively and on the web</h2>
<h5>ImHex runs directly in your web browser with the help of Emscripten and WebAssembly.</h5>
<div style="height: 50%">
<div style="height: 30%"> </div>
<h2 id="not_working">
Not loading in your Browser? <a href="https://imhex.werwolv.net">Try the native version</a>
</h2>
<h2 id="progress"></h2>
<div style="height: 40%"></div>
</div>
<div class="loading_ripple">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<div style="height: 10%">
</div>
<div class="footer">
<a href="https://imhex.werwolv.net">Homepage</a>
<p>Made with ♥️ by the ImHex Team</p>
<a href="https://github.com/WerWolv/ImHex">GitHub</a>
<div style="height: 50%">
<div style="height: 30%"> </div>
<h2 id="not_working">
Not loading in your Browser? <a href="https://imhex.werwolv.net">Try the native version</a>
</h2>
<div class="progress-bar-container">
<div class="progress progress-moved">
<div class="progress-bar" id="progress-bar-content">
</div>
</div>
</div>
</div>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script src="wasm-config.js"></script>
<script async src="imhex.js"></script>
<div class="loading_ripple">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<div style="height: 10%">
</div>
<div class="footer">
<a href="https://imhex.werwolv.net">Homepage</a>
<p>Made with ♥️ by the ImHex Team</p>
<a href="https://github.com/WerWolv/ImHex">GitHub</a>
</div>
</div>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<script src="wasm-config.js"></script>
<script async src="imhex.js"></script>
</body>
</html>

41
dist/web/source/style.css vendored
View File

@@ -132,4 +132,45 @@ a:hover {
height: 72px;
opacity: 0;
}
}
:root {
--progress: 25%;
}
.progress-bar-container {
margin: 100px auto;
width: 600px;
text-align: center;
}
.progress {
padding: 6px;
border-radius: 30px;
background: rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25),
0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
color: rgba(240, 240, 240, 0.9);
height: 18px;
border-radius: 30px;
font-size: 13px;
font-family: monospace;
font-weight: bold;
text-wrap: avoid;
white-space: nowrap;
overflow: hidden;
background-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.0)
);
}
.progress-moved .progress-bar {
width: var(--progress);
background-color: #3864cb;
}

47
dist/web/source/wasm-config.js vendored
View File

@@ -7,25 +7,26 @@ function monkeyPatch(progressFun) {
new URL(response.url).origin.length + 1
);
const reportingResponse = new Response(
new ReadableStream({
async start(controller) {
const contentLength = response.headers.get("content-length");
const total = parseInt(contentLength, 10);
const reader = response.clone().body.getReader();
let loaded = 0;
for (; ;) {
const { done, value } = await reader.read();
if (done) {
progressFun(file, total, total);
break;
new ReadableStream(
{
async start(controller) {
const contentLength = response.headers.get("content-length");
const total = parseInt(contentLength, 10);
const reader = response.clone().body.getReader();
let loaded = 0;
for (; ;) {
const { done, value } = await reader.read();
if (done) {
progressFun(file, total, total);
break;
}
loaded += value.byteLength;
progressFun(file, loaded, total);
controller.enqueue(value);
}
loaded += value.byteLength;
progressFun(file, loaded, total);
controller.enqueue(value);
controller.close();
}
controller.close();
}
},
},
{
status: response.status,
statusText: response.statusText
@@ -39,10 +40,14 @@ function monkeyPatch(progressFun) {
return _instantiateStreaming(reportingResponse, ...args);
}
}
monkeyPatch((file, done, total) => {
let percent = ((done/total)*100).toFixed(2);
let mib = (done/1024**2).toFixed(2);
document.getElementById("progress").innerHTML = `Downloading: ${percent}% (${mib}MiB)`;
monkeyPatch((file, done, total) => {
let percent = ((done / total) * 100).toFixed(0);
let mibNow = (done / 1024**2).toFixed(1);
let mibTotal = (total / 1024**2).toFixed(1);
let root = document.querySelector(':root');
root.style.setProperty("--progress", `${percent}%`)
document.getElementById("progress-bar-content").innerHTML = `${percent}% &nbsp;[${mibNow} MiB / ${mibTotal} MiB]`;
});
function glfwSetCursorCustom(wnd, shape) {