Beginer: How to send data from puck to webpage or text file

Hello,

I hope you're doing well.

I'm new to this and I'm working on a small project with Puck.js. Here's what I'm trying to do:

I've made a simple webpage using PHP. When a user logs in on their mobile, it takes them to a details page showing a few pieces of information.

Now, when the user taps their phone on the Puck device, I want the NFC function to activate and record the date and time.

I have code that currently works fine. It shows the date and time when the phone is tapped on the Puck device. Here's the code:

NRF.nfcURL('https://www.espruino.com');

NRF.on('NFCon', function() {

var currentTime = new Date();
var day = currentTime.getDate();
var month = currentTime.getMonth() + 1;
var year = currentTime.getFullYear();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var formattedDate = padNumber(day) + '/' + padNumber(month) + '/' + year;
var formattedTime = padNumber(hours) + ':' + padNumber(minutes);
console.log("Student checked-in at: " + formattedDate + " " + formattedTime);

});

function padNumber(number){return (number < 10 ? '0': '') + number;}

But now, I'm not sure how to send this data from the Puck device to my webpage or a text file. I've tried different methods but couldn't figure it out. Please help me. Thank you.

Let me know if you need the PHP code too.

Best regards,

Hi - I think probably your best solution is to put literally just NRF.nfcURL('https://www.yourwebpage.com'­); on the Puck.js

Then, the Student's device will load that webpage from the server - and that would trigger your PHP to run which could record the current time.

To stop the chances of a URL getting shared or reloaded, you could maybe do:

var counter = 0;
NRF.nfcURL('https://www.yourwebpage.com?­id='+counter);

NRF.on('NFCoff', function() {
  counter++;
  NRF.nfcURL('https://www.yourwebpage.com?­id='+counter);
});   

Note we do it on NFCoff - which will happen when the phone is away, so there is no 'race' between preparing the NFC packet and having it read.

That way your PHP could discount any IDs that were the same, and it also reduces the chances of the page getting cached and your PHP not getting run

@Gordon
Thank you very much for your response, unfortunatly i tried the approach and was unsucessful, do you have any resources that i can look into? or a code which i can look into please?

I tried to capture the cureent time when the page loaded but its showing the current login time to details page.

I tried to capture the time from puck and tried to send the data to my webpage even this did not work.

Out of ideas now, i dont know where i am going wrong on my php or puck js.

unfortunatly i tried the approach and was unsucessful,

So I'm not sure I understand - what went wrong? Did the page that was in nfcURL load ok, and at the time the Puck was scanned?

Hello @Gordon

Sorry for the delayed response, so what I did was i used the puck as a beacon, and added a JavaScript code with NDEFreading event, so basically when someone scans a puck device it should display the current date and time of the sacn, which unfortunately did not work, I read on googlechome that NDEFreading is not supported anymore and it’s a experimental feature, I tried turning on the experimental feature in chrome still did not work.
This is the js code

<script src="https://www.puck-js.com/puck.js"></­script>
<script>
    // Add an event listener to detect NFC tag scanning
    window.addEventListener('NDEFReading', event => {
        // Get the data from the NFC tag
        const message = event.message;

        // Capture current date and time in UK format
        const currentTime = new Date();
        const day = currentTime.getDate();
        const month = currentTime.getMonth() + 1;
        const year = currentTime.getFullYear();
        const hours = currentTime.getHours();
        const minutes = currentTime.getMinutes();
        const formattedDate = padNumber(day) + '/' + padNumber(month) + '/' + year;
        const formattedTime = padNumber(hours) + ':' + padNumber(minutes);
        const checkedInInfo = "Student checked-in at: " + formattedDate + " " + formattedTime;

        // Display the NFC data on the webpage
        document.getElementById('nfcData').inner­Text = checkedInInfo;

        // Save the NFC data to the logintime textarea
        document.getElementById('logintime').val­ue = checkedInInfo;
    });

    function padNumber(number) {
        return (number < 10 ? '0' : '') + number;
    }
</script>

Since this did not work, what I have done now is I put the url of my webpage on puck, when scanned it takes user to webpage, they login and on details page they click on checkin button which records date and time.

I want to record the time and date on the event of nfc scan automatically, is this still possible?

Can the puck be used just a a beacon?

Why not use the NRFon event to set the contents of the NFC tag to be a URL that includes the current time according to Puck.js in the URL?

Using the URL seems to be the easiest way to get data out of the Puck - as you say I'm not sure how great WebNFC support is.

@Gordon

How do i use the NRFon event to set the contents of he NFC tag to be a URL?
The only think i did was this and it showed the output perfectly on the terminal when the phone was scanned.

NRF.on('NFCon', function() {

var currentTime = new Date();
var day = currentTime.getDate();
var month = currentTime.getMonth() + 1;
var year = currentTime.getFullYear();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var formattedDate = padNumber(day) + '/' + padNumber(month) + '/' + year;
var formattedTime = padNumber(hours) + ':' + padNumber(minutes);
console.log("Student checked-in at: " + formattedDate + " " + formattedTime);
});

function padNumber(number){return (number < 10 ? '0': '') + number;}

If i set the contents of the NFC Tag to be a URL content, how would i display it on my webpage? please could you help, thank you.

Something like this?

NRF.on('NFCon', function() {
  var currentTime = new Date();
  NRF.nfcURL('https://www.yourwebpage.com?­time='+currentTime.toISOString().substr(­0,16));
});  

@Gordon
Sorry for the delayed response and Thank you for the suggestion, i tried as above suggested, when i tried to tap on puck it did not redirect me the the webpage. Please see the below code i tried on puck.

NRF.on('NFCon', function() {
  var currentTime = new Date();
  NRF.nfcURL('http://192.168.1.154/student­system/details.php?time=' + currentTime.toISOString().substr(0, 16));
});

Below is the Javascript code to extract the date and time from URL on my php webpage

<script>
  function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\­+/g, ' '));
  }

  window.onload = function() {
    var timeParam = getUrlParameter('time');
    if (timeParam !== '') {
      var loginTime = new Date(timeParam);
      var logintimeElement = document.getElementById('logintime');
      logintimeElement.textContent = loginTime.toLocaleString(); // Update the text content of the logintime element with the extracted time and date
    }
  };
</script>

Dont know what i am doing wrong, please guide thank you.

It's possible that your device will only forward you to an https:// webpage, not http:// - increasingly devices are refusing to request stuff via http

@Gordon
But if i just use

NRF.nfcURL('http://192.168.1.154/student­system/details.php')

And scan the puck, it works perfectly.

Ok, all I can think is that maybe we're causing problems by changing the NFC URL while the NFC connection is active. Maybe try:

var nfcOn = false;
NRF.on('NFCon', () => { nfcOn = true; });
NRF.on('NFCoff', () => { nfcOn = false; });
setInterval(() => {
  if (nfcOn) return; // don't change if NFC on
  var currentTime = new Date();
  NRF.nfcURL('http://192.168.1.154/student­system/details.php?time=' + currentTime.toISOString().substr(0, 16));
}, 60000); // once a minute