Espruino:Примеры/Домашний компьютер на базе Pixl.js: различия между версиями
Myagkij (обсуждение | вклад) (Новая страница: «{{Espruino/Панель перехода}} {{Перевод от Сubewriter}} {{Myagkij-редактор}} =<ref>[ www.espruino.com - ]</ref>= <syntaxhighlig...») |
Нет описания правки |
||
(не показано 5 промежуточных версий 2 участников) | |||
Строка 3: | Строка 3: | ||
{{Myagkij-редактор}} | {{Myagkij-редактор}} | ||
=<ref>[ www.espruino.com - ]</ref>= | =Домашний компьютер на базе Pixl.js<ref>[https://www.espruino.com/Pixl.js+Home+Computer www.espruino.com - Pixl.js Home Computer]</ref>= | ||
Многие из нас умеют программировать компьютеры вроде ZX Spectrum, Commodore 64, BBC Micro и так далее. Управление ими осуществлялось прямо из командной строки, что вдохновляло многих пользователей на интересные эксперименты. | |||
В этом руководстве я расскажу, как за несколько часов сделать при помощи Espruino собственный JavaScript-компьютер – безо всякой пайки! | |||
[[File:Pixl.js_Home_Computer_full.jpg|center]] | |||
== Нам понадобятся == | |||
* Espruino [https://www.espruino.com/Pixl.js Pixl.js] | |||
* Кусок пластика или дерева, который будет выполнять роль основы | |||
* [https://www.espruino.com/Breadboard Макетная плата] | |||
* 4 [https://www.espruino.com/KeyPad кнопочные панели] 4x4 | |||
* Много стикеров | |||
* 6 соединительных DuPont-кабелей (по 8 проводов в каждом) типа «папа-папа». Кабели с многоцветными проводами заметно облегчают подключение компонентов – так проще понять, что куда подключено | |||
== Подсоединение == | |||
* Приклейте к основе 4 кнопочных панели в один ряд (у них липкая обратная сторона). Их можно немного подрезать, но не увлекайтесь, чтобы случайно не отрезать какие-нибудь контакты. | |||
* Приклейте макетную плату к середине опоры (у макетной платы тоже липкая обратная сторона). | |||
[[File:Pixl.js_Home_Computer_bread.jpg|center]] | |||
* Разделите соединительный кабель на четыре кабеля по 8 проводов в каждом. Также сделайте так, чтобы цвета в каждом кабеле были выстроены в один и тот же порядок. | |||
* Приклейте провода к кнопочным панелям и, опять же, следите, чтобы порядок цветов на разных кабелях был одинаковым. | |||
* Подверните провода под нижнюю часть опоры и приклейте их к днищу скотчем. Также можно присоединить к опоре маленькие ножки, чтобы провода не сгибались слишком сильно. | |||
[[File:Pixl.js_Home_Computer_back.jpg|center]] | |||
* Теперь нам надо подключить клавиатуру. Кнопки на каждой 4x4 панели расположены по принципу решётки, и мы подключимся к ним таким образом, чтобы создать решётку из панелей 2x2 – это по итогу создаст большую решётку с кнопками 8x8. | |||
Итак, расположенные слева направо панели будут выглядеть вот так (то есть здесь цифры «1» означают кнопки первой кнопочной панели, цифры «2» – кнопки второй панели и так далее): | |||
{| class="wikitable" | |||
|- | |||
|| | |||
|| '''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. | |||
[[File:Pixl.js_Home_Computer_wired.jpg|center]] | |||
'''Примечание:''' На фото выше изображены шесть 8-проводных кабелей. Кабель под цифрой «1» – от первой панели, под цифрой «2» – от второй, под «3» – от третьей, под «4» – от четвёртой, а два безымянных в центре ведут к Pixl.js. | |||
* Наклейте наклейки на клавиши как показано на фото ниже. Если вы не из Великобритании, то вам, наверно, лучше сделать собственную раскладку, но тогда вам также нужно будет модифицировать KEYMAP-переменные в коде ниже. | |||
[[File:Pixl.js_Home_Computer_full.jpg|center]] | |||
== Код == | |||
Обязательно обновите прошивку Pixl.js до самой последней версии. | |||
Скопируйте код ниже в правую часть IDE Espruino, кликните на кнопку загрузки кода в центре IDE, а когда он загрузится, напечатайте save() в левой части IDE. | |||
Теперь вводимые вами символы на клавиатуре будут отображаться в окне Web IDE, а если вы отключитесь от Bluetooth, то вводимые символы начнут появляться на LCD-дисплее Pixl.js. | |||
<syntaxhighlight lang="javascript"> | |||
// Контакты, к которым подключена клавиатура: | |||
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); | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== Использование == | |||
[[File:Pixl.js_Home_Computer_zoom.jpg|center]] | |||
Итак, теперь наш ПК должен заработать. Вот некоторые советы по его использованию: | |||
* Клавиатура может определять только одно нажатие одновременно, поэтому клавиша 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}} можно подключить к собственному отдельному проводу, благодаря чему её можно будет нажимать вместе с другими клавишами. | |||
=См.также= | =См.также= | ||
=Внешние ссылки= | =Внешние ссылки= | ||
Строка 19: | Строка 257: | ||
<references /> | <references /> | ||
{{Навигационная таблица/Espruino | {{Навигационная таблица/Портал/Espruino}} | ||
Текущая версия от 15:06, 20 мая 2023
Домашний компьютер на базе 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 можно подключить к собственному отдельному проводу, благодаря чему её можно будет нажимать вместе с другими клавишами.
См.также
Внешние ссылки