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

Compare commits

base: security_vision:47ab4241b8a262b4877dc8ba11be6d2f9f4f76bd
Branches Tags
security_vision:main
security_vision:absolute
..
compare: security_vision:a83b05daaa2d7be830b19310853d5c42c20e66a6
Branches Tags
security_vision:main
security_vision:absolute

No commits in common. "47ab4241b8a262b4877dc8ba11be6d2f9f4f76bd" and "a83b05daaa2d7be830b19310853d5c42c20e66a6" have entirely different histories.
47ab4241b8 ... a83b05daaa

9 changed files with 46 additions and 352 deletions
Show stats Expand all files Collapse all files

2
files/audio/.gitignore vendored Normal file
View file

@ -0,0 +1,2 @@
*
!.gitignore

3
svganim.service
View file

@ -1,11 +1,10 @@
[Unit]
Description=SVG animation interfaces
[Service]
ExecStart=/home/svganim/.poetry/bin/poetry run python webserver.py
ExecStart=/home/svganim/.poetry/bin/poetry webserver.py
WorkingDirectory=/home/svganim/svganim
User=svganim
Restart=on-failure
Environment="PATH=/home/svganim/.pyenv/plugins/pyenv-virtualenv/shims:/home/svganim/.pyenv/shims:/home/svganim/.pyenv/bin:/home/svganim/.poetry/bin:/usr/local/bin:/usr/bin:/bin"
[Install]
WantedBy=multi-user.target

18
svganim/strokes.py
View file

@ -8,9 +8,7 @@ from pydub import AudioSegment
import svgwrite
import tempfile
import io
import logging
logger = logging.getLogger('svganim.strokes')
class Annotation:
def __init__(self, tag: str, drawing: Drawing, t_in: float, t_out: float) -> None:
@ -48,7 +46,6 @@ class Drawing:
return f"/annotations/{self.id}"
def get_canvas_metadata(self) -> list:
logger.info(f'metadata for {self.id}')
with open(self.eventfile, "r") as fp:
first_line = fp.readline().strip()
@ -82,10 +79,6 @@ class Drawing:
# metadata on first line
pass
else:
if type(event) is list:
# ignore double metadatas, which appear when continuaing an existing drawing
continue
if event["event"] == "viewbox":
pass
if event["event"] == "stroke":
@ -282,12 +275,11 @@ class AnnotationIndex:
self.drawing_dir = drawing_dir
self.metadata_dir = metadata_dir
self.shelve = {} #disable disk cache because of glitches shelve.open(filename, writeback=True)
self.shelve = shelve.open(filename, writeback=True)
def refresh(self):
# reset the index
for key in list(self.shelve.keys()):
print(key)
for key in self.shelve:
del self.shelve[key]
self.shelve["_drawings"] = {
@ -336,7 +328,7 @@ class AnnotationIndex:
return [
name[:-16]
for name in os.listdir(self.drawing_dir)
if name.endswith("json_appendable") and os.stat(os.path.join(self.drawing_dir, name)).st_size > 0
if name.endswith("json_appendable")
]
def get_drawing_filenames(self) -> list[Filename]:
@ -354,8 +346,8 @@ class AnnotationIndex:
class Point:
def __init__(self, x: float, y: float, last: bool, t: float):
self.x = float(x)
self.y = float(y) # if y == 0 it can still be integer.... odd python
self.x = x
self.y = y
self.last = last
self.t = t

148
webserver.py
View file

@ -46,7 +46,6 @@ class WebSocketHandler(tornado.websocket.WebSocketHandler):
self.config = config
self.strokes = []
self.hasWritten = False
self.prev_file = None
self.dimensions = [None, None]
# def check_origin(self, origin):
@ -70,28 +69,11 @@ class WebSocketHandler(tornado.websocket.WebSocketHandler):
return len(files) + 1
def appendEvent(self, row):
if not self.hasWritten and self.prev_file and 'event' in row and row['event'] == 'viewbox':
# ignore canvas movement after
return
# write to an appendable json format. So basically a file that should be wrapped in [] to be json-parsable
with open(
os.path.join(self.config.storage, self.filename +
".json_appendable"), "a"
os.path.join(self.config.storage, self.filename + ".json_appendable"), "a"
) as fp:
if not self.hasWritten:
if self.prev_file:
# TODO WIP
with open(
self.prev_file, 'r'
) as fprev:
wrote = False
for line in fprev:
wrote = True
fp.write(line)
if wrote:
fp.write(",\n")
# metadata to first row, but only on demand
fp.write(
json.dumps(
@ -109,33 +91,6 @@ class WebSocketHandler(tornado.websocket.WebSocketHandler):
# first column is color, rest is points
fp.write(json.dumps(row))
def preloadFile(self, file):
if self.hasWritten:
logger.error("Cannot preload when already written content")
return False
logger.info(f"load {file}")
# TODO, make sure file doesn't load file outside of storage
prev_file = os.path.join(
self.config.storage, file + ".json_appendable")
if not os.path.exists(prev_file):
logger.error(f"Cannot preload non-existent file: {prev_file}")
self.write_message(json.dumps(
{"error": f"Non-existent file: {file}"}))
return False
self.prev_file = prev_file
with open(self.prev_file, "r") as fp:
first_line = fp.readline().strip()
if first_line.endswith(","):
first_line = first_line[:-1]
metadata = json.loads(first_line)
self.write_message(json.dumps(
{"preloaded_svg": f"/drawing/{file}", "dimensions": [metadata[1], metadata[2]]}))
# the client sent the message
def on_message(self, message):
logger.info(f"recieve: {message}")
@ -151,8 +106,6 @@ class WebSocketHandler(tornado.websocket.WebSocketHandler):
elif msg["event"] == "viewbox":
logger.info("move or resize")
self.appendEvent(msg)
elif msg["event"] == "preload":
self.preloadFile(msg["file"])
else:
# self.send({'alert': 'Unknown request: {}'.format(message)})
logger.warn("Unknown request: {}".format(message))
@ -215,34 +168,25 @@ class AnimationHandler(tornado.web.RequestHandler):
if name.endswith("json_appendable")
]
for name in names:
fn = os.path.join(self.config.storage, name)
stat = os.stat(fn)
if stat.st_size == 0:
continue
with open(fn, "r") as fp:
with open(os.path.join(self.config.storage, name), "r") as fp:
first_line = fp.readline().strip()
if first_line.endswith(","):
first_line = first_line[:-1]
print(first_line)
metadata = json.loads(first_line)
files.append(
{
"name": f"/files/{name[:-16]}",
"id": name[:-16],
"ctime": metadata[0],
"mtime": datetime.datetime.fromtimestamp(stat.st_mtime).strftime("%Y-%m-%d %T"),
"time": metadata[0],
"dimensions": [metadata[1], metadata[2]],
"svg": f"/drawing/{name[:-16]}.svg",
}
)
files.sort(key=lambda k: k["mtime"])
files.sort(key=lambda k: k["time"])
self.write(json.dumps(files))
else:
path = os.path.join(
self.config.storage, os.path.basename(
filename) + ".json_appendable"
self.config.storage, os.path.basename(filename) + ".json_appendable"
)
drawing = {"file": filename, "shape": []}
with open(path, "r") as fp:
@ -261,8 +205,7 @@ class AnimationHandler(tornado.web.RequestHandler):
# p = stroke[i*4:i*4+4]
# points.append([float(p[0]), float(p[1]), int(p[2]), float(p[3])])
drawing["shape"].append(
{"color": event["color"],
"points": event["points"]}
{"color": event["color"], "points": event["points"]}
)
self.write(json.dumps(drawing))
@ -330,12 +273,10 @@ class AnnotationHandler(tornado.web.RequestHandler):
self.write(annotation.get_as_svg())
elif extension == "mp3":
self.set_header("Content-Type", "audio/mp3")
self.write(annotation.getAnimationSlice(
).audio.export(format="mp3").read())
self.write(annotation.getAnimationSlice().audio.export(format="mp3").read())
elif extension == "wav":
self.set_header("Content-Type", "audio/wav")
self.write(annotation.getAnimationSlice(
).audio.export(format="wav").read())
self.write(annotation.getAnimationSlice().audio.export(format="wav").read())
else:
self.set_header("Content-Type", "application/json")
self.write(json.dumps({
@ -345,57 +286,6 @@ class AnnotationHandler(tornado.web.RequestHandler):
}))
class DrawingHandler(tornado.web.RequestHandler):
"""Get drawing as svg"""
def initialize(self, config, index: svganim.strokes.AnnotationIndex):
self.config = config
self.index = index
self.metadir = os.path.join(self.config.storage, "metadata")
def get(self, drawing_id):
if drawing_id[-4:] == ".svg":
extension = "svg"
drawing_id = drawing_id[:-4]
elif drawing_id[-4:] == ".mp3":
extension = "mp3"
drawing_id = drawing_id[:-4]
elif drawing_id[-4:] == ".wav":
extension = "wav"
drawing_id = drawing_id[:-4]
else:
extension = None
logger.info(f"drawing {drawing_id=}, {extension=}")
if drawing_id not in self.index.drawings:
self.index.refresh()
# double check
if drawing_id not in self.index.drawings:
raise tornado.web.HTTPError(404)
drawing = self.index.drawings[drawing_id]
if extension == "svg":
self.set_header("Content-Type", "image/svg+xml")
self.write(drawing.get_animation().get_as_svg())
elif extension == "mp3":
self.set_header("Content-Type", "audio/mp3")
self.write(drawing.get_animation(
).audio.export(format="mp3").read())
elif extension == "wav":
self.set_header("Content-Type", "audio/wav")
self.write(drawing.get_animation(
).audio.export(format="wav").read())
else:
self.set_header("Content-Type", "application/json")
self.write(json.dumps({
"id": drawing.id,
"annotations_url": drawing.get_annotations_url(),
"audio": f"/drawing/{drawing.id}.mp3",
"svg": f"/drawing/{drawing.id}.svg",
}))
class AnnotationsHandler(tornado.web.RequestHandler):
def initialize(self, config):
self.config = config
@ -447,7 +337,6 @@ class AnnotationsHandler(tornado.web.RequestHandler):
with open(meta_file, "w") as fp:
json.dump(self.json_args, fp)
class IndexHandler(tornado.web.RequestHandler):
"""Get annotation as svg"""
@ -464,7 +353,6 @@ class IndexHandler(tornado.web.RequestHandler):
self.render("templates/index.html", index=self.index)
class Server:
"""
Server for HIT -> plotter events
@ -504,10 +392,8 @@ class Server:
{"path": os.path.join(self.config.storage, "audio")},
),
(r"/audio", AudioListingHandler, {"config": self.config}),
(r"/annotations/(.+)", AnnotationsHandler,
{"config": self.config}),
(r"/tags", TagHandler,
{"config": self.config, "index": self.index}),
(r"/annotations/(.+)", AnnotationsHandler, {"config": self.config}),
(r"/tags", TagHandler, {"config": self.config, "index": self.index}),
(
r"/tags/(.+)",
TagAnnotationsHandler,
@ -518,17 +404,9 @@ class Server:
AnnotationHandler,
{"config": self.config, "index": self.index},
),
(
r"/drawing/(.+)",
DrawingHandler,
{"config": self.config, "index": self.index},
),
(r"/(.+)", StaticFileWithHeaderHandler, {"path": self.web_root}),
(r"/index", IndexHandler,
{"config": self.config, "index": self.index}),
(r"/(.*)", StaticFileWithHeaderHandler,
{"path": self.web_root, 'default_filename': 'index.html'}),
(r"/", IndexHandler, {"config": self.config, "index": self.index}),
],
debug=True,
autoreload=True,

25
www/annotate.html
View file

@ -193,21 +193,6 @@
.annotation-google {
background-color: blueviolet !important;
}
.annotation-map {
background-color: red !important;
}
.annotation-relation {
background-color: blue !important;
}
.annotation-text {
background-color: blueviolet !important;
}
.annotation-figure {
background-color: pink !important;
}
.unsaved::before {
content: '*';
@ -255,14 +240,6 @@
width: 100px; /* hides seek head */
}
.playlist img{
position: static;
width: 250px;
height: 250px;
background: white;
display: block;
}
</style>
<link rel="stylesheet" href="assets/nouislider-15.5.0.css">
<link rel="stylesheet" href="core.css">
@ -280,7 +257,7 @@
if (location.search) {
ann = new Annotator(
document.getElementById("interface"),
["map", "text", "relation", "figure"],
["test", "another", "google"],
location.search.substring(1)
);
} else {

48
www/draw.html
View file

@ -7,9 +7,6 @@
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title>Draw a line animation</title>
<style media="screen">
body{
background:black;
}
#sample,
svg {
position: absolute;
@ -37,7 +34,7 @@
path {
fill: none;
stroke: auto;
stroke: red;
stroke-width: 1mm;
stroke-linecap: round;
}
@ -92,7 +89,6 @@
left: 0;
width: 100%;
height: 100%;
background:white;
}
#info {
@ -118,7 +114,7 @@
.toolbox {
position: absolute;
left: 0;
top: 40%;
top: 50px;
z-index: 100;
background-color: white;
padding: 5px;
@ -154,7 +150,7 @@
bottom: 0;
left: 0;
color: gray;
z-index: 1;
z-index: -1;
font-size: 8pt;
}
@ -166,24 +162,6 @@
cursor: wait;
pointer-events: none;
}
.button-fullscreen{
display: block;
cursor:pointer;
position: absolute;
bottom: 50px;
left: calc(50% - 200px);
width: 400px;
border-radius: 50px;
background:black; color:white;
text-align: center;
line-height: 2;
font-size: 40px;
z-index: 10;
}
body.fullscreen .button-fullscreen{
display:none;
}
</style>
</head>
@ -192,25 +170,7 @@
</div>
<script src="draw.js"></script>
<script type='text/javascript'>
// let canvas;
// if (location.search) {
// const
// canvas = new Canvas(
// document.getElementById("interface"),
// ["map", "text", "relation", "figure"],
// location.search.substring(1)
// );
// } else{
let preload;
if (location.hash.length) {
preload = location.hash.substring(1);
} else {
preload = null
}
const canvas = new Canvas(document.getElementById("interface"), preload);
// }
const canvas = new Canvas(document.getElementById("interface"));
</script>
</body>

121
www/draw.js
View file

@ -1,31 +1,6 @@
// loadDrawing = function(identifier){
// const request = new Request('/copy_and_load/'+identifier, {
// method: 'GET',
// });
// // fetch(request)
// // .then(response => response.json())
// // .then(data => {
// // const metadata_req = new Request(`/annotations/${data.file}`, {
// // method: 'GET',
// // });
// // fetch(metadata_req)
// // .then(response => response.ok ? response.json() : null)
// // .then(metadata => {
// // if (metadata !== null) {
// // metadata.annotations = metadata.annotations.map((a) => new Annotation(a.tag, a.t_in, a.t_out))
// // }
// // this.loadStrokes(data, metadata)
// // })
// // .catch(e => console.log(e));
// // // do something with the data sent in the request
// // });
// }
class Canvas {
constructor(wrapperEl, preload_id) {
constructor(wrapperEl) {
this.allowDrawing = false;
this.socket = null; // don't initialise right away
this.viewbox = { "x": 0, "y": 0, "width": null, "height": null };
this.url = window.location.origin.replace('http', 'ws') + '/ws?' + window.location.search.substring(1);
@ -45,22 +20,6 @@ class Canvas {
this.wrapperEl.appendChild(this.filenameEl);
this.fullscreenEl = document.createElement('div');
this.fullscreenEl.classList.add('button-fullscreen');
this.fullscreenEl.innerText = "Fullscreen";
this.wrapperEl.appendChild(this.fullscreenEl);
this.fullscreenEl.addEventListener('click', (e) => {
document.body.requestFullscreen();
});
document.body.addEventListener('fullscreenchange', (e) => {
if (document.fullscreenElement) {
document.body.classList.add('fullscreen');
} else {
document.body.classList.remove('fullscreen');
}
})
this.colors = ["black", "red", "blue", "green"];
this.resize();
@ -81,7 +40,7 @@ class Canvas {
document.body.addEventListener('pointermove', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (ev.pointerType == "touch" || ev.buttons & 2) { // 4: middle mouse button
if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button
this.moveCanvas(ev);
} else { // pointerType == pen or mouse
this.draw(ev);
@ -90,26 +49,20 @@ class Canvas {
document.body.addEventListener('pointerup', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (ev.pointerType == "touch" || ev.buttons & 2 || this.isMoving) { // buttons is 0 on pointerup
if (ev.pointerType == "touch" || ev.buttons & 4 || this.isMoving) { // buttons is 0 on pointerup
this.endMoveCanvas(ev);
this.isMoving = false;
} else { // pointerType == pen or mouse
location.hash = '#' + this.filename; // only update when drawn.
this.penup(ev);
}
});
this.svgEl.addEventListener('contextmenu', function (e) {
// do something here...
e.preventDefault();
}, false);
this.svgEl.addEventListener('pointerdown', (ev) => {
ev.stopPropagation();
ev.preventDefault();
if (ev.pointerType == "touch" || ev.buttons & 2) { // 4: middle mouse button, 2; right mouse button
if (ev.pointerType == "touch" || ev.buttons & 4) { // 4: middle mouse button
this.isMoving = true;
this.startMoveCanvas(ev);
} else if (ev.buttons & 1) { // pointerType == pen or mouse
} else { // pointerType == pen or mouse
this.startStroke(ev);
}
});
@ -121,16 +74,14 @@ class Canvas {
this.socket = new WebSocket(this.url);
this.socket.addEventListener('open', (e) => {
this.sendDimensions();
if (preload_id) {
// signal if we want to continue from an existing drawing
this.socket.send(JSON.stringify({
'event': 'preload',
'file': preload_id,
}));
}
});
const d = {
'event': 'dimensions',
'width': this.viewbox.width,
'height': this.viewbox.height
};
console.log('send', d);
this.socket.send(JSON.stringify(d));
})
this.socket.addEventListener('message', (e) => {
let msg = JSON.parse(e.data);
console.log('receive', msg);
@ -139,36 +90,9 @@ class Canvas {
this.setFilename(msg.filename);
this.openTheFloor()
}
if (msg.hasOwnProperty('preloaded_svg')) {
console.log('preloaded', msg);
if (msg.dimensions[0] != this.viewbox.width || msg.dimensions[1] != this.viewbox.height) {
alert(`Loading file with different dimensions. This can lead to odd results. Original: ${msg.dimensions[0]}x${msg.dimensions[1]} Now: ${this.viewbox.width}x${this.viewbox.height}`)
}
this.setPreloaded(msg.preloaded_svg);
// this.setFilename(msg.filename);
// this.openTheFloor()
}
});
}
setPreloaded(json_url) {
this.preloaded_resource = json_url
const request = new Request(this.preloaded_resource + '.svg', {
method: 'GET',
});
fetch(request)
.then(response => response.text())
.then(body => {
const parser = new DOMParser()
const dom = parser.parseFromString(body, "image/svg+xml");
console.log(dom, dom.getRootNode().querySelectorAll('g'))
const group = dom.getRootNode().querySelectorAll('g')[0]
this.svgEl.prepend(group);
})
}
startMoveCanvas(ev) {
this.moveCanvasPrevPoint = { "x": ev.x, "y": ev.y };
this.currentMoves = [];
@ -221,6 +145,7 @@ class Canvas {
colorEl.addEventListener('click', (e) => {
console.log('set color', color)
this.setColor(color);
})
colorsEl.appendChild(colorEl);
@ -246,24 +171,6 @@ class Canvas {
this.viewbox.height = window.innerHeight;
this.applyViewBox();
this.sendDimensions();
}
sendDimensions() {
const d = {
'event': 'dimensions',
'width': this.viewbox.width,
'height': this.viewbox.height
};
if (this.socket === null) {
// ignore ...
} else if (this.socket.readyState) {
this.socket.send(JSON.stringify(d));
} else {
this.socket.addEventListener('open', (ev) => {
this.socket.send(JSON.stringify(d));
})
}
}
applyViewBox() {

23
www/playlist.js
View file

@ -23,24 +23,11 @@ class Playlist {
for (let file of data) {
const liEl = document.createElement("li");
const imgEl = document.createElement("img");
imgEl.classList.add('img');
imgEl.title = file.id;
imgEl.src = file.svg;
liEl.append(imgEl);
let time = file.mtime;
if (file.ctime != file.mtime){
time += ` (orig: ${file.ctime})`;
}
const dateEl = document.createElement("span");
dateEl.classList.add('date');
dateEl.innerText = time;
dateEl.innerText = file.time;
liEl.append(dateEl);
const nameEl = document.createElement("span");
nameEl.classList.add('name');
nameEl.innerText = file.name;
@ -66,14 +53,6 @@ class Playlist {
annotateEl.search = "?"+file.name;
linksEl.append(annotateEl);
const drawEl = document.createElement("a");
drawEl.classList.add('draw');
drawEl.innerText = "Draw";
drawEl.href = location;
drawEl.pathname = "draw.html";
drawEl.hash = file.id;
linksEl.append(drawEl);
// liEl.addEventListener('click', (e) => {
// this.play(fileUrl);
// playlist.style.display = "none";