From 12a663c5bdd4b1d9ffc82dd96e209e26b8028ed4 Mon Sep 17 00:00:00 2001 From: prompt.ac/@jeffrey Date: Wed, 15 Jul 2026 22:58:23 +0000 Subject: [PATCH] slides: add canonical B&W notepat keymap --- slides/notepat-keymap/README.md | 22 ++++++++++++++++++++-- slides/notepat-keymap/build-bw.fish | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ slides/notepat-keymap/canonical-bw-notepat-keymap-musical-above.png | 0 slides/notepat-keymap/canonical-bw-notepat-keymap-musical-below.png | 0 slides/notepat-keymap/canonical-bw-notepat-keymap.html | 325 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 file(s) changed, 444 insertion(s)(+), 2 deletion(s)(-) diff --git a/slides/notepat-keymap/README.md b/slides/notepat-keymap/README.md --- a/slides/notepat-keymap/README.md +++ b/slides/notepat-keymap/README.md @@ -14,10 +14,21 @@ ```fish ./build.fish # → notepat-keymap.png ./build.fish ~/Desktop/notepat-keymap.png # → custom path +./build-figure.fish # → color figure only +./build-figure-bw.fish # → shaded B&W figure +./build-figure-bw-line.fish # → stripped line-art figure +./build-bw.fish canonical-bw-notepat-keymap.html canonical-bw-notepat-keymap-musical-below.png 4 0.70 154.286 bottom +./build-bw.fish canonical-bw-notepat-keymap.html canonical-bw-notepat-keymap-musical-above.png 4 0.70 154.286 top ``` -Deps: `qrencode` (`brew install qrencode`), `sips` (built-in), `python3`, -Google Chrome at `/Applications/Google Chrome.app`. +The canonical B&W figure has matching keyboard widths, Mac-style modifier and +arrow keys, and separate musical-keyboard-above and -below outputs. The generic +renderer accepts optional output path, device scale factor, piano scale, octave +gap, and piano position arguments after the template path. + +Deps: `qrencode` (`brew install qrencode`) and `sips` for the complete slide; +`python3`, ImageMagick, and Google Chrome at `/Applications/Google Chrome.app` +for the figure renders. ## Files @@ -26,6 +37,13 @@ strings (`__QR_NOTEPAT__`, `__QR_MENUBAND__`, `__PALS_LOGO__`, `__JEFFREY_PIC__`); `build.fish` substitutes data URIs at render time. - `build.fish` — generates QRs, crops portrait, injects data URIs, runs headless Chrome to capture the PNG. +- `canonical-bw-notepat-keymap.html` — canonical monochrome figure source, + designed for legible halftone printing at small sizes. +- `canonical-bw-notepat-keymap-musical-{above,below}.png` — canonical 4x PNG + exports with the musical keyboard above or below the Mac keyboard. +- `build-figure*.fish` — fixed renderers for the primary figure variants. +- `build-bw.fish` — generic renderer for B&W HTML variants, including font + embedding, print scaling, and tight whitespace trimming. ## Editing diff --git a/slides/notepat-keymap/build-bw.fish b/slides/notepat-keymap/build-bw.fish new file mode 100644 --- /dev/null +++ b/slides/notepat-keymap/build-bw.fish @@ -0,0 +1,99 @@ +#!/usr/bin/env fish +# Generic B&W notepat-keymap figure renderer for iterating on variations. +# ./build-bw.fish [out.png] [scale] [piano-scale] [octave-gap-extra] [piano-position] +# Substitutes the two AC webfonts as data URIs, renders headless Chrome, +# then trims to a tight bounding box (no surrounding whitespace). +# +# Deps: python3, Google Chrome, magick (ImageMagick). + +set -l here (dirname (status filename)) +set -l repo (realpath "$here/../..") +set -l template $argv[1] + +if test -z "$template" -o ! -f "$template" + echo "usage: "(status filename)" [out.png] [scale]" >&2 + exit 2 +end + +set -l out (test -n "$argv[2]"; and echo $argv[2]; or echo (string replace -r '\.html$' '.png' -- "$template")) +set -l scale (test -n "$argv[3]"; and echo $argv[3]; or echo 2) +set -l piano_scale $argv[4] +set -l octave_gap_extra $argv[5] +set -l piano_position $argv[6] +set -l tmp (mktemp -d) +set -l fonts "$repo/system/public/type/webfonts" +set -l chrome "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" + +for command in python3 base64 magick + type -q $command; or begin + echo "missing dependency: $command" >&2 + rm -rf "$tmp" + exit 1 + end +end + +if test ! -x "$chrome" + echo "missing dependency: $chrome" >&2 + rm -rf "$tmp" + exit 1 +end + +mkdir -p (dirname "$out"); or begin + rm -rf "$tmp" + exit 1 +end + +echo "data:font/woff2;base64,"(base64 -i "$fonts/ywft-processing-bold.woff2") > "$tmp/ywft-bold.b64" +echo "data:font/woff2;base64,"(base64 -i "$fonts/BerkeleyMonoVariable-Regular.woff2") > "$tmp/berkeley.b64" + +python3 -c ' +from pathlib import Path +import sys + +template, output, ywft, berkeley = map(Path, sys.argv[1:]) +html = template.read_text() +for placeholder, path in (("__YWFT_BOLD__", ywft), ("__BERKELEY__", berkeley)): + html = html.replace(placeholder, path.read_text().strip()) +output.write_text(html) +' "$template" "$tmp/render.html" "$tmp/ywft-bold.b64" "$tmp/berkeley.b64"; or begin + rm -rf "$tmp" + exit 1 +end + +set -l render_url "file://$tmp/render.html" +if test -n "$piano_scale" + set render_url "$render_url?pianoScale=$piano_scale" +end +if test -n "$octave_gap_extra" + if string match -q '*?*' -- "$render_url" + set render_url "$render_url&octaveGapExtra=$octave_gap_extra" + else + set render_url "$render_url?octaveGapExtra=$octave_gap_extra" + end +end +if test -n "$piano_position" + if string match -q '*?*' -- "$render_url" + set render_url "$render_url&pianoPosition=$piano_position" + else + set render_url "$render_url?pianoPosition=$piano_position" + end +end + +"$chrome" \ + --headless=new --no-sandbox --disable-gpu --hide-scrollbars \ + --window-size=2800,1500 \ + --force-device-scale-factor=$scale \ + --virtual-time-budget=800 \ + --screenshot="$out" \ + "$render_url" 2>/dev/null; or begin + rm -rf "$tmp" + exit 1 +end + +magick "$out" -trim +repage "$out"; or begin + rm -rf "$tmp" + exit 1 +end + +rm -rf "$tmp" +echo "wrote $out (scale $scale)" diff --git a/slides/notepat-keymap/canonical-bw-notepat-keymap-musical-above.png b/slides/notepat-keymap/canonical-bw-notepat-keymap-musical-above.png new file mode 100644 --- /dev/null +++ b/slides/notepat-keymap/canonical-bw-notepat-keymap-musical-above.png diff --git a/slides/notepat-keymap/canonical-bw-notepat-keymap-musical-below.png b/slides/notepat-keymap/canonical-bw-notepat-keymap-musical-below.png new file mode 100644 --- /dev/null +++ b/slides/notepat-keymap/canonical-bw-notepat-keymap-musical-below.png diff --git a/slides/notepat-keymap/canonical-bw-notepat-keymap.html b/slides/notepat-keymap/canonical-bw-notepat-keymap.html new file mode 100644 --- /dev/null +++ b/slides/notepat-keymap/canonical-bw-notepat-keymap.html @@ -0,0 +1,325 @@ + + + + + + + + +
+ +
+
`
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
0
+
-
+
=
+
DELETE
+
+ + +
+
TAB
+
Q
+
W
+
E
+
R
+
T
+
Y
+
U
+
I
+
O
+
P
+
[
+
]
+
\
+
+ + +
+
CAPS
+
A
+
S
+
D
+
F
+
G
+
H
+
J
+
K
+
L
+
;
+
'
+
RETURN
+
+ + +
+
SHIFT
+
Z
+
X
+
C
+
V
+
B
+
N
+
M
+
,
+
.
+
/
+
SHIFT
+
+ + +
+
FN
+
⌃CONTROL
+
⌥OPTION
+
⌘COMMAND
+
+
⌘COMMAND
+
⌥OPTION
+
+
←
+
+
↑
+
↓
+
+
→
+
+
+
+ + +
+
+
C
+
D
+
E
+
F
+
G
+
A
+
B
+
H
+
I
+
J
+
K
+
L
+
M
+
N
+ + +
V
+
S
+
W
+
R
+
Q
+
T
+
Y
+
U
+
O
+
P
+
+
+ + + -- tangled.sh