⬡ Atom Matrix

v${state.version} · poll every ${state.pollInterval}s

\n \n \n

📡 live — what the device is showing

\n ${Array(25).fill(0).map((_, i) =>\n `

`\n ).join(\"\\n \")}\n

\n \n \n

\n \n Device: ${timeAgo(state.lastCheckin)}\n Button: ${timeAgo(state.lastButtonPress)}\n ${state.deviceIP ? `IP: ${state.deviceIP}` : \"\"}\n

\n\n \n

🎛 Controls

🖼 Gallery (${gallery.length})

\n \n \n

\n Mode\n

\n ${([\"off\", \"fill\", \"smiley\", \"scroll\", \"animation\", \"static\"] as const).map(m =>\n ``\n ).join(\"\")}\n

\n \n

\n Brightness\n

\n \n ${state.brightness}\n

\n \n \n

\n Fill Color\n \n

\n \n \n

\n Face\n

\n \n \n

\n Colors\n

\n Face:\n \n BG:\n \n

\n \n \n

\n Text\n \n

\n Colors\n

\n Text:\n \n BG:\n \n

\n Speed\n

\n \n ${state.scrollSpeed}ms\n

\n \n \n

\n Animation (${state.frames.length} frames)\n

\n Frame delay:\n \n ${state.frameDelay}ms\n

\n Loop\n

\n Load animations from the Gallery tab, or deploy via API.\n

\n \n \n

\n Draw (click pixels)\n

\n \n \n

\n ${state.leds.map((c, i) =>\n `

`\n ).join(\"\")}\n

\n \n

\n Poll Interval\n

\n \n ${state.pollInterval}s\n

\n \n \n

\n ${gallery.length === 0 ? `

No saved states yet. Hit 💾 to save one!

` :\n gallery.map(item => renderGalleryItem(item)).join(\"\")}\n

\n \n \n

\n\n\n\n`;\n}\n\n// Used by server-side gallery rendering\nfunction renderGalleryItem(item: GalleryItem): string {\n return \"\"; // Gallery is rendered client-side now\n}\n","deleted","label",[103],"permalink","https://www.val.town/x/dcm31/atomMatrix/code/ui.tsx","extension","actionData","errors"]