Puck.Js and integration with IoT and IFTTT

Posted on Thu 2nd, February 2017

• #1

user73357

Hello,

I am a new fish on the pond and my question might be a stupid one but I thought to ask anyway:
I am trying to learn how to use Puck in a simple way to trigger IoT events with IFTTT. I found the section talking about that but I did not get it quite. I do know that Puck itself does not have a means to form an internet connection itself, but is this preventing me triggering IFTTT events with maker channel or something like that? Surely it must be enough that Puck is connected with Web bluetooth and sending the appropriate message to server? Must be really easy, but somehow for a beginner like me a bit frustrating to find the way.

Would appreciate some advice!

Thanks! - Saarni
• #2

Ollie

IFTTT maker channel needs HTTP requests, so you'll need a proxy of some description between your Puck and the IFTTT service. There's an Espruino hub that's designed to run on Raspberry Pi 3. It offers a HTTP Proxy option. You could use Web Bluetooth but you'd need to script it. I started down this road with this project, but haven't so far go to the proxy piece, and maybe won't.

It's also worth evaluating if you need a Puck for your use case. If you want to communicate over the Internet maybe Espruino Wifi or Espruino on ESP8266 would be a more natural fit.

• #3

Gordon

Here's a bit of code that'll do it - if you stick this on an HTTPS webpage then once connected, when you press the button it'll call IFTTT.

It even automatically loads the code onto the Puck for you:

<html>
 <head>
   <title>IFTTT Web Bluetooth Example</title>
 </head>
 <body>
  <pre id="log"></pre>
  <button>Click here to start</button><br/>
  <iframe id="ifttt" style="width:640px;height:32px"></iframe>
  <script src="https://www.puck-js.com/puck.js"></script>
  <script type="text/javascript">
    var button = document.getElementsByTagName('button')[0];
    var logelement = document.getElementById('log');
    var iftttRequests = 0;
    function log(txt) {
      logelement.innerHTML += txt+"\n";
    }

    function ifttt() {
      document.getElementById('ifttt').src = "https://maker.ifttt.com/trigger/puck_event/with/key/km.....Qv?"+iftttRequests;
      // ^^^^^^ Change the URL above
      iftttRequests++;
    }

    // Called when we get a line of data
    function onLine(v) {
      log("Received: "+JSON.stringify(v));
      if (v.indexOf("Pressed")>=0) {
        log("Calling IFTTT");
        ifttt();
      }
    }

    // When clicked, connect or disconnect
    var connection;
    button.addEventListener("click", function() {
      if (connection) {
        log("Closing connection");
        connection.close();
        connection = undefined;
      }
      log("Opening connection");
      Puck.connect(function(c) {
        if (!c) {
          log("Couldn't connect!");
          return;
        }
        log("Connecting...");
        connection = c;
        // 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("\x10reset();\n", function() {
          // Wait for it to reset itself
          setTimeout(function() {
            // Now tell it to write data on the current light level to Bluetooth 10 times a second
            connection.write("\x10setWatch(function(){Bluetooth.println('Pressed');},BTN,{repeat:true,debounce:50,edge:'rising'});\n",
              function() { log("Ready!"); });
          }, 1500);
        });
      });
    });
  </script>
 </body>
</html>

As @Ollie says, if you really want an internet connection it might be better to do something directly, but the above works well for tests.

• #4

user73357

Thanks for your help both of you! I see I need to study a bit more before I can understand the code you sent. But I have the interest to do so! I am really exited about the possibilities of the Puck.js!
• #5

Gordon

Just to add I turned this into a tutorial: http://www.espruino.com/Puck.js+IFTTT
• #6

Jennygrist

Gordon, Hi! Thanks so much for your tutorial. I am a complete newbie and I’m struggling to understand why I can’t see this properly:

https://github.com/jennygrist/pucktest/blob/master/test.html

I know I am supposed to be seeing a ‘press to start’ button, but all I am seeing is the code.

Am I looking for the file in the wrong place? Have I pasted the code in the wrong way? I’d appreciate any help anyone might offer; I am very new to this.

:)
• #7

Robin

Sun 2019.04.07

Hello @Jennygrist, welcome to the world of Espruino. Although I've not done that tutorial, the idea is to create a web page using that code, and deploy to a remote server or your own public GitHub account. I believe the restriction is that Puck.js requires an https:// secure access.

From inside the link in #5 above:

'For an example of how to do this, see the Web Bluetooth tutorial'

What was the result of following the step-by-step outline in:

https://www.espruino.com/Web%20Bluetooth

The last instruction at:

https://pages.github.com/

Fire up a browser and go to https://username.github.io

If I type in: https://jennygrist.github.io/
The page indicates that the GitHub Pages account is not yet set up.

It appears your repository does contain the (your link in #6) source code, and that looks fine, just that the deployed to Pages part isn't complete yet. In can take fifteen minutes or so. That Pages account part serves your repository Html page content in order for you to see the rendered button output in the browser.

In the meantime, were you able to use the 'Try Me' button in the first code block at:

https://www.espruino.com/Web%20Bluetooth

and connect to your Puck that way?
• #8

Jennygrist

Hurrah, thanks so much for your help @Robin, although I had followed the early instructions, I hadn’t a clue why the page wasn’t ‘appearing’ properly. Your reply helped me to understand that I had to look elsewhere to find the Github Page and also wait a while. I’d been trying a similar task yesterday and looking in the right place, but way too soon. Thanks from a newbie!

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 and integration with IoT and IFTTT

About

Puck.Js and integration with IoT and IFTTT

Actions

Puck.Js and integration with IoT and IFTTT

Formatting Help

About

Puck.Js and integration with IoT and IFTTT

Actions

Espruino