Val Town Code SearchReturn to Val Town

4import { adjectives, animals, colors, Config, uniqueNamesGenerator } from "https://esm.sh/unique-names-generator";
5
6const DEFAULT_IMAGE_NAME = "untitled-<d><d>-<word>";
7const DEFAULT_SIZE = { width: 32, height: 32 };
8const SIZES = [
69  setSize,
70  clearCanvas,
71  saveImage,
72  imageName,
73  setImageName,
74  downloadImage,
75  savedImages,
76  loadImage,
77  deleteImage,
78  setShowSettings,
79  brushSize,
101    <div className="control-group">
102      <button onClick={clearCanvas}>Clear</button>
103      <button onClick={saveImage}>Save</button>
104    </div>
105    <div className="control-group">
106      <input
107        type="text"
108        value={imageName}
109        onChange={(e) => setImageName(e.target.value)}
110        placeholder="Image name"
111      />
112      <button onClick={() => downloadImage(imageName)} className="download-btn">
113        <span className="download-icon">⬇️</span>
114      </button>
118        onChange={(e) => {
119          if (e.target.value) {
120            loadImage(e.target.value);
121            e.target.value = "";
122          }
123        }}
124      >
125        <option value="">Load image</option>
126        {savedImages.map((name) => (
127          <option key={name} value={name}>
128            {name}
133        onChange={(e) => {
134          if (e.target.value) {
135            deleteImage(e.target.value);
136            e.target.value = "";
137          }
138        }}
139      >
140        <option value="">Delete image</option>
141        {savedImages.map((name) => (
142          <option key={name} value={name}>
143            {name}
158        <h2>Settings</h2>
159        <label>
160          Default Image Name:
161          <input
162            type="text"
196  const [isDrawing, setIsDrawing] = useState(false);
197  const [isPainting, setIsPainting] = useState(false);
198  const [imageName, setImageName] = useState(DEFAULT_IMAGE_NAME);
199  const [savedImages, setSavedImages] = useState<string[]>([]);
200  const [showSettings, setShowSettings] = useState(false);
201  const [settings, setSettings] = useState({
202    defaultName: DEFAULT_IMAGE_NAME,
203    colorScheme: "pitaya",
204  });
207
208  useEffect(() => {
209    const saved = localStorage.getItem("savedImagesList");
210    if (saved) {
211      setSavedImages(JSON.parse(saved));
212    }
213    const savedSettings = localStorage.getItem("settings");
228
229  useEffect(() => {
230    setImageName(generateName(settings.defaultName));
231  }, [settings.defaultName]);
232
308  }, [size]);
309
310  const saveImage = useCallback(() => {
311    const imageData = JSON.stringify({ name: imageName, size, pixels });
312    localStorage.setItem(`image_${imageName}`, imageData);
313    setSavedImages(prev => {
314      const newSavedImages = [...new Set([...prev, imageName])];
315      localStorage.setItem("savedImagesList", JSON.stringify(newSavedImages));
316      return newSavedImages;
317    });
318    setImageName(generateName(settings.defaultName));
319  }, [imageName, size, pixels, settings.defaultName]);
320
321  const loadImage = useCallback((name: string) => {
322    if (confirm(`Are you sure you want to load "${name}"? This will overwrite your current work.`)) {
323      const imageData = localStorage.getItem(`image_${name}`);
324      if (imageData) {
325        const { size: loadedSize, pixels: loadedPixels } = JSON.parse(imageData);
326        setSize(loadedSize);
327        setPixels(loadedPixels);
328        setImageName(name);
329      }
330    }
331  }, []);
332
333  const deleteImage = useCallback((name: string) => {
334    if (confirm(`Are you sure you want to delete "${name}"? This action cannot be undone.`)) {
335      localStorage.removeItem(`image_${name}`);
336      setSavedImages(prev => {
337        const newSavedImages = prev.filter(img => img !== name);
338        localStorage.setItem("savedImagesList", JSON.stringify(newSavedImages));
339        return newSavedImages;
340      });
341    }
342  }, []);
343
344  const downloadImage = useCallback((customName: string) => {
345    const canvas = document.createElement("canvas");
346    canvas.width = size.width;
364    const fileName = `${customName || generateName(settings.defaultName)}-1bit-${size.width}x${size.height}.bmp`;
365    link.download = fileName;
366    link.href = canvas.toDataURL("image/bmp");
367    link.click();
368  }, [pixels, size, settings.defaultName]);
401          setSize={setSize}
402          clearCanvas={clearCanvas}
403          saveImage={saveImage}
404          imageName={imageName}
405          setImageName={setImageName}
406          downloadImage={downloadImage}
407          savedImages={savedImages}
408          loadImage={loadImage}
409          deleteImage={deleteImage}
410          setShowSettings={setShowSettings}
411          brushSize={brushSize}
589  appearance: none;
590  padding-right: 30px;
591  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%230f0' d='M0 0l4 4 4-4z'/%3E%3C/svg%3E");
592  background-repeat: no-repeat;
593  background-position: right 10px center;

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:

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:

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:

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:

4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>

1A smol tool to design smol 1-bit bitmap images 
2
3mostly for my raspberry pi's 128x32 OLED display

12      <meta property="of:accepts:xmtp" content="2024-02-09" />
13
14      <meta property="fc:frame:image" content={prefixUrl(frame.image)} />
15      <meta property="fc:frame:image:aspect_ratio" content={aspectRatio} />
16      <meta property="of:image" content={prefixUrl(frame.image)} />
17      <meta property="of:image:aspect_ratio" content={aspectRatio} />
18      <meta property="og:image" content={prefixUrl(frame.image)} />
19
20      {frame.buttons.map((b, i) => (

1/**
2 * This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image processing.
3 * It allows users to upload images, specify output options, and generate a composite thumbnail image.
4 * The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality.
5 * 
6 * The process is divided into two steps:
7 * 1. Generating thumbnails: Users choose thumbnail size options and create individual thumbnails.
8 * 2. Rendering: Users can create and export the final composite image with options for format and quality.
9 * This two-step process allows changing format or quality without re-rendering the entire canvas.
10 * 
33    <h1>Thumbnail Maker</h1>
34    <div id="dropZone">
35      <p>📷 Drag & drop images here or click to select</p>
36      <input type="file" id="fileInput" multiple accept="image/*">
37    </div>
38    <div id="thumbnailOptions">
57        Output Format:
58        <select id="outputFormat">
59          <option value="image/png">PNG</option>
60          <option value="image/jpeg">JPEG</option>
61          <option value="image/webp">WebP</option>
62        </select>
63      </label><br>
74      <button id="downloadMetadataBtn">Download Metadata</button>
75    </div>
76    <div id="imagePreview"></div>
77  </div>
78</body>
138select {
139  appearance: none;
140  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z' fill='%23333'/%3E%3C/svg%3E");
141  background-repeat: no-repeat;
142  background-position: right 10px center;
204}
205
206#imagePreview {
207  margin-top: 20px;
208  text-align: center;
209}
210
211#imagePreview img {
212  max-width: 100%;
213  height: auto;
231const keepAspectRatio = document.getElementById('keepAspectRatio');
232const thumbWidth = document.getElementById('thumbWidth');
233const imagePreview = document.getElementById('imagePreview');
234const thumbnailOptions = document.getElementById('thumbnailOptions');
235const renderOptions = document.getElementById('renderOptions');
249  renderOptions.style.display = 'none';
250  downloadSection.style.display = 'none';
251  imagePreview.innerHTML = '';
252  thumbnailCanvas = null;
253  thumbnailMetadata = null;
274  event.preventDefault();
275  dropZone.classList.remove('drag-over');
276  files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/'));
277  resetToStep1();
278});
289  progressBar.value = 0;
290
291  const image0 = await getImage(files[0]);
292  const cols = Math.ceil(Math.sqrt(files.length));
293  const rows = Math.ceil(files.length / cols);
294  const tHeight = parseInt(thumbHeight.value);
295  let tWidth = keepAspectRatio.checked
296    ? Math.floor(tHeight / image0.height * image0.width)
297    : parseInt(thumbWidth.value);
298
300  const canvasHeight = rows * tHeight;
301
302  image0.revoke();
303
304  thumbnailCanvas = new OffscreenCanvas(canvasWidth, canvasHeight);
310    const row = Math.floor(i / cols);
311
312    const img = await getImage(file);
313    ctx.drawImage(img, col * tWidth, row * tHeight, tWidth, tHeight);
314    img.revoke();
315
343  const blob = await thumbnailCanvas.convertToBlob({
344    type: outputFormat.value,
345    quality: outputFormat.value !== 'image/png' ? parseFloat(outputQuality.value) : undefined
346  });
347
351  downloadSection.style.display = 'flex';
352
353  // Display the generated image
354  const img = document.createElement('img');
355  img.src = url;
356  imagePreview.innerHTML = '';
357  imagePreview.appendChild(img);
358
359  progressBar.style.display = 'none';
375});
376
377function getImage(file) {
378  return new Promise((resolve) => {
379    const url = URL.createObjectURL(file);
380    const img = new Image();
381    img.revoke = () => URL.revokeObjectURL(url);
382    img.onload = () => resolve(img);

135      <link
136        rel="icon"
137        href="data:image/avif;base64,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"
138      />
139      <title>rss viewer</title>