Getting physical aka physical buttons

Hi folks!

I have a little physical button I use with Beeminder. I’m not 100% satisfied with it, but I told @dreev I’d post this quite a while ago. I’ll post what I have, and I’ll write a little bit about where I want to take it at the end.

It’s a “Particle Internet Button”. It costs about $50 and connects to the internet via Wifi. It has buttons, lights, an accelerometer, a few other things, and it’s meant for people to write little programs with to connect it to IFTTT. Silly disclaimer: you can do this with other technologies, you can do this for a bit cheaper if you do it differently, but this is how I did it.

Steps

  1. Acquire a Particle Internet Button.
  2. Make a Particle account and sign into the Web IDE where you can upload programs.
  3. Add the Particle Internet Button you acquired to your account. This will also connect it to your Wifi. I find it easiest through the Android/iOS app, but you can do it through a USB connection.
  4. In the Web IDE, select your device (on the left popout menu). Go to my Beebutton sample code, click the button labeled “raw”, and copy that. Highlight the code in the Web IDE, and paste over it. Delete the top line, #include "InternetButton/InternetButton.h.
  5. In the Web IDE, click the save button on the left popout. It will need to have a name. Remember it.
  6. In the Web IDE, click the libraries button on the left popout. Enter InternetButton into the search box. Scroll down. Click “Include in App”. Select the name you named this in the last step, and click “Add to this App”. It will do some magic behind the scenes, and then add
    // This #include statement was automatically added by the Particle IDE.
    #include "InternetButton/InternetButton.h"
  7. In the Web IDE, click the “verify” button on the left popout. After a few seconds, at the bottom of the Web IDE, it should say “Code verified! Great work.” If not, stop and post what it says, because none of the remaining steps will work.
  8. In the Web IDE, click the “flash” button on the left popout. Within a few seconds, the small light on the board of your device should stop the “cyan breathing” and instead turn magenta. If this is the first time programming the device, it may take a few minutes as it will probably perform firmware updates first.
  9. Go over to the logs section of the Particle Dashboard, and make sure it’s uploading right, before we connect it to IFTTT. Unplug and replug your device. Watch it connect to your wifi (slow green blinks on the board, to fast green blinks, to cyan breathing…) Once the cyan breathing starts, the outer ring lights will flash a few colors to show you the program has started, and now it’s waiting for input. You should be able to press down on the device and feel the buttons on the bottom click. When you press down, the ring lights should show green. When you release them all, the ring lights should quickly flash white, before turning off and waiting for more input. At that point, the button release should have already been uploaded to the Particle servers. Within a few seconds, you should see it on the dashboard view. If so, let’s continue!
  10. Sign up or log into IFTTT. Connect the Beeminder channel and the Particle channel to your account.
  11. Create a new IFTTT recipe. Select Particle as the trigger, and then “New Event Published.” The event name will be “allbuttonsreleased”. You can leave the event contents blank. Select Beeminder “Add Datapoint to Goal” as the Action. I usually use “1” as the datapoint, but you can do a bunch of fun stuff here. I set it to notify me when the recipe activates at the beginning, until I trust that everything is working together.
  12. Click your button! It should light up green while it’s pressed down, and then white after it is released, and then go back to all lights off. You should get a notification that the IFTTT recipe triggered in the webapp within a few minutes, and then it should show up in Beeminder!

Notes

I’m not a huge fan of the Internet Button itself. I like the idea, but I would have chosen different tradeoffs–I would have probably eliminated the buzzer and accelerometer, and put a nicer case on the electronics.

Setting it up in the Web IDE is pretty gross, I have to admit. I think I could bypass steps 4-6 if I made this a library with an example. Let me know if anyone wants me to do that.

There is so, so much you can do with this, however. You can send over the time, instead of a “1”, to log when you wake up or go to bed, or when you finish cleaning the house, or whatever time-based goal you have.

I think it’s almost possible to have the whole thing flash red while you’re in an emergency day.

I’m not a huge fan of it requiring power via a cable rather than a battery. There’s a socket on the inside that indicates that they were thinking about battery power–but this device is pretty new. I haven’t heard if they’re going to be adding a battery pack, or if it was abandoned during development.

Anyway, this sort of thing is one of the things I do for a living. After really getting hooked on Beeminder, I took a look and didn’t see any embedded Beeminder devices. I started working on some tutorials, and then realized–none of the existing options are really great, so I was in a bit of paralysis as I started working on a “Beeminder Kit” to extend one of the cheap off-the-shelf units to be awesome for Beeminder, and then Spark released their Internet Button… which isn’t perfect, but is probably “good enough.”

Please let me know if you have any questions, comments, ideas… I still may make a “Beebutton kit” depending on how things go.

7 Likes