Val Town Code SearchReturn to Val Town

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}

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:

16You can try a demo at <https://pomdtr-lastloginhonoexample.web.val.run> (see @pomdtr/lastLoginHonoExample for code)
17
18![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/cbabf6bc-27dd-489b-2153-a40957986100/public)
19
20## Usage

1
2![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7442086d-36b2-454d-bd5f-3c28615e9000/public)
3

2
3
4![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36674739-cd88-472c-df16-cd0b3a62bc00/public)
5
6Live demo: https://stevekrouse-lastlogin_demo.web.val.run/

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

97  const svg = render(badge);
98
99  return new Response(svg, { headers: { "Content-Type": "image/svg+xml;charset=utf-8" } });
100}

10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>

1/**
2 * This meme creation tool app will allow users to create memes by selecting an image and adding top and bottom text.
3 * We'll use HTML5 Canvas to render the meme directly in the browser, with custom positioning for different meme templates.
4 */
35  }, []);
36
37  const getTextPositions = (imageWidth: number, imageHeight: number, templateId: string): [TextPosition, TextPosition] => {
38    const defaultColor = "white";
39    switch (templateId) {
40      case "1": // Drake
41        return [
42          { x: imageWidth * 0.7, y: imageHeight * 0.25, maxWidth: imageWidth * 0.5, color: "black" },
43          { x: imageWidth * 0.7, y: imageHeight * 0.75, maxWidth: imageWidth * 0.5, color: "black" }
44        ];
45      case "2": // Distracted Boyfriend
46        return [
47          { x: imageWidth * 0.6, y: imageHeight * 0.1, maxWidth: imageWidth * 0.3, color: defaultColor },
48          { x: imageWidth * 0.8, y: imageHeight * 0.1, maxWidth: imageWidth * 0.3, color: defaultColor }
49        ];
50      case "3": // Two Buttons
51        return [
52          { x: imageWidth * 0.5, y: imageHeight * 0.1, maxWidth: imageWidth * 0.8, color: defaultColor },
53          { x: imageWidth * 0.5, y: imageHeight * 0.9, maxWidth: imageWidth * 0.8, color: defaultColor }
54        ];
55      case "4": // Expanding Brain
56        return [
57          { x: imageWidth * 0.5, y: imageHeight * 0.15, maxWidth: imageWidth * 0.8, color: defaultColor },
58          { x: imageWidth * 0.5, y: imageHeight * 0.95, maxWidth: imageWidth * 0.8, color: defaultColor }
59        ];
60      case "5": // Change My Mind
61        return [
62          { x: imageWidth * 0.5, y: imageHeight * 0.7, maxWidth: imageWidth * 0.8, color: defaultColor },
63          { x: imageWidth * 0.5, y: imageHeight * 0.9, maxWidth: imageWidth * 0.8, color: defaultColor }
64        ];
65      default:
66        return [
67          { x: imageWidth * 0.5, y: imageHeight * 0.1, maxWidth: imageWidth * 0.9, color: defaultColor },
68          { x: imageWidth * 0.5, y: imageHeight * 0.9, maxWidth: imageWidth * 0.9, color: defaultColor }
69        ];
70    }
78    if (!ctx) return;
79
80    const selectedImage = templates.find(t => t.id === selectedTemplate);
81    if (!selectedImage) return;
82
83    const image = new Image();
84    image.crossOrigin = "anonymous";
85    image.onload = () => {
86      canvas.width = image.width;
87      canvas.height = image.height;
88      ctx.drawImage(image, 0, 0);
89
90      const fontSize = Math.floor(image.height / 15);
91      ctx.font = `bold ${fontSize}px Impact, sans-serif`;
92      ctx.textAlign = "center";
93
94      const [topPosition, bottomPosition] = getTextPositions(image.width, image.height, selectedTemplate);
95
96      // Function to draw text with word wrap
131      setMemeUrl(canvas.toDataURL());
132    };
133    image.src = selectedImage.url;
134  };
135
164      </form>
165      <canvas ref={canvasRef} style={{ display: 'none' }}></canvas>
166      {memeUrl && <img src={memeUrl} alt="Generated Meme" className="meme-image" />}
167      <p>
168        <a href={import.meta.url.replace("esm.town", "val.town")} target="_blank">View Source</a>
247    background-color: #45a049;
248  }
249  .meme-image {
250    max-width: 100%;
251    display: block;

71          canvas.height = video.videoHeight;
72          canvas.width = video.videoWidth;
73          context.drawImage(video, 0, 0, canvas.width, canvas.height);
74          const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
75          addDebug(`Scanning frame: ${canvas.width}x${canvas.height}`);
76          const code = jsQR(imageData.data, imageData.width, imageData.height);
77
78          if (code) {