Val Town Code SearchReturn to Val Town

1/**
2 * upload an image to val.town
3 * @param {Blob} image - image must have image/jpeg, image/png, image/webp, image/gif or image/svg+xml content-type
4 * @returns {string}   - uploaded image url
5 */
6export async function uploadImage(image: Blob): Promise<string> {
7  const fd = new FormData();
8  fd.append(
9    "file",
10    image,
11  );
12  const data = await (await fetch(await getUploadURL(), {
24}
25async function getUploadURL(): Promise<string> {
26  const data = await (await fetch("https://www.val.town/api/trpc/generateImageUploadUrl", {
27    "headers": {
28      "content-type": "application/json",

3
4import valTownBadge from "https://esm.town/v/jxnblk/valTownBadge?v=16";
5import { imageToAscii } from "https://esm.town/v/maxm/imageToAscii";
6import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo";
7import { Hono } from "npm:hono@3";
35      document.getElementById("message").style.display = "none";
36      document.getElementById("close-btn").style.display = "flex";
37      await fetchImage(id);
38    };
39
152                    <p>
153                      Click on a circle to select a traffic camera. <br />{" "}
154                      The traffic images will be converted to ASCII and streamed to your browser.
155                      <br /> <a className="underline" href={info.htmlUrl}>Source code & info</a>.
156                    </p>
196);
197app.get("/camera-ascii/:id", async (c) => {
198  const url = "https://webcams.nyctmc.org/api/cameras/" + c.req.param("id") + "/image";
199  const { stringColor } = await imageToAscii(url, 150);
200  return new Response(stringColor, { headers: { "Content-Type": "text/plain" } });
201});
203  "/camera/:id",
204  async (c) => {
205    const url = "https://webcams.nyctmc.org/api/cameras/" + c.req.param("id") + "/image";
206    const { string, stringColor } = await imageToAscii(url, 150);
207    return new Response(
208      `<style>
228  <p class="loading"></p>
229  <p>
230    <a target="_blank" href="${url}">view source image</a>
231  </p>
232  <script>
258app.get("/camera-text-stream/:id", async (c) => {
259  let timerId: number | undefined;
260  const url = "https://webcams.nyctmc.org/api/cameras/" + c.req.param("id") + "/image";
261  const body = new ReadableStream({
262    async start(controller) {
264        controller.enqueue(new TextEncoder().encode("data: " + JSON.stringify(msg) + "\r\n\r\n"));
265      };
266      const { stringColor } = await imageToAscii(url, 150);
267      write(stringColor);
268      timerId = setInterval(async () => {
269        const { stringColor } = await imageToAscii(url, 150);
270        write(stringColor);
271      }, 2000);

1import { imageToAscii } from "https://esm.town/v/maxm/imageToAscii";
2
3export default async function(req: Request): Promise<Response> {
4  const { string, stringColor } = await imageToAscii(
5    "https://webcams.nyctmc.org/api/cameras/9fa5b0dd-e955-449e-97e1-9c53ad9c23a8/image",
6    150,
7  );

25
26// Converted from: https://github.com/victorqribeiro/imgToAscii/blob/ca7e181b9bb9770798ed3a0d3dfeb344c60953f2/src/imgToAscii.js
27import { createCanvas, loadImage } from "https://deno.land/x/canvas@v1.4.1/mod.ts";
28export async function imageToAscii(src: string, maxWidth?: number) {
29  let string = "";
30  let stringColor = "";
38            "`","'","."," "]
39  }
40  const image = await loadImage(src);
41  let width = image.width();
42  const scale = maxWidth ? maxWidth / width : 1;
43  const height = Math.floor(image.height() * scale * 0.6);
44  width = Math.floor(width * scale);
45  const canvas = createCanvas(width, height);
46  const context = canvas.getContext("2d");
47  context.drawImage(image, 0, 0, canvas.width, canvas.height);
48  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
49  let grayStep = Math.ceil(255 / alphabet[charType].length);
50  for (let i = 0; i < imageData.data.length; i += 4) {
51    for (let j = 0; j < alphabet[charType].length; j++) {
52      let r = imageData.data[i];
53      let g = imageData.data[i + 1];
54      let b = imageData.data[i + 2];
55      if ((r * 0.2126) + (g * 0.7152) + (b * 0.0722) < (j + 1) * grayStep) {
56        const char = alphabet[charType][j];

1# ASCII NYC Traffic Cameras
2
3All of NYC's traffic cameras available as streaming ASCII images: https://maxm-asciinyccameras.web.val.run/
4
5<p align=center>
6<a href="https://maxm-asciinyccameras.web.val.run/">
7<!-- <img width=700 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/9c4e7e22-ae90-420e-4238-df0013d2a300/public"> --> 
8<img width=700 src="https://i.imgur.com/83LBOcN.gif">
9</a>
12
13
14NYC has a bunch of traffic cameras and makes them available through static images [like this one](https://webcams.nyctmc.org/api/cameras/858ef4e8-5058-4db2-96e2-70f71b65aa24/image). If you refresh the page you'll see the image update every 2 seconds or so. I thought it might be fun to make these cameras viewable as an ASCII art video feed. I made a [small library](https://www.val.town/v/maxm/imageToAscii) that takes most of its logic from [this repo](https://github.com/victorqribeiro/imgToAscii). You can see a basic example of how to convert [any image to ASCII here](https://www.val.town/v/maxm/asciiImageExample). 
15
16I pull in [NYC GeoJSON from here](https://observablehq.com/@miaozhang/maps) and then hook up a Server-Sent Events endpoint to stream the ASCII updates to the browser. (Polling would work just as well, I've just been on a bit of a SSE kick lately.)

1null
2
3Migrated from folder: asciiNyc/asciiImageExample

106      Your description should include:
107      - What content is on the page
108      - Other elements like sidebars, links, images that may be in the page
109      - The author and origin of the page
110      - The stylistic aesthetic of the page
143      - A footer with author information.
144      - Some reasonable links in the body text.
145      - An image. You can create an image by using the following markup:
146        <img src="https://maxm-imggenurl.web.val.run/{your image alt text}" height={image height} />
147      - Specific, concrete information only. NEVER use placeholders or other generic text.
148      `,

3Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .
4
5![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e2a6db10-906d-4398-6e13-32475a0b6500/public)
6

1
2![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/2c54c8e1-7549-4e8b-3adc-7ec013fc3e00/public)
3

3Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .
4
5![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e2a6db10-906d-4398-6e13-32475a0b6500/public)
6