make.html

---
title: Make a Tag
layout: single
description: A tool to make the RFID tag data for an OpenTag3D tag.
---

<style>
  * {
    box-sizing: border-box;
  }
  label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
  }
  input,
  select,
  textarea {
    width: 100%;
  }
  input:hover,
  select:hover,
  textarea:hover {
    border-color: color-mix(in srgb, var(--input-border), var(--accent));
  }
  input:focus,
  select:focus,
  textarea:focus {
    border-color: var(--accent);
  }
  input[data-unit="RGBA"] {
    background-size: cover;
    text-shadow:
      0 0 1px black,
      0 0 2px black,
      0 0 3px black,
      0 0 4px black,
      0 0 5px black,
      0 0 6px black,
      0 0 7px black,
      0 0 8px black;
  }
  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .help {
    font-size: 12px;
    color: var(--muted);
    margin-top: 6px;
  }
  .pill {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    background: #0c1220;
    border: 1px solid var(--border);
    padding: 6px 10px;
    border-radius: 999px;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
  }
  .divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
  }
  .flex > div {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .muted {
    color: var(--muted);
  }
  .kv {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px;
  }
  .scroll {
    max-height: 420px;
    overflow: auto;
  }
  .section {
    margin-bottom: 2em;
  }
  summary.btn {
    padding: 0.35em 1em;
  }
  pre {
    margin: 0;
    padding: 12px;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th,
  td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 13px;
  }
  th {
    position: sticky;
    top: 0;
    background: var(--input);
  }
  .field-row {
    border: 1px dashed rgba(0, 0, 0, 0);
    padding: 10px;
    border-radius: 8px;
    transition: border-color 0.2s;
  }
  .chip {
    display: inline-block;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 12px;
    margin-right: 6px;
  }
  div[hidden] {
    display: none;
  }
  .invalid {
    border-color: var(--error);
  }

  #controls {
    margin-bottom: 1em;
  }

  @media screen and (max-width: 900px), screen and (max-device-width: 900px) {
    .grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media screen and (max-width: 600px), screen and (max-device-width: 600px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }
</style>

<p>This is a utility to create RFID tag data to be written to your tags.</p>

<p>
  See the
  <a href="/getting-started#2-write-your-own-tags">Getting Started</a> guide for
  how to write tag data to NFC tags.
</p>

<main>
  <div id="controls" class="flex-inner">
    <details class="btn-menu" role="button">
      <summary class="btn btn--warning">Read / Import</summary>
      <div class="btn-menu__panel">
        <button class="btn" id="readWebNFC" disabled>
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/icons8-nfc.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Read via Web NFC
        </button>
        <button class="btn" id="loadFileBtn">
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/icons8-archive.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Load File
        </button>
        <button class="btn" id="loadClipboardBtn">
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/icons8-clipboard.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Load from Clipboard
        </button>
      </div>
    </details>
    <details class="btn-menu" role="button">
      <summary class="btn btn--warning">Write / Export</summary>
      <div class="btn-menu__panel">
        <button class="btn" id="writeWebNFC" disabled>
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/icons8-nfc.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Write via Web NFC
        </button>
        <button class="btn" id="downloadBin">
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/icons8-archive.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Download Raw Data .bin
        </button>
        <button class="btn" id="downloadProxmark3Bin">
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/icons8-rfid_tag.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Download Proxmark3 .bin
        </button>
        <button class="btn" id="downloadFlipper">
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/flipperzero.png' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Download Flipper .nfc
        </button>
        <button class="btn" id="downloadNfcToolsDesktopJson">
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/nfc-tools.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Download NFC Tools Desktop .json
        </button>
        <button class="btn" id="downloadNfcToolsMobileJson">
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/nfc-tools.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Download NFC Tools Mobile .json
        </button>
        <button class="btn" id="copyToClipboard">
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/icons8-clipboard.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Copy Hex to Clipboard
        </button>
        <button class="btn" id="copyLink">
          <img
            class="control-icon"
            src="{{ '/assets/images/icons/mdi-link.svg' | relative_url }}"
            alt=""
            aria-hidden="true"
          />
          Copy Share Link
        </button>
      </div>
    </details>
    <details class="btn-menu" role="button">
      <summary class="btn btn--info">Fill Examples</summary>
      <div class="btn-menu__panel">
        <button class="btn btn--info" id="exampleBtn">
          Fill Examples (Required Only)
        </button>
        <button class="btn btn--info" id="allExampleBtn">
          Fill Examples (All Data)
        </button>
      </div>
    </details>
    <button class="btn btn--danger" id="resetBtn">Reset</button>
    <button class="btn btn--info" id="helpButton">Help</button>
    <input
      type="file"
      id="uploadFile"
      accept=".bin,.nfc,.txt,.hex,.json"
      style="display: none"
    />
  </div>
  <details class="scroll" id="hexdumpBox">
    <summary>Show hex dump</summary>
    <pre id="hexdump" class="mono"></pre>
  </details>
  <br />

  <div id="formHost">
    <!-- Dynamic form renders here -->
  </div>

  <br />

  <p style="font-size: 50%; opacity: 0.5; text-align: center">
    Unfortunately, this tool was written primarily using AI to expedite the
    development process. If anything is not working right, please let us know.
  </p>
</main>

<dialog
  id="webNfcDialog"
  class="app-dialog"
  aria-labelledby="webNfcDialogTitle"
>
  <div class="web-nfc-dialog__content">
    <h2 id="webNfcDialogTitle">Web NFC</h2>
    <p id="webNfcDialogMessage"></p>
    <button class="btn" id="webNfcDialogClose" type="button">Cancel</button>
  </div>
</dialog>

<dialog
  id="helpDialog"
  class="app-dialog app-dialog-wide"
  aria-labelledby="helpDialogTitle"
>
  <div class="web-nfc-dialog__content">
    <h2 id="helpDialogTitle">How to Use</h2>
    <p>
      This utility is designed to help you create OpenTag3D tag data to be
      written onto RFID tags, which can then be written directly with Web NFC
      (on Android) or via a number of tools.
    </p>
    <h3>Generating Tag Data</h3>
    <p>
      To write tag data, simply fill out all of the applicable fields on the
      form. Fields with a red asterisk next to their name are required fields
      and must be filled out. All other fields are optional.
    </p>
    <p>
      You can also import existing tag data, either by reading it via Web NFC
      (on Android) or loading a previously exported file.
    </p>
    <h3>Exporting Tag Data</h3>
    <p>
      Once you have filled out all of the fields, you can export the tag data to
      be written to a real tag in a few ways:
    </p>
    <ul>
      <li>Direct Write via Web NFC</li>
      <li>Proxmark3-Ready .bin</li>
      <li>Flipper Zero .nfc</li>
      <li>NFC Tools for Desktop</li>
      <li>NFC Tools for Mobile</li>
    </ul>
    <p>
      If you're not sure which format to use, the easiest way to write tags is
      to use Web NFC (on Android).
    </p>
    <h4>Write via Web NFC</h4>
    <p>
      To write tag data via Web NFC, simply press the button and then hold an
      NFC tag up to the phone's RFID antenna. The antenna is usually placed next
      to the back camera, but may be in the center of the phone on some models.
      Once the tag is detected, the writing process will start. Hold the tag in
      place until the writing process is finished.
    </p>
    <h4>Write via Proxmark3</h4>
    <p>
      To write tag data via a Proxmark3, download the Proxmark3 .bin file. Then,
      in a terminal, launch <code>pm3</code> and run
      <code>hf mfu restore -f [/path/to/file.bin]</code>.
    </p>
    <h4>Write via Flipper Zero</h4>
    <p>
      Download the .nfc file and upload it to your Flipper Zero using qFlipper
      (or directly to the SD card). Then, you can emulate the tag or write it to
      a real tag via the NFC app on the Flipper.
    </p>
    <h4>Write via NFC Tools Desktop</h4>
    <p>
      To write tag data via NFC Tools for Desktop, download the NFC Tools
      Desktop .json. Then, in the app, go to Write > More > Open and load the
      .json file. Click the Write button once you've got a tag on your NFC
      reader.
    </p>
    <h4>Write via NFC Tools Mobile</h4>
    <p>
      The NFC Tools mobile app supports writing data directly within the app!
      Simply tap Write > Add Record > 3D Printing and change the format to
      "OpenTag3D", then fill out the information.
    </p>
    <p>
      Alternatively, you can export a .json file to import into NFC Tools.
      Simply download the NFC Tools Mobile .json file to your phone, then load
      the profile via My Saved Tags > Import. You can then write the data by
      going to Write > More options > Load and select the profile.
    </p>
    <button class="btn" id="helpDialogClose" type="button">Close</button>
  </div>
</dialog>

<script>
  /* prettier-ignore-start */

  // Spec comes from site.data.spec (Jekyll).
  const SPEC = {{site.data.spec | jsonify}};

  /* prettier-ignore-end */
</script>

<script src="{{ '/assets/scripts/opentag3d-core.js' | relative_url }}"></script>

<script>
  const tagState = {
    values: new Map(),
    buffer: null,
    hash: null,
    filename: "",
  };

  const inputSynchronizers = new WeakMap();

  const hexdumpElement = document.getElementById("hexdump");
  const webNfcDialog = document.getElementById("webNfcDialog");
  const flipperZeroWarningDialog = document.getElementById(
    "flipperZeroWarningDialog",
  );
  const helpDialog = document.getElementById("helpDialog");

  const checkMissing = () => {
    if (document.querySelectorAll(".field-row.invalid").length) {
      msg("Please fill out all required fields first", true);
      return true;
    }
    return false;
  };

  // --- Rendering ---
  const renderForm = (includeUrlParams = true) => {
    const host = document.getElementById("formHost");
    host.innerHTML = "";

    const box = h("div", { class: `grid` });
    for (const f of allFields) {
      if (f.id === "tag_version") continue;
      const row = h("div", {
        class: "field-row",
        "data-field": f.id,
      });
      const left = h("div");
      const label = h("label", {}, `${f.name}`);
      if (f.required) label.append(h("span", { class: "text--danger" }, "*"));
      left.append(label);
      left.append(renderInputForField(f, includeUrlParams));
      row.append(left);
      const meta = h(
        "div",
        { class: "help" },
        h("span", { class: "chip mono" }, `id:${f.id}`),
        h("span", { class: "chip mono" }, `addr:${f.start}`),
        h("span", { class: "chip mono" }, `len:${f.length}`),
        f.unit && !["string", "version"].includes(f.unit)
          ? h("span", { class: "chip" }, `unit:${f.unit}`)
          : "",
        f.scaling ? h("span", { class: "chip" }, `scaling:${f.scaling}`) : "",
      );
      row.append(meta);
      if (f.description) {
        row.append(h("div", { class: "help" }, f.description));
      }
      box.append(row);
    }
    host.append(box);
  };

  const syncInputValue = (input, fieldId, transform = (value) => value) => {
    const sync = () => {
      tagState.values.set(fieldId, transform(input.value));
    };
    inputSynchronizers.set(input, sync);
    input.addEventListener("input", () => {
      sync();
      buildMemory();
    });
    sync();
  };

  const setInputValue = (input, value) => {
    if (!input) return;
    input.value = value;
    inputSynchronizers.get(input)?.();
  };

  const renderInputForField = (f, includeUrlParams = true) => {
    // Calculate placeholder
    let placeholder = "";
    const firstExample = f.examples?.[0];
    if (firstExample !== undefined) {
      if (f.type === "int") {
        placeholder = firstExample * (f.scaling || 1);
      } else if (f.type === "rgba") {
        placeholder =
          "#" +
          firstExample
            .map((x) => x.toString(16).toUpperCase().padStart(2, "0"))
            .join("");
      } else {
        placeholder = firstExample;
      }
    }

    const paramValue = includeUrlParams ? urlParams.get(f.id) || "" : "";
    if (paramValue) tagState.values.set(f.id, paramValue);

    const commonParams = {
      id: f.id,
      "data-unit": f.unit,
      placeholder,
      value: paramValue,
    };

    if (f.required) {
      commonParams["required"] = true;
    }

    // Generic by type
    if (f.type === "rgba") {
      const placeholderValue = f.id === "color_1" ? "#FFFFFFFF" : "#00000000";

      const input = h("input", {
        ...commonParams,
        type: "text",
        value: paramValue ? fixHexRgba(paramValue) : placeholderValue,
      });

      const setBackground = (value) => {
        input.style.backgroundImage = `
          linear-gradient(135deg, ${value.slice(0, 7)} 0%, ${value.slice(0, 7)} 50%, ${value} 50%, ${value} 100%),
          url(/assets/images/transparency-grid.jpg)
        `;
      };

      const update = () => {
        const value = fixHexRgba(input.value);
        const rgba = rgbaFromHex(value);
        setBackground(value);
        tagState.values.set(f.id, rgba);
      };

      inputSynchronizers.set(input, update);
      input.addEventListener("input", () => {
        update();
        buildMemory();
      });
      input.addEventListener("focusout", () => {
        input.value = fixHexRgba(input.value);
      });
      update();

      return input;
    }
    if (f.type === "int") {
      const scale = f.scaling || 1;
      const inp = h("input", {
        ...commonParams,
        type: "number",
        min: 0,
        max: 255 * f.length * scale,
        step: scale,
      });

      const roundAndClip = (value) => {
        if (
          value === null ||
          value === undefined ||
          (typeof value === "string" && value.trim() === "")
        ) {
          return "";
        }

        let num = typeof value === "number" ? value : parseFloat(value);
        if (isNaN(num)) {
          return "";
        }

        if (scale !== 1) {
          const decimalPoints =
            scale < 1 ? String(scale).split(".")[1].length : 0;
          const rounded = Math.round(num / scale) * scale;
          num = parseFloat(rounded.toFixed(decimalPoints));
        }

        if (num < 0) {
          num = 0;
        } else if (num > inp.max) {
          num = inp.max;
        }

        return num;
      };

      syncInputValue(inp, f.id, roundAndClip);

      inp.addEventListener(
        "focusout",
        () => (inp.value = roundAndClip(inp.value)),
      );

      return inp;
    }
    if (f.type === "date") {
      const ph = new Date().toISOString().split("T")[0];
      const inp = h("input", {
        ...commonParams,
        type: "date",
        placeholder: ph,
      });
      syncInputValue(inp, f.id);
      return inp;
    }
    if (f.type === "time") {
      const ph = new Date().toISOString().split("T")[1].split(".")[0];
      const inp = h("input", {
        ...commonParams,
        type: "time",
        step: 1,
        placeholder: ph,
      });
      syncInputValue(inp, f.id);
      return inp;
    }

    // Text fallback
    const inp = h("input", {
      ...commonParams,
      type: "text",
      maxlength: f.length,
    });
    syncInputValue(inp, f.id);
    return inp;
  };

  // --- Building ---
  const buildMemory = () => {
    const size = parseHex(SPEC["core"].address_range.end) + 1;
    const buf = new Uint8Array(size + 1);
    buf.fill(0x00);

    // --- required validation helpers ---
    const isPresent = (f, val) => {
      if (!f.required) return true;
      if (f.type === "ascii" || f.type === "utf8")
        return typeof val === "string" && val.trim().length > 0;
      if (f.type === "rgba") return Array.isArray(val) && val.length === 4;
      if (f.type === "int") {
        if (val === undefined || val === null || val === "") return false;
        if (typeof val === "string" && val.trim() === "") return false;
        const n = typeof val === "number" ? val : Number(val);
        return Number.isFinite(n);
      }
      if (f.type === "date" || f.type === "time") {
        return typeof val === "string" && val.trim().length > 0;
      }
      return val !== undefined && val !== null && String(val).trim().length > 0;
    };

    tagState.values.set(
      "tag_version",
      Math.round(parseFloat(SPEC.version) * 1000),
    );

    const missing = allFields.filter(
      (f) => f.required && !isPresent(f, tagState.values.get(f.id)),
    );

    // highlight missing rows
    document
      .querySelectorAll("[data-field]")
      .forEach((el) => el.classList.remove("invalid"));
    for (const f of missing) {
      const row = document.querySelector(`[data-field="${f.id}"]`);
      if (row) row.classList.add("invalid");
    }

    const push = (addr, bytes) => {
      if (addr < 0 || addr + bytes.length > buf.length) {
        throw new Error(
          `Address ${addr} is out of range (length is ${buf.length}}`,
        );
      }
      buf.set(bytes, addr);
    };

    for (const f of allFields) {
      if (f.type === "-") continue;
      const addr = parseHex(f.start);
      const val = tagState.values.get(f.id);
      try {
        push(addr, encodeFieldValue(f, val));
      } catch (e) {
        throw new Error(`Error packing ${f.name}: ${e.message}`);
      }
    }

    // Update hexdump
    hexdumpElement.textContent = hexdump(buf);

    tagState.buffer = buf;
    tagState.hash = generateHash(buf.toString()).slice(0, 8);
    tagState.filename = `OpenTag3D_${tagState.values.get("manufacturer")}_${tagState.values.get("material")}${tagState.values.get("material_mod") ? "-" + tagState.values.get("material_mod") : ""}_${tagState.values.get("color_name")}_${tagState.values.get("serial") || tagState.hash}`;
  };

  const downloadBin = (buf, name) => {
    downloadFile(buf, "application/octet-stream", name);
  };

  const loadImportedText = async (text) => {
    const { data, startAddr } = parseImportedText(text);
    await loadBufferIntoForm(data, startAddr);
  };

  // Decode imported buffer back into the form (reverse the scalings where we can)
  const loadBufferIntoForm = async (buf, startAddr) => {
    const data = new Uint8Array(buf);
    hexdumpElement.textContent = hexdump(data, startAddr);

    const { values, warnings } = await decodeTagBuffer(data, startAddr);
    warnings.forEach((w) => msg(`Warning: ${w}`, true));

    for (const [id, { display }] of values) {
      if (id === "tag_version") continue;
      setInputValue(document.getElementById(id), display);
    }

    buildMemory();
  };

  const fillExamples = (optional = false) => {
    const inputs = document.querySelectorAll(
      ".field-row input:not([type=hidden])",
    );
    for (const input of inputs) {
      if (optional || input.required) {
        setInputValue(input, input.placeholder);
      }
    }
    buildMemory();
    msg(`Filled ${optional ? "all" : "required"} field examples`);
  };

  // --- Init ---
  window.addEventListener("DOMContentLoaded", () => {
    window.addEventListener("error", (e) => {
      msg("Error: " + e.message, true);
    });

    renderForm();
    buildMemory();

    document
      .getElementById("webNfcDialogClose")
      .addEventListener("click", () => webNfcDialog.close());
    webNfcDialog.addEventListener("close", () => {
      nfcController?.abort();
      nfcController = null;
    });

    document.getElementById("readWebNFC").addEventListener("click", () => {
      readViaWebNFC((buf, startAddr) =>
        loadBufferIntoForm(buf, startAddr).catch((e) =>
          finishWebNfcAction(e.message, true),
        ),
      ).catch((e) => finishWebNfcAction(e.message, true));
    });

    document
      .getElementById("helpDialogClose")
      .addEventListener("click", () => helpDialog.close());

    const hexParam = urlParams.get("hex");
    if (hexParam) {
      loadBufferIntoForm(bufferFromText(hexParam), 0x00).catch((e) =>
        msg("Import error: " + e.message, true),
      );
    }

    document
      .getElementById("exampleBtn")
      .addEventListener("click", () => fillExamples());

    document
      .getElementById("allExampleBtn")
      .addEventListener("click", () => fillExamples(true));

    document.getElementById("resetBtn").addEventListener("click", () => {
      tagState.values = new Map();
      renderForm(false);
      buildMemory();
      msg("Form has been reset to defaults");
    });

    // Load/import actions
    document
      .getElementById("loadFileBtn")
      .addEventListener("click", () =>
        document.getElementById("uploadFile").click(),
      );

    document
      .getElementById("loadClipboardBtn")
      .addEventListener("click", async () => {
        const clipboard = await navigator.clipboard.readText();
        try {
          await loadImportedText(clipboard);
          msg("Loaded data from clipboard");
        } catch (e) {
          msg(
            "Clipboard does not appear to be a valid OpenTag3D dump - " +
              e.message,
            true,
          );
          throw e;
        }
      });

    document
      .getElementById("uploadFile")
      .addEventListener("change", async (e) => {
        const file = e.target.files?.[0];
        if (!file) return;
        try {
          if (file.name.toLowerCase().endsWith(".bin")) {
            const buf = await file.arrayBuffer();
            // A Proxmark3 dump is just a raw .bin with a 56-byte header, try that first.
            try {
              await loadBufferIntoForm(parseProxmark3Bin(buf), 0x00);
            } catch {
              await loadBufferIntoForm(buf, 0x00);
            }
          } else {
            await loadImportedText(await file.text());
          }
          msg(`Loaded ${file.name}`);
        } catch (err) {
          msg("Import error: " + err.message, true);
        } finally {
          e.target.value = "";
        }
      });

    // Save/export actions
    document.getElementById("downloadBin").addEventListener("click", () => {
      if (!checkMissing()) {
        downloadBin(tagState.buffer, `${tagState.filename}.bin`);
        msg(`Downloaded ${tagState.filename}.bin`);
      }
    });

    document.getElementById("downloadFlipper").addEventListener("click", () => {
      if (!checkMissing()) {
        downloadFlipperNfc(tagState.buffer, `${tagState.filename}.nfc`);
        msg(`Downloaded ${tagState.filename}.nfc`);
      }
    });

    document
      .getElementById("downloadProxmark3Bin")
      .addEventListener("click", () => {
        if (!checkMissing()) {
          downloadBin(
            buildProxmark3Bin(tagState.buffer),
            `${tagState.filename}.pm3.bin`,
          );
          msg(`Downloaded ${tagState.filename}.pm3.bin`);
        }
      });

    document
      .getElementById("downloadNfcToolsDesktopJson")
      .addEventListener("click", () => {
        if (!checkMissing()) {
          downloadFile(
            buildNfcToolsDesktopJson(
              tagState.buffer,
              describeTag(tagState.values, tagState.hash),
            ),
            "application/json",
            `${tagState.filename}.nfctools-desktop.json`,
          );
          msg(`Downloaded ${tagState.filename}.nfctools-desktop.json`);
        }
      });

    document
      .getElementById("downloadNfcToolsMobileJson")
      .addEventListener("click", () => {
        if (!checkMissing()) {
          downloadFile(
            buildNfcToolsMobileJson(
              tagState.buffer,
              describeTag(tagState.values, tagState.hash),
            ),
            "application/json",
            `${tagState.filename}.nfctools-mobile.json`,
          );
          msg(`Downloaded ${tagState.filename}.nfctools-mobile.json`);
        }
      });

    document.getElementById("writeWebNFC").addEventListener("click", () => {
      if (!checkMissing()) {
        writeViaWebNFC(tagState.buffer).catch((e) =>
          finishWebNfcAction("Web NFC error: " + e.message, true),
        );
      }
    });

    document
      .getElementById("copyToClipboard")
      .addEventListener("click", async () => {
        await navigator.clipboard.writeText(bufferToHex(tagState.buffer));
        msg("Copied hex dump to clipboard");
      });

    document.getElementById("copyLink").addEventListener("click", async () => {
      const newParams = new URLSearchParams();
      for (const f of allFields) {
        const v = tagState.values.get(f.id);

        if (v == null || v === "") continue;
        if (f.id === "tag_version") continue;
        if (!f.required) {
          if (v === "" || v === undefined || v === null) continue;
          if (Array.isArray(v) && v.every((vp) => vp === 0)) continue;
        }

        if (f.type === "rgba") {
          newParams.set(f.id, v.map((vp) => hex(vp)).join(""));
        } else if (f.scaling) {
          newParams.set(f.id, v * f.scaling);
        } else {
          newParams.set(f.id, v);
        }
      }

      await navigator.clipboard.writeText(
        window.location.origin +
          window.location.pathname +
          "?" +
          newParams.toString(),
      );

      msg("Copied link to clipboard");
    });

    document
      .getElementById("helpButton")
      .addEventListener("click", () => helpDialog.showModal());

    // Enable explicit Web NFC actions when Web NFC is available.
    document.getElementById("writeWebNFC").disabled = !("NDEFReader" in window);
    document.getElementById("readWebNFC").disabled = !("NDEFReader" in window);
  });
</script>