Espruino:Примеры/Web NFC и запись на NFC-метку: различия между версиями
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Myagkij (обсуждение | вклад) (Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= <syntaxhighligh...») |
Myagkij (обсуждение | вклад) Нет описания правки |
||
| Строка 3: | Строка 3: | ||
{{Myagkij-редактор}} | {{Myagkij-редактор}} | ||
=<ref>[ www.espruino.com - ]</ref>= | =Web NFC и запись на NFC-метку<ref>[https://www.espruino.com/Web+NFC www.espruino.com - Web NFC, and writing to NFC tags]</ref>= | ||
Bluetooth-устройства Espruino вроде [https://www.espruino.com/Puck.js Puck.js] и [https://www.espruino.com/Pixl.js Pixl.js] оснащены программируемой NFC-меткой. | |||
В большинстве случаев они программируются при помощи функции NRF.nfcURL, позволяющей сделать доступными их URL, после чего пользователь может просканировать устройство и перейти к этому URL. | |||
Но эту коммуникацию можно сделать двусторонней при помощи эмуляции NFC-метки на Puck.js. | |||
Вся система целиком будет включать в себя код для Puck.js, эмулирующий NFC-метку, а также отправку текста на NFC-метку с [https://w3c.github.io/web-nfc/ веб-страницы при помощи Web NFC]. | |||
Puck.js | |||
Загрузите на Puck.js следующий код: | |||
<syntaxhighlight lang="javascript" enclose="div"> | <syntaxhighlight lang="javascript" enclose="div"> | ||
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); | |||
} | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Это создаст простую 64-байтную NFC-метку, и когда записывающее NFC-устройство покинет NFC-диапазон Espruino-устройства, это Espruino-устройство вызовет функцию onWritten(), содержащую новую информацию NFC-метки (если она была модифицирована). | |||
На Puck.js этот код зажжет красный, зеленый и синий светодиоды, а на Pixl.js просто покажет текст. | |||
== Веб-страница == | |||
Во-первых, прочтите [https://web.dev/nfc/#use эти инструкции по включению Web NFC в вашем браузере]. | |||
Теперь кликните на кнопку «Попробуй!» под этим кодом: | |||
<syntaxhighlight lang="html5" enclose="div"> | |||
<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> | |||
</syntaxhighlight> | |||
Просто кликните на одну из кнопок, когда будете в пределах NFC-диапазона Puck.js (в результате, например, может зажужжать ваш телефон), а когда покинете NFC-диапазон устройства, загорится соответствующий светодиод. | |||
'''Примечание:''' Старые версии Web NFC используют NDEFWriter. Если у вас возникла ошибка «ndef.write is not a function», вам нужно будет обновить браузер. | |||
== Приложение для Android == | |||
* Установите приложение [https://play.google.com/store/apps/details?id=com.nxp.nfc.tagwriter&hl=en 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 выше. | |||
=См.также= | =См.также= | ||
Версия от 18:55, 28 февраля 2021
Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.
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 выше.
См.также
Внешние ссылки
