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

Fix scaling and tidy html

Browse source
This commit is contained in:
Ruben van de Ven 2021-11-23 12:17:48 +01:00
parent 111eab6cf0
commit ae76368d4d
4 changed files with 253 additions and 242 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
README.md Normal file
View file

@ -0,0 +1,7 @@
# svganim
Create a hand drawn vector animation.
```bash
poetry run python webserver.py
```

142
www/draw.html
View file

@ -1,30 +1,33 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Draw a line animation</title> <title>Draw a line animation</title>
<style media="screen"> <style media="screen">
#sample, svg{ #sample,
position:absolute; svg {
position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right:0; right: 0;
width:100%; width: 100%;
height:100%; height: 100%;
font-family: sans-serif; font-family: sans-serif;
z-index:2; z-index: 2;
cursor: url('/cursor.png') 6 6, auto; cursor: url('/cursor.png') 6 6, auto;
} }
img{
position:absolute; img {
top:0; position: absolute;
bottom:0; top: 0;
right:0; bottom: 0;
left:0; right: 0;
width:100%; left: 0;
height:100%; width: 100%;
z-index:1; height: 100%;
z-index: 1;
} }
path { path {
@ -35,27 +38,40 @@
} }
#wrapper { #wrapper {
position:absolute; position: absolute;
top:0; top: 0;
right:0; right: 0;
bottom:0; bottom: 0;
left:0; left: 0;
background:none; background: none;
} }
.gray{
position:absolute; .gray {
background:rgba(255,255,255,0.7); position: absolute;
background: rgba(255, 255, 255, 0.7);
} }
html, body{
html,
body {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin:0; margin: 0;
font-family: sans-serif; font-family: sans-serif;
} }
#interface{
#interface {
height: 0; height: 0;
overflow: hidden; overflow: hidden;
padding-top: calc({HEIGHT}/{WIDTH} * 100%);
padding-top: calc( {
HEIGHT
}
/ {
WIDTH
}
* 100%);
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
background-size: 100% 100%; background-size: 100% 100%;
@ -66,24 +82,27 @@
height: 100%; height: 100%;
} }
#info{ #info {
position: absolute; position: absolute;
bottom: 15px; bottom: 15px;
width: 600px; width: 600px;
left: calc(50% - 250px); left: calc(50% - 250px);
z-index: 999; z-index: 999;
} }
.buttons{
.buttons {
text-align: center; text-align: center;
} }
#submit{
#submit {
background: lightblue; background: lightblue;
border: solid 1px blue; border: solid 1px blue;
border-radius: 5px; border-radius: 5px;
font-size: 110%; font-size: 110%;
padding: 5px 10px; padding: 5px 10px;
} }
.toolbox{
.toolbox {
position: absolute; position: absolute;
left: 0; left: 0;
top: 50px; top: 50px;
@ -91,21 +110,24 @@
background-color: white; background-color: white;
padding: 5px; padding: 5px;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
background-color:#ccc; background-color: #ccc;
} }
.toolbox > ul{
.toolbox>ul {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.toolbox > ul > li{
.toolbox>ul>li {
cursor: pointer; cursor: pointer;
} }
.toolbox .colors > li.selected { .toolbox .colors>li.selected {
border-width: 3px; border-width: 3px;
border-color: gray; border-color: gray;
} }
.toolbox .colors > li {
.toolbox .colors>li {
display: block; display: block;
border: solid 3px white; border: solid 3px white;
border-radius: 5px; border-radius: 5px;
@ -114,51 +136,33 @@
height: 25px; height: 25px;
} }
.filename{ .filename {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
color:gray; color: gray;
z-index: -1; z-index: -1;
font-size:8pt; font-size: 8pt;
} }
.closed{ .closed {
background-color: lightgray; background-color: lightgray;
} }
.closed svg{
cursor:wait; .closed svg {
cursor: wait;
pointer-events: none; pointer-events: none;
} }
</style> </style>
</head> </head>
<body>
<body>
<div id='interface'> <div id='interface'>
</div> </div>
<!-- <div id='wrapper'>
<svg id="canvas" preserveAspectRatio="none">
<path d="" id="stroke" />
</svg>
</div>
<div id='info'>
<div class='buttons'>
<button id='submit'>Submit</button>
<form method='post' action='' id='finishedForm'>
</form>
</div>
</div>
<div class="toolbox">
<ul class="colors">
<li class="red"></li>
<li class="blue"></li>
<li class="green"></li>
</ul>
</div>
</div> -->
<script src="draw.js"></script> <script src="draw.js"></script>
<script type='text/javascript'> <script type='text/javascript'>
const canvas = new Canvas( document.getElementById("interface")); const canvas = new Canvas(document.getElementById("interface"));
</script> </script>
</body> </body>
</html> </html>

86
www/play.html
View file

@ -1,30 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Play a line animation</title> <title>Play a line animation</title>
<style media="screen"> <style media="screen">
#sample, svg{ #sample,
position:absolute; svg {
position: absolute;
top: 0; top: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
right:0; right: 0;
width:100%; width: 100%;
height:100%; height: 100%;
font-family: sans-serif; font-family: sans-serif;
z-index:2; z-index: 2;
cursor: url('/cursor.png') 6 6, auto;
} }
img{
position:absolute; img {
top:0; position: absolute;
bottom:0; top: 0;
right:0; bottom: 0;
left:0; right: 0;
width:100%; left: 0;
height:100%; width: 100%;
z-index:1; height: 100%;
z-index: 1;
} }
path { path {
@ -35,40 +37,52 @@
} }
#wrapper { #wrapper {
position:absolute; position: absolute;
top:0; top: 0;
right:0; right: 0;
bottom:0; bottom: 0;
left:0; left: 0;
background:none; background: none;
} }
.gray{
position:absolute; .gray {
background:rgba(255,255,255,0.7); position: absolute;
background: rgba(255, 255, 255, 0.7);
} }
html, body{
html,
body {
height: 100%; height: 100%;
width: 100%; width: 100%;
margin:0; margin: 0;
font-family: sans-serif; font-family: sans-serif;
} }
.playlist{ .playlist {
position: absolute; position: absolute;
left:0; left: 0;
top:0; top: 0;
z-index: 50; z-index: 50;
} }
.playlist li{
cursor: pointer;
line-height: 1.5;
}
.playlist li:hover{
color: blue;
}
</style> </style>
</head> </head>
<body>
<body>
<div id='interface'> <div id='interface'>
</div> </div>
<script src="play.js"></script> <script src="play.js"></script>
<script type='text/javascript'> <script type='text/javascript'>
const player = new Player( document.getElementById("interface")); const player = new Player(document.getElementById("interface"));
player.playlist('/files/'); player.playlist('/files/');
// player.play('/files/2021-11-22-3-75b0f0');
</script> </script>
</body> </body>
</html> </html>

22
www/play.js
View file

@ -6,7 +6,6 @@ class Player {
this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.wrapperEl.appendChild(this.svgEl); this.wrapperEl.appendChild(this.svgEl);
this.resize();
} }
playlist(url) { playlist(url) {
@ -34,7 +33,7 @@ class Player {
liEl.innerText = fileUrl liEl.innerText = fileUrl
liEl.addEventListener('click', (e) => { liEl.addEventListener('click', (e) => {
this.play(fileUrl); this.play(fileUrl);
playlist.style.display = "none";
}); });
listEl.appendChild(liEl); listEl.appendChild(liEl);
} }
@ -62,7 +61,7 @@ class Player {
this.strokes = drawing.shape; this.strokes = drawing.shape;
this.currentPath = null; this.currentPath = null;
this.dimensions = drawing.dimensions; this.dimensions = drawing.dimensions;
this.svgEl.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', `0 0 ${this.dimensions.width} ${this.dimensions.height}`) this.svgEl.setAttribute('viewBox', `0 0 ${this.dimensions[0]} ${this.dimensions[1]}`)
this.startTime = window.performance.now() - this.strokes[0].points[0][3]; this.startTime = window.performance.now() - this.strokes[0].points[0][3];
this.playStroke(0,1); this.playStroke(0,1);
} }
@ -105,19 +104,6 @@ class Player {
// for scrubber // for scrubber
} }
resize() {
this.width = window.innerWidth;
this.height = window.innerHeight;
const viewBox = `0 0 ${this.width} ${this.height}`;
this.svgEl.setAttribute('viewBox', viewBox);
this.svgEl.setAttribute('width', this.width + 'mm');
this.svgEl.setAttribute('height', this.height + 'mm');
}
requestResize() {
alert('Resize not implemented yet. Please reloade the page');
}
strokes2D(strokes) { strokes2D(strokes) {
// strokes to a d attribute for a path // strokes to a d attribute for a path
@ -126,7 +112,7 @@ class Player {
let cmd = ""; let cmd = "";
for (let stroke of strokes) { for (let stroke of strokes) {
if (!last_stroke) { if (!last_stroke) {
d += `M${stroke[0] * this.width},${stroke[1] * this.height} `; d += `M${stroke[0] * this.dimensions[0]},${stroke[1] * this.dimensions[1]} `;
cmd = 'M'; cmd = 'M';
} else { } else {
if (last_stroke[2] == 1) { if (last_stroke[2] == 1) {
@ -137,7 +123,7 @@ class Player {
cmd = 'l'; cmd = 'l';
} }
let rel_stroke = [stroke[0] - last_stroke[0], stroke[1] - last_stroke[1]]; let rel_stroke = [stroke[0] - last_stroke[0], stroke[1] - last_stroke[1]];
d += `${rel_stroke[0] * this.width},${rel_stroke[1] * this.height} `; d += `${rel_stroke[0] * this.dimensions[0]},${rel_stroke[1] * this.dimensions[1]} `;
} }
last_stroke = stroke; last_stroke = stroke;