security_vision/chronodiagram
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: security_vision:adce8d067c46bd1dd15da116fb64fe62dd745179
Branches Tags
security_vision:main
security_vision:absolute
...
compare: security_vision:95405ddd313c1c18f0abeb196bb4cb3f324c9f6a
Branches Tags
security_vision:main
security_vision:absolute

2 commits
adce8d067c ... 95405ddd31

Author SHA1 Message Date
Ruben van de Ven
95405ddd31 Clean some console.logs 2022-06-10 13:13:13 +02:00
Ruben van de Ven
89253454f9 Feature: give diagrams a title 2022-06-10 13:10:19 +02:00
5 changed files with 184 additions and 109 deletions
Show stats Expand all files Collapse all files

16
app/webserver.py
View file

@ -266,15 +266,19 @@ class AnimationHandler(tornado.web.RequestHandler):
if first_line.endswith(","): if first_line.endswith(","):
first_line = first_line[:-1] first_line = first_line[:-1]
metadata = json.loads(first_line) drawing_specs = json.loads(first_line)
drawing_id = name[:-16]
md = self.index.drawings[drawing_id].get_metadata() if drawing_id in self.index.drawings else {}
title = md['title'] if 'title' in md else None
files.append( files.append(
{ {
"name": f"/files/{name[:-16]}", "name": f"/files/{drawing_id}",
"id": name[:-16], "id": drawing_id,
"ctime": metadata[0], "title": title,
"ctime": drawing_specs[0],
"mtime": datetime.datetime.fromtimestamp(stat.st_mtime).strftime("%Y-%m-%d %T"), "mtime": datetime.datetime.fromtimestamp(stat.st_mtime).strftime("%Y-%m-%d %T"),
"dimensions": [metadata[1], metadata[2]], "dimensions": [drawing_specs[1], drawing_specs[2]],
"svg": f"/drawing/{name[:-16]}.svg", "svg": f"/drawing/{drawing_id}.svg",
} }
) )

6
app/www/annotate.html
View file

@ -63,12 +63,16 @@
background: white; background: white;
display: block; display: block;
} }
.playlist .title{
display: block;
font-weight: bold;;
}
.help { .help {
position: absolute; position: absolute;
right: 0; right: 0;
top: 10px; top: 10px;
left: 70px; left: 220px;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;

67
app/www/annotate.js
View file

@ -306,7 +306,7 @@ class Annotator extends EventTarget {
getColorForTag(tag_id) { getColorForTag(tag_id) {
const tag = this.tagMap[tag_id]; const tag = this.tagMap[tag_id];
console.log(tag_id, tag); // console.log(tag_id, tag);
if (tag && tag.hasOwnProperty('color')) { if (tag && tag.hasOwnProperty('color')) {
return tag.color; return tag.color;
} }
@ -423,12 +423,12 @@ class Annotator extends EventTarget {
this.outPointTimeMs = out_ms; this.outPointTimeMs = out_ms;
// this._seekByTimeMs(this.audioOffset < 0 ? this.audioOffset * 1000 : 0); // this._seekByTimeMs(this.audioOffset < 0 ? this.audioOffset * 1000 : 0);
// draw full stroke of annotation // draw full stroke of annotation
console.log('setInOut'); console.debug('setInOut');
this.drawStrokePosition(this.inPointPosition, this.outPointPosition); this.drawStrokePosition(this.inPointPosition, this.outPointPosition);
console.log([`${this.inPointTimeMs}`, `${this.outPointTimeMs}`]) console.debug([`${this.inPointTimeMs}`, `${this.outPointTimeMs}`])
this.slider.set([this.inPointTimeMs, this.outPointTimeMs]); this.slider.set([this.inPointTimeMs, this.outPointTimeMs]);
// console.log(this.selectedAnnotation); // console.debug(this.selectedAnnotation);
if (this.selectedAnnotation) { if (this.selectedAnnotation) {
this.selectedAnnotation.t_in = in_ms; this.selectedAnnotation.t_in = in_ms;
this.selectedAnnotation.t_out = out_ms; this.selectedAnnotation.t_out = out_ms;
@ -443,7 +443,7 @@ class Annotator extends EventTarget {
this.outPointTimeMs = null; this.outPointTimeMs = null;
this._seekByTimeMs(this.audioOffset < 0 ? this.audioOffset * 1000 : 0); this._seekByTimeMs(this.audioOffset < 0 ? this.audioOffset * 1000 : 0);
// draw full stroke of annotation // draw full stroke of annotation
console.log('reset!'); console.debug('reset!');
this.drawStrokePosition(this.inPointPosition, [Infinity, Infinity]); this.drawStrokePosition(this.inPointPosition, [Infinity, Infinity]);
this.setUpAnnotator(); this.setUpAnnotator();
} }
@ -471,7 +471,7 @@ class Annotator extends EventTarget {
} }
return this.loadStrokes(data, metadata) return this.loadStrokes(data, metadata)
}) })
.catch(e => console.log(e)); .catch(e => console.error(e));
} else { } else {
return this.loadStrokes(data, null); return this.loadStrokes(data, null);
} }
@ -480,7 +480,7 @@ class Annotator extends EventTarget {
// play on click for player // play on click for player
if(this.config.is_player) { if(this.config.is_player) {
this.svgEl.addEventListener('click', (ev) => { this.svgEl.addEventListener('click', (ev) => {
console.log('clicked for play/pause'); console.debug('clicked for play/pause');
this.playPause(); this.playPause();
}); });
} }
@ -492,11 +492,12 @@ class Annotator extends EventTarget {
this.wrapperEl.classList.remove('loading'); this.wrapperEl.classList.remove('loading');
} }
}) })
.catch(e => console.log(e)); .catch(e => console.debug(e));
} }
updateState() { updateState() {
const state = { const state = {
'title': this.title,
'file': this.filename, 'file': this.filename,
'annotations': this.annotations, 'annotations': this.annotations,
'audio': { 'audio': {
@ -518,7 +519,7 @@ class Annotator extends EventTarget {
setSaved(state) { setSaved(state) {
if (this.state != state) { if (this.state != state) {
console.log('already outdated'); console.debug('already outdated');
} }
else { else {
this.wrapperEl.classList.add('saved'); this.wrapperEl.classList.add('saved');
@ -544,7 +545,7 @@ class Annotator extends EventTarget {
} }
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.error(error);
}); });
} }
@ -660,11 +661,11 @@ class Annotator extends EventTarget {
ttInputEl.focus(); ttInputEl.focus();
const submit = () => { const submit = () => {
console.log(ttInputEl.value); console.debug(ttInputEl.value);
const tcMs = this.formatter.from(ttInputEl.value); const tcMs = this.formatter.from(ttInputEl.value);
let points = this.slider.get(); let points = this.slider.get();
points[i] = tcMs; points[i] = tcMs;
console.log(points); console.debug(points);
this.slider.set(points); this.slider.set(points);
}; };
ttInputEl.addEventListener('keydown', (keyE) => { ttInputEl.addEventListener('keydown', (keyE) => {
@ -700,6 +701,14 @@ class Annotator extends EventTarget {
this._updatePlayhead(); this._updatePlayhead();
} }
this.title = null;
if (metadata && metadata.hasOwnProperty('title')) {
this.title = metadata.title;
}
else if (drawing.hasOwnProperty('title')) {
this.title = drawing.title;
}
this.filename = drawing.file; this.filename = drawing.file;
this.strokes = drawing.shape.map(s => new Stroke(s['color'], s['points'])); this.strokes = drawing.shape.map(s => new Stroke(s['color'], s['points']));
this.viewboxes = drawing.viewboxes; this.viewboxes = drawing.viewboxes;
@ -745,17 +754,15 @@ class Annotator extends EventTarget {
// Probably a wrong order // Probably a wrong order
if (ev.key == 'ArrowLeft' && ev.shiftKey) { if (ev.key == 'ArrowLeft' && ev.shiftKey) {
const p = this._paused; const p = this._paused;
console.log(p);
const diff = ev.ctrlKey ? 10000 : 1000; const diff = ev.ctrlKey ? 10000 : 1000;
this.scrubTo(this._currentTimeMs - diff); this.scrubTo(this._currentTimeMs - diff);
if (!p) { console.log('play!'); this.play(); } // scrubTo() causes a pause(); if (!p) { this.play(); } // scrubTo() causes a pause();
} }
if (ev.key == 'ArrowRight' && ev.shiftKey) { if (ev.key == 'ArrowRight' && ev.shiftKey) {
const p = this._paused; const p = this._paused;
console.log(p);
const diff = ev.ctrlKey ? 10000 : 1000; const diff = ev.ctrlKey ? 10000 : 1000;
this.scrubTo(this._currentTimeMs + diff); this.scrubTo(this._currentTimeMs + diff);
if (!p) { console.log('play!'); this.play(); } // scrubTo() causes a pause(); if (!p) { this.play(); } // scrubTo() causes a pause();
} }
// additional keys only for annotation mode // additional keys only for annotation mode
@ -827,11 +834,29 @@ class Annotator extends EventTarget {
} }
else { else {
let mdConfigEl = document.createElement('div');
mdConfigEl.classList.add('metadataconfig')
this.wrapperEl.appendChild(mdConfigEl);
let titleEl = document.createElement('div');
titleEl.classList.add('drawing-title');
titleEl.innerText = this.title ?? "[add title]"
titleEl.addEventListener('click', (ev) => {
const title = prompt("Change the title for the drawing", this.title ?? "");
if(title === null) return; //cancel
titleEl.innerText = title.length ? title : "[add title]";
this.title = title.length ? title : null;
this.updateState();
})
mdConfigEl.appendChild(titleEl);
let audioConfigEl = document.createElement('div'); let audioConfigEl = document.createElement('div');
audioConfigEl.classList.add('audioconfig') audioConfigEl.classList.add('audioconfig')
this.wrapperEl.appendChild(audioConfigEl); mdConfigEl.appendChild(audioConfigEl);
audioConfigEl.prepend(this.audioEl);
audioConfigEl.appendChild(this.audioEl);
let audioSelectEl = document.createElement('select'); let audioSelectEl = document.createElement('select');
audioSelectEl.classList.add('audioselect'); audioSelectEl.classList.add('audioselect');
@ -939,12 +964,12 @@ class Annotator extends EventTarget {
} }
} else { } else {
if (this.audioEl.currentTime !== t_start / 1000) { if (this.audioEl.currentTime !== t_start / 1000) {
console.log(this.audioEl.currentTime, t_start / 1000); console.debug(this.audioEl.currentTime, t_start / 1000);
this.audioEl.currentTime = t_start / 1000; this.audioEl.currentTime = t_start / 1000;
} }
this.audioEl.play(); this.audioEl.play();
// this.audioEl.play(); // play is done in "seeked" evenlistener // this.audioEl.play(); // play is done in "seeked" evenlistener
console.log(this.audioEl.currentTime, t_start, t_in, t_out); console.debug(this.audioEl.currentTime, t_start, t_in, t_out);
} }
this.audioIsPlaying = true; // also state as playing in preroll this.audioIsPlaying = true; // also state as playing in preroll
@ -1087,7 +1112,7 @@ class Annotator extends EventTarget {
// when an outpoint is set, stop playing there // when an outpoint is set, stop playing there
if (this.outPointPosition && (next_path > this.outPointPosition[0] || if (this.outPointPosition && (next_path > this.outPointPosition[0] ||
(next_path == this.outPointPosition[0] && next_point > this.outPointPosition[1]))) { (next_path == this.outPointPosition[0] && next_point > this.outPointPosition[1]))) {
console.log('> out point', this.outPointPosition) console.debug('> out point', this.outPointPosition)
return [null, null]; return [null, null];
} }

47
app/www/playlist.js
View file

@ -2,6 +2,8 @@ class Playlist {
constructor(wrapperEl, url) { constructor(wrapperEl, url) {
this.wrapperEl = wrapperEl; this.wrapperEl = wrapperEl;
this.onlyWithTitle = true;
const request = new Request(url, { const request = new Request(url, {
method: 'GET', method: 'GET',
}); });
@ -9,6 +11,13 @@ class Playlist {
fetch(request) fetch(request)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
this.files = data;
this.buildList()
});
}
buildList() {
let playlist = this.wrapperEl.querySelector('.playlist'); let playlist = this.wrapperEl.querySelector('.playlist');
if (!playlist) { if (!playlist) {
playlist = document.createElement('nav'); playlist = document.createElement('nav');
@ -19,10 +28,27 @@ class Playlist {
playlist.innerHTML = ""; playlist.innerHTML = "";
} }
const listEl = document.createElement("ul"); const filterEl = document.createElement('label');
for (let file of data) { filterEl.classList.add('filter');
const liEl = document.createElement("li"); filterEl.innerText = "Show only diagrams with title"
const filterCheckEl = document.createElement('input');
filterCheckEl.type = "checkbox";
filterCheckEl.checked = this.onlyWithTitle;
filterCheckEl.addEventListener('click', (ev) => {
this.onlyWithTitle = ev.target.checked;
this.buildList()
})
filterEl.appendChild(filterCheckEl)
playlist.appendChild(filterEl)
const listEl = document.createElement("ul");
for (let file of this.files) {
if(this.onlyWithTitle && file.title === null) {
continue;
}
const liEl = document.createElement("li");
const imgEl = document.createElement("img"); const imgEl = document.createElement("img");
imgEl.classList.add('img'); imgEl.classList.add('img');
@ -30,9 +56,16 @@ class Playlist {
imgEl.src = file.svg; imgEl.src = file.svg;
liEl.append(imgEl); liEl.append(imgEl);
if (file.title) {
const titleEl = document.createElement("span");
titleEl.classList.add('title');
titleEl.innerText = file.title;
liEl.append(titleEl);
}
let time = file.mtime; let time = file.mtime;
if (file.ctime != file.mtime){ if (file.ctime != file.mtime) {
time += ` (orig: ${file.ctime})`; time += ` (orig: ${file.ctime})`;
} }
const dateEl = document.createElement("span"); const dateEl = document.createElement("span");
@ -55,7 +88,7 @@ class Playlist {
playEl.innerText = "Play"; playEl.innerText = "Play";
playEl.href = location; playEl.href = location;
playEl.pathname = "annotate.html"; playEl.pathname = "annotate.html";
playEl.search = "?file="+file.name+"&player=1"; playEl.search = "?file=" + file.name + "&player=1";
linksEl.append(playEl); linksEl.append(playEl);
const annotateEl = document.createElement("a"); const annotateEl = document.createElement("a");
@ -63,7 +96,7 @@ class Playlist {
annotateEl.innerText = "Annotate"; annotateEl.innerText = "Annotate";
annotateEl.href = location; annotateEl.href = location;
annotateEl.pathname = "annotate.html"; annotateEl.pathname = "annotate.html";
annotateEl.search = "?file="+file.name; annotateEl.search = "?file=" + file.name;
linksEl.append(annotateEl); linksEl.append(annotateEl);
const drawEl = document.createElement("a"); const drawEl = document.createElement("a");
@ -82,7 +115,5 @@ class Playlist {
} }
playlist.appendChild(listEl); playlist.appendChild(listEl);
// do something with the data sent in the request // do something with the data sent in the request
});
} }
} }

27
app/www/svganim.css
View file

@ -249,24 +249,35 @@ path.before_in {
right: 110%; right: 110%;
} }
.audioconfig { .metadataconfig {
z-index: 9; z-index: 9;
background: black; background: black;
color: white; color: white;
position: relative; position: relative;
width: 100px; /* width: 100px; */
/* as wide as audio controls only */ /* as wide as audio controls only */
overflow: hidden; overflow:visible;
/* white-space: nowrap; */ /* white-space: nowrap; */
left: -50px; /* left: -50px; */
} }
.audioconfig:hover { .metadataconfig .drawing-title{
width: auto; font-weight: bold;
padding: 10px;
cursor: pointer;
}
.metadataconfig .audioconfig{
display: none;;
background-color: black;;
}
.metadataconfig:hover .audioconfig{
/* width: auto;
left: 0px; left: 0px;
overflow: visible; overflow: visible;
height: 200px; height: 200px; */
display: block;
} }
.audioconfig select, .audioconfig select,