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

Wow the backend has the succ but the frontend is done

Browse Source
This commit is contained in:
udmsoft
2018-09-26 12:44:20 -04:00
parent 26204b4b96
commit 628ebc4c26
4 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,7 @@
</style> </style>
<body> <body>
<h1 style="font-family:'Roboto'; font-size:72px; color:white;text-align:center">*********</h1> <h1 style="font-family:'Roboto'; font-size:72px; color:white;text-align:center">****Track</h1>
<div class="centered"> <div class="centered">
<canvas id=cnv width=300 height=300></canvas> <canvas id=cnv width=300 height=300></canvas>
</div> </div>
@@ -30,7 +30,6 @@
<script> <script>
var ctx = cnv.getContext("2d"); var ctx = cnv.getContext("2d");
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.strokeStyle = "white";
ctx.lineWidth = 20; ctx.lineWidth = 20;
ctx.lineCap = "round"; ctx.lineCap = "round";
@@ -45,6 +44,11 @@
ctx.clearRect(0, 0, cnv.width, cnv.height); ctx.clearRect(0, 0, cnv.width, cnv.height);
ctx.fillText(Math.round(bar.progress * 100) + "%", cnv.width / 2, cnv.height / 2); ctx.fillText(Math.round(bar.progress * 100) + "%", cnv.width / 2, cnv.height / 2);
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = "gray";
bar.drawBase();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "white";
bar.draw(); bar.draw();
ctx.stroke(); ctx.stroke();
}, 20); }, 20);
@@ -56,7 +60,6 @@
}; };
request.open("GET", "/api/progress"); request.open("GET", "/api/progress");
request.send(); request.send();
}, 1000); }, 1000);
</script> </script>

4
JavaScript/nutcounter/server/client/progress.js
View File

@@ -24,6 +24,10 @@ class ProgressBar {
let start = Math.PI/-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); 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() { step() {
if (Math.abs(this.target - this.prog) > this.stepAmt) if (Math.abs(this.target - this.prog) > this.stepAmt)
this.prog += this.target > this.prog ? this.stepAmt : this.stepAmt * -1; this.prog += this.target > this.prog ? this.stepAmt : this.stepAmt * -1;

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

@@ -21,18 +21,17 @@
</style> </style>
<body> <body>
<h1 style="font-family:'Roboto'; font-size:64px; color:white;text-align:center">********* Progress Reporter</h1> <h1 style="font-family:'Roboto'; font-size:64px; color:white;text-align:center">****Track Reporter</h1>
<div class="centered"> <div class="centered">
<canvas width=300 height=300 id=cnv></canvas> <canvas width=300 height=300 id=cnv onmousedown="onMouse"></canvas>
<br> <br>
<input type="range" min=0 max=100 value=0 id="progress" onchange="doChange()" oninput="doInput()"> <input type="range" min=0 max=100 value=0 id="progress" onchange="doChange()" oninput="doInput()" >
</div> </div>
</body> </body>
<script src="progress.js"></script> <script src="progress.js"></script>
<script> <script>
var ctx = cnv.getContext("2d"); var ctx = cnv.getContext("2d");
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.strokeStyle = "white";
ctx.lineWidth = 20; ctx.lineWidth = 20;
ctx.lineCap = "round"; ctx.lineCap = "round";
@@ -47,17 +46,26 @@
ctx.clearRect(0, 0, cnv.width, cnv.height); ctx.clearRect(0, 0, cnv.width, cnv.height);
ctx.fillText(Math.round(bar.progress * 100) + "%", cnv.width / 2, cnv.height / 2); ctx.fillText(Math.round(bar.progress * 100) + "%", cnv.width / 2, cnv.height / 2);
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = "gray";
bar.drawBase();
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "white";
bar.draw(); bar.draw();
ctx.stroke(); ctx.stroke();
}, 20); }, 20);
function doInput(){ function doInput(){
bar.progress = progress.value/100; bar.progress = progress.value/100;
} }
function onMouse(e){
console.log("Hello");
bar.progress = Math.atan2(e.offsetY, e.offsetX);
}
function doChange(){ function doChange(){
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();
request.open("POST", "/api/progress"); request.open("POST", "/api/progress");
console.log(JSON.stringify({progress:bar.progress}));
request.send(JSON.stringify({progress:bar.progress})); request.send(JSON.stringify({progress:bar.progress}));
} }

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

@@ -23,9 +23,9 @@ app.get('/api/progress', (req, res, next) => {
})); }));
}); });
//Wow this is broken. Child prodigy workaround deployed. //This is broken AF.
app.post('/api/progress', (req, res, next) => { app.post('/api/progress', (req, res, next) => {
progress = JSON.parse(Object.keys(req.body)[0]).progress; progress = req.body.progress;
res.status(200).end(JSON.stringify({ res.status(200).end(JSON.stringify({
status: 'completed' status: 'completed'
})); }));