DIY Home Computer

Introduction: DIY Home Computer

About: I enjoy making things - both hardware and software. I run a small company that makes the Open Source Espruino JavaScript interpreter ( as well as the R4 and Morphyre Music Visualisers...

I published an Instructable a while back using an Espruino Pico to make a home computer:

That one required you to connect a VGA monitor by cutting up a VGA cable, but for this Instructable I'm using a board called Pixl.js, which has the LCD screen built-in. It means all you have to connect are a few wires and you've got a properly usable tiny, low-power computer.

So what do you need?

  • An Espruino Pixl.js
  • A piece of plastic or wood to act as a base
  • A Breadboard
  • 4x 4x4 KeyPads
  • Lots of Stickers for the keys
  • 6 sets of 8x Male->Male Dupont-style Jumper wires (48 wires total) - matching multicoloured strips make life a lot easier

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Making the Keyboard

  • Stick your 4 KeyPads next to each other on your base (they're sticky-back). You may want to trim their edges down, but be careful not to trim too far or you might cut some contacts off.
  • Stick your breadboard down in the middle - it's sticky-back too!
  • Split the jumper wire into 4 lengths of 8 - try and keep the colours the same on each.
  • Stick the wires into the KeyPads, making sure the colours all match. Fold the wires back and tape them to the rear of your base. You might want to add some sticky feet to save the wires from getting bent at too much of an angle.
  • Now add a sticker to each button in the Key pad and label them as you want you keyboard. Use the image as an example, but when you upload your code you can change the 'KEYMAP' variable to what you have.

Step 2: Wiring

Now you need to wire the keyboard. Each 4x4 keypad is arranged as a grid, and we're wiring them as if they were themselves in a 2x2 grid - making a big 8x8 grid of buttons.

Wire as shown in the image into 4 groups of 4 wires across the breadboard (check the colours of wires in the images), with left to right:

  • KeyPad 1 First 4 wires -> first group of 4 on breadboard -> D0,D1,D2,D3
  • KeyPad 1 Second 4 wires -> third group of 4 on breadboard -> D8,D9,D10,D11
  • KeyPad 2 First 4 wires -> first group of 4 on breadboard -> D0,D1,D2,D3
  • KeyPad 2 Second 4 wires -> fourth group of 4 on breadboard -> D12,D13,SDA,SCL
  • KeyPad 3 First 4 wires -> second group of 4 on breadboard -> D4,D5,D6,D7
  • KeyPad 3 Second 4 wires -> third group of 4 on breadboard -> D8,D9,D10,D11
  • KeyPad 4 First 4 wires -> second group of 4 on breadboard -> D4,D5,D6,D7
  • KeyPad 4 Second 4 wires -> fourth group of 4 on breadboard -> D12,D13,SDA,SCL

In the image we have 6 sets of 8 wires. The first 2 are from keypads 1 and 2, the second 2 are going to the Pixl.js, and the third 2 are to keypads 4 and 3.

Step 3: Software!

Now make sure your Pixl's firmware is up to date, connect to it with the Espruino IDE, and upload the code below. Disconnect the IDE and you're done!

// Keyboard wiring
var KEYROW = [ D7, D6, D5, D4, D3, D2, D1, D0 ]; var KEYCOL = [ A5, A4, D13, D12, D11, D10, D9, D8 ];

// Key Maps for Keyboard var KEYMAPLOWER = [ "`1234567890-=\x08", "\tqwertyuiop[]\n", "\0asdfghjkl;'#\x84\x82\x85", "\x01\\zxcvbnm,./ \x80\x83\x81", ]; var KEYMAPUPPER = [ "¬!\"£$%^&*()_+\x08", "\tQWERTYUIOP{}\n", "\0ASDFGHJKL:@~\x84\x82\x85", "\x01|ZXCVBNM<>? \x80\x83\x81", ];

/* If a char in the keymap is >=128, subtract 128 and look in this array for multi-character key codes*/ var KEYEXTRA = [ String.fromCharCode(27,91,68), // 0x80 left String.fromCharCode(27,91,67), // 0x81 right String.fromCharCode(27,91,65), // 0x82 up String.fromCharCode(27,91,66), // 0x83 down String.fromCharCode(27,91,53,126), // 0x84 page up String.fromCharCode(27,91,54,126), // 0x85 page down ]; // Shift status var hasShift = false; function setShift(s) { hasShift = s; // draw shift indicator on the screen if (hasShift) { g.setColor(1); g.fillRect(105,0,128,6); g.setColor(0); g.drawString("SHIFT",107,1); g.setColor(1); } else { g.setColor(0); g.fillRect(105,0,128,6); g.setColor(1); } g.flip(); }

// Convert an actual key into a sequence of characters // And send to Loopback (where the console is) function handleKeyPress(e) { var kx = e>>3; var ky = e&7; if (ky>3) { // turn into long row kx+=8; ky-=4; } var key = hasShift ? KEYMAPUPPER[ky][kx] : KEYMAPLOWER[ky][kx]; if (key=="\x01") { setShift(!hasShift); } else { setShift(false); if (key && key.length) { if (key.charCodeAt(0)>127) key = KEYEXTRA[key.charCodeAt(0)-128]; Terminal.inject(key); } } }

// set up the keypad require("KeyPad").connect(KEYROW, KEYCOL, handleKeyPress);

Step 4: Using It!

Now it's working:

  • The keyboard can only detect one press at a time, so Shift toggles uppercase letters (with an indicator in the top right), and typing a letter reverts to lowercase. Holding down Shift and another key won't work.
  • Typing can be quite painful, so use the Tab key (on the left) as much as possible to auto-fill in words!
  • The graphics for the screen is available via methods on the g variable - eg, g.fillRect(20,20,40,40) or g.clear().
  • A lot of IO is used for the keyboard, but you still have pins A0, A1, A2 and A3 that you can use for connecting external hardware.
  • reset() will reset everything - including your code for keyboard handling. To avoid this, turn on save on send, even after reset in the Web IDE's communications options and upload again.
  • Your computer is surprisingly power efficient - you could still expect a roughly 20 day battery life - always on - off a single CR2032 battery!

Be the First to Share


    • Backyard Contest

      Backyard Contest
    • Silly Hats Speed Challenge

      Silly Hats Speed Challenge
    • Arduino Contest 2020

      Arduino Contest 2020