65 lines
2.3 KiB
HTML
65 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<b>Dist</b>
|
|
<div id="dist"><svg></svg></div>
|
|
<b>Speed</b>
|
|
<div id="speed"><svg></svg></div>
|
|
<b>Imu</b>
|
|
<div id="imu"><svg></svg></div>
|
|
|
|
<script type="module">
|
|
import * as d3_module from "https://cdn.jsdelivr.net/npm/d3@7";
|
|
import * as Plot from "https://cdn.skypack.dev/@observablehq/plot@0.4";
|
|
|
|
var current_dataset = [];
|
|
while (true) {
|
|
// fetch new data
|
|
await d3.json("/data").then(function(data) {
|
|
// then append to list
|
|
current_dataset.push(data);
|
|
// Map to a 10s (n S) sliding window
|
|
// ie find the most recent value, then reduce/filter anything more than 10s earlier than that.
|
|
const most_recent_time = current_dataset[current_dataset.length - 1].time;
|
|
const window_start = Math.max(0, most_recent_time - 10);
|
|
// filter the list
|
|
current_dataset = current_dataset.filter(
|
|
value => value.time >= window_start
|
|
);
|
|
// render dist graph
|
|
var dist_graph = Plot.plot({
|
|
x: { grid: true},
|
|
y: { grid: true},
|
|
marks: [
|
|
Plot.line(current_dataset, {x: "time", y: "left_distance", stroke: "red"}),
|
|
Plot.line(current_dataset, {x: "time", y: "right_distance", stroke: "blue"}),
|
|
]
|
|
});
|
|
var graphNode = document.getElementById("dist");
|
|
graphNode.replaceChild(dist_graph, graphNode.firstChild);
|
|
// render speed graph
|
|
var speed_graph = Plot.plot({
|
|
x: { grid: true},
|
|
y: { grid: true},
|
|
marks: [
|
|
Plot.line(current_dataset, {x: "time", y: "left_speed", stroke: "red"}),
|
|
Plot.line(current_dataset, {x: "time", y: "right_speed", stroke: "blue"}),
|
|
Plot.line(current_dataset, {x: "time", y: "left_speed_pid", stroke: "orange"}),
|
|
Plot.line(current_dataset, {x: "time", y: "right_speed_pid", stroke: "green"}),
|
|
]
|
|
});
|
|
var graphNode = document.getElementById("speed");
|
|
graphNode.replaceChild(speed_graph, graphNode.firstChild);
|
|
// render imu graph
|
|
var speed_graph = Plot.plot({
|
|
x: { grid: true},
|
|
y: { grid: true},
|
|
marks: [
|
|
Plot.line(current_dataset, {x: "time", y: "imu_z", stroke: "red"}),
|
|
]
|
|
});
|
|
var graphNode = document.getElementById("imu");
|
|
graphNode.replaceChild(speed_graph, graphNode.firstChild);
|
|
});
|
|
}
|
|
// }
|
|
</script>
|