Uploaders

${entries.length} ${entries.length === 1 ? \"person has\" : \"people have\"} uploaded.

\n\n\n${rows || ``}\n

Email	Uploads	Last upload	Reminders	# sent	Last reminded
No uploaders yet.

\n`);\n});\n\napp.get(\"/opt-out\", async (c) => {\n const email = c.req.query(\"email\");\n const shell = (title: string, body: string) => `\n\n\n

${title}

${body}

`;\n\n if (!email) {\n return c.html(shell(\"Missing email\", \"

No email address was provided.

\"));\n }\n\n const uploaders = await getUploaders();\n if (uploaders[email]) {\n uploaders[email].reminders = false;\n await blob.setJSON(UPLOADERS_KEY, uploaders);\n }\n\n return c.html(shell(\"Opted out\", `

You won't receive any more reminders.

Back to upload`));\n});\n\napp.get(\"/image\", async (c) => {\n const data = await blob.getJSON(BLOB_KEY) as { image: string; caption: string } | null;\n if (!data) {\n return c.text(\"No image\", 404);\n }\n\n const base64 = data.image.replace(/^data:image\\/png;base64,/, \"\");\n const binary = Uint8Array.from(atob(base64), (ch) => ch.charCodeAt(0));\n return new Response(binary, {\n headers: { \"Content-Type\": \"image/png\", \"Cache-Control\": \"no-cache\" },\n });\n});\n\napp.get(\"/display\", async (c) => {\n const data = await blob.getJSON(BLOB_KEY) as { image: string; caption: string } | null;\n\n if (!data) {\n return c.html(`\n\n

No image uploaded yet.

`);\n }\n\n const origin = new URL(c.req.url).origin;\n const captionHtml = data.caption\n ? `

${escapeHtml(data.caption)}

`\n : \"\";\n\n return c.html(`\n\n\n\n

\n${captionHtml}\n`);\n});\n\nfunction escapeHtml(s: string): string {\n return s.replace(/&/g, \"&\").replace(//g, \">\").replace(/\"/g, \""\");\n}\n\nexport default app.fetch;\n",[18,80],"c426431e-4189-11f1-a107-42b51c65c3df",["D",1777219538174],5,"import { blob } from \"https://esm.town/v/std/blob\";\nimport { email } from \"https://esm.town/v/std/email\";\n\nconst UPLOADERS_KEY = \"trmnl_uploaders\";\nconst UPLOAD_URL = \"http://www.joshbeckman.org/frametags/home-trmnl-small\";\nconst DAY_MS = 24 * 60 * 60 * 1000;\nconst BASE_WAIT_DAYS = 14;\nconst MAX_REMINDERS = 4;\n\ntype Uploader = {\n lastUpload: string;\n count: number;\n reminders: boolean;\n lastReminded?: string | null;\n reminderCount?: number;\n};\ntype Uploaders = Record;\n\nexport async function sendReminderEmail(to: string): Promise {\n const optOutUrl = `https://joshbeckman--b073704c405011f19b9c42b51c65c3df.web.val.run/opt-out?email=${encodeURIComponent(to)}`;\n await email({\n to,\n replyTo: \"josh@joshbeckman.org\",\n subject: \"What's new with you? Update the Kram-Beckman wall display!\",\n html: `

Hey! It's been a while since you last uploaded an image to the Kram-Beckman wall display.

We'd love to see what's new with you. Upload a photo and it'll show up on the wall of our living room.

Upload a new image

\nStop receiving these reminders\n

`,\n });\n}\n\nexport type RunResult = {\n now: string;\n dryRun: boolean;\n considered: number;\n sent: { email: string; reminderNumber: number }[];\n skipped: { email: string; reason: string; waitDaysRemaining?: number }[];\n};\n\nexport async function runReminders(\n opts: { now?: number; dryRun?: boolean } = {},\n): Promise {\n const now = opts.now ?? Date.now();\n const dryRun = opts.dryRun ?? false;\n const uploaders = (await blob.getJSON(UPLOADERS_KEY) as Uploaders) || {};\n\n const result: RunResult = {\n now: new Date(now).toISOString(),\n dryRun,\n considered: 0,\n sent: [],\n skipped: [],\n };\n\n let changed = false;\n\n for (const [addr, uploader] of Object.entries(uploaders)) {\n result.considered++;\n\n if (!uploader.reminders) {\n result.skipped.push({ email: addr, reason: \"opted out\" });\n continue;\n }\n\n const reminderCount = uploader.reminderCount ?? 0;\n if (reminderCount >= MAX_REMINDERS) {\n result.skipped.push({ email: addr, reason: \"max reminders reached\" });\n continue;\n }\n\n const waitMs = BASE_WAIT_DAYS * Math.pow(2, reminderCount) * DAY_MS;\n const sinceLastTouch = uploader.lastReminded || uploader.lastUpload;\n const elapsed = now - new Date(sinceLastTouch).getTime();\n if (elapsed < waitMs) {\n result.skipped.push({\n email: addr,\n reason: \"not enough time elapsed\",\n waitDaysRemaining: Math.ceil((waitMs - elapsed) / DAY_MS),\n });\n continue;\n }\n\n if (!dryRun) {\n await sendReminderEmail(addr);\n uploader.lastReminded = new Date(now).toISOString();\n uploader.reminderCount = reminderCount + 1;\n changed = true;\n }\n\n result.sent.push({ email: addr, reminderNumber: reminderCount + 1 });\n }\n\n if (changed && !dryRun) {\n await blob.setJSON(UPLOADERS_KEY, uploaders);\n }\n\n return result;\n}\n\nexport default async function () {\n await runReminders();\n}\n",[18,120],"pulls","branches",1,"forks","envVars",{"_309":303,"_311":26},"connections",{"_309":26,"_310":26},"count","unfilledCount","emptyCount",{"_49":372,"_13":371,"_78":365,"_59":-5,"_51":52,"_282":303,"_284":24,"_53":373,"_55":26,"_81":210,"_286":-5,"_83":30,"_287":-5,"_326":374,"_17":375},{"_49":362,"_13":363,"_78":364,"_59":365,"_51":52,"_282":366,"_284":24,"_53":367,"_55":283,"_81":21,"_286":368,"_83":30,"_287":-5,"_326":369,"_17":370},{"_49":281,"_13":18,"_78":209,"_59":-5,"_51":52,"_282":283,"_284":24,"_53":359,"_55":26,"_81":210,"_286":-5,"_83":30,"_287":-5,"_326":360,"_17":361},{"_49":296,"_13":120,"_78":119,"_59":209,"_51":52,"_282":204,"_284":24,"_53":356,"_55":298,"_81":121,"_286":299,"_83":30,"_287":-5,"_326":357,"_17":358},{"_49":291,"_13":80,"_78":79,"_59":209,"_51":52,"_282":197,"_284":24,"_53":353,"_55":293,"_81":95,"_286":294,"_83":30,"_287":-5,"_326":354,"_17":355},{"_49":349,"_13":339,"_78":332,"_59":-5,"_51":52,"_282":335,"_284":24,"_53":350,"_55":26,"_81":210,"_286":-5,"_83":30,"_287":-5,"_326":351,"_17":352},{"_49":340,"_13":341,"_78":342,"_59":332,"_51":52,"_282":343,"_284":24,"_53":344,"_55":345,"_81":21,"_286":346,"_83":30,"_287":-5,"_326":347,"_17":348},{"_49":329,"_13":330,"_78":331,"_59":332,"_51":52,"_282":333,"_284":24,"_53":334,"_55":335,"_81":82,"_286":336,"_83":30,"_287":-5,"_326":337,"_17":338},{"_49":321,"_13":322,"_78":323,"_59":-5,"_51":52,"_282":246,"_284":24,"_53":324,"_55":303,"_81":21,"_286":325,"_83":30,"_287":-5,"_326":327,"_17":328},"eef59c66-4189-11f1-a992-42b51c65c3df","README.md","361280c0-417e-11f1-a09b-42b51c65c3df",["D",1777219610034],"# trmnlImage\n\nBackend for the [TRMNL screenshot plugin](https://help.trmnl.com/en/articles/10302121-screenshot). TRMNL points at `/display` and screenshots it onto its 800×480 e-ink panel. Friends and family upload images at `/`; the most recent upload is what shows on the wall.\n\n## Routes\n\n| Route | Purpose |\n|---|---|\n| `GET /` | Upload form (email required, image required, caption optional). |\n| `POST /upload` | Stores the processed image, caption, and uploader record. |\n| `GET /image` | Serves the current image as binary `image/png`. |\n| `GET /display` | The page TRMNL screenshots — image at 800×480 with optional caption bar. Public link to share with TRMNL. |\n| `GET /admin` | HTTP Basic auth (`admin` / `ADMIN_PASSWORD`). Lists every uploader with upload count, last upload, reminder state. |\n| `GET /admin/test-email?to=...` | Sends one reminder email to the given address. No state changes. |\n| `GET /admin/run-cron` | Manually triggers the reminder cron. Supports `?dry=1` (don't send/persist) and `?days_ahead=N` (simulate future time). Returns JSON summary. |\n| `GET /opt-out?email=...` | Flips `reminders` to `false` for an email. Linked from reminder emails. |\n\nPublic URL: `https://joshbeckman--b073704c405011f19b9c42b51c65c3df.web.val.run`. Friendlier alias for sharing: `http://www.joshbeckman.org/frametags/home-trmnl-small`.\n\n## Layout\n\n```\nbackend/\n index.ts # Hono HTTP app (all routes above)\n cron.ts # Daily reminder job (separate cron trigger in Val Town)\nfrontend/\n index.html # Upload form\n index.tsx # Client-side resize + upload (no dithering — TRMNL handles B&W)\n```\n\n## Image processing\n\nDone client-side in `frontend/index.tsx`:\n1. Draw the uploaded image onto an 800×480 canvas, scaled to cover.\n2. `canvas.toDataURL(\"image/png\")` → POST to `/upload`.\n\nWe **don't** dither to 1-bit ourselves — TRMNL converts the screenshot to B&W on its end, and pre-dithering caused weirdness. We also avoid `image-rendering: pixelated` on `/display` for the same reason. The `/image` endpoint decodes the stored data URL and serves binary PNG so `/display` references it as a real URL (TRMNL's screenshot pipeline doesn't like huge inline `data:` URIs).\n\n## Storage (Val Town blob)\n\n| Key | Shape |\n|---|---|\n| `trmnl_image_data` | `{ image: dataUrl, caption: string }` — current image only. |\n| `trmnl_uploaders` | `{ [email]: Uploader }` |\n\n```ts\ntype Uploader = {\n lastUpload: string; // ISO timestamp\n count: number; // total uploads\n reminders: boolean; // opt-in flag, default true\n lastReminded?: string | null;\n reminderCount?: number; // how many reminders sent in current cycle\n}\n```\n\nUploading resets `lastReminded` and `reminderCount` so the cycle starts over.\n\n## Reminder cron (`backend/cron.ts`)\n\nRuns daily. For each uploader with `reminders === true` and `reminderCount < 4`, sends a nudge if enough time has passed. The email body lives in `sendReminderEmail()` in `cron.ts` — `/admin/test-email` calls the same function. Backoff doubles each reminder:\n\n| Reminder # | Wait since previous touch |\n|---|---|\n| 1 | 14 days (since last upload) |\n| 2 | 28 days |\n| 3 | 56 days |\n| 4 | 112 days |\n| 5+ | never — silence |\n\nTotal: at most 4 emails over ~7 months, then we leave them alone. Each email contains an opt-out link.\n\n## Env vars\n\n- `ADMIN_PASSWORD` — required for `/admin`. Username is hardcoded to `admin`.\n\n## Local dev\n\n```sh\nvt watch # auto-sync edits to Val Town\nvt tail # stream logs\nvt browse # open in browser\n```\n","children",[],[322],"3b97c1fc-40a4-11f1-ae94-42b51c65c3df","index.tsx","b07f8666-4050-11f1-89c3-42b51c65c3df","b04402bc-4050-11f1-ba84-42b51c65c3df",20,["D",1777120954365],3,"const form = document.getElementById(\"upload-form\") as HTMLFormElement;\nconst emailInput = document.getElementById(\"email-input\") as HTMLInputElement;\nconst fileInput = document.getElementById(\"file-input\") as HTMLInputElement;\nconst captionInput = document.getElementById(\"caption-input\") as HTMLInputElement;\nconst submitBtn = document.getElementById(\"submit-btn\") as HTMLButtonElement;\nconst status = document.getElementById(\"status\") as HTMLDivElement;\nconst previewSection = document.getElementById(\"preview-section\") as HTMLDivElement;\nconst previewCanvas = document.getElementById(\"preview-canvas\") as HTMLCanvasElement;\n\nconst W = 800;\nconst H = 480;\nconst STORAGE_KEY = \"trmnl_uploader_email\";\n\nconst saved = localStorage.getItem(STORAGE_KEY);\nif (saved) emailInput.value = saved;\n\nfunction showStatus(msg: string) {\n status.textContent = msg;\n status.style.display = \"block\";\n}\n\nfunction loadImage(file: File): Promise {\n return new Promise((resolve, reject) => {\n const url = URL.createObjectURL(file);\n const img = new Image();\n img.onload = () => { URL.revokeObjectURL(url); resolve(img); };\n img.onerror = () => { URL.revokeObjectURL(url); reject(new Error(\"Failed to load image\")); };\n img.src = url;\n });\n}\n\nform.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n\n const file = fileInput.files?.[0];\n if (!file) return;\n\n const email = emailInput.value.trim();\n if (!email) return;\n\n localStorage.setItem(STORAGE_KEY, email);\n submitBtn.disabled = true;\n showStatus(\"Processing image\\u2026\");\n\n try {\n const img = await loadImage(file);\n\n const ctx = previewCanvas.getContext(\"2d\")!;\n ctx.fillStyle = \"#ffffff\";\n ctx.fillRect(0, 0, W, H);\n\n // Scale image to cover 800x480 while maintaining aspect ratio\n const scale = Math.max(W / img.width, H / img.height);\n const sw = img.width * scale;\n const sh = img.height * scale;\n const sx = (W - sw) / 2;\n const sy = (H - sh) / 2;\n ctx.drawImage(img, sx, sy, sw, sh);\n\n previewSection.style.display = \"block\";\n\n showStatus(\"Uploading\\u2026\");\n\n const dataUrl = previewCanvas.toDataURL(\"image/png\");\n const caption = captionInput.value.trim();\n\n const resp = await fetch(\"/upload\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ image: dataUrl, caption, email }),\n });\n\n if (!resp.ok) {\n const err = await resp.json();\n throw new Error(err.error || \"Upload failed\");\n }\n\n showStatus(\"Done! Your image is live at /display\");\n } catch (err: any) {\n showStatus(`Error: ${err.message}`);\n } finally {\n submitBtn.disabled = false;\n }\n});\n",[],[339,330],"frontend","29db9578-40a5-11f1-9e9e-42b51c65c3df","index.html","b089f826-4050-11f1-9bf6-42b51c65c3df",26,["D",1777121354088],7,"\n\n\n \n \n Kram-Beckman Wall Display\n \n \n \n \n \n\n\n

Kram-Beckman Wall Display

Upload an image and it'll show up on the wall of our living room. It gets resized to fit the screen. See what's currently displayed.

\n\n \n\n \n\n \n

\n\n \n\n\n",[],[339,341],"b044021c-4050-11f1-ba84-42b51c65c3df",["D",1777085072393],[318,319],[339],["D",1777219538148],[],[18,80],["D",1777219538174],[],[18,120],["D",1777085072479],[315,316],[18],"9656c41c-40a4-11f1-9f45-42b51c65c3df","settings.local.json","5a8d55da-4050-11f1-89ba-42b51c65c3df","5a7b3d50-4050-11f1-89ba-42b51c65c3df",24,["D",1777121106612],"{\n \"permissions\": {\n \"allow\": [\n \"Bash(vt create:*)\",\n \"Bash(vt status:*)\",\n \"Bash(vt val:*)\",\n \"Bash(vt clone:*)\",\n \"Bash(vt push:*)\",\n \"Bash(vt browse:*)\",\n \"mcp__chrome-devtools__list_pages\",\n \"mcp__chrome-devtools__navigate_page\",\n \"mcp__chrome-devtools__take_screenshot\",\n \"mcp__chrome-devtools__take_snapshot\",\n \"mcp__chrome-devtools__upload_file\",\n \"mcp__chrome-devtools__click\",\n \"mcp__chrome-devtools__list_console_messages\",\n \"mcp__chrome-devtools__get_console_message\",\n \"mcp__chrome-devtools__list_network_requests\",\n \"mcp__chrome-devtools__evaluate_script\",\n \"mcp__chrome-devtools__wait_for\",\n \"mcp__chrome-devtools__fill\"\n ]\n }\n}\n",[],[371,363],".claude","5a7b3ca6-4050-11f1-89ba-42b51c65c3df",["D",1777084928464],[313],[371],["D",1777084928031],{"_11":12,"_259":86},{"_11":12,"_255":-5,"_85":86,"_31":84,"_256":257,"_258":30},{"_55":246,"_13":16,"_49":52,"_247":212,"_248":-5,"_249":-5,"_250":-5,"_251":-5,"_252":-5,"_253":14,"_254":12},"ctx",{"_68":-5,"_278":413,"_414":415,"_416":417,"_418":30,"_419":30,"_420":30,"_421":24,"_422":-5,"_423":-7,"_424":-7,"_425":26,"_426":30,"_427":30,"_428":-5,"_429":30,"_430":30,"_431":30,"_432":-5},"ENV",{"_384":385,"_386":387,"_388":16,"_389":390,"_391":392,"_393":394,"_395":396,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Uploaders

${title}

Kram-Beckman Wall Display

Preview (800×480)

History · backend