123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218 |
- /**
- * Command line application to build a 5x5 filmstrip from a Lottie file in the
- * browser and then exporting that filmstrip in a 1000x1000 PNG.
- *
- */
- const puppeteer = require('puppeteer');
- const express = require('express');
- const fs = require('fs');
- const commandLineArgs = require('command-line-args');
- const commandLineUsage= require('command-line-usage');
- const fetch = require('node-fetch');
- // Valid values for the --renderer flag.
- const RENDERERS = ['svg', 'canvas'];
- const opts = [
- {
- name: 'input',
- typeLabel: '{underline file}',
- description: 'The Lottie JSON file to process.'
- },
- {
- name: 'output',
- typeLabel: '{underline file}',
- description: 'The captured filmstrip PNG file to write. Defaults to filmstrip.png',
- },
- {
- name: 'renderer',
- typeLabel: '{underline mode}',
- description: 'Which renderer to use, "svg" or "canvas". Defaults to "svg".',
- },
- {
- name: 'port',
- description: 'The port number to use, defaults to 8081.',
- type: Number,
- },
- {
- name: 'lottie_player',
- description: 'The path to lottie.min.js, defaults to a local npm install location.',
- type: String,
- },
- {
- name: 'post_to',
- description: 'If set, the url to post results to for Gold Ingestion.',
- type: String,
- },
- {
- name: 'in_docker',
- description: 'Is this being run in docker, defaults to false',
- type: Boolean,
- },
- {
- name: 'skip_automation',
- description: 'If the automation of the screenshot taking should be skipped ' +
- '(e.g. debugging). Defaults to false.',
- type: Boolean,
- },
- {
- name: 'help',
- alias: 'h',
- type: Boolean,
- description: 'Print this usage guide.'
- },
- ];
- const usage = [
- {
- header: 'Lottie Filmstrip Capture',
- content: `Command line application to build a 5x5 filmstrip
- from a Lottie file in the browser and then export
- that filmstrip in a 1000x1000 PNG.`
- },
- {
- header: 'Options',
- optionList: opts,
- },
- ];
- // Parse and validate flags.
- const options = commandLineArgs(opts);
- if (!options.output) {
- options.output = 'filmstrip.png';
- }
- if (!options.port) {
- options.port = 8081;
- }
- if (!options.lottie_player) {
- options.lottie_player = 'node_modules/lottie-web/build/player/lottie.min.js';
- }
- if (options.help) {
- console.log(commandLineUsage(usage));
- process.exit(0);
- }
- if (!options.input) {
- console.error('You must supply a Lottie JSON filename.');
- console.log(commandLineUsage(usage));
- process.exit(1);
- }
- if (!options.renderer) {
- options.renderer = 'svg';
- }
- if (!RENDERERS.includes(options.renderer)) {
- console.error('The --renderer flag must have as a value one of: ', RENDERERS);
- console.log(commandLineUsage(usage));
- process.exit(1);
- }
- // Start up a web server to serve the three files we need.
- let lottieJS = fs.readFileSync(options.lottie_player, 'utf8');
- let driverHTML = fs.readFileSync('driver.html', 'utf8');
- let lottieJSON = fs.readFileSync(options.input, 'utf8');
- const app = express();
- app.get('/', (req, res) => res.send(driverHTML));
- app.get('/lottie.js', (req, res) => res.send(lottieJS));
- app.get('/lottie.json', (req, res) => res.send(lottieJSON));
- app.listen(options.port, () => console.log('- Local web server started.'))
- // Utiltity function.
- async function wait(ms) {
- await new Promise(resolve => setTimeout(() => resolve(), ms));
- return ms;
- }
- const targetURL = `http://localhost:${options.port}/#${options.renderer}`;
- // Drive chrome to load the web page from the server we have running.
- async function driveBrowser() {
- console.log('- Launching chrome in headless mode.');
- let browser = null;
- if (options.in_docker) {
- browser = await puppeteer.launch({
- 'executablePath': '/usr/bin/google-chrome-stable',
- 'args': ['--no-sandbox'],
- });
- } else {
- browser = await puppeteer.launch();
- }
- const page = await browser.newPage();
- console.log(`- Loading our Lottie exercising page for ${options.input}.`);
- try {
- // 20 seconds is plenty of time to wait for the json to be loaded once
- // This usually times out for super large json.
- await page.goto(targetURL, {
- timeout: 20000,
- waitUntil: 'networkidle0'
- });
- // 20 seconds is plenty of time to wait for the frames to be drawn.
- // This usually times out for json that causes errors in the player.
- console.log('- Waiting 15s for all the tiles to be drawn.');
- await page.waitForFunction('window._tileCount === 25', {
- timeout: 20000,
- });
- } catch(e) {
- console.log('Timed out while loading or drawing. Either the JSON file was ' +
- 'too big or hit a bug in the player.', e);
- await browser.close();
- process.exit(0);
- }
- console.log('- Taking screenshot.');
- let encoding = 'binary';
- if (options.post_to) {
- encoding = 'base64';
- // prevent writing the image to disk
- options.output = '';
- }
- // See https://github.com/GoogleChrome/puppeteer/blob/v1.6.0/docs/api.md#pagescreenshotoptions
- let result = await page.screenshot({
- path: options.output,
- type: 'png',
- clip: {
- x: 0,
- y: 0,
- width: 1000,
- height: 1000,
- },
- encoding: encoding,
- });
- if (options.post_to) {
- console.log(`- Reporting ${options.input} to Gold server ${options.post_to}`);
- let shortenedName = options.input;
- let lastSlash = shortenedName.lastIndexOf('/');
- if (lastSlash !== -1) {
- shortenedName = shortenedName.slice(lastSlash+1);
- }
- await fetch(options.post_to, {
- method: 'POST',
- mode: 'no-cors',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({
- 'data': result,
- 'test_name': shortenedName,
- })
- });
- }
- await browser.close();
- // Need to call exit() because the web server is still running.
- process.exit(0);
- }
- if (!options.skip_automation) {
- driveBrowser();
- } else {
- console.log(`open ${targetURL} to see the animation.`)
- }
|