feature: demo page for NDEF Message

[taichunmin]

• Text Record
• URL / URI
• Custom URL / URI
• Unit.Link
• Search
• Social Networks
• Video
• File
• Application
• Mail
• Contact
• Phone number
• SMS
• Location
• Custom location
• Address
• Destination address
• Proximity search
• Street View
• Emergency
• Bitcoin
• Bluetooth
• Wi-FI network
• Data

[taichunmin]

[taichunmin]

• https://weirenxue.github.io/2022/03/08/nfc_ndef/
• https://linyencheng.github.io/pwa-web-nfc/
• https://developer.mozilla.org/en-US/docs/Web/API/Web_NFC_API
• https://labs-web-nfc.glitch.me/
• https://googlechrome.github.io/samples/web-nfc/
• https://github.com/GoogleChrome/samples/tree/gh-pages/web-nfc
• https://developer.chrome.com/docs/capabilities/nfc
• https://web-nfc-demo.glitch.me/
• https://community.nxp.com/pwmxy87654/attachments/pwmxy87654/connects/292/1/AMF-HMB-T1900.pdf
• https://jia.je/hardware/2020/05/10/mifare-classic-ndef/
• https://www.nxp.com/docs/en/application-note/AN1305.pdf

[taichunmin]

• https://web.dev/nfc/
• https://austinblackstoneengineering.com/nfc-p2p-basics/
• https://github.com/don/ndef-js

[taichunmin]

// TODO: Update with serialNumbers from your own NFC tags: https://googlechrome.github.io/samples/web-nfc/
const tagsColors = {
  "04:08:4c:0a:bb:5d:81": "crimson", // 紅
  "04:60:73:0a:bb:5d:80": "forestgreen", // 綠
  "04:68:6d:0a:bb:5d:81": "dodgerblue", // 藍
  "04:48:4c:0a:bb:5d:80": "slategray", // 灰
  "04:6c:8e:0a:bb:5d:80": "gold", // 金
  "04:fa:3a:0a:bb:5d:80": "mediumorchid" // 紫
};

let numberOfTimesUserWon = 0;

let serialNumbers = [];

const cards = Array.from(document.getElementById("cards").children);

const LOST_IMAGE_URL =
  "https://cdn.glitch.com/a26fc0a9-d6cf-4b67-9100-2227eedddb62%2Floudly-crying-face.png?v=1573121443006";
const WIN_IMAGE_URL =
  "https://cdn.glitch.com/a26fc0a9-d6cf-4b67-9100-2227eedddb62%2Fface-with-party-horn-and-party-hat.png?v=1573121623577";

let ndef;

function onreading({ serialNumber }) {
  // User tapped wrong tag.
  if (
    serialNumbers.includes(serialNumber) &&
    serialNumber !== serialNumbers.shift()
  ) {
    lost();
    return;
  }

  // User tapped all tags in the right order.
  if (serialNumbers.length === 0) {
    win();
    return;
  }

  // Show tag color user tapped.
  setColor(serialNumber);
}

button.onclick = async () => {
  // Start NFC scanning and prompt user if needed.
  ndef = new NDEFReader();
  await ndef.scan();

  reset();

  // Create random sequence of tag serial numbers.
  const allSerialNumbers = Object.keys(tagsColors);
  serialNumbers = [];
  while (allSerialNumbers.length) {
    const randomIndex = Math.floor(Math.random() * allSerialNumbers.length);
    serialNumbers = serialNumbers.concat(
      allSerialNumbers.splice(randomIndex, 1)
    );
  }

  // Show colors to memorize.
  for (const serialNumber of serialNumbers) {
    await setColor(serialNumber, true /* transient */);
  }

  // Start listening to tags.
  ndef.onreading = onreading;
};

function reset() {
  ndef.onreading = null;
  cards.forEach(card => {
    card.style.backgroundColor = "";
    card.style.backgroundImage = "";
  });
  button.classList.toggle("hidden", true);
}

function lost() {
  reset();
  cards.forEach(card => {
    card.style.backgroundImage = `url(${LOST_IMAGE_URL})`;
  });
  button.classList.toggle("hidden", false);
  numberOfTimesUserWon = 0;
}

function win() {
  reset();
  cards.forEach(card => {
    card.style.backgroundImage = `url(${WIN_IMAGE_URL})`;
  });
  button.classList.toggle("hidden", false);
  numberOfTimesUserWon++;
}

async function setColor(serialNumber, transient = false) {
  const color = tagsColors[serialNumber];
  const card = cards[Object.values(tagsColors).indexOf(color)];
  card.style.backgroundColor = color;
  if (transient) {
    await new Promise(resolve => {
      setTimeout(_ => {
        resolve();
        card.style.backgroundColor = "";
      }, Math.max(100, 500 - 200 * numberOfTimesUserWon));
    });
  }
}

[taichunmin]

Ref links

• https://github.com/Next-Flip/Momentum-Apps/tree/dev/nfc_maker
  • Bluetooth MAC
  • Contact Vcard
  • HTTPS Links
  • Email
  • Phone
  • Text
  • WiFi Login
  • WiFis
• https://github.com/y-dejong/nfcurl

[taichunmin]

Text: taichunmin

65535D33588804000000000000000000
140103E103E103E103E103E103E103E1
03E103E103E103E103E103E103E103E1
A0A1A2A3A4A5787788C1FFFFFFFFFFFF
0311D1010D5402656E7461696368756E
6D696EFE000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF
00000000000000000000000000000000
00000000000000000000000000000000
00000000000000000000000000000000
D3F7D3F7D3F77F078840FFFFFFFFFFFF

[taichunmin]

Wi-Fi Protected Setup Specification v2.0.9.pdf