add CLI for saving image preview of layout (#1)

Adds an `ergodox-screenshot-layout` CLI for saving an image preview of a keyboard layout.

The tool uses [puppeteer][] to visit the [Ergodox Configurator tool][configurator], import your keyboard layout specified by path, and save a screenshot.

Example usage: `ergodox-screenshot-layout -f MDErgo1-Default.json` will save a preview of the layout to `screenshot.png`. The path to the keyboard layout file is specified with the `-f` option. The path to save the screenshot to can be specified with the `-d` option. The CLI also supports the `--headless` flag which can be set to false to configure puppeteer to not run chrome in headless mode (for debugging).

[puppeteer]: https://github.com/GoogleChrome/puppeteer
[configurator]: https://input.club/configurator-ergodox/

Author: ali

.github/screenshot.png

@@ -1,4 +1,17 @@
-# ergodox layout
+# ergodox-layout
 
-the layout I use for my ergodox keyboard
+The layout I use for my [ergodox keyboard][].
+
+[ergodox keyboard]: https://input.club/devices/infinity-ergodox/
+
+## Preview
+
+![](.github/screenshot.png)
+
+## Project Structure
+
+- `layout` - the layout files
+- `ergodox-screenshot-layout` - tool for getting an image preview of an ergodox layouts from the [ergodox configurator tool][configurator]
+
+[configurator]: https://input.club/configurator-ergodox/
 

README.md

@@ -0,0 +1 @@
+node_modules

ergodox-screenshot-layout/.gitignore

@@ -0,0 +1,6 @@
+# ergdox-screenshot-layout
+
+Save a screenshot of your ergodox layout.
+
+Uses headless chrome to visit the Ergodox Configurator, import your keyboard layout JSON file, and screenshot the keyboard layout preview.
+

ergodox-screenshot-layout/README.md

@@ -0,0 +1,3 @@
+#! /usr/bin/env node
+
+require("../index.js");

ergodox-screenshot-layout/bin/ergodox-screenshot-layout

@@ -0,0 +1,98 @@
+const path = require("path");
+const fs = require("fs-extra");
+const puppeteer = require("puppeteer");
+const yargs = require("yargs");
+
+const pkg = require("./package.json");
+
+const argv = yargs.command(
+  "$0",
+  pkg.description,
+  yargs => {
+    return yargs.options({
+      f: {
+        alias: ["file", "layout"],
+        demandOption: true,
+        describe: "file path to a keyboard layout JSON file",
+        string: true
+      },
+      d: {
+        alias: ["dest", "screenshot"],
+        describe: "file path to save the screenshot to",
+        string: true,
+        default: "screenshot.png"
+      },
+      headless: {
+        describe: "run chromium in headless mode",
+        boolean: true,
+        default: true
+      }
+    });
+  },
+  argv => {
+    return getKeyboardLayoutScreenshot(argv.file, argv.dest, argv.headless);
+  }
+).argv;
+
+async function importLayout(page, layoutJson) {
+  console.log("Clicking import button");
+  await page.waitFor("button#import-map");
+  const importButton = await page.$("button#import-map");
+  await importButton.click();
+
+  console.log("Waiting for popup");
+  await page.waitFor(".popup textarea", { visisble: true });
+  let popup = await page.$(".popup");
+
+  console.log("Injecting layout");
+  const layoutTextArea = await page.$(".popup textarea");
+  await page.evaluate(
+    (textarea, layoutJson) => {
+      textarea.value = JSON.stringify(layoutJson, null, 2);
+      return Promise.resolve(textarea.value);
+    },
+    layoutTextArea,
+    layoutJson
+  );
+
+  console.log("Waiting");
+  await page.waitFor(500);
+
+  console.log("Clicking submit");
+  const submit = await page.$(".popup button.button-read");
+  await submit.click();
+
+  console.log("Waiting for popup to disappear");
+  return await page.waitFor(500);
+}
+
+async function saveScreenshot(page, filename) {
+  console.log("Waiting for layout preview to appear");
+  await Promise.all([page.waitFor("#stage"), page.waitFor("#stage .key")]);
+  const container = await page.$("#container");
+
+  console.log("Say cheese");
+  return await container.screenshot({ path: filename });
+}
+
+async function getKeyboardLayoutScreenshot(
+  pathToLayoutJson,
+  screenshotFilename,
+  headless
+) {
+  const layoutJson = await fs.readJson(path.resolve(pathToLayoutJson));
+  const browser = await puppeteer.launch({
+    headless,
+    args: ["--disable-setuid-sandbox", "--no-sandbox"]
+  });
+
+  const page = await browser.newPage();
+  await page.goto("https://configurator.inputclub.com/?layout=MDErgo1-Default");
+
+  await page.waitFor(".container");
+  await importLayout(page, layoutJson);
+  await saveScreenshot(page, screenshotFilename);
+
+  console.log("Done");
+  await browser.close();
+}

ergodox-screenshot-layout/index.js

@@ -0,0 +1,18 @@
+{
+  "name": "ergodox-screenshot-layout",
+  "version": "1.0.0",
+  "description": "save a screenshot of your ergodox layout",
+  "main": "index.js",
+  "author": "Ali Ukani <ali.ukani@gmail.com>",
+  "license": "MIT",
+  "private": true,
+  "bin": "./bin/ergodox-screenshot-layout",
+  "engines": {
+    "node": ">= 8.5.0"
+  },
+  "dependencies": {
+    "fs-extra": "^4.0.2",
+    "puppeteer": "^0.12.0",
+    "yargs": "^10.0.3"
+  }
+}