Espruino:Примеры/Домашний компьютер на базе Pixl.js
Домашний компьютер на базе Pixl.js[1]
Многие из нас умеют программировать компьютеры вроде ZX Spectrum, Commodore 64, BBC Micro и так далее. Управление ими осуществлялось прямо из командной строки, что вдохновляло многих пользователей на интересные эксперименты.
В этом руководстве я расскажу, как за несколько часов сделать при помощи Espruino собственный JavaScript-компьютер – безо всякой пайки!
Нам понадобятся
- Espruino Pixl.js
- Кусок пластика или дерева, который будет выполнять роль основы
- Макетная плата
- 4 кнопочные панели 4x4
- Много стикеров
- 6 соединительных DuPont-кабелей (по 8 проводов в каждом) типа «папа-папа». Кабели с многоцветными проводами заметно облегчают подключение компонентов – так проще понять, что куда подключено
Подсоединение
- Приклейте к основе 4 кнопочных панели в один ряд (у них липкая обратная сторона). Их можно немного подрезать, но не увлекайтесь, чтобы случайно не отрезать какие-нибудь контакты.
- Приклейте макетную плату к середине опоры (у макетной платы тоже липкая обратная сторона).
- Разделите соединительный кабель на четыре кабеля по 8 проводов в каждом. Также сделайте так, чтобы цвета в каждом кабеле были выстроены в один и тот же порядок.
- Приклейте провода к кнопочным панелям и, опять же, следите, чтобы порядок цветов на разных кабелях был одинаковым.
- Подверните провода под нижнюю часть опоры и приклейте их к днищу скотчем. Также можно присоединить к опоре маленькие ножки, чтобы провода не сгибались слишком сильно.
- Теперь нам надо подключить клавиатуру. Кнопки на каждой 4x4 панели расположены по принципу решётки, и мы подключимся к ним таким образом, чтобы создать решётку из панелей 2x2 – это по итогу создаст большую решётку с кнопками 8x8.
Итак, расположенные слева направо панели будут выглядеть вот так (то есть здесь цифры «1» означают кнопки первой кнопочной панели, цифры «2» – кнопки второй панели и так далее):
| Текст заголовка | Текст заголовка | Текст заголовка |
|---|---|---|
| Текст ячейки | Текст ячейки | Текст ячейки |
| Текст ячейки | Текст ячейки | Текст ячейки |
| Текст ячейки | Текст ячейки | Текст ячейки |
| 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 |
Теперь подключите кабели, идущие от кнопочных панелей, к макетной плате (всего у вас должно быть 8 групп по 4 провода в каждой). Чтобы лучше понимать, что куда подключать, ориентируйтесь по цветам проводов на фото. Итак, подключите эти группы проводов слева направо следующим образом (под словом «столбец» подразумевается вертикальная группа из 4 проводов на макетной плате на фото ниже):
- Первые 4 провода первой панели -> первый столбец -> D0, D1, D2, D3.
- Вторые 4 провода первой панели -> третий столбец -> D8, D9, D10, D11.
- Первые 4 провода второй панели -> первый столбец -> D0, D1, D2, D3.
- Вторые 4 провода второй панели -> четвёртый столбец -> D12, D13, SDA, SCL.
- Первые 4 провода третьей панели -> второй столбец -> D4, D5, D6, D7.
- Вторые 4 провода третьей панели -> третий столбец -> D8, D9, D10, D11.
- Первые 4 провода четвёртой панели -> второй столбец -> D4, D5, D6, D7.
- Вторые 4 провода четвёртой панели -> четвёртый столбец -> D12, D13, SDA, SCL.
Примечание: На фото выше изображены шесть 8-проводных кабелей. Кабель под цифрой «1» – от первой панели, под цифрой «2» – от второй, под «3» – от третьей, под «4» – от четвёртой, а два безымянных в центре ведут к Pixl.js.
- Наклейте наклейки на клавиши как показано на фото ниже. Если вы не из Великобритании, то вам, наверно, лучше сделать собственную раскладку, но тогда вам также нужно будет модифицировать KEYMAP-переменные в коде ниже.
Код
Обязательно обновите прошивку Pixl.js до самой последней версии.
Скопируйте код ниже в правую часть IDE Espruino, кликните на кнопку загрузки кода в центре IDE, а когда он загрузится, напечатайте save() в левой части IDE.
Теперь вводимые вами символы на клавиатуре будут отображаться в окне Web IDE, а если вы отключитесь от Bluetooth, то вводимые символы начнут появляться на LCD-дисплее Pixl.js.
// Контакты, к которым подключена клавиатура:
var KEYROW = [ D7, D6, D5, D4, D3, D2, D1, D0 ];
var KEYCOL = [ A5, A4, D13, D12, D11, D10, D9, D8 ];
// Раскладка клавиатуры:
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",
];
/* Если символ раскладки >=128, вычитаем 128
и ищем в этом массиве код для клавиши,
состоящей из нескольких символов */
var KEYEXTRA = [
String.fromCharCode(27,91,68), // 0x80 влево
String.fromCharCode(27,91,67), // 0x81 вправо
String.fromCharCode(27,91,65), // 0x82 вверх
String.fromCharCode(27,91,66), // 0x83 вниз
String.fromCharCode(27,91,53,126), // 0x84 страница вверх
String.fromCharCode(27,91,54,126), // 0x85 страница вниз
];
// Состояние клавиши Shift:
var hasShift = false;
function setShift(s) {
hasShift = s;
// Рисуем на экране индикатор клавиши Shift:
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();
}
// Преобразовываем клавишу в последовательность символов
// и отправляем её в Loopback (в консоль):
function handleKeyPress(e) {
var kx = e>>3;
var ky = e&7;
if (ky>3) { // превращаем клавиатуру
// в один длинный ряд клавиш
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);
}
}
}
// Настраиваем клавиатуру:
require("KeyPad").connect(KEYROW, KEYCOL, handleKeyPress);
Использование
Итак, теперь наш ПК должен заработать. Вот некоторые советы по его использованию:
- Клавиатура может определять только одно нажатие одновременно, поэтому клавиша Shift включает верхний регистр (справа вверху на экране есть соответствующий индикатор), но если напечатать какую-нибудь букву, у ПК автоматически снова включится нижний регистр. Зажатие Shift в момент печати буквы работать не будет.
- Тем, кто привык к обычной клавиатуре, печатать будет довольно проблематично, так что советуем почаще использовать автозаполнение при помощи клавиши Tab (слева).
- Графику на экране можно рисовать при помощи методов, вызываемых на переменной g – например, g.fillRect(20,20,40,40) или g.clear().
- Для клавиатуры используется много IO-контактов, но A0, A1, A2 и A3 по-прежнему свободны – их можно использовать для подключения внешних устройств.
- Функция reset() выполнит сброс всего, удалив даже код, загруженный на Pixl.js для управления клавиатуры. Чтобы избежать этого, зайдите в настройки Web IDE (для этого кликните на иконку шестерёнки справа вверху), выберите меню Communications, найдите там пункт Save on send, выберите в нём опцию Direct to Flash (execute code at boot, even after ‘reset()’) – USE WITH CARE и снова загрузите код на Pixl.js.
- Этот ПК потребляет удивительно мало электроэнергии – он может работать на одной лишь батарее CR2032 около 20 дней!
Что дальше?
- Вы можете улучшенную версию клавиатуры, сделав её при помощи печатной макетной платы и оснастив более удобными тактильными переключателями.
- Клавишу ⇧ Shift можно подключить к собственному отдельному проводу, благодаря чему её можно будет нажимать вместе с другими клавишами.
См.также
Внешние ссылки
