Pixl.js Home Computer

Many of us learnt to program on Sinclair Spectrums, Commodore 64s, BBC Micros or similar. Computers that booted straight up to a prompt and that encouraged you to play with them.

In this tutorial you'll learn how to make your own JavaScript computer in a few hours using Espruino - no soldering required!

Finished Computer

Also see the original Espruino Home Computer with a VGA output.

You'll Need

Wiring Up

Keypads and Breadboard

Back of the base plate

With the keypads numbered left to right this would look like:

D8 D9 D10 D11 D12 D13 SDA SCL
D0 1 1 1 1 2 2 2 2
D1 1 1 1 1 2 2 2 2
D2 1 1 1 1 2 2 2 2
D3 1 1 1 1 2 2 2 2
D4 3 3 3 3 4 4 4 4
D5 3 3 3 3 4 4 4 4
D6 3 3 3 3 4 4 4 4
D7 3 3 3 3 4 4 4 4

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

All wired

Note: Above 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.

Installed Pixl.js

Software

Make sure your Pixl.js has up to date firmware!

Put the following in the right-hand side of the Web IDE, click Send to Espruino, and when that is done type save() in the left-hand side.

The keyboard should now enter characters in the Web IDE window, and if you disconnect from Bluetooth then everything will start appearing on the Pixl's LCD.

// 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);

Using

Zoomed screen

Now it's working:

What next?

This page is auto-generated from GitHub. If you see any mistakes or have suggestions, please let us know.