Controladores Arduino: 10 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:44

Un sistema de controlador de juegos Arduino que usa Arduino y la biblioteca p5.js. La idea de esto es crear un proyecto Arduino que se pueda replicar y expandir fácilmente. Las conexiones del controlador están diseñadas para utilizar varios sensores y entradas que se pueden intercambiar según cada controlador.

Este proyecto también está diseñado para utilizar la biblioteca de JavaScript p5.js junto con la biblioteca p5.play diseñada para p5.js. Estas bibliotecas nos permiten programar nuestros juegos con facilidad. El sitio web p5.play tiene un montón de tutoriales y ejemplos para que los usuarios creen juegos para él. Este proyecto permite a los usuarios practicar sus habilidades de desarrollo de hardware y software.

Paso 1: lo que necesitará

Instrumentos:

• Soldador
• Soldar
• Pelacables
• Cortadores laterales
• Alicates

Hardware:

• Placa compatible con Arduino (utilicé una Sparkfun Redboard, así como una Arduino Uno y Leonardo)

• Tablero de rendimiento:

  • Tableros perfilados verdes de 8 cm x 6 cm
  • Placa perfilada Aduino Uno shield

• Varios sensores

  • Joysticks
  • Botones (con resistencias, 10k ohmios, para acompañarlos)
  • Potenciómetros
  • Sensores Flex
  • Sensores de presión
  • Etc …

• Cable:

  • Cable único (utilicé 26 AWG sólido)
  • Alambre de cinta y engarces
• Encabezados separados (al menos 20 de estos)

• Hardware opcional (puede usar cartón y pegamento / bridas en su lugar):

  • Protoboard y cables de puente para la creación de prototipos
  • Recintos impresos en 3D
  • Sujetadores de hardware (utilicé tornillos M2.5)

Software:

• IDE de Arduino

• biblioteca p5.js

  P5.play biblioteca también

• p5.serialcontrol
• Node.js

Paso 2: Construcción: el concentrador de la consola, configuración del escudo

Suelde los encabezados a la placa perfilada del escudo Arduino Uno.

• Comencé con los encabezados de escudo (alimentación, entrada analógica y digital)
• Los siguientes son los pines de encabezado de 2x5. Puede usar encabezados de 2x5 o solo 2 filas de 5 encabezados separados. Los alineé con A3 y A4 verticalmente, y dejé 2 espacios entre ellos.

Paso 3: Construcción: el concentrador de la consola, cableado del escudo

A continuación, queremos enrutar nuestros cables en el escudo. Es más fácil colocar los cables en la parte superior, pero si desea un aspecto más limpio, puede hacerlo en la parte inferior.

Desea prestar atención al esquema (el esquema de Eagle está disponible para descargar) al enrutar estos cables. También puede consultar la guía de colores para ayudarle con esto.

La idea de este diseño de blindaje es permitir 3 entradas analógicas y 5 entradas digitales de cada controlador. Esto aprovecha al máximo todas las entradas analógicas de un Arduino Uno, así como los cables restantes de nuestro cable plano.

Paso 4: Construcción: los controladores, configuración de sus piezas

El primer paso para construir su controlador es planificar qué sensores usar. En mis ejemplos, tengo un controlador bastante estándar con un joystick y algunos botones. También tengo un controlador con dos potenciómetros deslizantes.

Si desea replicar esto, puede ver mis imágenes para su ubicación.

El siguiente paso es soldar el cable plano a la placa perf.

1. Pele y estañe el cable plano
2. Suelde el cable plano en la parte superior central de la placa de perforación.

El siguiente paso es enrutar los cables. Comencé conectando primero la alimentación (cable rojo / 5V) y la tierra (cable marrón) a los sensores. Luego conecté las entradas analógicas. Me resultó fácil usar el cable naranja (Analógico A0 o A3) para el movimiento horizontal y el cable amarillo (Analógico A1 o A4) para el movimiento vertical.

Para mantener la coherencia, también conecté un pequeño botón pulsador a violeta en todos mis controladores. Esto es útil para cosas como cerrar el puerto serie (lo repasaré más adelante), así como para menús u opciones.

He subido un esquema rápido de mi controlador de joystick si desea ver esto. A partir de nuestro diagrama de distribución de pines, puede ver la posibilidad de conexión de cada controlador (3 entradas analógicas y 5 digitales).

Paso 5: Opcional: Recintos

Este paso es opcional, pero si tiene acceso a una impresora 3D, el resultado de su proyecto se verá un poco más refinado y terminado. Como puede ver en mis prototipos, utilicé un simple trozo de cartón para evitar que las juntas de soldadura en la parte inferior de las placas perforadas le pincharan los dedos.

Puede encontrar mis modelos 3D adjuntos a este paso. He creado cajas para el concentrador tanto para Arduino Uno / Leonardo como para Sparkfun RedBoard (esta placa es un poco más ancha y usa mini USB).

Para los controladores, puede fijarlos con tornillos M2.5. Mantuve la tuerca en el costado de la PCB y utilicé una arandela y el tornillo en la parte inferior.

También he incluido el modelo 3D de los controles deslizantes de los potenciómetros que utilicé.

Puede encontrar todos los archivos 3D en GitHub.

Paso 6: Programación: Arduino

Comencemos configurando un boceto simple para probar. Sugiero usar el tutorial creado por ITP en NYU que se encuentra aquí. Para hacer este tutorial, necesitará tener instalados p5.serialcontroll y node.js. En este tutorial, se le presentará la configuración de un Arduino para enviar datos en serie que puede utilizar nuestra biblioteca javascript, p5.js. Puede usar el concentrador y el controlador que creamos en los pasos anteriores para hacer esto, o puede replicar los circuitos demostrados en el tutorial. Este tutorial utiliza el pin de entrada analógica A0 en el Arduino Uno que está asignado al cable naranja de su primer controlador.

El siguiente tutorial que querrá seguir se puede encontrar aquí. Este tutorial lo guiará a través de la configuración de múltiples entradas y su uso en p5.js. En el tutorial se utilizan las entradas analógicas A0 y A1. Estos corresponderán a los cables naranja y amarillo del controlador 1 de nuestro sistema.

Una vez que haya pasado por los tutoriales anteriores, podemos programar el Arduino. El código que queremos usar es el siguiente:

// controlador 1const int dig2 = 2; // azul const int dig3 = 3; // morado const int dig4 = 4; // gris const int dig5 = 5; // blanco const int dig6 = 6; // negro // controlador 2 const int dig7 = 7; // azul const int dig8 = 8; // morado const int dig9 = 9; // gris const int dig10 = 10; // blanco const int dig11 = 11; //negro

configuración vacía () {

Serial.begin (9600); while (Serial.available () <= 0) {Serial.println ("hola"); // envía un mensaje de inicio delay (300); // espera 1/3 de segundo} pinMode (dig2, INPUT); pinMode (dig3, ENTRADA); pinMode (dig4, ENTRADA); pinMode (dig5, ENTRADA); pinMode (dig6, ENTRADA); pinMode (dig7, ENTRADA); pinMode (dig8, ENTRADA); pinMode (dig9, ENTRADA); pinMode (dig10, ENTRADA); pinMode (dig11, ENTRADA); }

bucle vacío () {

if (Serial.available ()> 0) {// lee el byte entrante: int inByte = Serial.read (); // lee el sensor:

// Controlador ANALÓGICO 1

int analog0 = analogRead (A0); int analog1 = analogRead (A1); int analog2 = analogRead (A2); // Controlador ANALÓGICO 2 int analog3 = analogRead (A3); int analog4 = analogRead (A4); int analog5 = analogRead (A5); // Controlador DIGITAL 1 int digital2 = digitalRead (dig2); int digital3 = digitalRead (dig3); int digital4 = digitalRead (dig4);

int digital5 = digitalRead (dig5);

int digital6 = digitalRead (dig6); // Controlador DIGITAL 2 int digital7 = digitalRead (dig7); int digital8 = digitalRead (dig8); int digital9 = digitalRead (dig9); int digital10 = digitalRead (dig10); int digital11 = digitalRead (dig11); // imprime los resultados: Serial.print (analog0); // [0] Serial.print (","); Serial.print (analog1); // [1] Serial.print (","); Serial.print (analog2); // [2] Serial.print (","); // Iniciar los datos del controlador 2 Serial.print (analog3); // [3] Serial.print (","); Serial.print (analog4); // [4] Serial.print (","); Serial.print (analog5); // [5] Serial.print (","); Serial.print (digital2); // [6] Serial.print (","); Serial.print (digital3); // [7] Serial.print (","); Serial.print (digital4); // [8] Serial.print (","); Serial.print (digital5); // [9] Serial.print (","); Serial.print (digital6); // [10] Serial.print (","); // Iniciar el controlador 2 datos Serial.print (digital7); // [11] Serial.print (","); Serial.print (digital8); // [12] Serial.print (","); Serial.print (digital9); // [13] Serial.print (","); Serial.println (digital10); // [14] Serial.print (","); Serial.println (digital11); //[15] } }

Este código envía los datos en serie de nuestros dos controladores como una matriz de 16 números. Los primeros 6 de estos números son nuestras entradas analógicas (que van de 0 a 1023) y los 10 valores restantes son nuestros valores digitales (0 o 1).

Una vez que se carga nuestro código, podemos probar esto abriendo el monitor serial y escribiendo un valor en nuestro monitor serial como hicimos en el segundo tutorial de ITP. Deberíamos obtener una cadena de nuestros valores separados por comas.

Paso 7: Programación: HTML

Una vez que tenemos nuestro Arduino configurado y funcionando, podemos comenzar a programar nuestro material web. El código HTML es muy sencillo.

body {padding: 0; margen: 0;}

El código html simplemente vincula nuestros archivos javascript juntos. La mayor parte de nuestro código aparecerá en nuestro archivo.js de boceto.

Paso 8: Programación: P5.js y Javascript

Una vez que tenemos nuestro HTML configurado, podemos trabajar en nuestro JavaScript. Si aún no lo ha hecho, debe descargar p5.js y p5.play y agregarlos a la carpeta de bibliotecas en el directorio de su sitio web.

• p5.js
• p5.play

En nuestro paso anterior, configuramos nuestro archivo HTML para llamar a nuestras bibliotecas p5.js y p5.play. También lo configuramos para usar nuestro archivo sketch.js, que es donde haremos la mayor parte de nuestra programación. A continuación se muestra el código de nuestro esqueleto. También puedes encontrarlo aquí.

// Variables en serievar serial; // variable para contener una instancia de la biblioteca de puerto serie var portName = 'COM4'; // completa el nombre de tu puerto serie aquí // Variables globales del juego ---------------

// Función de configuración ----------------------

configuración de función () {createCanvas (640, 480); serial = nuevo p5. SerialPort (); // crea una nueva instancia de la biblioteca serialport serial.on ('list', printList); // establecer una función de devolución de llamada para el evento de la lista de puertos de serie serial.on ('conectado', serverConnected); // devolución de llamada para conectarse al servidor serial.on ('open', portOpen); // devolución de llamada para la apertura del puerto serial.on ('data', serialEvent); // devolución de llamada para cuando lleguen nuevos datos serial.on ('error', serialError); // devolución de llamada para errores serial.on ('close', portClose); // devolución de llamada para el cierre del puerto serial.list (); // lista los puertos seriales serial.open (portName); // abre un puerto serie} // Función Draw ----------------------- function draw () {background (0); // fondo negro} // Interprete aquí los datos seriales ---------- function serialEvent () {// lea una cadena desde el puerto serial // hasta que obtenga un retorno de carro y una nueva línea: var inString = serial. readStringUntil ('\ r / n'); // verifica que en realidad haya una cadena de caracteres allí: if (inString.length> 0) {if (inString! == 'hola') {// si recibes hola, ignórala var sensores = split (inString, ', '); // divide la cadena en las comas if (sensores.length> 16) {// si hay dieciséis elementos (6 analógicos, 10 digitales) // Usa los datos del sensor aquí:

}

} serial.write ('x'); // enviar un byte solicitando más datos seriales}} // obtener la lista de puertos: function printList (portList) {// portList es una matriz de nombres de puertos seriales para (var i = 0; i <portList.length; i ++) {// Mostrar la lista de la consola: print (i + "" + portList ); }} function serverConnected () {print ('conectado al servidor.'); } function portOpen () {print ('el puerto serial abierto.')} function serialError (err) {print ('Algo salió mal con el puerto serial.' + err); } function portClose () {print ('El puerto serie cerrado.'); } function closeCode () {serial.close (portName); devolver nulo; } window.onbeforeunload = closedCode;

Una vez que tengas el esqueleto guardado. Puede utilizar estos valores de forma similar a como se hizo en el tutorial de ITP. La cadena de valores que enviamos desde nuestro Arduino en el paso 6 se envía como una matriz de 16 números. A continuación se muestra donde analizamos esta matriz.

// Interprete aquí los datos seriales ----------

function serialEvent () {// lee una cadena desde el puerto serial // hasta que obtienes retorno de carro y nueva línea: var inString = serial.readStringUntil ('\ r / n'); // verifica que en realidad haya una cadena de caracteres allí: if (inString.length> 0) {if (inString! == 'hola') {// si recibes hola, ignórala var sensores = split (inString, ', '); // divide la cadena entre las comas if (sensores.longitud> 16) {// si hay dieciséis elementos (6 analógicos, 10 digitales) // Usa los datos del sensor aquí:}} serial.write ('x'); // envía un byte solicitando más datos en serie}}

¡Ahora podemos ejecutar nuestro programa para ver si funciona!

Paso 9: Ejecución de su programa

Ahora podemos ejecutar nuestro programa para ver si funciona. Puedes crear tu propio juego usando el archivo skeleton.js en nuestro archivo anterior o puedes usar el simple juego Pipe que se encuentra aquí.

Al igual que en el ITP Lab, para ejecutar nuestro programa, seguiremos los pasos a continuación.

• Conecte el Arduino con los controladores que planea usar.
• Abra p5.serialcontrol
• Cambie el puerto de su boceto p5 por el que está usando (si está usando el esqueleto, esto está en la línea 3)
• Abra el archivo HTML que se vincula a su boceto p5

Si tiene medios externos como imágenes o fuentes descargadas, querrá ejecutarlo en un servidor. Puede ejecutar un servidor Python local simple si lo desea.

Paso 10: ir más lejos

Para ir más allá y desarrollar más juegos para esto, puede seguir varios ejemplos de p5.play que se encuentran aquí. A continuación se muestra un ejemplo de un juego más complicado que creé. Es un juego de disparos de tanques 1 contra 1. Puede encontrar todos los recursos para ello en GitHub.