spiegel-keyman/web/src/tools/testing/bulk_rendering
Joshua Horton b7975973af maint(web): ensure Web build scripts handle paths with spaces properly
The command shortcuts that were used by Web
scripts to create bundles via `esbuild` were not
properly handling the $KEYMAN_ROOT path when it
contained a space.  These changes will rectify
this behavior and permit builds for such cases.

Build-bot: skip build:web
Test-bot: skip
2026-02-18 09:14:30 +07:00
..
build.sh maint(web): ensure Web build scripts handle paths with spaces properly 2026-02-18 09:14:30 +07:00
compare.html change(web): moves bulk_rendering under tools/testing, adds clean action 2022-11-29 09:46:50 +07:00
index.html fix(web): bulk renderer interface for recent-version targeting keyboards 2024-01-18 09:17:47 +07:00
local-renderer.html Update local-renderer.html 2024-01-19 00:51:49 +07:00
README.md docs(web): child project readme update 2024-01-18 10:57:12 +07:00
renderer_core.ts refactor(web): merge device-detect with web/src/engine/main 2024-09-11 16:48:15 +02:00
tsconfig.json refactor(web): merge device-detect with web/src/engine/main 2024-09-11 16:48:15 +02:00

Bulk renderer

This renderer loads all the cloud keyboards from api.keyman.com and renders each of them to the document, saving each render as an inline (data-url) PNG for easy comparison.

Using the bulk renderer

  1. build.sh to build the renderer (must have already built KeymanWeb in ../source/, ./build.sh -debug).
  2. Open index.html (via http, not via file, as otherwise fonts will not be accessible).
  3. Choose whether you wish to render all layers or just the default layer for each keyboard.
  4. If desired, filter out keyboards by id (regex).
  5. Run the render.
    • Note that it is preferable to run this on an actual device if possible.
      • If no prompt is given re: screensharing when you click the 'run' button, use Chrome's Developer Tools on a desktop or laptop to run this via emulation instead.
      • If emulating a mobile device, when prompted to screenshare...
        • Be sure to share the Chrome tab. The screen capture system will fail to capture the OSK properly otherwise.
        • Also verify that emulation zoom is set to 100%; the system will fail to capture the OSK properly otherwise.
  6. Save the result to a .html file, either before.html or after.html.
  7. When swapping versions, don't forget to rebuild.

compare.html

Compare allows you to load two runs of the renderer side-by-side (simply save the run to either before.html or after.html in this folder). It defaults to a width of 20% which you might need to tweak depending on the size of your display and the width of the OSK images.

local-renderer.html

This variant of the bulk-renderer engine allows loading and rendering keyboards from local file-system KMPs, rather than those from our Keyman Cloud repository.