diff --git a/slides/notepat-keymap/.gitignore b/slides/notepat-keymap/.gitignore new file mode 100644 index 000000000..bd28d3174 --- /dev/null +++ b/slides/notepat-keymap/.gitignore @@ -0,0 +1 @@ +notepat-keymap.png diff --git a/slides/notepat-keymap/README.md b/slides/notepat-keymap/README.md new file mode 100644 index 000000000..c8b76253b --- /dev/null +++ b/slides/notepat-keymap/README.md @@ -0,0 +1,38 @@ +# notepat keymap slide + +Single 16:9 image (2400×1350, Google Slides retina) explaining the +notepat keyboard layout — piano keyboard up top with the QWERTY letter +that plays each note, then the QWERTY layout itself with hand-split +tint, then a "why this layout" rationale and the implementation list +with QR codes to `notepat.com` and `prompt.ac/menuband`. + +Designed for casey's social-software meeting (April 2026) but reusable +as a template for future AC slides. + +## Build + +```fish +./build.fish # → notepat-keymap.png +./build.fish ~/Desktop/notepat-keymap.png # → custom path +``` + +Deps: `qrencode` (`brew install qrencode`), `sips` (built-in), `python3`, +Google Chrome at `/Applications/Google Chrome.app`. + +## Files + +- `template.html` — the slide layout. Image src attributes use placeholder + 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. + +## Editing + +Open `template.html` directly in a browser to iterate on layout — the +placeholders render as broken-image icons but everything else works. +Run `build.fish` to produce the final PNG with all assets embedded. + +The piano + QWERTY positions are hard-coded so any change to key sizing +needs matching updates to the absolute `left:` values in the piano keys +and to `.qrow` padding-left for the QWERTY stagger. diff --git a/slides/notepat-keymap/build.fish b/slides/notepat-keymap/build.fish new file mode 100755 index 000000000..eea7b87cd --- /dev/null +++ b/slides/notepat-keymap/build.fish @@ -0,0 +1,58 @@ +#!/usr/bin/env fish +# Render the notepat keymap slide to a 16:9 PNG (2400×1350, retina for +# Google Slides widescreen). Generates QR codes + base64 data URIs for +# the pals mark and Jeffrey portrait, substitutes them into template.html, +# then captures with headless Chrome. +# +# Output: slides/notepat-keymap/notepat-keymap.png +# Optional first arg: alternative output path. +# +# Deps: qrencode (brew), sips (macOS built-in), python3, Google Chrome. + +set -l here (dirname (status filename)) +set -l repo (realpath "$here/../..") +set -l out (test -n "$argv[1]"; and echo $argv[1]; or echo "$here/notepat-keymap.png") +set -l tmp (mktemp -d) + +set -l template "$here/template.html" +set -l portrait "$repo/portraits/jeffrey/corpus/shoot/jeffery-av--01.jpg" +set -l pals_svg "$repo/papers/arxiv-kidlisp/figures/pals.svg" + +# 1. QR codes +qrencode -o "$tmp/qr-notepat.png" -s 12 -m 2 -l Q "https://notepat.com" +qrencode -o "$tmp/qr-menuband.png" -s 12 -m 2 -l Q "https://prompt.ac/menuband" + +# 2. Square Jeffrey portrait (top-aligned crop, scaled to 600×600) +sips -c 4815 4815 --cropOffset 0 0 "$portrait" --out "$tmp/jeffrey-raw.jpg" >/dev/null +sips -z 600 600 "$tmp/jeffrey-raw.jpg" --out "$tmp/jeffrey.jpg" >/dev/null + +# 3. Base64 data URIs +echo "data:image/png;base64,"(base64 -i "$tmp/qr-notepat.png") > "$tmp/qr-notepat.b64" +echo "data:image/png;base64,"(base64 -i "$tmp/qr-menuband.png") > "$tmp/qr-menuband.b64" +echo "data:image/svg+xml;base64,"(base64 -i "$pals_svg") > "$tmp/pals.b64" +echo "data:image/jpeg;base64,"(base64 -i "$tmp/jeffrey.jpg") > "$tmp/jeffrey.b64" + +# 4. Template substitution +python3 -c " +import sys +html = open('$template').read() +for placeholder, path in [ + ('__QR_NOTEPAT__', '$tmp/qr-notepat.b64'), + ('__QR_MENUBAND__', '$tmp/qr-menuband.b64'), + ('__PALS_LOGO__', '$tmp/pals.b64'), + ('__JEFFREY_PIC__', '$tmp/jeffrey.b64'), +]: + html = html.replace(placeholder, open(path).read().strip()) +open('$tmp/keymap.html', 'w').write(html) +" + +# 5. Headless Chrome render → PNG +"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \ + --headless=new --no-sandbox --disable-gpu --hide-scrollbars \ + --window-size=2400,1350 \ + --virtual-time-budget=500 \ + --screenshot="$out" \ + "file://$tmp/keymap.html" 2>/dev/null + +rm -rf "$tmp" +echo "wrote $out" diff --git a/slides/notepat-keymap/template.html b/slides/notepat-keymap/template.html new file mode 100644 index 000000000..4cba557a4 --- /dev/null +++ b/slides/notepat-keymap/template.html @@ -0,0 +1,490 @@ + + + + + + + + +
+
+
notepat.com Keymap
+
A chromatic keyboard instrument. C·D·E·F·G·A·B play the notes they name. Sharps mostly sit one row above their natural — like piano black keys.
+
+
+
+
Aesthetic.Computer
+
by @jeffrey
+
+
+ + @jeffrey +
+
+
+ + +
+
+
X
B3
ext
+
C
C4
+
D
D4
+
E
E4
+
F
F4
+
G
G4
+
A
A4
+
B
B4
+
H
C5
+
I
D5
+
J
E5
+
K
F5
+
L
G5
+
M
A5
+
N
B5
+
;
C6
ext
+
]
D6
ext
+ + +
Z
A♯3
+
V
C♯4
+
S
D♯4
+
W
F♯4
+
R
G♯4
+
Q
A♯4
+
T
C♯5
+
Y
D♯5
+
U
F♯5
+
O
G♯5
+
P
A♯5
+
'
C♯6
+
+
+ + +
+
+
+
← Left hand · lower octave
+
Right hand · upper octave →
+
+
+
+
+
Q
+
W
+
E
+
R
+
T
+
Y
+
U
+
I
+
O
+
P
+
[
+
]
ext
+
+
+
A
+
S
+
D
+
F
+
G
+
H
+
J
+
K
+
L
+
;
ext
+
'
ext
+
+
+
Z
ext
+
X
ext
+
C
+
V
+
B
+
N
+
M
+
,
oct−
+
.
oct+
+
/
+
+
+
+
+ +
+
+

Why this layout

+
    +
  • Notes that name themselves. C D E F G A B play the notes they name — anyone who knows the Western scale already knows it.
    • +
  • Sharps mostly sit above their naturals. V S W R Q = C♯ D♯ F♯ G♯ A♯ — close to piano black keys, with a few exceptions.
    • +
  • Two-handed by default. Lower octave under the left hand; upper octave (H J K L ;) mirrors it under the right.
    • +
  • Social software. The instrument shares the keyboard everyone already owns — musical participation isn't gated by software literacy.
    • +
+
+ +
+
+

Notepat lives in

+
    +
  • notepat.comweb
    • +
  • AC NativeAC OS
    • +
  • MenuBandmacOS
    • +
  • AC-NotepatMax for Live
    • +
  • Remotephone
    • +
+
+
+
+
+ notepat.com +
https://notepat.com
+
+
+ prompt.ac/menuband +
https://prompt.ac/menuband
+
+
+
+
+
+
+ + + + + + +