benkyd/Examples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Did the cool memes! Almost done

Browse Source
This commit is contained in:
udmsoft
2018-09-26 10:45:14 -04:00
parent 07ad0adf9c
commit 26204b4b96
4 changed files with 162 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
JavaScript/nutcounter/server/client/index.html
View File

@@ -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
View 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;
}
}

66
JavaScript/nutcounter/server/client/reporter.html
View File

@@ -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>

11
JavaScript/nutcounter/server/index.js
View File

@@ -9,7 +9,6 @@ app.use(bodyParser.urlencoded({
}));
let progress = 0;
console.log(process.argv);
if (process.argv.length >= 3) {
app.listen(parseInt(process.argv[2]));
} else {
@@ -17,18 +16,16 @@ if (process.argv.length >= 3) {
}
app.use(express.static(__dirname + '/client'));
app.get('/', (req, res, next) => {
res.status(200).sendFile('index.html');
});
app.get('/progress', (req, res, next) => {
app.get('/api/progress', (req, res, next) => {
res.status(200).end(JSON.stringify({
progress: progress
}));
});
app.post('/progress', (req, res, next) => {
progress = req.body.progress;
//Wow this is broken. Child prodigy workaround deployed.
app.post('/api/progress', (req, res, next) => {
progress = JSON.parse(Object.keys(req.body)[0]).progress;
res.status(200).end(JSON.stringify({
status: 'completed'
}));