/** @jsxImportSource https://esm.sh/react */ import { renderToString } from "npm:react-dom/server"; import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge?v=16"; import { imageToAscii } from "https://esm.town/v/maxm/imageToAscii"; import { Hono } from "npm:hono@3"; const app = new Hono(); app.get("/", async (c) => { const frontendJS = () => { const width = 600; const height = 600; // Create SVG container const svg = d3.select("#map") .attr("width", width) .attr("height", height); // Define projection and path generator const projection = d3.geoMercator() .scale(50000) .center([-74.036242, 40.700610]) // Center on NYC .translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); document.getElementById("close-btn").style.display = "none"; if (document.location.hash) { document.getElementById("info-frame").src = "/camera/" + document.location.hash.slice(1); document.getElementById("message").style.display = "none"; document.getElementById("close-btn").style.display = "flex"; } document.getElementById("close-btn").addEventListener("click", () => { document.getElementById("message").style.display = "flex"; document.getElementById("close-btn").style.display = "none"; document.getElementById("info-frame").src = ""; document.location.hash = ""; }); // Load and render GeoJSON data d3.json("/nyc.geojson").then(function(data) { svg.selectAll("path") .data(data.features) .enter().append("path") .attr("d", path) .attr("fill", "white") .attr("stroke", "black"); // Add points svg.selectAll("circle") .data(points) .enter().append("circle") .attr("cx", d => projection([d.lng, d.lat])[0]) .attr("cy", d => projection([d.lng, d.lat])[1]) .attr("r", 5) .attr("class", "link") .on("click", function(event, d) { document.getElementById("message").style.display = "none"; document.getElementById("close-btn").style.display = "flex"; document.location.hash = d.id; document.getElementById("info-frame").src = "/camera/" + d.id; }) .on("mouseover", function(event, d) { d3.select(this).transition() .duration(200) .attr("r", 10) .attr("opacity", 1); d3.select(this).raise(); }) .on("mouseout", function(event, d) { d3.select(this).transition() .duration(200) .attr("r", 5) .attr("opacity", 0.6); }); }); }; let resp = await fetch("https://webcams.nyctmc.org/cameras/graphql", { "headers": { "content-type": "application/json", }, "body": JSON.stringify({ query: `query { cameras { id lat: latitude lng: longitude isOnline }}`, }), "method": "POST", }); const cameras = await resp.json(); return new Response( renderToString( (<> NYC Map with Points

ASCII NYC Traffic Cameras

Click on a circle to select a traffic camera.{" "} Source & info.
The traffic images will be converted to ASCII and streamed to your browser.

Traffic cameras and data sourced from{` `} here.

`, { headers: { "Content-Type": "text/html" } }, ); }, ); app.get("/camera-text-stream/:id", async (c) => { let timerId: number | undefined; const url = "https://webcams.nyctmc.org/api/cameras/" + c.req.param("id") + "/image"; const body = new ReadableStream({ async start(controller) { const write = (msg: string) => { controller.enqueue(new TextEncoder().encode("data: " + JSON.stringify(msg) + "\r\n\r\n")); }; const { stringColor } = await imageToAscii(url, 150); write(stringColor); timerId = setInterval(async () => { const { stringColor } = await imageToAscii(url, 150); write(stringColor); }, 2000); }, cancel() { if (typeof timerId === "number") { clearInterval(timerId); } }, }); return new Response(body, { headers: { "Content-Type": "text/event-stream", }, }); }); export default app.fetch;

amaranthSquirrel