Did the cool memes! Almost done
This commit is contained in:
udmsoft
@@ -1,24 +1,63 @@
|
||||
<!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">
|
||||
<script src="http://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="prog" style="width: 300px; height:300px; display: inline; text-align: center;"></div>
|
||||
</body>
|
||||
<script>
|
||||
window.onload = function () {
|
||||
var circle = new ProgressBar.Circle('#prog', {
|
||||
color: '#000000',
|
||||
duration: 3000,
|
||||
easing: 'easeInOut'
|
||||
});
|
||||
circle.animate(.5);
|
||||
};
|
||||
</script>
|
||||
<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>
|
||||
33
JavaScript/nutcounter/server/client/progress.js
Normal file
33
JavaScript/nutcounter/server/client/progress.js
Normal file
@@ -0,0 +1,33 @@
|
||||
//When life gives you CSS, roll your own canvas-based solution
|
||||
//Written by @UDXS
|
||||
|
||||
class ProgressBar {
|
||||
//step = percent to change per step
|
||||
constructor(context, margin, step) {
|
||||
this.canvas = context.canvas;
|
||||
this.ctx = context;
|
||||
this.margin = margin;
|
||||
this.prog = 0;
|
||||
this.target = 0;
|
||||
this.stepAmt = step;
|
||||
}
|
||||
get progress() {
|
||||
return this.target;
|
||||
}
|
||||
set progress(target) {
|
||||
this.target = target;
|
||||
if(target > 1) target = 1;
|
||||
if(target < 1) target = 0;
|
||||
}
|
||||
draw() {
|
||||
let radius = Math.min(this.canvas.width,this.canvas.height)/2;
|
||||
let start = Math.PI/-2;
|
||||
this.ctx.arc(this.canvas.width / 2, this.canvas.height / 2, radius - this.margin, start, 2 * Math.PI * this.prog + start);
|
||||
}
|
||||
step() {
|
||||
if (Math.abs(this.target - this.prog) > this.stepAmt)
|
||||
this.prog += this.target > this.prog ? this.stepAmt : this.stepAmt * -1;
|
||||
else
|
||||
this.prog = this.target;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>"Progress" Reporter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- <script src="http://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.min.js"></script> -->
|
||||
</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:64px; color:white;text-align:center">********* Progress Reporter</h1>
|
||||
<div class="centered">
|
||||
<canvas width=300 height=300 id=cnv></canvas>
|
||||
<br>
|
||||
<input type="range" min=0 max=100 value=0 id="progress" onchange="doChange()" oninput="doInput()">
|
||||
</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 = "48px Roboto";
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
|
||||
var bar = new ProgressBar(ctx, 25, .05);
|
||||
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);
|
||||
function doInput(){
|
||||
bar.progress = progress.value/100;
|
||||
}
|
||||
|
||||
function doChange(){
|
||||
let request = new XMLHttpRequest();
|
||||
request.open("POST", "/api/progress");
|
||||
console.log(JSON.stringify({progress:bar.progress}));
|
||||
request.send(JSON.stringify({progress:bar.progress}));
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user