36 lines
1.1 KiB
JavaScript
36 lines
1.1 KiB
JavaScript
import m from "https://esm.sh/mithril@2.2.2"
|
|
import colormap from "https://esm.sh/colormap@2.3.2"
|
|
import {range} from "./util.js";
|
|
|
|
function generatePoints(points, frames){
|
|
const lst = [];
|
|
const colors = colormap({
|
|
colormap: 'viridis',
|
|
nshades: new Set(points.map(p => p.objectId)).size,
|
|
format: 'hex',
|
|
alpha: 1
|
|
});
|
|
for(const point of points){
|
|
if(frames.indexOf(point.frameIndex) !== -1){
|
|
lst.push(m("text", {x: point.y, y: point.x, fill: colors[point.objectId]}, point.objectId));
|
|
}
|
|
}
|
|
return m("g", lst);
|
|
}
|
|
|
|
function getTimeStamp(points, frameId){
|
|
for(const point of points){
|
|
if(point.frameIndex === frameId){
|
|
return `${point.frameTimestamp / 1000} seconds`;
|
|
}
|
|
}
|
|
}
|
|
|
|
const url = "/dodgeball-tracker/outputs/output-lmbn_n_cuhk03_d.json";
|
|
const resp = await fetch(url);
|
|
const points = await resp.json();
|
|
|
|
|
|
|
|
m.render(document.getElementById("first"), generatePoints(points.points, range(-10, 400)));
|
|
m.render(document.getElementById("first-ts"), m("span", getTimeStamp(points.points, 80))); |