From afbe73cd210c2a18e913259aea340de12a1cb3c4 Mon Sep 17 00:00:00 2001 From: didier amyot Date: Tue, 5 Nov 2024 08:41:01 -0500 Subject: [PATCH] Deleted frontend --- frontend/animation-experiments.html | 72 -------------- frontend/animation.js | 66 ------------- frontend/index-old.html | 90 ----------------- frontend/index.html | 18 ---- frontend/main-old.js | 118 ----------------------- frontend/main.js | 143 ---------------------------- frontend/server.tsx | 0 frontend/style.css | 16 ---- frontend/util.js | 12 --- 9 files changed, 535 deletions(-) delete mode 100644 frontend/animation-experiments.html delete mode 100644 frontend/animation.js delete mode 100644 frontend/index-old.html delete mode 100644 frontend/index.html delete mode 100644 frontend/main-old.js delete mode 100644 frontend/main.js delete mode 100644 frontend/server.tsx delete mode 100644 frontend/style.css delete mode 100644 frontend/util.js diff --git a/frontend/animation-experiments.html b/frontend/animation-experiments.html deleted file mode 100644 index 7b45fc1..0000000 --- a/frontend/animation-experiments.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - Animation - - - - - - - - -

Hello, world!

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
- - - -
- - - \ No newline at end of file diff --git a/frontend/animation.js b/frontend/animation.js deleted file mode 100644 index 39012ac..0000000 --- a/frontend/animation.js +++ /dev/null @@ -1,66 +0,0 @@ -import anime from "https://esm.sh/animejs@3.2.2"; - - -const second = 1000; - -const canvasWidth = Number.parseFloat(document.querySelector("svg").getAttribute("width")); -const canvasHeight = Number.parseFloat(document.querySelector("svg").getAttribute("height")); - -function gaussianRandom(mean=0, stdev=1) { - const u = 1 - Math.random(); // Converting [0,1) to (0,1] - const v = Math.random(); - const z = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v ); - // Transform to the desired mean and standard deviation: - return z * stdev + mean; -} - -function* brownian(n){ - let x = 0; - for(let i = 0; i < n; i ++){ - x += gaussianRandom(0, 10); - console.log(x); - yield x; - } -} - -function* pseudoBrownian(n, limit){ - let x = 0; - for(let i = 0; i < n; i ++){ - let delta = gaussianRandom(0, 10); - if(Math.abs(x + delta) > limit){ - delta = -1 * delta - } - x += delta; - yield x; - } -} - -function* keyFrames(duration, framePerSeconds){ - const deltaX = canvasWidth / (duration * framePerSeconds); - const limit = 0.75 * (canvasHeight / 2); - for(const deltaY of pseudoBrownian(duration * framePerSeconds, limit)){ - yield {translateX: `+=${deltaX}`, translateY: deltaY}; - } -} - -const duration = 60; -const timeline = anime.timeline({ - duration: duration * second, - autoplay: false, - easing: 'linear'}); - -for(let i = 1; i <= 12; i++){ - timeline.add({ - targets: `#rect-${i}`, - keyframes: Array.from(keyFrames(duration, 30)), - }, 0) -} - - -document.querySelector('#play').onclick = timeline.play; -document.querySelector('#pause').onclick = timeline.pause; -document.querySelector('#seek').onclick = function(){ - const seekVal = Number.parseFloat(second * document.querySelector('#seek-value').value); - timeline.pause(); - timeline.seek(seekVal); -} diff --git a/frontend/index-old.html b/frontend/index-old.html deleted file mode 100644 index 23ac777..0000000 --- a/frontend/index-old.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - Dodgeball Tracker - - - - - - - - - -

Dodgeball Tracker

- -
- -

-
- - -
- - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
- - - -
- - - \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html deleted file mode 100644 index 1cefe89..0000000 --- a/frontend/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - Dodgeball Tracker - - - - - - - - - - - - - \ No newline at end of file diff --git a/frontend/main-old.js b/frontend/main-old.js deleted file mode 100644 index f031426..0000000 --- a/frontend/main-old.js +++ /dev/null @@ -1,118 +0,0 @@ -import anime from "https://esm.sh/animejs@3.2.2"; -import m from "https://esm.sh/mithril@2.2.2" -import colormap from "https://esm.sh/colormap@2.3.2" - - -const second = 1000; - -const canvasWidth = Number.parseFloat(document.querySelector("svg").getAttribute("width")); -const canvasHeight = Number.parseFloat(document.querySelector("svg").getAttribute("height")); - -function gaussianRandom(mean=0, stdev=1) { - const u = 1 - Math.random(); // Converting [0,1) to (0,1] - const v = Math.random(); - const z = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v ); - // Transform to the desired mean and standard deviation: - return z * stdev + mean; -} - -function* brownian(n){ - let x = 0; - for(let i = 0; i < n; i ++){ - x += gaussianRandom(0, 10); - console.log(x); - yield x; - } -} - -function* pseudoBrownian(n, limit){ - let x = 0; - for(let i = 0; i < n; i ++){ - let delta = gaussianRandom(0, 10); - if(Math.abs(x + delta) > limit){ - delta = -1 * delta - } - x += delta; - yield x; - } -} - -function* keyFrames(duration, framePerSeconds){ - const deltaX = canvasWidth / (duration * framePerSeconds); - const limit = 0.75 * (canvasHeight / 2); - for(const deltaY of pseudoBrownian(duration * framePerSeconds, limit)){ - yield {translateX: `+=${deltaX}`, translateY: deltaY}; - } -} - -const duration = 60; -const timeline = anime.timeline({ - duration: duration * second, - autoplay: false, - easing: 'linear'}); - -for(let i = 1; i <= 12; i++){ - timeline.add({ - targets: `#rect-${i}`, - keyframes: Array.from(keyFrames(duration, 30)), - }, 0) -} - - -document.querySelector('#play').onclick = timeline.play; -document.querySelector('#pause').onclick = timeline.pause; -document.querySelector('#seek').onclick = function(){ - const seekVal = Number.parseFloat(second * document.querySelector('#seek-value').value); - timeline.pause(); - timeline.seek(seekVal); -} - - -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(); - -function range(min, max){ - const ret = []; - while(min < max){ - ret.push(min); - min ++; - } - return ret -} - -function getCourtLines(){ - return [ - m("line", {x1: 450, x2: 450, y1: 0, y2: 450, class: "court-border"}), - m("line", {x1: 300, x2: 300, y1: 0, y2: 450, class: "return-line"}), - m("line", {x1: 600, x2: 600, y1: 0, y2: 450, class: "return-line"}) - ] -} - - -m.render(document.getElementById("first"), generatePoints(points.points, range(-10, 400))); -m.render(document.getElementById("first-ts"), m("span", getTimeStamp(points.points, 80))); \ No newline at end of file diff --git a/frontend/main.js b/frontend/main.js deleted file mode 100644 index 9ea08b1..0000000 --- a/frontend/main.js +++ /dev/null @@ -1,143 +0,0 @@ -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 gaussianRandom(mean=0, stdev=1) { - const u = 1 - Math.random(); // Converting [0,1) to (0,1] - const v = Math.random(); - const z = Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v ); - // Transform to the desired mean and standard deviation: - return z * stdev + mean; -} - -function* brownian(n){ - let x = 0; - for(let i = 0; i < n; i ++){ - x += gaussianRandom(0, 10); - console.log(x); - yield x; - } -} - -function* pseudoBrownian(n, limit){ - let x = 0; - for(let i = 0; i < n; i ++){ - let delta = gaussianRandom(0, 10); - if(Math.abs(x + delta) > limit){ - delta = -1 * delta - } - x += delta; - yield x; - } -} - -function* keyFrames(duration, framePerSeconds){ - const deltaX = canvasWidth / (duration * framePerSeconds); - const limit = 0.75 * (canvasHeight / 2); - for(const deltaY of pseudoBrownian(duration * framePerSeconds, limit)){ - yield {translateX: `+=${deltaX}`, translateY: deltaY}; - } -} - - -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(); - - - -function getCourtLines(){ - return [ - m("line", {x1: 450, x2: 450, y1: 0, y2: 450, class: "court-border"}), - m("line", {x1: 300, x2: 300, y1: 0, y2: 450, class: "return-line"}), - m("line", {x1: 600, x2: 600, y1: 0, y2: 450, class: "return-line"}) - ] -} - - -class WorkingTabs{ - #datasets = [] - - async oninit(){ - const url = "/dodgeball-tracker/outputs/index.json" - this.#datasets = (await m.request({method: "GET", url: url}))?.index ?? []; - } - - tabs(){ - return m("div.tabs", - m("ul", - m("li.is-active", m("a", "Info")), - m("li", m("a", "Video Player")))); - } - - info(){ - const options = this.#datasets.map(ds => m('option', {value: ds.id}, ds.label)); - return m("div.field", - m("label.label", "Dataset"), - m("div.control", - m("div.select", - m("select", options)))); - } - - view(){ - return m("div", - this.tabs(), - this.info()) - } -} - -const Court = { - view: function(){ - const margin = 50 - return m("svg.court-side", { width: 900 + 2 * margin, height: 450 + 2 * margin}, [ - m("g.court-border#court", {transform: `translate(${margin} ${margin})`}, [ - m("rect", {width: 900, height: 450, style: 'background-color: pink;'}), - getCourtLines() - ]) - ]) - } - -} - -// m.render(document.getElementById("new"), drawCourt()); - -// m.render(document.getElementById("first"), generatePoints(points.points, range(-10, 400))); -// m.render(document.getElementById("first-ts"), m("span", getTimeStamp(points.points, 80))); - -const Main = { - view: function(){ - return m("div", [ - m("h1.title.is-1", "DodgeBall Tracker"), - m("div.columns.is-centered", - m("m.column.is-three-quarters", - m(Court), - m(WorkingTabs))) - ]) - } -} - -m.mount(document.body, Main); \ No newline at end of file diff --git a/frontend/server.tsx b/frontend/server.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/style.css b/frontend/style.css deleted file mode 100644 index 68bcd18..0000000 --- a/frontend/style.css +++ /dev/null @@ -1,16 +0,0 @@ -.court-border { - stroke: red; - stroke-width: 4px; - /*fill-opacity: 0;*/ - fill: gray; -} - -.court-side { - background-color: pink; -} - -.return-line { - stroke: blue; - stroke-width: 2px; - fill-opacity: 0; -} \ No newline at end of file diff --git a/frontend/util.js b/frontend/util.js deleted file mode 100644 index b397576..0000000 --- a/frontend/util.js +++ /dev/null @@ -1,12 +0,0 @@ -export function range(min, max=undefined){ - if(max === undefined){ - max = min; - min = 0; - } - const ret = []; - while(min < max){ - ret.push(min); - min ++; - } - return ret -} \ No newline at end of file