Espruino:Примеры/Домашний компьютер на базе Pixl.js: различия между версиями
Myagkij (обсуждение | вклад) Нет описания правки |
Нет описания правки |
||
(не показаны 4 промежуточные версии 2 участников) | |||
Строка 25: | Строка 25: | ||
* Приклейте макетную плату к середине опоры (у макетной платы тоже липкая обратная сторона). | * Приклейте макетную плату к середине опоры (у макетной платы тоже липкая обратная сторона). | ||
[ | [[File:Pixl.js_Home_Computer_bread.jpg|center]] | ||
* Разделите соединительный кабель на четыре кабеля по 8 проводов в каждом. Также сделайте так, чтобы цвета в каждом кабеле были выстроены в один и тот же порядок. | * Разделите соединительный кабель на четыре кабеля по 8 проводов в каждом. Также сделайте так, чтобы цвета в каждом кабеле были выстроены в один и тот же порядок. | ||
Строка 31: | Строка 31: | ||
* Подверните провода под нижнюю часть опоры и приклейте их к днищу скотчем. Также можно присоединить к опоре маленькие ножки, чтобы провода не сгибались слишком сильно. | * Подверните провода под нижнюю часть опоры и приклейте их к днищу скотчем. Также можно присоединить к опоре маленькие ножки, чтобы провода не сгибались слишком сильно. | ||
[ | [[File:Pixl.js_Home_Computer_back.jpg|center]] | ||
* Теперь нам надо подключить клавиатуру. Кнопки на каждой 4x4 панели расположены по принципу решётки, и мы подключимся к ним таким образом, чтобы создать решётку из панелей 2x2 – это по итогу создаст большую решётку с кнопками 8x8. | * Теперь нам надо подключить клавиатуру. Кнопки на каждой 4x4 панели расположены по принципу решётки, и мы подключимся к ним таким образом, чтобы создать решётку из панелей 2x2 – это по итогу создаст большую решётку с кнопками 8x8. | ||
Итак, расположенные слева направо панели будут выглядеть вот так (то есть здесь цифры «1» означают кнопки первой кнопочной панели, цифры «2» – кнопки второй панели и так далее): | Итак, расположенные слева направо панели будут выглядеть вот так (то есть здесь цифры «1» означают кнопки первой кнопочной панели, цифры «2» – кнопки второй панели и так далее): | ||
D8 | {| class="wikitable" | ||
D9 | |- | ||
D10 | || | ||
D11 | || '''D8''' | ||
D12 | || '''D9''' | ||
D13 | || '''D10''' | ||
SDA | || '''D11''' | ||
SCL | || '''D12''' | ||
D0 | || '''D13''' | ||
1 | || '''SDA''' | ||
1 | || '''SCL''' | ||
1 | |- | ||
1 | || '''D0''' | ||
2 | || 1 | ||
2 | || 1 | ||
2 | || 1 | ||
2 | || 1 | ||
D1 | || 2 | ||
1 | || 2 | ||
1 | || 2 | ||
1 | || 2 | ||
1 | |- | ||
2 | || '''D1''' | ||
2 | || 1 | ||
2 | || 1 | ||
2 | || 1 | ||
D2 | || 1 | ||
1 | || 2 | ||
1 | || 2 | ||
1 | || 2 | ||
1 | || 2 | ||
2 | |- | ||
2 | || '''D2''' | ||
2 | || 1 | ||
2 | || 1 | ||
D3 | || 1 | ||
1 | || 1 | ||
1 | || 2 | ||
1 | || 2 | ||
1 | || 2 | ||
2 | || 2 | ||
2 | |- | ||
2 | || '''D3''' | ||
2 | || 1 | ||
D4 | || 1 | ||
3 | || 1 | ||
3 | || 1 | ||
3 | || 2 | ||
3 | || 2 | ||
4 | || 2 | ||
4 | || 2 | ||
4 | |- | ||
4 | || '''D4''' | ||
D5 | || 3 | ||
3 | || 3 | ||
3 | || 3 | ||
3 | || 3 | ||
3 | || 4 | ||
4 | || 4 | ||
4 | || 4 | ||
4 | || 4 | ||
4 | |- | ||
D6 | || '''D5''' | ||
3 | || 3 | ||
3 | || 3 | ||
3 | || 3 | ||
3 | || 3 | ||
4 | || 4 | ||
4 | || 4 | ||
4 | || 4 | ||
4 | || 4 | ||
D7 | |- | ||
3 | || '''D6''' | ||
3 | || 3 | ||
3 | || 3 | ||
3 | || 3 | ||
4 | || 3 | ||
4 | || 4 | ||
4 | || 4 | ||
4 | || 4 | ||
|| 4 | |||
|- | |||
|| '''D7''' | |||
|| 3 | |||
|| 3 | |||
|| 3 | |||
|| 3 | |||
|| 4 | |||
|| 4 | |||
|| 4 | |||
|| 4 | |||
|- | |||
|} | |||
Теперь подключите кабели, идущие от кнопочных панелей, к макетной плате (всего у вас должно быть 8 групп по 4 провода в каждой). Чтобы лучше понимать, что куда подключать, ориентируйтесь по цветам проводов на фото. Итак, подключите эти группы проводов слева направо следующим образом (под словом «столбец» подразумевается вертикальная группа из 4 проводов на макетной плате на фото ниже): | Теперь подключите кабели, идущие от кнопочных панелей, к макетной плате (всего у вас должно быть 8 групп по 4 провода в каждой). Чтобы лучше понимать, что куда подключать, ориентируйтесь по цветам проводов на фото. Итак, подключите эти группы проводов слева направо следующим образом (под словом «столбец» подразумевается вертикальная группа из 4 проводов на макетной плате на фото ниже): | ||
Строка 127: | Строка 140: | ||
* Вторые 4 провода четвёртой панели -> четвёртый столбец -> D12, D13, SDA, SCL. | * Вторые 4 провода четвёртой панели -> четвёртый столбец -> D12, D13, SDA, SCL. | ||
[ | [[File:Pixl.js_Home_Computer_wired.jpg|center]] | ||
'''Примечание:''' На фото выше изображены шесть 8-проводных кабелей. Кабель под цифрой «1» – от первой панели, под цифрой «2» – от второй, под «3» – от третьей, под «4» – от четвёртой, а два безымянных в центре ведут к Pixl.js. | '''Примечание:''' На фото выше изображены шесть 8-проводных кабелей. Кабель под цифрой «1» – от первой панели, под цифрой «2» – от второй, под «3» – от третьей, под «4» – от четвёртой, а два безымянных в центре ведут к Pixl.js. | ||
Строка 133: | Строка 146: | ||
* Наклейте наклейки на клавиши как показано на фото ниже. Если вы не из Великобритании, то вам, наверно, лучше сделать собственную раскладку, но тогда вам также нужно будет модифицировать KEYMAP-переменные в коде ниже. | * Наклейте наклейки на клавиши как показано на фото ниже. Если вы не из Великобритании, то вам, наверно, лучше сделать собственную раскладку, но тогда вам также нужно будет модифицировать KEYMAP-переменные в коде ниже. | ||
[ | [[File:Pixl.js_Home_Computer_full.jpg|center]] | ||
== Код == | == Код == | ||
Строка 143: | Строка 156: | ||
Теперь вводимые вами символы на клавиатуре будут отображаться в окне Web IDE, а если вы отключитесь от Bluetooth, то вводимые символы начнут появляться на LCD-дисплее Pixl.js. | Теперь вводимые вами символы на клавиатуре будут отображаться в окне Web IDE, а если вы отключитесь от Bluetooth, то вводимые символы начнут появляться на LCD-дисплее Pixl.js. | ||
<syntaxhighlight lang="javascript | <syntaxhighlight lang="javascript"> | ||
// Контакты, к которым подключена клавиатура: | // Контакты, к которым подключена клавиатура: | ||
var KEYROW = [ D7, D6, D5, D4, D3, D2, D1, D0 ]; | var KEYROW = [ D7, D6, D5, D4, D3, D2, D1, D0 ]; | ||
Строка 221: | Строка 234: | ||
== Использование == | == Использование == | ||
[ | [[File:Pixl.js_Home_Computer_zoom.jpg|center]] | ||
Итак, теперь наш ПК должен заработать. Вот некоторые советы по его использованию: | Итак, теперь наш ПК должен заработать. Вот некоторые советы по его использованию: | ||
Строка 228: | Строка 241: | ||
* Графику на экране можно рисовать при помощи методов, вызываемых на переменной g – например, g.fillRect(20,20,40,40) или g.clear(). | * Графику на экране можно рисовать при помощи методов, вызываемых на переменной g – например, g.fillRect(20,20,40,40) или g.clear(). | ||
* Для клавиатуры используется много IO-контактов, но A0, A1, A2 и A3 по-прежнему свободны – их можно использовать для подключения внешних устройств. | * Для клавиатуры используется много 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. | * Функция 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 дней! | * Этот ПК потребляет удивительно мало электроэнергии – он может работать на одной лишь батарее CR2032 около 20 дней! | ||
Строка 238: | Строка 251: | ||
=См.также= | =См.также= | ||
=Внешние ссылки= | =Внешние ссылки= | ||
Строка 244: | Строка 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 можно подключить к собственному отдельному проводу, благодаря чему её можно будет нажимать вместе с другими клавишами.
См.также
Внешние ссылки