What is the best way to make the Puck log data and read it by mobile? Any ready code for that?

Posted on Thu 26th, October 2017

• #1

user82693

I would like the puck to store a few numbers per hour, and then read it after a day. What would be the best way to make the data readable by mobile.

Is there any ready made code available? Not much of a programmer.

Thanks!
• #2

user82693

This is for the puck, so I cant use an sd card, seen an example of that in the forum.
• #3

Gordon
Hi! Yes, no problem at all.

For something really simple, you can do:
```
var data = [];

function storeData() {
  var newData = E.getTemperature(); // for instance...
  data.push(newData);
}

setInterval(storeData, 10*60*1000); // call every 10 minutes
```
If you upload that, after 10 minutes you'll have your first data element (the temperature), then another 10 minutes later, the next, etc.

You can read the data just by typing data and enter on the left-hand side of the IDE. However once you've got quite a bit of data, it'll be too much to fit on a line.

If you type data.forEach(a=>print(a)) then it'll print all the data items, one per line - which you could copy & paste into a spreadsheet. You could also turn that into a function that you can call:
```
function getData() {
  data.forEach(a=>print(a));
}
```
To clear out all the old data you can also just write data=[].

This way's simple but isn't very efficient with memory so you'll only be able to store around 1000 data items (still, that's 150 hours recording every 10 minutes).

So... to get that on your mobile, you can run the same code on https://www.espruino.com/ide/ on an Android phone (or an iPhone with the WebBLE app).

Or... you could write your own Web Bluetooth webpage. This one will grab the data and just print it to the page:
```
<html>
 <head>
 </head>
 <body>
  <script src="https://www.puck-js.com/puck.js"></script>
  <script>
    function getData() {
      Puck.eval('data', function(data) { 
        document.write(data.join('<br/>')); 
      });
    }
  </script>
  <button onclick="getData()">Get Data</button>
 </body>
</html>
```
There's some more info on using Web Bluetooth pages here: http://www.espruino.com/Puck.js+Web+Bluetooth

But once you have it loaded onto the page you could (for instance) display it in some fancier way, allow it to be downloaded, or maybe publish the data to Google Sheets.
• #4

user82693

very good. Storing it in a multidimensional variable will do the trick for me.

But I am trying to do it without internet and the IDE, so maybe I can cycle the data through one of the BLE services, or advertise it? Just so I can read it 'offline' using only the nRF Connect app or something like that.
• #5

user82693

Could the /ide page work offline? Can it be saved?
• #6

Gordon
Yes, the /ide page uses service workers, so should actually work offline as-is. Try disconnecting from the internet and going there (obviously once you've been on it already).

The code on the Puck itself doesn't have to change. You have a few options:
- you could actually just use the nRF UART app (Adafruit's bluefruit app should do it too). If you've uploaded the getData function then just type getData(), then newline, then send - and it'll dump all the data for you
- You could make your own Android app using DroidScript - it's nice and easy and already has Puck.js support built in
- You could make your own Android/iOS app
- You could use service workers yourself to make your Web Bluetooth page available offline - there are a bunch of tutorials online about doing that.
Hope that helps :)
• #7

sn0wpow

Hello Gordon,

I got some questions.
-I want to display my temperature and brightness into my webpage with two input text fields. ---Also i want to use Firebase database to store the values taken.
-I tried to use Bootstrap to make my webpage look fancier but the bluetooth connection window doesn't show up.. is there any problem with that?
Thanks!!
• #8

Gordon

I want to display my temperature and brightness into my webpage with two input text fields

That should be fine. Just use the code document.getElementById("mytextinput").value = whatever_you_got; for each input field - I'm pretty sure I posted some example code for getting the data from Puck.js on one of the other posts you made?

I tried to use Bootstrap to make my webpage look fancier but the bluetooth connection window doesn't show up.. is there any problem with that?

There shouldn't be - I've seen bootstrap sites use Web Bluetooth before. Have you looked in the developer console to see if there are any errors?

You can't make the connection window appear at startup - it has to be in response to a user's click... so that might be one problem?
• #9

sn0wpow

I will check that again.. So I can store the values right?. is there any conflict with the Firebase database??
Thanks. (you can delete my silly posts) after that.!
• #10

Gordon

I don't think so. It seems like this firebase example will probably pull data straight from a form after you've put the data in it: https://gist.github.com/dvidsilva/e000acc9610b21e43e0a58e5982bd6e9

There are tidier ways, but you can pretty much just copy&paste the two bits of code together and it'll work.
• #11

sn0wpow

Can u provide me the code of the 2 input texts (light , temp) that display each value as i mentioned before ?? and I will do the rest... just that(give the steps) cause I'm totally a beginner! I don't want a data[] array i just want the values to be displayed into these 2 input texts... Please Sir provide me the .html code

• #12

Gordon

It's literally just the 'Web Bluetooth Dashboard' code you found with input fields added and ...setValue replaced with document.getElementById("mytextinput").value = whatever_you_got; that I posted above:

<html>
 <head>
  <title>Values as inputs</title>
 </head>
 <body>
  <script src="https://www.puck-js.com/puck.js"></script>
  <script>
  // Called when we get a line of data - updates the light color
  function onLine(line) {
    try {
      var j = JSON.parse(line);
      console.log("Received JSON: ",j);
      document.getElementById("light").value = j.light*100;
      document.getElementById("temp").value = j.temp;
      document.getElementById("bat").value = j.bat;
      // here's where you would put your data online if you wanted it
    } catch(e) {
      console.log("Received: ",line, e);
    }
  }
  var connection;
  function connectDevice() {
    Puck.connect(function(c) {
      if (!c) {
        alert("Couldn't connect!");
        return;
      }
      connection = c; 
      // remove modal window
      
      // Handle the data we get back, and call 'onLine'
      // whenever we get a line
      var buf = "";
      connection.on("data", function(d) {
        buf += d;
        var i = buf.indexOf("\n");
        while (i>=0) {
          onLine(buf.substr(0,i));
          buf = buf.substr(i+1);
          i = buf.indexOf("\n");
        }
      });
      // First, reset Puck.js
      connection.write("reset();\n", function() {
        // Wait for it to reset itself
        setTimeout(function() {
          // Now tell it to write data on the current light level to Bluetooth
          // every second. Also ensure that when disconnected, Puck.js
          // resets so the setInterval doesn't keep draining battery.
          connection.write("setInterval(function(){Bluetooth.println(JSON.stringify({light:Puck.light(), temp:E.getTemperature(), bat:Puck.getBatteryPercentage()}));},1000);NRF.on('disconnect', function() {reset()});\n",
            function() { console.log("Ready..."); });
          }, 1500);
        });
      });

  }
 
  </script>
  <h1>Your data</h1>

  <label for="light">Light</label> 
    <input name="light" id="light" type="text"><br/>
  <label for="temp">Temperature</label> 
    <input name="temp" id="temp" type="text"><br/>
  <label for="bat">Battery</label> 
    <input name="bat" id="bat" type="text"><br/>
  <button onclick="connectDevice()">Connect</button>
 </body>
</html>

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

What is the best way to make the Puck log data and read it by mobile? Any ready code for that?

About

What is the best way to make the Puck log data and read it by mobile? Any ready code for that?

Actions

What is the best way to make the Puck log data and read it by mobile? Any ready code for that?

Formatting Help

About

What is the best way to make the Puck log data and read it by mobile? Any ready code for that?

Actions

Espruino