Function addIconElement

app.js:2950–3026

(icon)

}

async function addIconElement(icon) {
  const inferred = inferSizeFromPath(icon.file);
  const sizeW = inferred?.w || 32;
  const sizeH = inferred?.h || 32;
  const x = Math.max(0, Math.round((dispWidth - sizeW) / 2));
  const y = Math.max(0, Math.round((dispHeight - sizeH) / 2));

  // Try to convert the PNG to RGB565 so it can be emitted in TFT code output.
  let rgb565 = null;
  let monoBitmap = null;
  let iw = sizeW;
  let ih = sizeH;
  try {
    const converted = await loadPngToRgb565(withCacheBust(icon.url), bgColor, sizeW, sizeH, null);
    iw = converted.w;
    ih = converted.h;
    rgb565 = converted.rgb565;
    monoBitmap = converted.monoBitmap;
  } catch {
    // Keep preview-only if conversion fails (e.g., browser blocks canvas due to file/cors)
  }

  const id = makeId();
  const baseSym = safeSymbolFromPath(icon.file);
  const el = createElementWithDefaults("icon", {
    id,
    x,
    y,
    w: iw,
    h: ih,
    iconFile: icon.file,
    iconSrc: withCacheBust(icon.url),
    imageName: `icon_${baseSym}_${id.replace(/[^a-zA-Z0-9_]/g, "_")}`,
    imageWidth: iw,
    imageHeight: ih,
    rgb565: rgb565 || undefined,
    monoBitmap: monoBitmap || undefined
  });

  // Register asset for project re-use (embed PNG only if toggle is on and we can)
  try {
    const embed = assetsEmbedToggle ? !!assetsEmbedToggle.checked : false;
    const assetId = "asset_" + Math.random().toString(36).slice(2, 10);
    let dataUrl = null;
    if (embed) {
      // Best effort: reuse existing URL as dataUrl only if already a data: URL (otherwise keep null).
      dataUrl = String(el.iconSrc || "").startsWith("data:") ? el.iconSrc : null;
    }
    assets.push({
      id: assetId,
      name: safeSymbolFromPath(icon.file),
      kind: "icon",
      dataUrl,
      sourceName: icon.file,
      width: iw,
      height: ih,
      rgb565: rgb565 || undefined,
      monoBitmap: monoBitmap || undefined,