Spaces:

Dmtlant
/

NFC

Running

App Files Files Community

Dmtlant commited on Dec 9, 2024

Commit

50eaf63

verified ·

1 Parent(s): 3cf1131

Update index.html

Browse files

Files changed (1) hide show

index.html +63 -59

index.html CHANGED Viewed

@@ -1,73 +1,77 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Web NFC Reader</title>
-    <style>
-        body {
-            font-family: sans-serif;
-        }
-        #status {
-            margin-top: 10px;
-            font-weight: bold;
-        }
-        #nfcData {
-            margin-top: 10px;
-            border: 1px solid #ccc;
-            padding: 10px;
-            white-space: pre-wrap;
-        }
-    </style>
 </head>
 <body>
-    <h1>Web NFC Reader</h1>
-    <p>Поднесите NFC-карту к устройству.</p>
-    <button id="startButton">Начать сканирование NFC</button>
-    <p id="status"></p>
-    <div id="nfcData"></div>
-    <script>
-        const startButton = document.getElementById('startButton');
-        const statusDiv = document.getElementById('status');
-        const nfcDataDiv = document.getElementById('nfcData');
-        startButton.addEventListener('click', async () => {
-            statusDiv.textContent = 'Сканирование... Пожалуйста, поднесите карту.';
-            nfcDataDiv.textContent = '';
-            if ('NDEFReader' in window) {
-                try {
-                    const ndef = new NDEFReader();
-                    await ndef.scan();
-                    ndef.onreadingerror = () => {
-                        statusDiv.textContent = 'Ошибка чтения. Попробуйте еще раз.';
-                    };
-                    ndef.onreading = event => {
-                        const { message, serialNumber } = event;
-                        statusDiv.textContent = 'Карта успешно считана!';
-                        let dataString = `Серийный номер: ${serialNumber || 'Недоступен'}\n`;
-                        for (const record of message.records) {
-                            dataString += `\nТип записи: ${record.recordType}\n`;
-                            if (record.recordType === 'text') {
-                                const textDecoder = new TextDecoder('utf-8');
-                                dataString += `Данные (текст): ${textDecoder.decode(record.data)}\n`;
-                            } else if (record.recordType === 'uri') {
-                                dataString += `Данные (URI): ${record.data.buffer ? new TextDecoder('utf-8').decode(record.data) : 'Не декодируется'}\n`;
-                            } else {
-                                dataString += `Данные (другой тип): ${record.data ? Array.from(new Uint8Array(record.data.buffer)).map(b => b.toString(16).padStart(2, '0')).join(' ') : 'Нет данных'}\n`;
-                            }
-                        }
-                        nfcDataDiv.textContent = dataString;
-                    };
-                } catch (error) {
-                    statusDiv.textContent = `Ошибка сканирования: ${error}`;
-                }
-            } else {
-                statusDiv.textContent = 'Web NFC API не поддерживается в вашем браузере.';
             }
-        });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+<title>NFC Reader</title>
 </head>
 <body>
+<div id="nfc-data"></div>
+<script>
+  const nfcDataDisplay = document.getElementById('nfc-data');
+  if (!window.NFC) {
+      nfcDataDisplay.textContent = "NFC API not supported by your browser.";
+      console.error("NFC API not supported.");
+      return;
+  }
+  const reader = new window.NFC();
+  reader.onreading = (event) => {
+    const tag = event.tag;
+    nfcDataDisplay.textContent = ''; // Clear previous data
+    if (tag) {
+      if (tag.ndefMessage) {
+        try {
+          let dataString = "";
+          for (let i = 0; i < tag.ndefMessage.length; i++) {
+            const record = tag.ndefMessage[i];
+            if(record.type === 'application'){
+              dataString += "Application record found: " + record.id + "\n";
+            }
+            if (record.type === 'text') {
+              const text = new TextDecoder('utf-8').decode(record.payload);
+              dataString += `Text record: ${text}\n`;
+            }
+                if (record.type === 'mime') {
+                dataString += `MIME record: ${record.mime} ${new TextDecoder('utf-8').decode(record.payload)}\n`;
+            }
+            if (record.type === 'uri') {
+              dataString += `URI record: ${new TextDecoder('utf-8').decode(record.payload)}\n`;
             }
+            // Add more cases for other types as needed
+          }
+          nfcDataDisplay.textContent = dataString || "No readable data.";
+        } catch (error) {
+          console.error("Error processing data:", error);
+          nfcDataDisplay.textContent = "Error reading data";
+        }
+      } else {
+        nfcDataDisplay.textContent = "No NDEF message found.";
+      }
+    } else {
+      nfcDataDisplay.textContent = "No tag detected.";
+    }
+  };
+  reader.ondisconnect = () => {
+    nfcDataDisplay.textContent = "NFC tag removed.";
+  };
+  reader.onerror = (error) => {
+      nfcDataDisplay.textContent = "Error: " + error.message;
+      console.error("NFC error:", error);
+  };
+  reader.start(); // Start listening for NFC tags
+</script>
 </body>
 </html>