From zero to a day logger using Node-Red — part 1: buttons

As I was reading a very interesting article about someone logging their life in 15 minute chunks, my nerd brain had one issue — this person was using a spreadsheet and didn’t spend time making a random app. So let’s do that now

So, here’s what we’re going to make

On the left: logging. On the right: vision.

The idea is that you’re able to just tap one of the buttons (which are the categories our data logging friend had to ~gasp~ put into a spreadsheet) and it instantly gets logged (with an exact time stamp) in a file. You can just have your phone open next to your laptop and quickly log exactly how much time you spent watching cat video — I mean, doing “low focus work”. And it puts your currently logged data in a nice radar chart for you! Wow! (and a bar chart that I could not get to behave properly).

Please note: this example has a lot of features missing (exporting the CSV file, putting the data in a database, retroactive input, etc.) but I am assuming that, like me, you have given yourself half an hour to get a basic logger up and running and you can deal with those things later.

Let’s get started

Great! I am going to do something a little naughty and brush past the very basic set up. Basically, get your hands on node-red and install the add on “node-red-dashboard” (drop me a comment if I should write a step by step guide for this as well). Now, onto recreating the logger.

Here are the steps that the logger breaks down into:

This is everything we need!

wait! I know nothing!

okay, here is a super, super basic introduction to node-red:

you drag in nodes, wire them together, hit deploy, and it’s alive!

Okay, so you just learned how to “inject” a timestamp and log it, but how do we get fancy buttons for our user? Well, take a gander at this:

Drag in a button, set up the dashboard stuff, configure button, click and goooooooooo

What we do is:

1. drag in a new button node
2. give the button a “home” (in dashboard speak a tab)
3. label the button (in this case “sleeping”)
4. tell the button which message to send when pressed (“sleeping”)
5. wire the button to the debug node so we can see the output
6. press the “open in new window” button on the dashboard configuration tab
7. press the sleeping button
8. switch back to node-red and see that it logged it!
9. repeat for other activities!
10. press deploy!

If you got lost, I recommend this more detailed look at node-red-dashboard

Let’s log it baby

now that we have our buttons, it’s time to actually keep track of what we’ve been pressing and when. The simplest way to do this is by putting the message from the button and the timestamp it’s received into a comma separated file.

What we do is:

Let’s make a fun(ction)…

1. add a new “function” node and call it something like “add timestamp”
2. in the function node we set “msg.payload” (there’s a lot to msg in node-red, but payload is the bit we care about) to Date.now() (javascript for… now) plus the titular comma in a CSV file, plus the previous msg.payload.
3. connect the nodes (in this case I used an inject node for a faster demo, but you can use a button node)
4. deploy
5. press buttons
6. see the output (Date.now() is a timestamp so it’s a big number)
7. rejoice!

for clarity the code is:

msg.payload = Date.now()+”,”+msg.payload;

Now save it

This is where I want to say, this is a lazy approach. Some people would tell you to make a database and write to that, others would tell you to… well probably to do that. But we don’t have time! let’s gooooo

CSV! It’s dynomiiiight! CSV!

The steps:

1. drag in a “file” node
2. give the file the name “data.csv” (or similar)
3. check “Create directory if it doesn’t exist?”
4. check that “Add newline (\n) to each payload?” is checked
5. make sure that “Action” is “append to file”
6. wire it up
7. deploy
8. press buttons!

What we’ve just done is told node-red to take our timestamp + action, and add it onto the back of a file (as a new line). This means we have a CSV file that we’re generating!

Let’s take a peek to check

We know, because we’re not getting a lot of errors, that our file works. But let’s prove it to ourselves! First, wire in all the buttons, then hit the buttons a bunch to generate some data points, and then we’re going to do the following:

Now *this* is rapid prototyping

The steps:

1. add a “inject” node so we can press it to make things go!
2. add a “file in” node to get the input from a file
3. add a “debug” node so we can see the output from the file
4. wire them all together
5. make sure the “file in” node has the name of our csv file
6. deploy
7. press the inject node and watch the magic happen!

Wrapping it up for now!

We’re almost done! Honestly, right now you have a dashboard interface that logs button presses onto a file! It’s most of the functionality we wanted to have and we had to write ONE LINE OF CODE!

I know a lot happened in these steps, and I am sure I skimmed over some stuff, so please drop a comment about what I missed and get ready for part 2, and me dropping the code….