Trouble connecting puck.js to webpage #3369

espruino-discuss · 2025-02-12T08:24:25Z

espruino-discuss
Feb 12, 2025
Maintainer

Posted at 2020-04-20 by 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>

espruino-discuss · 2025-02-12T08:24:28Z

espruino-discuss
Feb 12, 2025
Maintainer Author

Posted at 2020-04-20 by Robin

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/

0 replies

gfwilliams · 2025-02-12T08:24:31Z

gfwilliams
Feb 12, 2025
Maintainer

Posted at 2020-04-21 by @gfwilliams

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

0 replies

espruino-discuss · 2025-02-12T08:24:33Z

espruino-discuss
Feb 12, 2025
Maintainer Author

Posted at 2020-04-21 by 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

0 replies

espruino-discuss · 2025-02-12T08:24:36Z

espruino-discuss
Feb 12, 2025
Maintainer Author

Posted at 2020-04-21 by 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.

0 replies

gfwilliams · 2025-02-12T08:24:38Z

gfwilliams
Feb 12, 2025
Maintainer

Posted at 2020-04-22 by @gfwilliams

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

0 replies

gfwilliams · 2025-02-12T08:24:41Z

gfwilliams
Feb 12, 2025
Maintainer

Posted at 2020-04-22 by @gfwilliams

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>

0 replies

espruino-discuss · 2025-02-12T08:24:44Z

espruino-discuss
Feb 12, 2025
Maintainer Author

Posted at 2020-05-19 by 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 @gfwilliams the code worked, thank you for your help.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Espruino JavaScript

Trouble connecting puck.js to webpage #3369

Uh oh!

{{title}}

Uh oh!

Replies: 7 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Espruino JavaScript

Trouble connecting puck.js to webpage #3369

Uh oh!

espruino-discuss Feb 12, 2025 Maintainer

Replies: 7 comments

Uh oh!

espruino-discuss Feb 12, 2025 Maintainer Author

Uh oh!

gfwilliams Feb 12, 2025 Maintainer

Uh oh!

espruino-discuss Feb 12, 2025 Maintainer Author

Uh oh!

espruino-discuss Feb 12, 2025 Maintainer Author

Uh oh!

gfwilliams Feb 12, 2025 Maintainer

Uh oh!

gfwilliams Feb 12, 2025 Maintainer

Uh oh!

espruino-discuss Feb 12, 2025 Maintainer Author

espruino-discuss
Feb 12, 2025
Maintainer

espruino-discuss
Feb 12, 2025
Maintainer Author

gfwilliams
Feb 12, 2025
Maintainer

espruino-discuss
Feb 12, 2025
Maintainer Author

espruino-discuss
Feb 12, 2025
Maintainer Author

gfwilliams
Feb 12, 2025
Maintainer

gfwilliams
Feb 12, 2025
Maintainer

espruino-discuss
Feb 12, 2025
Maintainer Author