security_vision
/
svganim
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Fix scaling and tidy html

absolute
Ruben van de Ven 6 months ago
parent
111eab6cf0
commit
ae76368d4d
4 changed files with 257 additions and 246 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      README.md
  2. 318
      www/draw.html
  3. 156
      www/play.html
  4. 22
      www/play.js

7
README.md
Unescape View File

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

318
www/draw.html
Unescape View File

@ -1,164 +1,168 @@ @@ -1,164 +1,168 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Draw a line animation</title>
<style media="screen">
#sample, svg{
position:absolute;
top: 0;
left: 0;
bottom: 0;
right:0;
width:100%;
height:100%;
font-family: sans-serif;
z-index:2;
cursor: url('/cursor.png') 6 6, auto;
}
img{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
path {
fill: none;
stroke: red;
stroke-width: 1mm;
stroke-linecap: round;
}
#wrapper {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:none;
}
.gray{
position:absolute;
background:rgba(255,255,255,0.7);
}
html, body{
height: 100%;
width: 100%;
margin:0;
font-family: sans-serif;
}
#interface{
height: 0;
overflow: hidden;
padding-top: calc({HEIGHT}/{WIDTH} * 100%);
position: relative;
margin: 0 auto;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#info{
<head>
<meta charset="utf-8">
<title>Draw a line animation</title>
<style media="screen">
#sample,
svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
z-index: 2;
cursor: url('/cursor.png') 6 6, auto;
}
img {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
path {
fill: none;
stroke: red;
stroke-width: 1mm;
stroke-linecap: round;
}
#wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: none;
}
.gray {
position: absolute;
background: rgba(255, 255, 255, 0.7);
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
font-family: sans-serif;
}
#interface {
height: 0;
overflow: hidden;
padding-top: calc( {
HEIGHT
}
/ {
WIDTH
}
* 100%);
position: relative;
margin: 0 auto;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#info {
position: absolute;
bottom: 15px;
width: 600px;
left: calc(50% - 250px);
z-index: 999;
}
.buttons{
text-align: center;
}
#submit{
background: lightblue;
border: solid 1px blue;
border-radius: 5px;
font-size: 110%;
padding: 5px 10px;
}
.toolbox{
position: absolute;
left: 0;
top: 50px;
z-index: 100;
background-color: white;
padding: 5px;
border-radius: 0 5px 5px 0;
background-color:#ccc;
}
.toolbox > ul{
padding: 0;
margin: 0;
}
.toolbox > ul > li{
cursor: pointer;
}
.toolbox .colors > li.selected {
border-width: 3px;
border-color: gray;
}
.toolbox .colors > li {
display: block;
border: solid 3px white;
border-radius: 5px;
margin: 5px;
width: 25px;
height: 25px;
}
.filename{
position: absolute;
bottom: 0;
left: 0;
color:gray;
z-index: -1;
font-size:8pt;
}
.closed{
background-color: lightgray;
}
.closed svg{
cursor:wait;
pointer-events: none;
}
</style>
</head>
<body>
<div id='interface'>
</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 type='text/javascript'>
const canvas = new Canvas( document.getElementById("interface"));
</script>
</body>
</html>
}
.buttons {
text-align: center;
}
#submit {
background: lightblue;
border: solid 1px blue;
border-radius: 5px;
font-size: 110%;
padding: 5px 10px;
}
.toolbox {
position: absolute;
left: 0;
top: 50px;
z-index: 100;
background-color: white;
padding: 5px;
border-radius: 0 5px 5px 0;
background-color: #ccc;
}
.toolbox>ul {
padding: 0;
margin: 0;
}
.toolbox>ul>li {
cursor: pointer;
}
.toolbox .colors>li.selected {
border-width: 3px;
border-color: gray;
}
.toolbox .colors>li {
display: block;
border: solid 3px white;
border-radius: 5px;
margin: 5px;
width: 25px;
height: 25px;
}
.filename {
position: absolute;
bottom: 0;
left: 0;
color: gray;
z-index: -1;
font-size: 8pt;
}
.closed {
background-color: lightgray;
}
.closed svg {
cursor: wait;
pointer-events: none;
}
</style>
</head>
<body>
<div id='interface'>
</div>
<script src="draw.js"></script>
<script type='text/javascript'>
const canvas = new Canvas(document.getElementById("interface"));
</script>
</body>
</html>

156
www/play.html
Unescape View File

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

22
www/play.js
Unescape View File

@ -6,7 +6,6 @@ class Player { @@ -6,7 +6,6 @@ class Player {
this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.wrapperEl.appendChild(this.svgEl);
this.resize();
}
playlist(url) {
@ -34,7 +33,7 @@ class Player { @@ -34,7 +33,7 @@ class Player {
liEl.innerText = fileUrl
liEl.addEventListener('click', (e) => {
this.play(fileUrl);
playlist.style.display = "none";
});
listEl.appendChild(liEl);
}
@ -62,7 +61,7 @@ class Player { @@ -62,7 +61,7 @@ class Player {
this.strokes = drawing.shape;
this.currentPath = null;
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.playStroke(0,1);
}
@ -105,19 +104,6 @@ class Player { @@ -105,19 +104,6 @@ class Player {
// 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) {
// strokes to a d attribute for a path
@ -126,7 +112,7 @@ class Player { @@ -126,7 +112,7 @@ class Player {
let cmd = "";
for (let stroke of strokes) {
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';
} else {
if (last_stroke[2] == 1) {
@ -137,7 +123,7 @@ class Player { @@ -137,7 +123,7 @@ class Player {
cmd = 'l';
}
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;

Write Preview
Loading…
Cancel
Save