Val Town Code SearchReturn to Val Town

11  let html = `<h1>${valTownInspo.title}</h1>
12  <p>${valTownInspo.description}</p>
13  <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14  <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15

11  let html = `<h1>${valTownInspo.title}</h1>
12  <p>${valTownInspo.description}</p>
13  <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14  <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15

11  let html = `<h1>${valTownInspo.title}</h1>
12  <p>${valTownInspo.description}</p>
13  <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14  <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15

1## MOVED TO: [https://www.val.town/x/michaelwschultz/frame](https://www.val.town/x/michaelwschultz/frame)
2
3### Gathers information and returns an image of this val
4
5### Why
14actually draw things to a screen like all the e-ink display libraries.
15
16Migrated from folder: Archive/generateframeImage

11  let html = `<h1>${valTownInspo.title}</h1>
12  <p>${valTownInspo.description}</p>
13  <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14  <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15

221        left: `${petState.x}px`,
222        top: `${petState.y}px`,
223        backgroundImage:
224          `url('https://ipfs.io/ipfs/bafybeib5iedrzr7unbp4zq6rkrab3caik7nw7rfzlcfvu4xqs6bfk7dgje/${spriteNum}.png')`,
225        backgroundPosition: `-${petState.frameIndex * SPRITE_SIZE}px -${ROW_INDEX[petState.animation] * SPRITE_SIZE}px`,
288    height: calc(var(--scale) * 32px);
289    background-size: calc(var(--scale) * 512px) calc(var(--scale) * 256px);
290    image-rendering: pixelated;
291  }
292

35    <h1>Thumbnail Maker</h1>
36    <div id="dropZone">
37      <p>📷 Drag & drop images here or click to select</p>
38      <input type="file" id="fileInput" multiple accept="image/*">
39    </div>
40    <div id="thumbnailOptions">
59        Output Format:
60        <select id="outputFormat">
61          <option value="image/png">PNG</option>
62          <option value="image/jpeg">JPEG</option>
63          <option value="image/webp">WebP</option>
64        </select>
65      </label><br>
76      <button id="downloadMetadataBtn">Download Metadata</button>
77    </div>
78    <div id="imagePreview"></div>
79  </div>
80</body>
140select {
141  appearance: none;
142  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");
143  background-repeat: no-repeat;
144  background-position: right 10px center;
206}
207
208#imagePreview {
209  margin-top: 20px;
210  text-align: center;
211}
212
213#imagePreview img {
214  max-width: 100%;
215  height: auto;
233const keepAspectRatio = document.getElementById('keepAspectRatio');
234const thumbWidth = document.getElementById('thumbWidth');
235const imagePreview = document.getElementById('imagePreview');
236const thumbnailOptions = document.getElementById('thumbnailOptions');
237const renderOptions = document.getElementById('renderOptions');
251  renderOptions.style.display = 'none';
252  downloadSection.style.display = 'none';
253  imagePreview.innerHTML = '';
254  thumbnailCanvas = null;
255  thumbnailMetadata = null;
276  event.preventDefault();
277  dropZone.classList.remove('drag-over');
278  files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/'));
279  resetToStep1();
280});
291  progressBar.value = 0;
292
293  const image0 = await getImage(files[0]);
294  const cols = Math.ceil(Math.sqrt(files.length));
295  const rows = Math.ceil(files.length / cols);
296  const tHeight = parseInt(thumbHeight.value);
297  let tWidth = keepAspectRatio.checked
298    ? Math.floor(tHeight / image0.height * image0.width)
299    : parseInt(thumbWidth.value);
300
302  const canvasHeight = rows * tHeight;
303
304  image0.revoke();
305
306  thumbnailCanvas = new OffscreenCanvas(canvasWidth, canvasHeight);
312    const row = Math.floor(i / cols);
313
314    const img = await getImage(file);
315    ctx.drawImage(img, col * tWidth, row * tHeight, tWidth, tHeight);
316    img.revoke();
317
345  const blob = await thumbnailCanvas.convertToBlob({
346    type: outputFormat.value,
347    quality: outputFormat.value !== 'image/png' ? parseFloat(outputQuality.value) : undefined
348  });
349
353  downloadSection.style.display = 'flex';
354
355  // Display the generated image
356  const img = document.createElement('img');
357  img.src = url;
358  imagePreview.innerHTML = '';
359  imagePreview.appendChild(img);
360
361  progressBar.style.display = 'none';
377});
378
379function getImage(file) {
380  return new Promise((resolve) => {
381    const url = URL.createObjectURL(file);
382    const img = new Image();
383    img.revoke = () => URL.revokeObjectURL(url);
384    img.onload = () => resolve(img);

2
3<div align="center">
4  <img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/b1963886-2c4e-4aac-34ec-4c0a50539a00/public" />
5</div>
6

9  name: string;
10  description: string;
11  image: {
12    url: string;
13    ipfs_cid: string;
14  };
15  backgroundImage: {
16    url: string;
17    ipfs_cid: string;
22const fallbackUrl = "https://ipfs.near.social/ipfs/bafkreibmiy4ozblcgv3fm3gc6q62s55em33vconbavfd2ekkuliznaq3zm";
23
24const getImageUrl = (image?: { url?: string; ipfs_cid?: string }) => {
25  if (image?.url) return image.url;
26  if (image?.ipfs_cid) return `https://ipfs.near.social/ipfs/${image.ipfs_cid}`;
27  return fallbackUrl;
28};
122    <div
123      className="min-h-screen w-full bg-cover bg-center flex flex-col justify-center items-center py-16 margin-auto relative"
124      style={{ backgroundImage: loading ? "none" : `url(${getImageUrl(profile?.backgroundImage) || ""})` }}
125    >
126      <div className="bg-white bg-opacity-95 p-8 rounded-xl shadow-2xl text-center max-w-2xl w-full lg:max-w-[1024px] w-full z-10 backdrop-blur-sm">
129            {showBirthdayBanner && <BirthdayBanner name={profile?.name ?? accountId} />}
130            <img
131              src={getImageUrl(profile?.image)}
132              alt={profile?.name}
133              className="w-32 h-32 rounded-full object-cover mx-auto mb-4 shadow-lg"

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
7## Installation