Espruino:Примеры/Web NFC и запись на NFC-метку

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.


Web NFC и запись на NFC-метку[1]

Bluetooth-устройства Espruino вроде Puck.js и Pixl.js оснащены программируемой NFC-меткой.

В большинстве случаев они программируются при помощи функции NRF.nfcURL, позволяющей сделать доступными их URL, после чего пользователь может просканировать устройство и перейти к этому URL.

Но эту коммуникацию можно сделать двусторонней при помощи эмуляции NFC-метки на Puck.js.

Вся система целиком будет включать в себя код для Puck.js, эмулирующий NFC-метку, а также отправку текста на NFC-метку с веб-страницы при помощи Web NFC.

Puck.js

Загрузите на Puck.js следующий код:

var data = new Uint8Array(10+64);
var header = NRF.nfcStart();
var written = false;
data.set(header,0); // заголовок NFC-устройства
// заголовок NDEF-метки:
data.set([0,0,0xE1,0x10,(data.length-10)/8,0,0,3,0,0xFe], 0x0A);
// 0,0,e1
NRF.on('NFCrx', function(rx) {
  var idx = rx[1]*4;
  switch(rx[0]) {
    case 0x30: // команда: READ (чтение)
      NRF.nfcSend(new Uint8Array(data.buffer, idx, 16));
      break;
    case 0xa2: // команда: WRITE (запись)
      written = true;
      if(idx > data.length) {
        NRF.nfcSend(0x0);
      } else {
        data.set(new Uint8Array(rx, 2, 4), idx);
        NRF.nfcSend(0xA);
      }
      break;
    default:   // просто разрешаем повторный прием данных
      NRF.nfcSend();
      break;
    }
});
NRF.on("NFCoff",function() {
  if (written)
    onWritten(E.toString(new Uint8Array(data.buffer,26,data[21]-3)));
  written = false;
});

function onWritten(data) {
  console.log("Запись NFC-данных", data);
  var colors = {
    red : 1,
    green : 2,
    blue : 4,
  };
  // Зажигаем светодиоды, только если у нас есть 3 светодиода.
  // Или пишем текст на дисплее Pixl.js.
  if (colors[data] && global.LED1 && global.LED2 && global.LED3) {
    digitalWrite([LED3,LED2,LED1], colors[data]);
    setTimeout(function() {
      digitalWrite([LED3,LED2,LED1], 0);
    },1000);
  }
}

Это создаст простую 64-байтную NFC-метку, и когда записывающее NFC-устройство покинет NFC-диапазон Espruino-устройства, это Espruino-устройство вызовет функцию onWritten(), содержащую новую информацию NFC-метки (если она была модифицирована).

На Puck.js этот код зажжет красный, зеленый и синий светодиоды, а на Pixl.js просто покажет текст.

Веб-страница

Во-первых, прочтите эти инструкции по включению Web NFC в вашем браузере.

Теперь кликните на кнопку «Попробуй!» под этим кодом:

<html>
<body>
<script>
if (typeof NDEFReader==="undefined") {
  document.write("NDEFReader не поддерживается этим браузером<br/>");
}

const ndef = new NDEFReader();
ndef.onreading = event => {
  console.log("NFC", event);
};

function start() {
  /* Запускаем сканирование.
     После того, как метка будет найдена,
     не перемещайте Android-устройство.*/
  ndef.scan();
  // Прячем кнопку 'start'.
  document.querySelector("#startButton").style.display = "none";
  document.querySelector("#buttons").style.display = "block";
}

// Если разрешение уже есть, начинаем!
// Или ждем, пока пользователь нажмет кнопку.
navigator.permissions.query({ name: "nfc" }).then(p => {
  if (p.state === "granted") start();
});

function send(msg) {
  ndef.write(msg).then(_=>console.log("Запись выполнена ",msg));
}
</script>
<button id="startButton" onclick="start()">Start!</button>
<div id="buttons" style="display:none">
<button onclick="send('red')">Red</button>
<button onclick="send('green')">Green</button>
<button onclick="send('blue')">Blue</button>
</div>
</body>
</html>

Просто кликните на одну из кнопок, когда будете в пределах NFC-диапазона Puck.js (в результате, например, может зажужжать ваш телефон), а когда покинете NFC-диапазон устройства, загорится соответствующий светодиод.

Примечание

Старые версии Web NFC используют NDEFWriter. Если у вас возникла ошибка «ndef.write is not a function», вам нужно будет обновить браузер.

Приложение для Android

  • Установите приложение NFC TagWriter для Android.
  • Нажмите на Write Tags.
  • New Dataset.
  • Plain text.
  • Под Enter text напишите «red» (прописными буквами).
  • Нажмите на Save. Если вы не видите эту кнопку из-за того, что она находится под клавиатурой, выберите About справа вверху, затем нажмите на кнопку Back – теперь кнопка Save должна быть снова видна.
  • Нажмите Ok.
  • Теперь снова нажмите Write Tags.
  • My Datasets.
  • red.
  • Уберите галочку с Confirm overwrite.
  • Теперь кликните на Write, поднесите телефон к Puck.js – приложение должно издать звук, чтобы продемонстрировать, что данные были записаны.
  • Уберите телефон от Puck.js – на Puck.js должен загореться красный светодиод! То же самое можно сделать с «green» и «blue». Или можете модифицировать код для Puck.js выше.

См.также

Внешние ссылки