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  можно подключить к собственному отдельному проводу, благодаря чему её можно будет нажимать вместе с другими клавишами.

См.также

Внешние ссылки