63 lines
1.5 KiB
HTML
63 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>"Progress" Viewer</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
|
<style>
|
|
html {
|
|
background-color: #000034;
|
|
}
|
|
|
|
.centered {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<h1 style="font-family:'Roboto'; font-size:72px; color:white;text-align:center">*********</h1>
|
|
<div class="centered">
|
|
<canvas id=cnv width=300 height=300></canvas>
|
|
</div>
|
|
</body>
|
|
<script src="progress.js"></script>
|
|
<script>
|
|
var ctx = cnv.getContext("2d");
|
|
ctx.fillStyle = "white";
|
|
ctx.strokeStyle = "white";
|
|
ctx.lineWidth = 20;
|
|
ctx.lineCap = "round";
|
|
|
|
ctx.font = "72px Roboto";
|
|
ctx.textAlign = "center";
|
|
ctx.textBaseline = "middle";
|
|
|
|
var bar = new ProgressBar(ctx, 25, .01);
|
|
bar.progress = 0;
|
|
setInterval(() => {
|
|
bar.step();
|
|
ctx.clearRect(0, 0, cnv.width, cnv.height);
|
|
ctx.fillText(Math.round(bar.progress * 100) + "%", cnv.width / 2, cnv.height / 2);
|
|
ctx.beginPath();
|
|
bar.draw();
|
|
ctx.stroke();
|
|
}, 20);
|
|
setInterval(() => {
|
|
let request = new XMLHttpRequest();
|
|
request.onload =()=> {
|
|
console.log(request.responseText);
|
|
bar.progress = JSON.parse(request.responseText).progress;
|
|
};
|
|
request.open("GET", "/api/progress");
|
|
request.send();
|
|
|
|
}, 1000);
|
|
</script>
|
|
|
|
</html> |