Merge pull request #942 from ZeLonewolf/zlw-render-samples

Script for generating render samples

.gitignore

@@ -8,3 +8,4 @@ dist
 download
 local.config.js
 shieldlib/docs
+samples/

dev/README.md

@@ -11,3 +11,12 @@ The highway shield [color palette](americana.gpl) can be imported into Inkscape
 3. Import [americana.gpl](americana.gpl).
 4. Restart Inkscape.
 5. Click the ◀ button to the right of the color palette strip at the bottom of the window (or in the top-right corner of the Color Palette panel), then choose americana.gpl from the menu.
+
+## Map sample images
+
+Map sample images can be generated with a script. See [sample_locations.json](test/sample_locations.json) for the format.
+
+1. Create a JSON file with the map location and clipping rectangles
+2. Start the server in the background with `npm start &`
+3. Configure playwright: either `npx playwright install chromium` or `export CHROME_BIN=/usr/bin/chromium`
+4. Run the generate_samples script and pass the JSON file location: `npm run generate_samples -- test/sample_locations.json``

package.json

@@ -24,6 +24,7 @@
     "code_format:prettier": "prettier --write --list-different .",
     "code_format:svgo": "svgo -q -f icons/",
     "extract_layer": "node scripts/extract_layer",
+    "generate_samples": "ts-node scripts/generate_samples.ts",
     "presprites": "shx rm -rf dist/sprites",
     "serve": "ts-node scripts/serve",
     "shields": "node scripts/generate_shield_defs.js -o dist/shields.json",
@@ -50,6 +51,7 @@
     "@basemaps/sprites": "^6.41.0",
     "@mapbox/vector-tile": "^1.3.1",
     "@maplibre/maplibre-gl-style-spec": "^17.0.1",
+    "@playwright/test": "^1.38.1",
     "@types/chai": "^4.3.4",
     "@types/color-namer": "^1.3.0",
     "@types/mocha": "^10.0.1",

scripts/generate_samples.ts

@@ -0,0 +1,89 @@
+import fs from "node:fs";
+import { chromium } from "@playwright/test";
+
+// Declare a global augmentation for the Window interface
+declare global {
+  interface Window {
+    map?: {
+      loaded: () => boolean;
+    };
+  }
+}
+
+type LocationClip = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type SampleSpecification = {
+  location: string;
+  name: string;
+  viewport: {
+    width: number;
+    height: number;
+  };
+  clip: LocationClip;
+};
+
+// Load list of locations to take map screenshots
+const loadSampleLocations = (filePath: string): SampleSpecification[] => {
+  const rawData = fs.readFileSync(filePath, "utf8");
+  return JSON.parse(rawData);
+};
+
+const sampleFolder = "./samples";
+
+const jsonSampleLocations = process.argv[2] ?? "test/sample_locations.json";
+
+console.log(`Loading sample locations from ${jsonSampleLocations}`);
+
+const screenshots: SampleSpecification[] =
+  loadSampleLocations(jsonSampleLocations);
+
+fs.mkdirSync(sampleFolder, { recursive: true });
+
+const browser = await chromium.launch({
+  headless: true,
+  executablePath: process.env.CHROME_BIN,
+});
+const context = await browser.newContext();
+
+const page = await context.newPage();
+
+for (const screenshot of screenshots) {
+  await page.setViewportSize(screenshot.viewport);
+  await createImage(screenshot);
+}
+
+async function createImage(screenshot: SampleSpecification) {
+  await page.goto(`http://localhost:1776/#map=${screenshot.location}`);
+
+  // Wait for map to load, then wait two more seconds for images, etc. to load.
+  try {
+    await page.waitForFunction(() => window.map?.loaded(), {
+      timeout: 3000,
+    });
+
+    // Wait for 1.5 seconds on 3D model examples, since this takes longer to load.
+    const waitTime = 1500;
+    console.log(`waiting for ${waitTime} ms`);
+    await page.waitForTimeout(waitTime);
+  } catch (e) {
+    console.log(`Timed out waiting for map load`);
+  }
+
+  try {
+    await page.screenshot({
+      path: `${sampleFolder}/${screenshot.name}.png`,
+      type: "png",
+      clip: screenshot.clip,
+    });
+    console.log(`Created ${sampleFolder}/${screenshot.name}.png`);
+  } catch (err) {
+    console.error(err);
+  }
+}
+
+await browser.close();

test/sample_locations.json

@@ -0,0 +1,44 @@
+[
+  {
+    "location": "4/40.5/-94",
+    "name": "full_window",
+    "viewport": {
+      "width": 600,
+      "height": 250
+    },
+    "clip": {
+      "x": 0,
+      "y": 0,
+      "width": 600,
+      "height": 250
+    }
+  },
+  {
+    "location": "13/40.01264/-75.70446",
+    "name": "downingtown_alt_trk_bus",
+    "viewport": {
+      "width": 600,
+      "height": 600
+    },
+    "clip": {
+      "x": 100,
+      "y": 100,
+      "width": 400,
+      "height": 400
+    }
+  },
+  {
+    "location": "13/35.22439/-99.99495",
+    "name": "historic_us66_oklahoma",
+    "viewport": {
+      "width": 600,
+      "height": 600
+    },
+    "clip": {
+      "x": 100,
+      "y": 100,
+      "width": 400,
+      "height": 400
+    }
+  }
+]