Puck.js setWatch on web

Posted on Wed 26th, July 2017

• #1

Ciaran
Hoping someone can help. Basically I want to call a function when I click on my PuckJs. Trying to use setWatch on my Puck.js. Works fine from the https://www.espruino.com/ide/

But when I try and call the setWatch function from a webpage using bluetooth I get errors:
Errors:

setWatch is undefined

Code is:
```
setWatch(function() {
  console.log("Pressed");
}, BTN, { edge: "rising", debounce: 50, repeat: true });
```
Also if I load the code to the device through the webIDE, I cannot see the console.log message in chrome debug tool.s

• #2

Gordon

Ok - so you have a connection to the Puck by Web Bluetooth, and you want to do something whenever the button on the Puck is pressed?

For that, you want to use the slightly more advanced part of the Puck.js library, since the simple bit deals with initiating everything from the webpage, where you want to initiate it from the Puck: http://www.espruino.com/Puck.js+Web+Bluetooth#two-way-communications

On the Website, you could do something like this:

<html>
 <head>
 </head>
 <body>
  <script src="https://www.puck-js.com/puck.js"></script>
  <div id="connect_button">Connect!</div>
  <script type="text/javascript">
    // Called when we get a line of data 
    function onLine(v) {
      if (v.indexOf("Pressed")>=0)
       console.log("Button pressed!");
    }

    // When clicked, connect or disconnect
    var connection;    
    document.getElementById("connect_button").addEventListener("click", function() {
      if (connection) {
        connection.close();
        connection = undefined;
      }
      Puck.connect(function(c) {
        if (!c) {
          alert("Couldn't connect!");
          return;
        }
        connection = c;
        // Handle the data we get back, and call 'onLine'
        // whenever we get a complete 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 print text whenever the button is pressed
            connection.write('\x10setWatch(function() {console.log("Pressed");}, BTN, { edge: "rising", debounce: 50, repeat: true });\n',
              function() { console.log("Ready..."); });
          }, 1500);
        });
      });
    });
  </script>
 </body>
</html>

You'll need the console window open... When you click the 'Connect' text it connects, uploads your 'setWatch' code, and then listens for a line containing the text 'Pressed' and writes something to the console

• #3

Ciaran

Awesome thanks for your reply. Will give it a go now.

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.

Puck.js setWatch on web

About