neale/vail
neale
/
vail
mirror of https://github.com/nealey/vail.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Introducing the chart-o-matic! 

This will eventually become a chart of what keys you hit when,
and how that resulted in tones being sent.
This commit is contained in:
Neale Pickett 2022-04-24 10:47:04 -06:00
parent 6d4acd98a8
commit 96decf8166
1 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
static/chart.html Normal file
View File

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<title>Chart-O-Matic</title>
<script>
data = []
const Millisecond = 1
const Second = 1000 * Millisecond
const ChartWidth = 20 * Second
function draw(canvas) {
let ctx = canvas.getContext("2d")
let now = Date.now()
let begin = now - ChartWidth
let xScale = canvas.width / ChartWidth
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.save()
// Make 0,0 be the lower-left corner, like in PostScript
ctx.scale(1, -1)
ctx.translate(0, -canvas.height)
ctx.strokeStyle = "red"
ctx.lineWidth = 2
let y = 0
ctx.moveTo(0, y)
ctx.beginPath()
for (let point of data) {
let x = (point[0] - begin) * xScale
ctx.lineTo(x, y)
y = point[1] * canvas.height
ctx.lineTo(x, y)
}
ctx.stroke()
ctx.restore()
requestAnimationFrame(() => draw(canvas))
}
function update() {
let now = Date.now()
let earliest = now - ChartWidth
data.push([now, Math.sin(now/Second)>0?1:0])
while (data[0][0] < earliest) {
data.shift()
}
}
function init() {
let canvas = document.querySelector("#chart")
canvas.width = ChartWidth / (20 * Millisecond)
setInterval(update, 50 * Millisecond)
draw(canvas)
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init)
} else {
init()
}
</script>
</head>
<body>
<h1>The Amazing Chart-O-Matic</h1>
<canvas id="chart" style="border: solid black 1px; width: 100%;"></canvas>
</body>
</html>