Контроллеры Arduino: 10 шагов (с изображениями)

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:53

Система игрового контроллера Arduino, использующая Arduino и библиотеку p5.js. Идея состоит в том, чтобы создать проект Arduino, который легко копируется и расширяется. Соединения контроллера предназначены для использования множества различных датчиков и входов, которые можно менять местами в зависимости от каждого контроллера.

Этот проект также предназначен для использования библиотеки JavaScript p5.js вместе с библиотекой p5.play, разработанной для p5.js. Эти библиотеки позволяют нам легко программировать наши игры. На веб-сайте p5.play есть множество руководств и примеров для пользователей по созданию игр для него. Этот проект позволяет пользователям практиковать свои навыки разработки аппаратного и программного обеспечения.

Шаг 1. Что вам понадобится

Инструменты:

• Паяльник
• Припой
• Инструмент для зачистки проводов
• Боковые фрезы
• Плоскогубцы

Аппаратное обеспечение:

• Плата, совместимая с Arduino (я использовал Sparkfun Redboard, а также Arduino Uno и Leonardo)

• Perf Board:

  • Зеленые перфорированные доски 8 см x 6 см
  • Перфорированная плата Aduino Uno Shield

• Различные датчики

  • Джойстики
  • Кнопки (с резисторами, 10кОм, в комплекте с ними)
  • Потенциометры
  • Датчики Flex
  • Датчики давления
  • Так далее…

• Проволока:

  • Одиночный провод (я использовал твердый кабель 26 AWG)
  • Ленточная проволока и обжимы
• Заголовки Break Away (как минимум 20 из них)

• Дополнительное оборудование (вместо него можно использовать картон и стяжки с горячим клеем / молнией):

  • Макетная плата и соединительные кабели для прототипирования
  • Корпуса с 3D-печатью
  • Крепеж метизов (я использовал винты M2,5)

Программное обеспечение:

• IDE Arduino

• библиотека p5.js

  Библиотека P5.play также

• p5.serialcontrol
• Node.js

Шаг 2: Создание: Консольный концентратор, Настройка Shield

Припаяйте разъемы к монтажной плате Arduino Uno Shield.

• Я начал с разъемов экрана (силовой, аналоговый и цифровой)
• Далее идут контакты заголовка 2x5. Вы можете использовать заголовки 2x5 или только 2 ряда по 5 разделенных заголовков. Я выровнял их по вертикали А3 и А4 и оставил между ними 2 пробела.

Шаг 3: Сборка: консольный концентратор, подключение щита

Далее мы хотим проложить наши провода на экране. Провода легче прокладывать сверху, но если вам нужен более чистый вид, вы можете провести их снизу.

При прокладке этих проводов следует обращать внимание на схему (схема Eagle доступна для загрузки). Вы также можете обратиться к справочнику по цветам, чтобы помочь вам в этом.

Идея этой конструкции экрана состоит в том, чтобы обеспечить 3 аналоговых входа и 5 цифровых входов от каждого контроллера. Это полностью использует все аналоговые входы на Arduino Uno, а также оставшиеся провода на нашем ленточном кабеле.

Шаг 4: Сборка: контроллеры, настройка ваших частей

Первый шаг к созданию вашего контроллера - это спланировать, какие датчики использовать. В моих примерах у меня довольно стандартный контроллер с джойстиком и несколькими кнопками. Еще у меня есть контроллер с двумя ползунковыми потенциометрами.

Если вы хотите повторить это, вы можете просмотреть мои изображения для размещения.

Следующим шагом будет припайка ленточного кабеля к монтажной плате.

1. Зачистите и залудите ленточный кабель
2. Припаяйте ленточный кабель к верхней центральной части вашей монтажной платы.

Следующим шагом будет проложить ваши провода. Я начал с подключения питания (5 В / красный провод) и заземления (коричневый провод) к датчикам. Затем я подключил аналоговые входы. Мне было легко использовать оранжевый кабель (аналоговый A0 или A3) для горизонтального перемещения и желтый кабель (аналоговый A1 или A4) для вертикального перемещения.

Чтобы сохранить последовательность, я также подключил маленькую кнопку к фиолетовому цвету на всех своих контроллерах. Это полезно для таких вещей, как закрытие последовательного порта (я расскажу об этом позже), а также для меню или параметров.

Я загрузил краткую схему своего контроллера джойстика, если вы хотите взглянуть на нее. На нашей схеме выводов вы можете увидеть возможность подключения каждого контроллера (3 аналоговых входа и 5 цифровых).

Шаг 5: Дополнительно: корпуса

Этот шаг не является обязательным, но если у вас есть доступ к 3D-принтеру, результат вашего проекта будет выглядеть немного более изысканным и законченным. Как вы можете видеть на моих прототипах, я использовал простой кусок картона, чтобы паяные соединения на нижней стороне перфорированных плат не протыкали пальцы.

Вы можете найти мои 3D-модели, прикрепленные к этому шагу. Я создал корпуса для концентратора как для Arduino Uno / Leonardo, так и для Sparkfun RedBoard (эта плата немного шире и использует mini USB).

Контроллеры можно прикрепить винтами M2,5. Я оставил гайку сбоку от печатной платы и использовал шайбу и винт снизу.

Я также включил 3D-модель ползунков регуляторов для потенциометров, которые я использовал.

Вы можете найти все 3D-файлы на GitHub.

Шаг 6: Программирование: Arduino

Начнем с создания простого скетча для тестирования. Я предлагаю использовать учебное пособие, созданное ITP в Нью-Йоркском университете, которое можно найти здесь. Для работы с этим руководством вам потребуется установить p5.serialcontroll и node.js. В этом руководстве вы познакомитесь с настройкой Arduino для отправки последовательных данных, которые могут использоваться нашей библиотекой javascript, p5.js. Для этого вы можете использовать концентратор и контроллер, которые мы создали на предыдущих шагах, или вы можете скопировать схемы, продемонстрированные в руководстве. В этом руководстве используется аналоговый входной контакт A0 на Arduino Uno, который сопоставлен с оранжевым проводом вашего первого контроллера.

Следующее руководство, которому вы захотите следовать, можно найти здесь. Из этого туториала Вы узнаете, как настроить несколько входов и использовать их в p5.js. В учебном пособии используются аналоговые входы A0 и A1. Они будут соответствовать оранжевому и желтому проводам на контроллере 1 нашей системы.

После того, как вы ознакомитесь с приведенными выше руководствами, мы сможем запрограммировать Arduino. Код, который мы хотим использовать, приведен ниже:

// контроллер 1const int dig2 = 2; // синий const int dig3 = 3; // фиолетовый const int dig4 = 4; // серый const int dig5 = 5; // белый const int dig6 = 6; // черный // контроллер 2 const int dig7 = 7; // синий const int dig8 = 8; // фиолетовый const int dig9 = 9; // серый const int dig10 = 10; // белый const int dig11 = 11; //чернить

void setup () {

Serial.begin (9600); в то время как (Serial.available () <= 0) {Serial.println ("привет"); // отправляем начальное сообщение delay (300); // ожидание 1/3 секунды} pinMode (dig2, INPUT); pinMode (dig3, ВХОД); pinMode (dig4, ВХОД); pinMode (dig5, ВХОД); pinMode (dig6, ВХОД); pinMode (dig7, ВХОД); pinMode (dig8, ВХОД); pinMode (dig9, ВХОД); pinMode (dig10, ВХОД); pinMode (dig11, ВХОД); }

void loop () {

if (Serial.available ()> 0) {// читаем входящий байт: int inByte = Serial.read (); // читаем датчик:

// АНАЛОГОВЫЙ Контроллер 1

int analog0 = аналоговое чтение (A0); int analog1 = аналоговое чтение (A1); int analog2 = analogRead (A2); // АНАЛОГОВЫЙ Контроллер 2 int analog3 = analogRead (A3); int analog4 = analogRead (A4); int analog5 = аналоговое чтение (A5); // ЦИФРОВОЙ контроллер 1 int digital2 = digitalRead (dig2); int digital3 = digitalRead (цифра3); int digital4 = digitalRead (цифра4);

int digital5 = digitalRead (цифра5);

int digital6 = digitalRead (цифра6); // ЦИФРОВОЙ контроллер 2 int digital7 = digitalRead (dig7); int digital8 = digitalRead (цифра8); int digital9 = digitalRead (цифра9); int digital10 = digitalRead (цифра10); int digital11 = digitalRead (цифра11); // вывод результатов: Serial.print (analog0); // [0] Serial.print (","); Serial.print (аналог1); // [1] Serial.print (","); Serial.print (аналог2); // [2] Serial.print (","); // Запускаем данные контроллера 2 Serial.print (analog3); // [3] Serial.print (","); Serial.print (аналог4); // [4] Serial.print (","); Serial.print (аналог5); // [5] Serial.print (","); Serial.print (цифровой2); // [6] Serial.print (","); Серийный.печать (цифровой3); // [7] Serial.print (","); Серийный.печать (цифровой4); // [8] Serial.print (","); Serial.print (цифровой5); // [9] Serial.print (","); Серийный.печать (цифровой6); // [10] Serial.print (","); // Запускаем данные контроллера 2 Serial.print (digital7); // [11] Serial.print (","); Serial.print (цифровой8); // [12] Serial.print (","); Серийный.печать (цифровой9); // [13] Serial.print (","); Serial.println (digital10); // [14] Serial.print (","); Serial.println (digital11); // [15]}}

Этот код отправляет последовательные данные от обоих наших контроллеров в виде массива из 16 чисел. Первые 6 из этих чисел - это наши аналоговые входы (в диапазоне от 0 до 1023), а оставшиеся 10 значений - наши цифровые значения (0 или 1).

После того, как наш код загружен, мы можем проверить это, открыв монитор последовательного порта и введя значение в наш монитор последовательного порта, как мы это делали во втором руководстве от ITP. Мы должны получить строку наших значений, разделенных запятыми.

Шаг 7: Программирование: HTML

После того, как мы настроили и заработали нашу Arduino, мы можем приступить к программированию наших веб-материалов. Код HTML очень простой.

body {padding: 0; маржа: 0;}

Код HTML просто связывает наши файлы javascript вместе. Большая часть нашего кода фактически находится в нашем файле эскиза.js.

Шаг 8: Программирование: P5.js и Javascript

После того, как мы настроили наш HTML, мы можем работать над нашим JavaScript. Если вы еще этого не сделали, загрузите p5.js, а также p5.play и добавьте их в папку с библиотеками в каталоге вашего веб-сайта.

• p5.js
• p5.play

На предыдущем шаге мы настроили наш HTML-файл для вызова наших библиотек p5.js и p5.play. Мы также настроили его для использования нашего файла sketch.js, в котором мы будем выполнять большую часть нашего программирования. Ниже приведен код нашего скелета. Вы также можете найти его здесь.

// Серийные переменныеvar serial; // переменная для хранения экземпляра библиотеки последовательного порта var portName = 'COM4'; // введите здесь имя вашего последовательного порта // Глобальные игровые переменные ---------------

// Функция настройки ----------------------

функция настройки () {createCanvas (640, 480); серийный = новый p5. SerialPort (); // создаем новый экземпляр библиотеки последовательного порта serial.on ('list', printList); // установить функцию обратного вызова для события списка последовательных портов serial.on ('connected', serverConnected); // обратный вызов для подключения к серверу serial.on ('open', portOpen); // обратный вызов для открытия порта serial.on ('data', serialEvent); // обратный вызов при поступлении новых данных serial.on ('error', serialError); // обратный вызов для ошибок serial.on ('close', portClose); // обратный вызов для закрытия порта serial.list (); // выводим список последовательных портов serial.open (portName); // открываем последовательный порт} // Функция рисования ----------------------- function draw () {background (0); // черный фон} // Здесь интерпретируются последовательные данные ---------- function serialEvent () {// считываем строку из последовательного порта // до тех пор, пока вы не получите возврат каретки и новую строку: var inString = serial. readStringUntil ('\ г / п'); // проверяем, действительно ли там есть ssetring: if (inString.length> 0) {if (inString! == 'hello') {// если вы получаете привет, игнорируйте его var сенсоры = split (inString, ', '); // разделить строку на запятые if (sensor.length> 16) {// если есть шестнадцать элементов (6 аналоговых, 10 цифровых) // Здесь используются данные датчика:

}

} serial.write ('х'); // отправляем байт с запросом дополнительных последовательных данных}} // получаем список портов: function printList (portList) {// portList - это массив имен последовательных портов для (var i = 0; i <portList.length; i ++) {// Отображаем список в консоли: print (i + "" + portList ); }} функция serverConnected () {print ('подключен к серверу.'); } function portOpen () {print ('последовательный порт открыт.')} function serialError (err) {print ('Что-то пошло не так с последовательным портом.' + err); } function portClose () {print ('Последовательный порт закрыт.'); } функция закрытияCode () {serial.close (portName); return null; } window.onbeforeunload = код закрытия;

Как только вы сохраните скелет. Вы можете использовать эти значения так же, как это было сделано в учебнике ITP. Строка значений, которую мы отправили из нашего Arduino на шаге 6, отправляется в виде массива из 16 чисел. Ниже мы разбираем этот массив.

// Здесь интерпретируем последовательные данные ----------

function serialEvent () {// считываем строку из последовательного порта // до тех пор, пока вы не получите возврат каретки и новую строку: var inString = serial.readStringUntil ('\ r / n'); // проверяем, действительно ли там есть ssetring: if (inString.length> 0) {if (inString! == 'hello') {// если вы получаете привет, игнорируйте его var сенсоры = split (inString, ', '); // разделить строку запятыми if (sensor.length> 16) {// если есть шестнадцать элементов (6 аналоговых, 10 цифровых) // Здесь используются данные датчика:}} serial.write ('x'); // отправляем байт с запросом дополнительных последовательных данных}}

Теперь мы можем запустить нашу программу, чтобы посмотреть, работает ли она!

Шаг 9: Запуск вашей программы

Теперь мы можем запустить нашу программу, чтобы посмотреть, работает ли она. Вы можете создать свою собственную игру, используя файл skeleton.js из нашего предыдущего файла, или использовать простую игру Pipe, найденную здесь.

Подобно ITP Lab, чтобы запустить нашу программу, мы выполним следующие шаги.

• Подключите Arduino к контроллерам, которые вы планируете использовать.
• Откройте p5.serialcontrol
• Измените порт вашего скетча p5 на тот, который вы используете (если вы используете скелет, он находится в строке 3)
• Откройте HTML-файл, который ссылается на ваш эскиз p5.

Если у вас есть внешние носители, такие как изображения или загруженные шрифты, вы захотите запустить это на сервере. Вы можете запустить простой локальный сервер Python, если хотите.

Шаг 10: Идем дальше

Чтобы пойти дальше и разработать для этого больше игр, вы можете воспользоваться различными примерами из p5.play, которые можно найти здесь. Ниже приведен пример созданной мной более сложной игры. Это танковый шутер 1 на 1. Вы можете найти все ресурсы по нему на GitHub.