← Home

Christmas 2018 Holiday Project - Raspberry Pi touchscreen alarm clock

OK, so this one’s a bit weird. Why use a relatively expensive Raspberry Pi and a very expensive Raspberry Pi touchscreen?

  1. Because my son wanted to build an alarm clock 2. We had it already and my son thought it would be the most cool (I wanted to use the ESP32 with built-in touchscreen because that’s really cheap). 3. Because I thought it would be easier for my son to get involved in creating the UI.

So, we grabbed it off the shelf and started hacking.

I decided to use React ([0]) for it, because my son knows a bit of JavaScript ([1] helped here) and because I find TkInter to be a drag to use in comparison (React has excellent developer tools).

First, my son drew out what he wanted the UI to look like, and I showed him a selection of various UI React libraries that we could use to build it that were in this article [2]

He picked Google’s Material UI ([3]), which is a really great set of components (but most importantly, has excellent interactive documentation and examples), so that made things a lot easier.

I used [4] to put together the UI skeleton. It’s a batteries-included type thing, so it gave us immediate results (yarn start) and we could start writing the logic.

I was able to explain React and Redux to my 9-year old son with the help of a diagram that showed components, actions, reducers and the state.

If you don’t know React / Redux I’d recommend reading [5] and watching the Dan Abramov videos on [6]

We first built a Clock component that didn’t even tick, and then I went back to add in Redux for state management. Once I set up a ticker, my son helped out with the time libraries, working out what should happen when the seconds and hours increment and I wired them up. We had a clock, but no alarm.

The Raspberry Pi doesn’t have a battery backed clock, so when you unplug it, it loses the time. When you connect to a network, it syncs up the time from there, so you might not notice. To get around that, we just made it so you can set the time manually, but it uses the system clock’s value as the default when you start it.

My son chose some alarm sounds from a Website, and I hooked them up to play at the right time with [7] which turned out to be a great library.

Overall, I had a bit of back-and-forth about the design of the Redux state and the layout of the code and I’m still not 100% sure I’m happy with it, but it works.

My son was most excited about being able to switch into “Dark Mode” which was easy to achieve with Material UI’s MuiThemeProvider:

const Root = ({ isInDarkMode }) => (
  <MuiThemeProvider theme={getTheme(isInDarkMode)}>
    <CssBaseline />
    <App />
  </MuiThemeProvider>
);

The Raspberry Pi doesn’t have a speaker in it, so when we built the code for deployment (yarn build) and copied it over, the alarm didn’t make a noise.

I checked my box of random electronics garbage, but didn’t find a suitable speaker or victim for disassembly, so we went to the local charity shops to see if we could find an old radio or something, but we didn’t. Fortunately, I remembered that he’s got a CD player with an audio input, so we had a crack at using that for now.

We didn’t have the right cable, but my box did have a few mono 3.5mm jacks and some bell cable from our last project, so I got my son to solder one up (first time soldering!). I think he enjoyed this the most.

So, we were able to try out the alarm at last…

It worked! Next, he used the instructions at [8] to get the alarm to run the Chromium browser in kiosk mode.

So, is it a good alarm clock? It woke us up this morning, but the Raspberry Pi touchscreen gives out a lot of light so it’s actually pretty terrible. The Raspberry Pi probably won’t stay an alarm clock for ever but we had fun building it and learned some stuff, and that’s all that matters.

Oh, I nearly forgot, the code is at [9]