Using the C.H.I.P. computer and React to help kids get chores done

I almost titled this post “When technologically actually works how you want it to,” but figured it’s such a rare event that nobody would actually believe it and would skip over it. 🙂 Believe it or not, this is one of those times when a technical solution, even a small one, has effectively and positively changed behavior.

Problem

My wife and I (okay, most credit goes to my wife) have been working with our kids, ages 5 and 3 on doing their chores using a new system. Part of that system is that they have a set of morning, afternoon, and evening chores that they must have done by a certain time in order to earn a ticket to cash in for fun things. One of the issues we have had was that, they being 5 and 3, they don’t read clocks yet. Yes, my five year old can kind of get it when the “big hand’s on the twelve and the little hand’s on the seven,” but we found ourselves constantly nagging and pressuring as the time for completion got closer. It wasn’t fun for us, it wasn’t fun for them, nor did it seem completely fair to put them in charge of their jobs without providing them the tools to contextualize their timeline. (Yes, I just talked about responsibility, context, and timelines when talking about a three year old doing her dishes…)

Wouldn’t it be nice if there were some sort of easy visual thing they could use to know how much time they had and track their own progress against it? That would be awesome, and computers are really good at telling time and showing stuff, right? Enter technology.

Solution

What we ended up devising was a tiny little web app, tailored to our unique schedule and needs, that we display on the TV in the main living area during the hour prior to their chores timeline during each part of the day. The little app, which you can preview here, just shows a minutes countdown for the five year old who can count, and visual timer that shrinks and changes from green to yellow to red as the deadline approaches. I loaded it up on a C.H.I.P. $9 computer that I had preordered a while ago but failed to find a use for, and now we just turn on the TV and C.H.I.P. around an hour before each deadline and the kids know exactly how much time they have left. Our kids seem to appreciate it as they can motivate themselves (“It’s REEEEEEEEED, it’s REEEEEEEEEED!!!”) and we do less (unfortunately not no) nagging now.

Components

For all you fellow parents out there looking to do something similar, here’s my setup.

React App

When I need to display something dynamic on a screen, usually the easiest first stop is a rough and quick JS application, and so I just worked up a very small, static React.js app that looks at the system’s local time, compares it to the preconfigured chore deadlines, and displays the appropriate screens based on that state.

Is it the best architected or cleanest app ever? No way! It’s maybe 200 LOC max, but it certainly gets the job done and was coded up in less than half an hour, and since my kids aren’t paying me anything for it besides love and respect (ha!) it fills the need perfectly.

Here’s the source, for those who may wish to play with it.

C.H.I.P. Computer

Nearly a year ago I had preordered the Next Thing Co.’s C.H.I.P. computer, which is similar to a Raspberry Pi but a little less pricey, and very key, has a WiFi module built in so that it can connect to wireless networks without any additional components. I had nearly forgotten about it till it finally shipped a couple of months ago, and since then have been looking for an excuse to use it.

Here’s a picture of the very fancy setup I have now, involving a bare C.H.I.P. hanging off the side of my television. 🙂 Another great thing about the C.H.I.P. is that it has an power button, so unlike the RPi I don’t have to reach behind the TV to plug or unplug it, I can actually just press the tiny button to turn it on and off when we need it. The power draw on the thing is ridiculously low and I’m sure I could just leave it plugged in, but it’s nice to not have to have it on always.

One small issue I did run into with the C.H.I.P. is that I had no USB keyboard that I could plug into it that wouldn’t draw too much power and immediately shut the thing off. I tried with a wired Mac keyboard (two additional USB ports on it evidently drew to much–zap) and a wireless Logitech where the receiver is a larger USB device, which also–zap–killed it.

Thus configuring the C.H.I.P. was honestly the toughest part of the process. I could program it if I could SSH in, but to do so I had to get it on the network. There’s no onscreen accessibility keyboard that I could find, so in order to type to get it onto the wifi I opened up Abiword, used the “Insert Character” menu item, and typed in my commands letter by letter till I could copy and paste commands and passwords into the various UI elements–fun! Luckily, once finally connected to my wifi the SSH connection made it super easy.

Showing the web app on the C.H.I.P.

To display the web app on the C.H.I.P. I took a very simplistic route: I set Firefox to open on startup, and set the app to the homepage in the browser. I ran into a few issues with this, but they were easily solved.

1. The version of Firefox (actually Iceweasel, at first) that C.H.I.P. OS came with was old and not properly running the React app, necessitating an upgrade. An apt-get upgrade luckily solved that.
2. The shutdown procedure the C.H.I.P. runs through appears to be pretty quick and dirty, and Firefox would complain every other time or so that it hadn’t been shut down properly, how embarrassing and would I like to restore the previous browsing session? Helpful, but this screen would pop up and block the home page/timer app that I wanted to show, and without an input device constantly connected there’s no way to dismiss this. However, you can turn off the restore session feature flag in about:config, which did exactly the trick.

To run the app on startup I simply created a new .desktop file following the XDG format.

Now whenever I run the C.H.I.P., it boots up in about two minutes, opens Firefox, and displays the chore timer app I wrote right away. The app simply relies on the current time, displays whatever timer or “up next” message is appropriate, and my kids go a-choring! (Ha, I wish, usually they realize that it’s still green and have time to procrastinate. Maybe I’ll have to mess with the color configs…)

Conclusion

Sure, it’s a little ghetto that I have a bare board hanging off the back side of my TV, but this is about one of the most functional little tools I’ve put together in a while. There would be alternatives like AirPlaying the app from my iPhone or something similar, but that would put a phone out of commission for three hours a day, and the C.H.I.P. solution is so elegantly simplistic! This type of application could be used in other scenarios as well, like a simple build/CI server dashboard, trade show kiosk screens, etc. Simple, relatively error-proof, cheap, and it works. I love it when technology actually works.