Toothbrush timer

Some time ago we were thinking about coding something again and I asked if we should think about coding something that's actually useful, instead of just games. Kaisla got intrigued by the idea and we discussed few ideas until finally deciding to make a toothbrush timer for Kaisla's little sister Sohvi, who had lately had some trouble concentrating on brushing her teeth for the full two minutes.

This app needed to be portable to be able to take it with you to the bathroom, so we decided to write it on Pocket Code. It was our first app written on it from the beginning (previously we had just converted a few of our previous Scratch games).

Some of the hourglass code

We discussed the design first and decided that there should be some cute animals and an hourglass (since it's a timer). We selected some animal characters from the library in Pocket Code and I found some good hourglass images from internet. The timer needed to be interesting to keep focus for two minutes, so we thought to show two animal characters at a time and randomly change them every 10 seconds or so.

The app turned out quite good and it has been used a lot. It really captured Sohvi's interest and served it's purpose at helping her concentrate on brushing her teeth. In fact it was so successful that we later made an improved version. Kaisla wanted to use Pet Shop characters instead of the ones from Pocket Code, so we scanned some images from her coloring book. We also wanted to make it a bit more interactive, so we added a point system so that when ever two of the same characters are shown at the same time, you get a point if you tap them (you get green thumbs up for each point). This idea came from using the first version, since both Kaisla and Sohvi were always looking out for pairs. We also added some sound effects and made the hourglass go quicker and turn around after a minute to indicate that you need to change from upper teeth to bottom (or vice versa).

It has really been the most successful game/app we have made so far in terms of usage and usefulness. Even though it has been almost six months since we made the initial version, it's still used consistently (not every day anymore, but at least few times a week on average).

Smiley face is shown when time is up

Mobile apps with Pocket Code

I haven't written that much about Pocket Code yet (except for mentioning it in the Resources page), but we have been using it for quite a while now so I thought it's time to write about our experiences with it.

What is Pocket Code?

Pocket Code is another graphical programming environment, similar to Scratch, but instead of using it on a computer, it runs on your mobile phone (or tablet). It's currently Android only, so if you have an iPhone you'll have to look for other alternatives.

In Pocket Code you can publish programs and download and remix other people's programs and even convert them to standalone Android apps. It also has (an experimental) feature to import Scratch projects into it, so it's an easy way to convert your existing Scratch programs to mobile apps!

Programming in Pocket Code is very similar to Scratch, you have different color blocks can be used to define logic, actions and react to inputs etc. So if you are familiar with Scratch, you should feel pretty familiar with Pocket Code and be productive very quickly.

Converting Scratch programs to Android 

We have tried the conversion feature on some of our Scratch games and it works pretty well. You will have to change the input methods, since there is no keyboard. Depending on the program, that might be easier or harder. For example our Owl game turned out pretty good and was easy to convert since it only had one button for input, that we converted to touch (anywhere on the screen). If you want to try it out, install Pocket Code and see if you can find it. More complicated programs might not be that easy to convert, but you can try it out easily anyway.

I think I will write a separate post about our first app that we made with Pocket, called Toothbrush Timer.

Toy Piano

Some time ago Kaisla started to get interested in learning to play music. We have a xylophone with colored "keys" so I printed out a few songs with notes colored with the same colors so she could learn to play them. She learned those few simple songs quite quickly and seemed interested to learn more. I asked if she would be interested in making a piano app so she could play on the iPad, and she said that would be great.

Obviously there are a lot of piano apps already in the app store, but it's not the same as making your own. We couldn't use Scratch for this project since we wanted to run it on the iPad, so I  decided that it would be interesting to see how easy it would be to implement it with web technologies (which I'm already familiar with) and let Kaisla see what "real" code is like. This meant that I did most of the actual coding, but it was still a fun project we did together and I learned some new things along the way and Kaisla seemed to enjoy working on the app also.

We made a few different color schemes for the keys, one with the same colors as the xylophone, so she could play the songs she had learned right away. It's actually almost a year already since we made the first version of the app, but Kaisla and her little sister have enjoyed playing it so we have added more songs to it every now and then. Kaisla has even composed one song of her own, and of course wanted that we add it to the app.

Toy Piano app

You can try it out at: http://cvuorinen.github.io/react-toy-piano
Works best on a touch screen device with a large screen, such as iPad or other tablet. Also works on phones, but has less keys (only one octave) so it's not possible to play all the songs. Add to homescreen for a better experience. Works also on computer, but it's not really fun to play with the mouse.

For anyone interested in the technical side, here is a summary of the technologies used in this project: The user interface is built with React and sounds are produced with Tone.js. The notes are regular UTF-8 characters, the font is FreeSerif and the layout is constructed using CSS flexbox.
Source code available at https://github.com/cvuorinen/react-toy-piano

Stop Motion Animation with Raspberry Pi

Today we tried out a little stop motion animation with Legos using our Raspberry Pi camera and the button we connected to it.

We built a mount for the Raspberry Pi camera module, from Legos naturally. It came out quite nice and it holds the camera firmly in place. Then we set up some Lego roads, a car and some characters and planned a little how we are going to move them. Taking the pictures was quite easy with our setup since we had the separate button and the camera was attached to the Lego base plates, so we didn't have to worry about moving the camera when taking a picture.

Here is a gif of our first try (created using the awesome Imanee PHP library):

It came out OK, but there were a few issues with it so we weren't entirely happy with the result. The background is a bit messy, my hand was in the picture in some of the frames and the biggest issue was that the characters were a little out of focus which made them appear blurry.

Our camera rig, with the extra lens
(attached with blu-tack)

So I Googled around a bit about how to change the focus of the Raspberry Pi camera. And turns out it has a fixed focal length, which is nice most of the time, but for this kind of thing where you want to take pictures where the objects are closer than 50cm from the lens, they will be out of focus. But I found an easy enough solution, which was to buy a pair of cheap reading glasses with lens strength +2, take out a lens and position it in front of the camera. That way the focal length is somewhere around 20-30cm, which is much better for our purposes. And the images did come out better after that, so it was quite easy and cheap hack.

This time we also made the car come from the other direction so it doesn't block so much of the view while it's waiting. Otherwise we did it pretty much the same way. I had to try and keep Kaisla's little sister preoccupied with other things as she really wanted to help also. She did get to push the button a few times to take a couple of frames, but I had to delete some of them as she was a little bit too trigger happy with the button.

Action!

After all the pictures were taken, we moved them to my laptop with rsync and created a video using a command-line utility called ffmpeg. If you are interested in the actual commands, you can check out this great post from Raspberry Pi Learning Resources, which describes each step with a little bit more detail.

Here is the final video:



This time it came out better and we were both happy with the result. Of course there's still room for improvement, for example the lighting is a bit bad since it was evening and there wasn't a lot of natural light. Maybe we'll do some more later on, if Kaisla keeps interested in it. Or maybe we'll try creating a time-lapse video next.

Taking photos with the Raspberry Pi camera module

A few days ago I told Kaisla that I have a camera for the Raspberry Pi that can be programmed with code to take pictures, and asked if she would be interested in trying it out. She got very excited and wanted to try it right away and take some pictures.

I hooked up the camera module I had lying around (I had bought it at the same time I bought all the parts for our traffic lights project) into the Raspberry Pi and then we first tried it out by taking a few pics with a command line utility called raspistill. Kaisla typed the command as I instructed, and she wanted to name the file "perhonen" (butterfly in Finnish). First picture was funny since it was upside down, so we had to add some parameters to the command to flip the image.

It worked nicely but of course it gets quite tedious to have to type some commands every time you want to take a photo. So we decided to hook up a button so we can take pictures just by pushing it. I also had some buttons (or actually, tactile switches as they are called) and an extra breadboard (most of these parts are so cheap, it pays off to get some extra while at the electronics shop or if you order online).

Then we had to Google a bit info about how those switches should be wired, since we hadn't used them before. The switch has four legs, but turns out you only need to wire two of them to make it work.

Then we wrote a quick Python script that takes a picture when the button is pressed and saves it to a file named by date and time. After that it was fun to take pictures just by pressing the button.

We have some plans to try to do a little stop motion animation, which this thing is now perfectly suited for. Just need to build some kind of camera mount to hold it in place. I will write a new post about that in a few days. Update: here is a post about our first stop motion animation.

You can find a lot of info about these things online, but here's a good guide from the  Raspberry Pi Learning Resources.

Traffic Lights - Part 2: Coding & Building

In Part 1 we planned and did the wiring for our Lego traffic lights and tested that the wiring worked. With the wiring done, it was time to code the traffic lights sequence and build a casing that will hold the breadboard and our Raspberry Pi that will control the LEDs.

Programming the traffic lights

We already had a little experience with ScratchGPIO after our Robot Antenna project, so it was a natural choice to also program the traffic lights with. The actual logic is quite simple, and we were already familiar with it since we have been observing real traffic lights lately while driving. We had to discuss the timing a little bit, but mostly Kaisla had pretty good initial suggestions for the timings. We also had to do some trial and error with turning off the lights at correct times.

It was an exciting moment when we finally nailed it and had working traffic lights that change exactly like real traffic lights. We just looked at it for a while, and then of course showed it to little sister and mommy too.

Afterwards we also ported the logic to python so that it will be easier to run remotely on the command line, without the need need to start an X session. I did most of the typing of the python code, but we went through each line side by side with the Scratch version so we could see that it does exactly the same thing.

Building the Lego case

We had already done a kind of front panel in front of the bread board, you can see it in the image above (don't mind the bunny head, it's a speaker and not related to this project). The plan was to make the whole thing portable so that the case holds everything that's needed for it to run, including the Raspberry Pi and a power supply so there are no wires coming out and limiting the range where it can be played with. For a power supply we are using a regular cellphone USB "power bank" (that can be used to charge cellphones on the go) that I already had lying around. We also have a WiFi dongle in the Raspberry Pi so we can connect to it remotely through SSH without the need for it to be plugged in to a display or a keyboard. We also have a Lego compatible base plate in the PiBow case that we have for the RPi, so it was easy to attach it with Legos.

It was still quite hard to get everything to fit nicely so that the power cable and GPIO cable have enough free space. Also the power bank was a little tricky to get to stay in place nicely. The final thing came out quite massive in relation to just the LEDs, but that's ok. It's also quite sturdy and now it's very portable so we can easily move it around without having to plug in anything.

I already had an SSH client app in my phone that I can use to connect to it, but typing CLI commands without a proper keyboard is a little annoying so I found a better app. It's called RasPi Check and it allows you to save the connection details of the RPi and also a list of commands that can then be executed easily later.

So now we can take the whole thing and place it anywhere and then start and stop the python script from my phone with a press of a button. How cool is that!

There was a sample python script that came with the Raspbian installation called blink11.py that toggles GPIO pin 11 on and off with a one second timeout. We also copied that script and changed the pin to 13, which is the pin that our yellow LED is connected to. So now we also have a script to run when the traffic lights are "out of order".

Conclusion

We have played with the traffic lights a few times already, and even though it's just "one sided", it has worked nicely and we've had a good time. But the final product is not the most important thing, it's the project where we have again learned a lot and most importantly spent time together and had fun.

Kaisla has already asked what are we going to do next now that this project is ready, and we have a few ideas. In the parts that I got before starting our exploration with hardware, there were also some buttons (tactile switches to be exact) that Kaisla would like to use for something. So maybe we will do a button that pedestrian Legos can press to get the traffic light to change, or maybe something totally different. We'll see, but I got the feeling that she definitely wants to keep on making "things that work".

Traffic Lights - Part 1: Wiring

When we started our Raspberry Pi traffic lights for Lego cars project, we already had little experience with wiring LEDs and we started by planning the wiring. Instead of drawing the plans by hand, we used a free program called Fritzing. Fritzing is easy to use and has most common components that can be dragged and connected together to create circuits. It then automatically creates a circuit diagram, which is nice. 

Fritzing Breadboard view

Fritzing Schematic view

It was our first time using a breadboard so we had to learn how to use it. It's pretty simple, you just have to know which way the rows are connected. Most of the rows are connected horizontally, but larger boards have two vertically connected, so called power rails, on both sides. Then there are smaller ones that only have horizontally connected rows. We have one of both, but we are using the larger one for this project because it's the one that's Lego compatible, so we can build stuff around it.

After all the planning done, it was time to start actually wiring. We did a quick test to just light up one LED on the breadboard first and it worked fine. Then we just followed our plan and wired all the resistors and LEDs. We had to cut some of the jumper leads with scissors to modify their length so we got the colors just right according to our plan. Other than that it was pretty smooth sailing and Kaisla did most of the wiring, I just needed to help a little here and there.

With wiring done, it was time to test it. We obviously hadn't programmed the traffic lights yet, so we needed some other way to test that the wiring works correctly. I found an awesome Android app called GPIO Tool For Raspberry Pi that connects to RPi using SSH (which I had already set up previously) and allows to set GPIO pins on and off by just pressing buttons on the phone.

Everything worked correctly and it was fun to control the traffic lights manually with the app. If only there was a way to control real traffic lights with an app the same way!

We have already come a long way, but there's still lot of work to do. We must build a "casing" or structure of some kind (using Legos) to hold the breadboard and the Raspberry Pi and of course we must do the actual programming of the traffic lights. We have been observing the traffic light patterns while driving so we know how to do it correctly. But this is enough for now, to be continued in Part 2: Coding & Buiding.