[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_213":214,"_215":216},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",12,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/index.html","latestPath","fileId","b089f826-4050-11f1-9bf6-42b51c65c3df","name","index.html","fileType","content","\n\n\n \n \n TRMNL Image Upload\n \n \n\n\n

TRMNL Image Upload

Upload an image to display on your TRMNL. It will be resized to 800×480 and dithered to 1-bit black & white.

\n\n \n\n

\n\n

Preview (1-bit dithered)

\n\n \n\n\n","\n\n\n \n \n TRMNL Image Upload\n \n \n\n\n

TRMNL Image Upload

Upload an image to display on your TRMNL. It will be resized to 800×480 and dithered to 1-bit black & white.

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

\n\n \n\n\n","createdAt",["D",1777085792104],"branchVersion","branchId","5a3889ce-4050-11f1-99d7-42b51c65c3df","id","5a38035a-4050-11f1-99d7-42b51c65c3df","trmnlImage",["D",1777084928031],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Backend for TRMNL screenshot plugin","imageUrl","f8d90ec1-81be-4efc-b861-a032f3f5b85f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","b1ec36cc-9d04-4938-872f-34bf39599d6a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",39,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","joshbeckman","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJTZm1HaHJGdDFmQ2s5ME05RW9lT1JGbHZPYyIsImluaXRpYWxzIjoiSkIifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":209,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":210,"_79":211,"_81":212,"_83":25},"tree",[161,163,165],"files",[161,162,163,164,165,166,167],"counts",{"_151":61,"_152":148,"_153":61,"_154":155,"_156":157},"contents",[126,127,128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":145,"_32":146,"_30":147,"_132":-5,"_41":42,"_40":148,"_134":121,"_38":149,"_13":61,"_34":136,"_35":-5,"_24":25,"_137":-5,"_27":150},{"_43":139,"_32":140,"_30":141,"_132":-5,"_41":42,"_40":142,"_134":121,"_38":143,"_13":61,"_34":136,"_35":-5,"_24":25,"_137":-5,"_27":144},{"_43":129,"_32":130,"_30":131,"_132":-5,"_41":42,"_40":133,"_134":121,"_38":135,"_13":61,"_34":136,"_35":-5,"_24":25,"_137":-5,"_27":138},"b044021c-4050-11f1-ba84-42b51c65c3df","frontend","b04402bc-4050-11f1-ba84-42b51c65c3df","parentId",3,"latest",["D",1777085072393],"directory","label",[130],"b0510c32-4050-11f1-bc39-42b51c65c3df","backend","b0510cf0-4050-11f1-bc39-42b51c65c3df",4,["D",1777085072479],[140],"5a7b3ca6-4050-11f1-89ba-42b51c65c3df",".claude","5a7b3d50-4050-11f1-89ba-42b51c65c3df",1,["D",1777084928464],[146],"pulls","branches","forks","envVars",{"_158":148,"_160":61},"connections",{"_158":61,"_159":61},"count","unfilledCount","emptyCount",{"_43":145,"_32":146,"_30":147,"_132":-5,"_41":42,"_40":148,"_134":121,"_38":206,"_13":61,"_34":136,"_35":-5,"_24":25,"_137":-5,"_175":207,"_27":208},{"_43":197,"_32":198,"_30":199,"_132":147,"_41":42,"_40":200,"_134":25,"_38":201,"_13":202,"_34":20,"_35":203,"_24":25,"_137":-5,"_175":204,"_27":205},{"_43":139,"_32":140,"_30":141,"_132":-5,"_41":42,"_40":142,"_134":121,"_38":194,"_13":61,"_34":136,"_35":-5,"_24":25,"_137":-5,"_175":195,"_27":196},{"_43":185,"_32":186,"_30":187,"_132":141,"_41":42,"_40":188,"_134":25,"_38":189,"_13":148,"_34":190,"_35":191,"_24":25,"_137":-5,"_175":192,"_27":193},{"_43":129,"_32":130,"_30":131,"_132":-5,"_41":42,"_40":133,"_134":121,"_38":182,"_13":61,"_34":136,"_35":-5,"_24":25,"_137":-5,"_175":183,"_27":184},{"_43":178,"_32":33,"_30":31,"_132":131,"_41":42,"_40":14,"_134":25,"_38":179,"_13":148,"_34":20,"_35":37,"_24":25,"_137":-5,"_175":180,"_27":181},{"_43":168,"_32":169,"_30":170,"_132":131,"_41":42,"_40":171,"_134":25,"_38":172,"_13":148,"_34":173,"_35":174,"_24":25,"_137":-5,"_175":176,"_27":177},"5d4704a4-4052-11f1-8905-42b51c65c3df","index.tsx","b07f8666-4050-11f1-89c3-42b51c65c3df",11,["D",1777085792103],"script","const form = document.getElementById(\"upload-form\") as HTMLFormElement;\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;\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\n// Floyd-Steinberg dithering to 1-bit\nfunction ditherToOneBit(ctx: CanvasRenderingContext2D) {\n const imageData = ctx.getImageData(0, 0, W, H);\n const { data, width, height } = imageData;\n\n // Convert to grayscale float array\n const gray = new Float32Array(width * height);\n for (let i = 0; i < gray.length; i++) {\n const r = data[i * 4];\n const g = data[i * 4 + 1];\n const b = data[i * 4 + 2];\n gray[i] = 0.299 * r + 0.587 * g + 0.114 * b;\n }\n\n // Floyd-Steinberg\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const idx = y * width + x;\n const old = gray[idx];\n const val = old < 128 ? 0 : 255;\n gray[idx] = val;\n const err = old - val;\n\n if (x + 1 < width) gray[idx + 1] += err * 7 / 16;\n if (y + 1 < height) {\n if (x > 0) gray[(y + 1) * width + (x - 1)] += err * 3 / 16;\n gray[(y + 1) * width + x] += err * 5 / 16;\n if (x + 1 < width) gray[(y + 1) * width + (x + 1)] += err * 1 / 16;\n }\n }\n }\n\n // Write back\n for (let i = 0; i < gray.length; i++) {\n const v = gray[i] < 128 ? 0 : 255;\n data[i * 4] = v;\n data[i * 4 + 1] = v;\n data[i * 4 + 2] = v;\n data[i * 4 + 3] = 255;\n }\n\n ctx.putImageData(imageData, 0, 0);\n}\n\nform.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n\n const file = fileInput.files?.[0];\n if (!file) return;\n\n submitBtn.disabled = true;\n showStatus(\"Processing image…\");\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 ditherToOneBit(ctx);\n previewSection.style.display = \"block\";\n\n showStatus(\"Uploading…\");\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 }),\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","children",[],[130,169],"5d5c0804-4052-11f1-8be1-42b51c65c3df",["D",1777085792104],[],[130,33],["D",1777085072393],[166,167],[130],"c044c48a-4050-11f1-8028-42b51c65c3df","index.ts","b073704c-4050-11f1-9b9c-42b51c65c3df",9,["D",1777085099219],"http","import { Hono } from \"https://esm.sh/hono\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\nconst BLOB_KEY = \"trmnl_image_data\";\n\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\napp.get(\"/frontend/*\", async (c) => {\n const { serveFile } = await import(\"https://esm.town/v/std/utils/index.ts\");\n return serveFile(c.req.path, import.meta.url);\n});\n\napp.post(\"/upload\", async (c) => {\n const body = await c.req.json();\n const { image, caption } = body;\n\n if (!image) {\n return c.json({ error: \"No image data provided\" }, 400);\n }\n\n await blob.setJSON(BLOB_KEY, { image, caption: caption || \"\" });\n return c.json({ ok: true });\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 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",[],[140,186],["D",1777085072479],[164],[140],"5d3e4f12-4052-11f1-bd90-42b51c65c3df","settings.local.json","5a8d55da-4050-11f1-89ba-42b51c65c3df",10,["D",1777085792081],2,"{\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 ]\n }\n}\n",[],[146,198],["D",1777084928464],[162],[146],["D",1777084928031],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":55,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_123":246,"_247":248,"_249":250,"_251":25,"_252":25,"_253":25,"_254":121,"_255":-5,"_256":-7,"_257":-7,"_258":61,"_259":25,"_260":25,"_261":-5,"_262":25,"_263":25,"_264":25,"_265":-5},"ENV",{"_217":218,"_219":220,"_221":85,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245},"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"]

Diff · v12