diff options
| author |  Joe Gregorio <joe@bitworking.org> | 2018-03-19 14:26:58 -0400 |
|---|---|---|
| committer |  Skia Commit-Bot <skia-commit-bot@chromium.org> | 2018-03-20 13:25:23 +0000 |
| commit | 0060c3394c6bdb106a12685e11d29ffd258590a5 (patch) | |
| tree | 5a827c40c9723772c3802031b0c6f857be4d46fd /tools/lottiecap/driver.html | |
| parent | ec77963bf32eda185cb422d2166f60da094feade (diff) | |
[lottiecap] Moved over from buildbot repo.
Command line application to build a 5x5 filmstrip
from a Lottie file in Chrome headless and then export
that filmstrip in a 1000x1000 PNG.
Bug: skia:
Change-Id: I38decac363f2d592fddc28b3f4ca9450c5851ac6
Reviewed-on: https://skia-review.googlesource.com/115100
Commit-Queue: Mike Klein <mtklein@google.com>
Reviewed-by: Mike Klein <mtklein@google.com>
Diffstat (limited to 'tools/lottiecap/driver.html')
| -rw-r--r-- | tools/lottiecap/driver.html | 107 |
1 files changed, 107 insertions, 0 deletions
diff --git a/tools/lottiecap/driver.html b/tools/lottiecap/driver.html new file mode 100644 index 0000000000..38e4dfbbbc --- /dev/null +++ b/tools/lottiecap/driver.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<html> +<head> + <title>Lottie Filmstrip Capture</title> + <meta charset="utf-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <script src="/lottie.js" type="text/javascript" charset="utf-8"></script> + <style type="text/css" media="screen"> + body, + main, + .anim { + margin: 0; + padding: 0; + } + + main { + display: flex; + width: 1000px; + height: 1000px; + flex-flow: row wrap; + } + </style> +</head> +<body> + <main> + <div class=anim></div> + </main> + <script type="text/javascript" charset="utf-8"> + (function () { + const TILE_COUNT = 5; // Number of tiles in x or y direction. + const TARGET_SIZE = 1000; // Image size in pixels both x and y direction. + const PATH = '/lottie.json'; + + // This global is used by puppeteer to determine if all tiles have finished drawing. + window._tileCount = 0; + + // First load the animation for just a single tile + // so we can read out some values and calculate what + // the filmstrip should look like. + let anim = lottie.loadAnimation({ + container: document.querySelector('.anim'), + renderer: 'svg', + loop: false, + autoplay: true, + path: PATH, + rendererSettings: { + preserveAspectRatio:'xMidYMid meet' + }, + }); + + anim.addEventListener('data_ready', e => { + // Once the first tile is loaded, calculate what + // the filmstrip should look like. + let width = anim.animationData.w; + let height = anim.animationData.h; + let scale = TARGET_SIZE / (TILE_COUNT * Math.max(width, height)); + let tileWidth = Math.ceil(scale * width); + let tileHeight = Math.ceil(scale * height); + + let inPoint = anim.animationData.ip || 0; + let outPoint = anim.animationData.op || anim.animationData.totalFrames - 1; + let frameStep = (outPoint - inPoint) / (TILE_COUNT * TILE_COUNT - 1); + + let main = document.querySelector('main'); + + let renderer = 'svg'; + let hash = window.location.hash; + if (hash) { + renderer = hash.slice(1); + } + + // Clear out the first div now that our measurements are done. + main.firstElementChild.remove(); + + // Add in the 5x5 tiled divs. + for (let i = 0; i < (TILE_COUNT*TILE_COUNT); i++) { + let div = document.createElement('div'); + div.classList.add('anim'); + div.style.width = tileWidth + 'px'; + div.style.height = tileHeight + 'px'; + main.appendChild(div); + + let frameStop = i * frameStep; + + let anim = lottie.loadAnimation({ + container: div, + renderer: renderer, + loop: false, + autoplay: true, + path: PATH, + rendererSettings: { + preserveAspectRatio:'xMidYMid meet' + }, + }); + anim.addEventListener('enterFrame', (e) => { + if (Math.round(anim.currentFrame) >= frameStop) { + anim.pause(); + window._tileCount += 1; + } + }); + } + }); + })(); + </script> +</body> +</html> |