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>
<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">
<canvas id=cnv width=300 height=300></canvas>
</div>
@@ -30,7 +30,6 @@
<script>
var ctx = cnv.getContext("2d");
ctx.fillStyle = "white";
ctx.strokeStyle = "white";
ctx.lineWidth = 20;
ctx.lineCap = "round";
@@ -45,6 +44,11 @@
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);
@@ -56,7 +60,6 @@
};
request.open("GET", "/api/progress");
request.send();
}, 1000);
</script>

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

@@ -24,6 +24,10 @@ class ProgressBar {
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;

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

@@ -21,18 +21,17 @@
</style>
<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">
<canvas width=300 height=300 id=cnv></canvas>
<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()">
<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";
@@ -47,17 +46,26 @@
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");
console.log(JSON.stringify({progress:bar.progress}));
request.send(JSON.stringify({progress:bar.progress}));
}