diff --git a/README.md b/README.md new file mode 100644 index 0000000..00ddcae --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# svganim + +Create a hand drawn vector animation. + +```bash +poetry run python webserver.py +``` \ No newline at end of file diff --git a/www/draw.html b/www/draw.html index c16773b..282e225 100644 --- a/www/draw.html +++ b/www/draw.html @@ -1,164 +1,168 @@ - - - Draw a line animation - - - -
-
- - - - - + .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; + } + + + + +
+
+ + + + + \ No newline at end of file diff --git a/www/play.html b/www/play.html index 1ea23c6..30a76c2 100644 --- a/www/play.html +++ b/www/play.html @@ -1,74 +1,88 @@ - - - Play a line animation - - - -
-
- - - - + + + Play a line animation + + + + +
+
+ + + + + \ No newline at end of file diff --git a/www/play.js b/www/play.js index acfd029..6db98a0 100644 --- a/www/play.js +++ b/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;