Trouble connecting puck.js to webpage

Posted on Mon 20th, April 2020

• #1

user110429

I'm trying to test my code for Puck.js on a webpage, however I keep getting errors when trying to call the function, such as uncaught reference error when trying to execute the function. Also, errors are been returned when called puck.mag(). I've looked at the puck.html examples and I can't figure out why this is happening.

This is my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://www.puck-js.com/puck.js"></script>    

    <script src="https://www.puck-js.com/puck.js">

        var zero = Puck.mag();
        var rep = 0;

        

        function onMag(p) {
            p.x -= zero.x;
            p.y -= zero.y;
            p.z -= zero.z;
            var s = Math.sqrt(p.x * p.x + p.y * p.y + p.z * p.z);
            if (!Boolean(s < 1000)) {
                digitalPulse(LED2, 1, 1000);
                rep++;
                console.log(rep);
            }
        }

        Puck.on('mag', onMag);
        Puck.magOn();

    </script>
</head>

<body>
    

<button onclick="Puck.write('LED1.set();\n');">On!</button>
<button onclick="onMag()">puckTest</button>
<button onclick="Puck.write('LED1.reset();\n');">Off!</button>
</body>

</html>

• #2

Robin in reply to @user110429

Mon 2020.04.20

Hi @user110429, what is the result of running the example Puck page at:

https://www.espruino.com/Web%20Bluetooth
follow the instructions very closely

Ref 2nd pp.
Is the page deployed on a server that supports https: ?

Reference this thread starting at #3 post there:

http://forum.espruino.com/comments/15209726/
• #3

Gordon
Hi - the issue is you've got two places where you can execute JavaScript - in the Web Browser, and in Puck.js itself. You're running code that's meant for Puck.js in the web browser.

The usage of the Puck name for Puck.write and Puck.eval is a bit confusing, but basically Puck.write/eval go in the Web Browser. Puck.mag/etc (or anything on http://www.espruino.com/Reference#Puck) runs in Puck.js.

If you want to get this working, use the two-way communication example from https://www.espruino.com/Web%20Bluetooth#two-way-communications

Then replace:
```
connection.write("setInterval(function(){Bluetooth.println(Puck.light());},100);NRF.on('disconnect', function() {reset()});\n",
              function() { console.log("Ready..."); });
          }, 1500);
```
with:
```
connection.write(`
        var zero = Puck.mag();
        var rep = 0;
        
        function onMag(p) {
            p.x -= zero.x;
            p.y -= zero.y;
            p.z -= zero.z;
            var s = Math.sqrt(p.x * p.x + p.y * p.y + p.z * p.z);
            if (!Boolean(s < 1000)) {
                digitalPulse(LED2, 1, 1000);
                rep++;
                Bluetooth.println(rep);
            }
        }
        Puck.on('mag', onMag);
        Puck.magOn();`,
              function() { console.log("Ready..."); });
          }, 1500);
```
... and you probably want to change the onLine handler to do something else with the data.

What's then happening is you're using .write to send the program (as a string) to Puck.js for execution, rather that running it on the PC

• #4

user110429

Hi,

I've tried the suggested fix with little success, attached is my code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://www.puck-js.com/puck.js">
        var connection;
        document.getElementById("btnId").addEventListener("click", function () {
            if (connection) {
                connection.close();
                connection = undefined;
            }

            Puck.connect(function (c) {
                if (!c) {
                    alert("Couldn't connect!");
                    return;
                }

                connection = c;

                function connectDevice() {

                    connection.write("reset();\n", function () {
                        // Wait for it to reset itself
                        setTimeout(function () {
                            connection.write(`
                            var zero = Puck.mag();
                            var rep = 0;

                            function onMag(p) {
                                p.x -= zero.x;
                                p.y -= zero.y;
                                p.z -= zero.z;
                                var s = Math.sqrt(p.x * p.x + p.y * p.y + p.z * p.z);
                                if (!Boolean(s < 1000)) {
                                    digitalPulse(LED2, 1, 1000);
                                    rep++;
                                    Bluetooth.println(rep);
                                }
                            }
                            Puck.on('mag', onMag);
                            Puck.magOn(); `,
                                function () { console.log("Ready..."); });
                        }, 1500);
                    })
                }

            });
        });

    </script>
</head>

<body>
    <button id="btnId" onclick="Puck.connect()">On!</button>
    <button onclick="Puck.write('LED1.reset();\n');">Off!</button>
</body>

</html>

I've tried this line:

<button id="btnId" onclick="Puck.connect()">On!</button>

With and without the onclick attribute. Whenever it connects to the Puck it follow ups with an error message: ERROR: TypeError: callback is not a function

• #5

Robin

Tue 2020.04.21

Would you please point to the code that calls function connectDevice() as I only find one instance in that snippet.

'Whenever it connects to the Puck it follow ups with an error'

Most likely as the web page isn't maintaining it's reference to the callback function supplied and the click event itself. Knowing your experience level debugging the event model within web pages along the amount of experience with Javascript using the Puck would assist us as I see your profile indicates a recent member to the forums. Debugging this may need several intermediate steps, adding/building internal content until success is achieved. Be patient as this may take some time.

'I've tried the suggested fix with little success'

While we applaud your enthusiasm with the attempts so far, it would really help us to understand where the hold up is with the extremely simple 'Try Me' click examples provided in detail within the link in #2 post, especially the link Gordon supplied in #3 post.

Try each and please report back where progress ceases. That should provide the insight needed to embed the snippets for your project.

• #6

Gordon

I think it's becacuse you effectively just deleted the <Script tag that includes Puck.js:

<script src="https://www.puck-js.com/puck.js">
your code

should be

<script src="https://www.puck-js.com/puck.js"></script>
<script>
your code

• #7

Gordon

Ok, looks like that wasn't it - there were a few issues but the main one you hit was that you were just calling Puck.connect with no arguments when the button was clicked, when you just wanted to call your code.

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <button id="btnId">Go</button>
  <script src="https://www.puck-js.com/puck.js"></script>
  <script>
    var connection;
    document.getElementById("btnId").addEventListener("click", function () {
        if (connection) {
            connection.close();
            connection = undefined;
        }
        Puck.connect(function (c) {
            if (!c) {
                alert("Couldn't connect!");
                return;
            }
            console.log("Connected - uploading...");
            connection = c;
            connection.on("data", function(d) {
              console.log("Received "+JSON.stringify(d));
            });
            connection.write("reset();\n", function () {
                // Wait for it to reset itself
                setTimeout(function () {
                    connection.write(`\x10{
var zero = Puck.mag();
var rep = 0;
function onMag(p) {
  p.x -= zero.x;
  p.y -= zero.y;
  p.z -= zero.z;
  var s = Math.sqrt(p.x * p.x + p.y * p.y + p.z * p.z);
  if (!Boolean(s < 1000)) {
    digitalPulse(LED2, 1, 1000);
    rep++;
    Bluetooth.println(rep);
  }
}
Puck.on('mag', onMag);
Puck.magOn();}\n`,
                        function () { console.log("Ready..."); });
                }, 1500);
            });
        });
    });
  </script>
</body>
</html>

• #8

user110429

Hi @Robin sorry, I did not see your messages initially. I've tried all the examples and they worked, so thank you for your help. Also @Gordon the code worked, thank you for your help.

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.

Trouble connecting puck.js to webpage

About