How to Make a Useful Toggl Time Tracker with Particle and Node

I have recently been tracking my time on projects more closely throughout the day. It is useful to see which projects take up more time than others and helps me measure which days I'm most productive (and what is distracting me!). My service of choice for this is Toggl. It is simple, clean and syncs across devices. Best of all - it has an API which you can hook up your own applications and devices to. I decided to set up a button connected to my Particle Photon that would start and stop my Toggl timer for me. I used a simple Node server to manage the communication between my Particle device and Toggl.

Clicking a physical button feels just that little bit more empowering than tapping a software button and prevents me needing to get out my smartphone or click around on my Mac to find the timer!

What You'll Need

• A Particle Core or Photon - I'll be using a Particle Photon but both should be compatible with the demo
• A physical button of some kind
• A breadboard, resistors and jumper wires - If you are new to tinkering with microcontrollers, SparkFun has a great new Inventors Kit for the Photon
• A Toggl account - If you don't have one, head to the Toggl website to sign up!
• Knowledge of how to get code onto your Particle device - if you're new to this, I published a SitePoint article a few weeks back on connecting to the Photon. The Particle Core is similar.
• A basic understanding of running a Node server and using npm - Peter Dierx at SitePoint has written a pretty comphrensive guide on starting with npm.

Note: Particle also sell a big physical button. You could quite likely adapt this concept to the big button for a lot of fun, I just don't own one of those... yet.

Finding Your API Keys

To get your Toggl API key, visit the Toggl "My Profile" Page. If you scroll down to the bottom of this page, you'll find a unique API token you can use like so:

Copy that token to a safe place. You'll need it!

You can also reset it using the tiny "Reset" link on the right hand side (useful in moments like just then when I revealed my API key to you all).

If it has been a while since your last Particle build session and you need a refresher on finding your Particle API key, go to the Particle Build online editor and click the gear icon at the very bottom to get to the settings page. From there, you'll see a screen which shows you your access token.

Copy that one too.

Our Particle Sketch

Our sketch with the layout of the breadboard, Particle device (shown as a Core in this pic but both this and a Photon will work), LED and button looks like so:

Download The Code

All of the code for this example can be found on GitHub.

Our Particle Code

Our Particle code will keep track of whether or not the button is pressed and whether or not we want to have our LED lit up or not. All the rest of the functionality will be taken care of by our Node server.

The Particle code looks like so:

[code language="c"]
int ledPin = D0;
int buttonPin = D5;
bool ready = true;
int last;

void setup() {
pinMode(ledPin, OUTPUT);
pinMode(buttonPin, INPUT);
last = millis();
digitalWrite(ledPin, LOW);

Spark.function("ledTrigger", ledTrigger);
}

void loop() {
if (millis() - last > 200) {
if (digitalRead(buttonPin)) {
if (ready) {
ready = false;
Spark.publish("buttonPressed");
last = millis();
}
} else {
ready = true; // button ready to be pressed again
}
}
}

int ledTrigger(String value) {
if (value == "ON") {
digitalWrite(ledPin, HIGH);
} else {
digitalWrite(ledPin, LOW);
}

return 0;
}
[/code]

I'll explain what each bit of that code means. To start with, we define our two components and the pins they are attached to. Our button is attached to D5 and our LED is attached to pin D0.

[code language="c"]
int ledPin = D0;
int buttonPin = D5;
[/code]

The next two variables are there to keep track of timing within our loop. ready tracks whether our button is ready to be pressed again. We want to ensure there is a period between when we first click it and when it can be clicked again. last is the variable which helps track this period of time, it keeps track of the last time the loop has been run. That might make more sense when you see it in action soon.

[code language="c"]
bool ready = true;
int last;
[/code]

In our setup() function, we start by setting the pin mode for our LED to output and set it to input for our button.

[code language="c"]
void setup() {
pinMode(ledPin, OUTPUT);
pinMode(buttonPin, INPUT);

// more code explained next!
}
[/code]

Continue reading %How to Make a Useful Toggl Time Tracker with Particle and Node%

by Patrick Catanzariti via SitePoint