DIY : “BabyPi,” a simple Raspberry Pi powered toy computer for kids.

Introducing the BabyPi — a simple way to teach letters of the alphabet, numbers and basic drawing for learners of all ages running on the low cost and open Raspberry Pi platform.

A picture of the finished product (flower drawing not included, you’ll need to provide your own drawing skills)
BabyPi can be a fun instructional tool for any age learner, in this example we show teaching lowercase letters.

This is what we’re making, a Raspberry Pi based kids toy that I’ve nicknamed the “Baby Pi.”

This takes about 2 hours and supplies cost at least $65 to $350 and up depending on how much you use existing peripherals like a keyboard and screen, or splurge on new components.

If you’re ready to start building now and don’t care about the background or motivation of the project, jump ahead to Part 2 — Build a BabyPi Step-by-Step Guide and Parts List. Or continue reading below for more on why I created this project in the first place.

Project Background and Motivation

Since the birth of our daughter two years ago I’ve been revisiting many parts of my childhood including fond memories of our first family computer. When I was just a few years old (way back in the ’80s) my dad brought home our first computer, a Commodore 64.

Early Games Commodore 64 title screen (source)

My memories of the system include playing a simple set of mini-games made for kids called Early Games. It was one of my formative memories of first using a computer and the simple exercises helped introduce me to computing from an early age.

An example of a “puzzle” in Early Games for C64 (Answer: F)

There wasn’t much you could do with Early Games, but that was kind of the point. It had a very simple interface and its “games” were more like typing letters of the alphabet, answering basic arithmetic questions, and even simplistic drawing with the keyboard as some sort of digital etch-a-sketch.

Of course, like everyone, our daughter is attracted to the siren call of smartphones and is naturally intrigued by my laptop when I use it in her presence. As an alternative to more passive mobile games I wanted to create a more positive computing experience like I had when growing up with the Commodore 64 and Early Games. That was the motivation behind BabyPi.

Creative Brief: What are we making?

I set out to create a simple experience to learn letters and numbers and using a keyboard in a package that’s easy to use for truly all ages even 1-year-olds! Some ideal requirements:

  • Easy to use — anyone including a baby should be able to just “use it”. No menu, no written instructions.
  • All inclusive hardware — It should be self-contained and packaged safely for children.
  • Open source — Hardware and software should be freely replicable
  • Easy to make — even non-geeks should be able to put this together with basic instructions
  • Low cost — this should be cheaper than an iPad but shouldn’t be too much more expensive than a regular toy of similar capabilities

The Competition

What toys are out there already, competing for her attention at home, daycare or friends places? I looked for inspiration in what she was already playing with — games like Busy Poppin Pals or this farm game at Grandma’s house where you get quick reactions to tactile input like figurines popping up or a cow mooing.

The competition, from upper-left moving clockwise: Busy Poppin Pals Sesame Street 1988, Busy Poppin Pals 2018 Era, Fisher Price Cash Register Toy, Chicco Interactive Talking Farm

Researching the Technology Solution Set

I started out by looking at what solutions already exist and how I might be able to assemble this from pre-built components.

Software

On the software side, I searched for a more recent equivalent of Early Games for PC or Mac and the closest I found was an open-source game BabySmash for PC (lovely video of a satisfied user). For mobile devices running iOS or Android there were a bunch of apps advertised for very young children, but dishearteningly most had in-app ads which is a nonstarter for young kids.

I decided to create my own app.

Hardware

On the hardware side I wanted to package this experience in a “computer” of her own similar to the simplicity Commodore 64, or perhaps even easier! That way she could have her own “toy computer” so when she tries to use my laptop I can redirect her to this one instead. I looked around for different options but quickly found that Raspberry Pi to be the best for my needs, also inspired by my friend Brendan Nee’s creation of a Raspberry Pi powered real-time transit information kiosk.

This project uses the same technique running Chromium on a Raspberry Pi in “kiosk mode” (removing browser and OS UI elements) to launch a simple website running a JavaScript application which is the heart of the experience.

Kids and Tech Considerations

Kids put things in their mouth and keyboards have small parts so they could suffocate or get electrocuted from this stuff, so please be a responsible parent.

What about screens? They’re embedded as part of our daily lives so it’s not a long-term option to prevent kids from using them forever. I hope with projects like these we can at least guide kids toward positive computer and screen behavior.

I think there are 2 core issues with so called “screen time” for kids: (1) the effect of the physical screen on their eyes — screen time may cause or worsen myopia, and (2) the effect of the content shown on the screen.

I think the effects caused by the content (2) are very powerful and when accumulated over time are impactful at life changing levels for task performance in daily life. My simplistic view of “screen time” divides its use cases into two buckets:

  • Captive”: watching, browsing, passive, following, directed, captivation — We seem to have infinite capacity for this. Gratification is immediate and generally constant after that, kids get mad when you stop their videos mid-stream.
  • Creative”: making, taking action, seeing reaction, interact and create — We have a limited capacity for this. Gratification is delayed, slowly building with challenges and achievements ebbing and flowing with the activity.

The rule of thumb is pretty obvious — being in the Creative is zone is generally good and try to avoid captive screen time. Easy to say, hard to do for even myself (reddit can be addictive!), but so far it has been easier with our daughter to avoid screens with the notable exception of cross country flights where captivation is the precise goal.

As a kid my fondest experiences of screen time were creative games that offered track and world creation features like Racing Destruction Set on C64 or Stunts on IBM/PC. I spent countless hours coming up with the craziest “maze” tracks and stretching the boundaries of the built-in physics systems.

Writing the BabyPi App

The platform for this project is Raspberry Pi which promotes Python as one of its primary languages for learning. I’ve used Python as a server-side language and I could have fiddled around with some Python graphic libraries to make this, but I think the web is much simpler for interactive visual applications and we can simply run Chromium in kiosk mode and point it to any web page, so let’s do that instead.

Early user testing showed that displaying function key values was confusing.

The implementation was quite simple, a simple press of a button on the keyboard makes it show up on the screen. The letters are large and centered on the screen, capitalizing the letter and omitting key presses from non-alphanumeric function keys.

I used Glitch.com, an interactive code editor to make this project. You can check out the code right here right now but I’ve also pasted it below as I explain the basic inner-workings.

It’s super simple, first there’s a place to display the letters which defaults to a keyboard emoji (⌨)when it first loads:

<div class=”container”>
<span id=”letter” class=”text”>⌨</span>
</div>

Then the real magic are these few lines of code that update the letter when a key is pressed. The vanilla JavaScript is quite readable and I’ve included a few comments to explain additional logic:

<script>
window.addEventListener("keydown", function (event) {
if (event.defaultPrevented) {
return; // Do nothing if the event was already processed
}
// don't show funny key values like "Alt" or "CapsLock"
if (event.key.length == 1) {
var newLetter = event.key.toUpperCase();
var oldLetter = document.querySelector("#letter").innerHTML;
// only change letter and clear drawing canvas if new letter typed
if (oldLetter !== newLetter) {
document.querySelector("#letter").innerHTML = newLetter;
clearCanvas(canvas,ctx);
}
}
// Cancel the default action to avoid it being handled twice
event.preventDefault();
}, true);
</script>

That’s it, really! And here’s some CSS code to make it look ok:

.container {
text-align: center;
}
body {
background-color: black;
overflow:hidden;
}
.text {
color: fuchsia;
font-size: 80vmin;
margin: 0;
padding: 0;
font-family: monospace;
}
canvas {
position:fixed; top:0;left:0;
}

I also added a basic drawing feature based off an example app I found with a quick Google search. That code is a bit long to paste here but you can take a look in the Glitch source code instead.

So what does it do? Here’s a video:

Ready to build your own? Continue to Part 2: “BabyPi” Step-by-Step Building Guide and Parts List.

BabyPi is best served with your favorite pastry from a local cafe.

Or, you can use BabyPi right now without any new hardware! It’s good in a pickle when you’re on the go with your little loved one and need a distraction.

You can use BabyPi anytime, just go to babypi.glitch.me and enter fullscreen using your favorite browser.

Continue to Part 2>>

LEAVE A REPLY

Please enter your comment!
Please enter your name here