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

Merge pull request #1 from UDXS/master

Browse Source 
👌
This commit is contained in:
Ben
2018-09-26 17:47:25 +01:00
committed by GitHub
parent 0acfa64311 628ebc4c26
commit 1bd3a8cd54
5 changed files with 236 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,66 @@
<!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">****Track</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.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();
ctx.strokeStyle = "gray";
bar.drawBase();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "white";
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>

37
JavaScript/nutcounter/server/client/progress.js Normal file
View File

@@ -0,0 +1,37 @@
//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);
}
drawBase() {
let radius = Math.min(this.canvas.width,this.canvas.height)/2;
this.ctx.arc(this.canvas.width / 2, this.canvas.height / 2, radius - this.margin, 0, 2 * Math.PI);
}
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;
}
}

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

@@ -0,0 +1,74 @@
<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">****Track Reporter</h1>
<div class="centered">
<canvas width=300 height=300 id=cnv onmousedown="onMouse"></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.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();
ctx.strokeStyle = "gray";
bar.drawBase();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "white";
bar.draw();
ctx.stroke();
}, 20);
function doInput(){
bar.progress = progress.value/100;
}
function onMouse(e){
console.log("Hello");
bar.progress = Math.atan2(e.offsetY, e.offsetX);
}
function doChange(){
let request = new XMLHttpRequest();
request.open("POST", "/api/progress");
request.send(JSON.stringify({progress:bar.progress}));
}
</script>
</html>

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

@@ -4,25 +4,29 @@ const bodyParser = require('body-parser');
let app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.urlencoded({
extended: true
}));
let progress = 0;
app.listen(80);
if (process.argv.length >= 3) {
app.listen(parseInt(process.argv[2]));
} else {
app.listen(80);
}
app.use(express.static(__dirname + '/client'));
app.get('/', (req, res, next) => {
res.status(200).sendFile('index.html');
app.get('/api/progress', (req, res, next) => {
res.status(200).end(JSON.stringify({
progress: progress
}));
});
app.get('/progress', (req, res, next) => {
res.status(200).end(JSON.stringify({
progress: progress
}));
});
app.post('/progress', (req, res, next) => {
progress = req.body.progress;
res.status(200).end(JSON.stringify({
status: 'completed'
}));
});
//This is broken AF.
app.post('/api/progress', (req, res, next) => {
progress = req.body.progress;
res.status(200).end(JSON.stringify({
status: 'completed'
}));
});

86
JavaScript/nutcounter/server/package-lock.json generated
View File

@@ -9,7 +9,7 @@
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
"integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
"requires": {
"mime-types": "2.1.20",
"mime-types": "~2.1.18",
"negotiator": "0.6.1"
}
},
@@ -24,15 +24,15 @@
"integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
"requires": {
"bytes": "3.0.0",
"content-type": "1.0.4",
"content-type": "~1.0.4",
"debug": "2.6.9",
"depd": "1.1.2",
"http-errors": "1.6.3",
"depd": "~1.1.2",
"http-errors": "~1.6.3",
"iconv-lite": "0.4.23",
"on-finished": "2.3.0",
"on-finished": "~2.3.0",
"qs": "6.5.2",
"raw-body": "2.3.3",
"type-is": "1.6.16"
"type-is": "~1.6.16"
},
"dependencies": {
"qs": {
@@ -55,7 +55,7 @@
"content-type": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
"integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
"integrity": "sha1-4TjMdeBAxyexlm/l5fjJruJW/js="
},
"cookie": {
"version": "0.3.1",
@@ -70,7 +70,7 @@
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"integrity": "sha1-XRKFFd8TT/Mn6QpMk/Tgd6U2NB8=",
"requires": {
"ms": "2.0.0"
}
@@ -203,15 +203,15 @@
"finalhandler": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
"integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
"integrity": "sha1-7r9O2EAHnIP0JJA4ydcDAIMBsQU=",
"requires": {
"debug": "2.6.9",
"encodeurl": "1.0.2",
"escape-html": "1.0.3",
"on-finished": "2.3.0",
"parseurl": "1.3.2",
"statuses": "1.4.0",
"unpipe": "1.0.0"
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"on-finished": "~2.3.0",
"parseurl": "~1.3.2",
"statuses": "~1.4.0",
"unpipe": "~1.0.0"
}
},
"forwarded": {
@@ -238,9 +238,9 @@
"iconv-lite": {
"version": "0.4.23",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
"integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
"integrity": "sha1-KXhx9jvlB63Pv8pxXQzQ7thOmmM=",
"requires": {
"safer-buffer": "2.1.2"
"safer-buffer": ">= 2.1.2 < 3"
}
},
"inherits": {
@@ -271,19 +271,19 @@
"mime": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
"integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
"integrity": "sha1-Eh+evEnjdm8xGnbh+hyAA8SwOqY="
},
"mime-db": {
"version": "1.36.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.36.0.tgz",
"integrity": "sha512-L+xvyD9MkoYMXb1jAmzI/lWYAxAMCPvIBSWur0PZ5nOf5euahRLVqH//FKW9mWp2lkqUgYiXPgkzfMUFi4zVDw=="
"integrity": "sha1-UCBHjbPH/pOq17vMTc+GnEM2M5c="
},
"mime-types": {
"version": "2.1.20",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.20.tgz",
"integrity": "sha512-HrkrPaP9vGuWbLK1B1FfgAkbqNjIuy4eHlIYnFi7kamZyLLrGlo2mpcx0bBmNpKqBtYtAfGbodDddIgddSJC2A==",
"integrity": "sha1-kwy3GdVx6QNzhSD4RwkRVIyizBk=",
"requires": {
"mime-db": "1.36.0"
"mime-db": "~1.36.0"
}
},
"ms": {
@@ -317,9 +317,9 @@
"proxy-addr": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
"integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
"integrity": "sha1-7PxzO/Iv+Mb0B/onUye5q2fki5M=",
"requires": {
"forwarded": "0.1.2",
"forwarded": "~0.1.2",
"ipaddr.js": "1.8.0"
}
},
@@ -336,7 +336,7 @@
"raw-body": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
"integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
"integrity": "sha1-GzJOzmtXBuFThVvBFIxlu39uoMM=",
"requires": {
"bytes": "3.0.0",
"http-errors": "1.6.3",
@@ -347,48 +347,48 @@
"safe-buffer": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
"integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM="
},
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
"integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo="
},
"send": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
"integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
"integrity": "sha1-bsyh4PjBVtFBWXVZhI32RzCmu8E=",
"requires": {
"debug": "2.6.9",
"depd": "1.1.2",
"destroy": "1.0.4",
"encodeurl": "1.0.2",
"escape-html": "1.0.3",
"etag": "1.8.1",
"depd": "~1.1.2",
"destroy": "~1.0.4",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"etag": "~1.8.1",
"fresh": "0.5.2",
"http-errors": "1.6.3",
"http-errors": "~1.6.2",
"mime": "1.4.1",
"ms": "2.0.0",
"on-finished": "2.3.0",
"range-parser": "1.2.0",
"statuses": "1.4.0"
"on-finished": "~2.3.0",
"range-parser": "~1.2.0",
"statuses": "~1.4.0"
}
},
"serve-static": {
"version": "1.13.2",
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
"integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
"integrity": "sha1-CV6Ecv1bRiN9tQzkhqQ/S4bGzsE=",
"requires": {
"encodeurl": "1.0.2",
"escape-html": "1.0.3",
"parseurl": "1.3.2",
"encodeurl": "~1.0.2",
"escape-html": "~1.0.3",
"parseurl": "~1.3.2",
"send": "0.16.2"
}
},
"setprototypeof": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
"integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
"integrity": "sha1-0L2FU2iHtv58DYGMuWLZ2RxU5lY="
},
"statuses": {
"version": "1.4.0",
@@ -398,10 +398,10 @@
"type-is": {
"version": "1.6.16",
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
"integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
"integrity": "sha1-+JzjQVQcZysl7nrjxz3uOyvlAZQ=",
"requires": {
"media-typer": "0.3.0",
"mime-types": "2.1.20"
"mime-types": "~2.1.18"
}
},
"unpipe": {