Heyo! We’re going to be using Spark’s new Internet Button and the IFTTT channel to build a fun way to stay connected with loved ones while they travel. To build along with me you’ll need a Spark Core or Photon and an Internet Button. I’ll be setting this up using gmail, but if you don’t have a gmail account you can setup a similar project using SMS.
All right, let’s get going….
I live in Minneapolis but I often work out at Particle HQ in San Francisco. When I’m at the HQ the days tend to be packed full of meetings, brainstorming and projects (or Kickstarter launches!). I sometimes don’t get a chance to connect with my husband all day so I thought I’d build a fun project to make sure I let him know I’m thinking of him amidst the whirlwind life at a startup. Yeah it’s a little corny, but trust me, when your Sig-O supports you through the late nights and general life-takeover of a startup you’ll want to make fun projects for them, too.
So! I’m going to build a button for the Sparkhaus (HQ) that sends a message to my husband to let him know I’m thinking of him when it’s pressed. All of your buttons will send messages to my husband too. In all seriousness though, this tutorial is about learning how to easily build projects using the directional buttons on your Internet Button and IFTTT.
Time to build.
Step 1: Hardware setup
I don’t think this will actually end up being much of a step, since your Photon and Button will ship pre-connected, but just in case, you’ll want to make sure your Photon is correctly plugged into your Internet Button as in the picture below:
Step 2: Connect your device to the Internet and claim it to your account. (If you’ve already claimed your device skip to step 3)
If this is the first time you’ve opened your board let’s start our by getting your Core/Photon claimed, instructions can be found here.
###Step 3: Log into your account at Particle.io/build
- Click on the “Cores”
button to make sure that your Core/Photon is connected. You should see a small cyan dot to the right of the name of the Photon in use. Make sure that the star to the left of your board in use is the one that is filled in.
###Step 4: Create a new app in the Web IDE
In anticipation of the launch of the Internet Button, @richard put together some awesome Button/IFTTT specific firmware. This will continue to evolve and will become an official Library prior to Button delivery. It makes creating these projects super easy.
In this case, I’m going to share my firmware with you - you’ll want to copy and paste it directly into the text editor of the IDE (labeled as “code”). If you want some help with navigating around the IDE a great place to start is the Web IDE section of our docs site.
Don’t forget to add the library and make sure there are no duplicate #include
s introduced during the process.
#include "InternetButton/InternetButton.h"
InternetButton b = InternetButton();
uint8_t button1 = 0;
uint8_t button2 = 0;
uint8_t button3 = 0;
uint8_t button4 = 0;
uint8_t buttonAll = 0;
int gaugeCount = 0;
// The code in setup() runs once when the device is powered on or reset. Used for setting up states, modes, etc
void setup() {
// Tell b to get everything ready to go
b.begin();
}
/* loop(), in contrast to setup(), runs all the time. Over and over again.
Remember this particularly if there are things you DON'T want to run a lot. Like Particle.publish() */
void loop() {
if(b.allButtonsOn()){
if(!buttonAll){
buttonAll = 1;
Particle.publish("allbuttons",NULL, 60, PRIVATE);
b.rainbow(10);
delay(100);
b.allLedsOff();
}
}
else {buttonAll = 0;}
if(b.buttonOn(1)){
if(!button1){
button1 = 1;
Particle.publish("button1",NULL, 60, PRIVATE);
b.ledOn(12,50,0,0);
delay(100);
b.ledOff(12);
}
}
else {button1 = 0;}
if(b.buttonOn(2)){
if(!button2){
button2 = 1;
Particle.publish("button2",NULL, 60, PRIVATE);
b.ledOn(3,0,50,0);
delay(100);
b.ledOff(3);
}
}
else {button2 = 0;}
if(b.buttonOn(3)){
if(!button3){
button3 = 1;
Particle.publish("button3",NULL, 60, PRIVATE);
b.ledOn(6,0,0,50);
delay(100);
b.ledOff(6);
}
}
else {button3 = 0;}
if(b.buttonOn(4)){
if(!button4){
button4 = 1;
Particle.publish("button4",NULL, 60, PRIVATE);
b.ledOn(9,30,30,30);
delay(100);
b.ledOff(9);
}
}
else {button4 = 0;}
}
Flash to your Core/Photon. Your board will blink magenta during this process and then automatically reconnect when it has the new firmware on board.
Now we’re ready for IFTTT.
###Step 5: Log onto IFTTT and hit “New Applet”
Then click “+this” to choose your action.
Step 6: Select Particle as your Trigger Channel (IFTTT step 1)
If you have not already activated the Particle channel you’ll need to do so now. Use the same email address you use for your Particle login account (but note that it needs to be all lowercase here for some reason).
###Step 7: Choose a Trigger (IFTTT step 2)
I want to use the part of my firmware that includes Particle.publish so I’m going to select “New Event Published”.
###Step 8 Complete Trigger Fields (step 3 in IFTTT)
In our firmware we can see that there are several events connected to Particle.publish() and we could fill in any of them (allbuttons, button1, etc).
I’m going to choose button2 for this example. That means this part of my code does the work on the firmware side: Particle.publish(“button2”,NULL, 60, PRIVATE);
I’ll want to fill out my trigger fields as below:
If (Event Name)
• Here I’ll add the Event Name (Topic) from my firmware -> button2
Is (Event Contents)
• Event Input is actually an optional field so I’ll go ahead and leave it blank.
Device Name or ID
• I’ll select the Core I want to use -good ol’ Narwhal Dentist
Once I’ve filled everything out I hit “Create Trigger” and move on.
###Step 9: Choose Action Channel (step 4 IFTTT)
I’d like to send an email when I press the button so I’m choosing the Gmail channel. You can also experiment with this recipe using other notification channels.
###Step 10: Choose an Action (step 5 IFTTT)
In this case there’s only one Gmail action to choose - send an email
Step 11: Complete Action Fields (step 6 IFTTT)
Now is where we can fill in who our email is going to and what we want it to say. I have no yet experimented with including a gif in this email but I am definitely planning to do so.
###Step 12: Create and Activate (step 7 IFTTT)
This is where you can write a nice description of your recipe (or else just leave what is automatically populated)
###Step 13: You’re all done!
Now it’s just time for testing. And for keeping your co-workers away from your button so that your sig-o does not get sent an email every 5 minutes. Here’s what Bill gets from me
Next Steps: Now that you’ve learned how to use the push-buttons on your Internet Button with IFTTT you can go back and start creating different recipes for each individual push. While button2 may send an email to Bill, maybe I’ll set button1 to post to Spark’s slack channel that I’m hungry and want to go get food, or I’ll set button4 to post a tweet on @spark_io whenever it gets pressed. Lots of possibilities. Go crazy and please share your own projects!