Frame generation endpoint

\n Visit the{\" \"}\n \n readme on val.town\n {\" \"}\n to get started.\n

In short, this endpoint is used to generate individual frames for an e-ink display.

Example frame previews

\n Frames data is fetched, cached, and displayed with val.town, then fetched and rendered on an e-ink\n display.\n

Here are my personal frames. Feel free to remix them and create your own.

\n {frame}\n

\n ,\n );\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n }\n\n // get ?&generate=image&frame=S0mth1ingKrAzy\n if (frameId && !frame_list.includes(frameId)) {\n const html = renderToString(\n \n

Invalid frame name

\n ,\n );\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n }\n\n const generateUrl = frames[frameId as keyof typeof frames];\n\n // get ?&generate=image&frame=weather\n if (isImageRequest) {\n const width = 800;\n const height = 480;\n\n const imageResponse = await generateImageFromHtml(generateUrl, width, height);\n return new Response(imageResponse.body, {\n status: imageResponse.status,\n headers: {\n \"Content-Type\": \"image/png\",\n },\n });\n } else {\n return new Response(\"Invalid request\", {\n status: 500,\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n }\n}","deleted","label",[124],"9a706f4c-1415-11f0-8285-569c3dd06744","generateImageFromHtml.ts","8028e164-1415-11f0-8d14-569c3dd06744",570,["D",1744074346631],2,"script","// Generates a screenshot using APIFlash.com from a url\n// API key required\n\n// TODO: Add caching of image\nexport default async function generateImageFromHtml(\n valUrl: string,\n width: number = 800,\n height: number = 480,\n): Promise {\n if (!valUrl) {\n return new Response(\"No url provided\", { status: 500 });\n }\n const apiKey = Deno.env.get(\"API_FLASH_KEY\");\n const generateUrl =\n `https://api.apiflash.com/v1/urltoimage?access_key=${apiKey}&url=${valUrl}&width=${width}&height=${height}&format=png&fresh=true`;\n\n try {\n const response = await fetch(generateUrl);\n if (!response.ok) {\n throw new Error(`APIFlash responded with status: ${response.status}`);\n }\n return response;\n } catch (error) {\n return new Response(\"Failed to generate image\", { status: 500 });\n }\n}",[140],"9f3c7fe2-3da1-11f0-898a-76b3cceeab13","components.tsx","22fb5b92-ff76-11ef-8445-569c3dd06744",593,["D",1748642481894],33,"/** @jsxImportSource https://esm.sh/react */\nimport React, { type ReactNode } from \"https://esm.sh/react\";\nimport { renderToString } from \"https://esm.sh/react-dom/server\";\n\n// Display components can be used to change the look and feel of each frame.\nexport function Header({ title = \"Eink\" }) {\n return (\n \n \n {title}\n \n {/* Getting a type error here */}\n {/* */}\n \n \n \n \n \n \n \n );\n}\n\nexport function Footer() {\n const currentDate = new Date().toLocaleDateString(\"en-US\", {\n timeZone: \"America/Los_Angeles\",\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n\n const currentTime = new Date().toLocaleTimeString(\"en-US\", {\n timeZone: \"America/Los_Angeles\",\n hour: \"numeric\",\n minute: \"numeric\",\n });\n\n return (\n

\n {currentDate}\n {currentTime}\n

\n );\n}\n\nexport function Headline({ text = \"Headline missing\" }: { text: string }) {\n return (\n

{text}

\n );\n}\n\nexport function Content(props: any) {\n return

{props.children}

;\n}\n\nexport function BodyWrapper(props: any) {\n return (\n \n

\n {props.children}\n

\n \n );\n}\n\nexport function App() {\n return (\n \n

\n \n \n \n

This is just a test. No content to find here yet.

\n \n

Branches1

Branches
1