Fix scaling and tidy html
This commit is contained in:
Ruben van de Ven
parent
111eab6cf0
commit
ae76368d4d
4 changed files with 253 additions and 242 deletions
7
README.md
Normal file
7
README.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
# svganim
|
||||
|
||||
Create a hand drawn vector animation.
|
||||
|
||||
```bash
|
||||
poetry run python webserver.py
|
||||
```
|
||||
310
www/draw.html
310
www/draw.html
|
|
@ -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;
|
||||
}
|
||||
.buttons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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'>
|
||||
#submit {
|
||||
background: lightblue;
|
||||
border: solid 1px blue;
|
||||
border-radius: 5px;
|
||||
font-size: 110%;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
<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>
|
||||
.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
156
www/play.html
|
|
@ -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
22
www/play.js
|
|
@ -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 {
|
|||
liEl.innerText = fileUrl
|
||||
liEl.addEventListener('click', (e) => {
|
||||
this.play(fileUrl);
|
||||
|
||||
playlist.style.display = "none";
|
||||
});
|
||||
listEl.appendChild(liEl);
|
||||
}
|
||||
|
|
@ -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 {
|
|||
// 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 {
|
|||
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 {
|
|||
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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue