Val Town Code SearchReturn to Val Town

10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>

10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

16      "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" ",
17    ),
18    { headers: { "Content-Type": "image/svg+xml" } },
19  );
20}

17            <meta name="viewport" content="width=device-width, initial-scale=1.0">
18            <title>hello, resume</title>
19            <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='50%' font-size='24' text-anchor='middle' x='50%' dy='.3em'>📄</text></svg>">
20            <style>
21              ${helloResume}

1# uploadImage
2uploads an image to val.town just like when you paste an image into a readme

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];