Espruino:Примеры/Web NFC и запись на NFC-метку: различия между версиями
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Myagkij (обсуждение | вклад) Нет описания правки |
Myagkij (обсуждение | вклад) Нет описания правки |
||
| Строка 5: | Строка 5: | ||
=Web NFC и запись на NFC-метку<ref>[https://www.espruino.com/Web+NFC www.espruino.com - Web NFC, and writing to NFC tags]</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-меткой. | [[Bluetooth-устройства]] [[Espruino]] вроде [https://www.espruino.com/Puck.js Puck.js] и [https://www.espruino.com/Pixl.js Pixl.js] оснащены программируемой [[NFC-меткой]]. | ||
В большинстве случаев они программируются при помощи функции NRF.nfcURL, позволяющей сделать доступными их URL, после чего пользователь может просканировать устройство и перейти к этому URL. | В большинстве случаев они программируются при помощи функции NRF.nfcURL, позволяющей сделать доступными их [[URL]], после чего пользователь может просканировать устройство и перейти к этому [[URL]]. | ||
Но эту коммуникацию можно сделать двусторонней при помощи эмуляции NFC-метки на Puck.js. | Но эту коммуникацию можно сделать двусторонней при помощи эмуляции [[NFC-метки]] на [[Puck.js]]. | ||
Вся система целиком будет включать в себя код для Puck.js, эмулирующий NFC-метку, а также отправку текста на NFC-метку с [https://w3c.github.io/web-nfc/ веб-страницы при помощи Web NFC]. | Вся система целиком будет включать в себя код для [[Puck.js]], эмулирующий NFC-метку, а также отправку текста на NFC-метку с [https://w3c.github.io/web-nfc/ веб-страницы при помощи Web NFC]. | ||
Загрузите на Puck.js следующий код: | == Puck.js == | ||
Загрузите на [[Puck.js]] следующий код: | |||
<syntaxhighlight lang="javascript" enclose="div"> | <syntaxhighlight lang="javascript" enclose="div"> | ||
| Строка 68: | Строка 69: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Это создаст простую 64-байтную NFC-метку, и когда записывающее NFC-устройство покинет NFC-диапазон Espruino-устройства, это Espruino-устройство вызовет функцию onWritten(), содержащую новую информацию NFC-метки (если она была модифицирована). | Это создаст простую 64-байтную NFC-метку, и когда записывающее NFC-устройство покинет NFC-диапазон [[Espruino-устройства]], это [[Espruino-устройство]] вызовет функцию onWritten(), содержащую новую информацию NFC-метки (если она была модифицирована). | ||
На Puck.js этот код зажжет красный, зеленый и синий светодиоды, а на Pixl.js просто покажет текст. | На [[Puck.js]] этот код зажжет красный, зеленый и синий светодиоды, а на [[Pixl.js]] просто покажет текст. | ||
== Веб-страница == | == Веб-страница == | ||
| Строка 76: | Строка 77: | ||
Во-первых, прочтите [https://web.dev/nfc/#use эти инструкции по включению Web NFC в вашем браузере]. | Во-первых, прочтите [https://web.dev/nfc/#use эти инструкции по включению Web NFC в вашем браузере]. | ||
Теперь кликните на кнопку «Попробуй!» под этим кодом: | Теперь кликните на кнопку '''«Попробуй!»''' под этим кодом: | ||
<syntaxhighlight lang="html5" enclose="div"> | <syntaxhighlight lang="html5" enclose="div"> | ||
| Строка 121: | Строка 122: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Просто кликните на одну из кнопок, когда будете в пределах NFC-диапазона Puck.js (в результате, например, может зажужжать ваш телефон), а когда покинете NFC-диапазон устройства, загорится соответствующий светодиод. | Просто кликните на одну из кнопок, когда будете в пределах NFC-диапазона [[Puck.js]] (в результате, например, может зажужжать ваш телефон), а когда покинете NFC-диапазон устройства, загорится соответствующий светодиод. | ||
'''Примечание:''' Старые версии Web NFC используют NDEFWriter. Если у вас возникла ошибка «ndef.write is not a function», вам нужно будет обновить браузер. | '''Примечание:''' Старые версии [[Web NFC]] используют NDEFWriter. Если у вас возникла ошибка '''«ndef.write is not a function»''', вам нужно будет обновить браузер. | ||
== Приложение для Android == | == Приложение для Android == | ||
* Установите приложение [https://play.google.com/store/apps/details?id=com.nxp.nfc.tagwriter&hl=en NFC TagWriter для Android]. | * Установите приложение [https://play.google.com/store/apps/details?id=com.nxp.nfc.tagwriter&hl=en NFC TagWriter для Android]. | ||
* Нажмите на Write Tags. | * Нажмите на '''Write Tags'''. | ||
* New Dataset. | * '''New Dataset'''. | ||
* Plain text. | * '''Plain text.''' | ||
* Под Enter text напишите «red» (прописными буквами). | * Под '''Enter text''' напишите '''«red»''' (прописными буквами). | ||
* Нажмите на Save. Если вы не видите эту кнопку из-за того, что она находится под клавиатурой, выберите About справа вверху, затем нажмите на кнопку Back – теперь кнопка Save должна быть снова видна. | * Нажмите на '''Save'''. Если вы не видите эту кнопку из-за того, что она находится под клавиатурой, выберите '''About''' справа вверху, затем нажмите на кнопку '''Back''' – теперь кнопка '''Save''' должна быть снова видна. | ||
* Нажмите Ok. | * Нажмите '''Ok'''. | ||
* Теперь снова нажмите Write Tags. | * Теперь снова нажмите '''Write Tags'''. | ||
* My Datasets. | * '''My Datasets'''. | ||
* red. | * '''red'''. | ||
* Уберите галочку с Confirm overwrite. | * Уберите галочку с '''Confirm overwrite'''. | ||
* Теперь кликните на Write, поднесите телефон к Puck.js – приложение должно издать звук, чтобы продемонстрировать, что данные были записаны. | * Теперь кликните на '''Write''', поднесите телефон к [[Puck.js]] – приложение должно издать звук, чтобы продемонстрировать, что данные были записаны. | ||
* Уберите телефон от Puck.js – на Puck.js должен загореться красный светодиод! То же самое можно сделать с «green» и «blue». Или можете модифицировать код для Puck.js выше. | * Уберите телефон от [[Puck.js]] – на [[Puck.js]] должен загореться красный светодиод! То же самое можно сделать с '''«green»''' и '''«blue»'''. Или можете модифицировать код для [[Puck.js]] выше. | ||
=См.также= | =См.также= | ||
Версия от 18:59, 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 выше.
См.также
Внешние ссылки
