Espruino:Примеры/Web NFC и запись на NFC-метку: различия между версиями
Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Myagkij (обсуждение | вклад) (Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= <syntaxhighligh...») |
Нет описания правки |
||
| (не показаны 4 промежуточные версии 2 участников) | |||
| Строка 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"> | |||
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"> | |||
<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-диапазон устройства, загорится соответствующий светодиод. | |||
{{Примечание1|Старые версии [[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: | Строка 150: | ||
<references /> | <references /> | ||
{{Навигационная таблица/Espruino | {{Навигационная таблица/Портал/Espruino}} | ||
Текущая версия от 19:54, 23 мая 2023
Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.
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-диапазон устройства, загорится соответствующий светодиод.
Приложение для 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 выше.
См.также
Внешние ссылки
