From 96decf8166e54bc21853da7f73f4f93af1bda8eb Mon Sep 17 00:00:00 2001
From: Neale Pickett <neale@woozle.org>
Date: Sun, 24 Apr 2022 10:47:04 -0600
Subject: [PATCH] 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.
---
 static/chart.html | 71 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 static/chart.html
diff --git a/static/chart.html b/static/chart.html
new file mode 100644
index 0000000..46a962f
--- /dev/null
+++ b/static/chart.html
@@ -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>
