Controladores Arduino: 10 etapas (com imagens)

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:39

Um sistema de controle de jogo Arduino usando Arduino e a biblioteca p5.js. A ideia disso é criar um projeto Arduino que seja facilmente replicável e expansível. As conexões do controlador são projetadas para utilizar vários sensores e entradas que podem ser trocados dependendo de cada controlador.

Este projeto também foi desenvolvido para utilizar a biblioteca JavaScript p5.js junto com a biblioteca p5.play projetada para p5.js. Essas bibliotecas nos permitem programar nossos jogos com facilidade. O site p5.play tem vários tutoriais e exemplos para os usuários criarem jogos para ele. Este projeto permite que os usuários pratiquem suas habilidades de desenvolvimento de hardware e software.

Etapa 1: O que você precisa

Ferramentas:

• Ferro de solda
• Solda
• Decapantes de fio
• Cortadores laterais
• Alicate

Hardware:

• Placa compatível com Arduino (usei um Sparkfun Redboard, bem como um Arduino Uno e Leonardo)

• Perf Board:

  • Placas de desempenho verdes de 8 cm x 6 cm
  • Aduino Uno escudo perf board

• Vários Sensores

  • Joysticks
  • Botões (com resistores, 10k ohms, para ir com eles)
  • Potenciômetros
  • Sensores Flex
  • Sensores de pressão
  • Etc …

• Arame:

  • Fio único (usei 26 AWG sólido)
  • Fio de fita e dobras
• Break Away Headers (pelo menos 20 deles)

• Hardware opcional (você pode usar papelão e fitas de cola quente / zip):

  • Placa de ensaio e cabos jumper para prototipagem
  • Gabinetes impressos em 3D
  • Fixadores de hardware (usei parafusos M2.5)

Programas:

• IDE Arduino

• biblioteca p5.js

  Biblioteca P5.play também

• p5.serialcontrol
• Node.js

Etapa 2: construir: o hub do console, configurar o escudo

Solde os conectores na placa de desempenho de escudo do Arduino Uno.

• Comecei com os cabeçalhos de blindagem (alimentação, entrada analógica e digital)
• Em seguida, estão os pinos de cabeçalho 2x5. Você pode usar cabeçalhos 2x5 ou apenas 2 linhas de 5 cabeçalhos separados. Alinhei estes com A3 e A4 verticalmente, e deixei 2 espaços entre eles.

Etapa 3: construir: o hub do console, conectar a blindagem

Em seguida, queremos direcionar nossos fios na blindagem. É mais fácil passar os fios pela parte superior, mas se você quiser uma aparência mais limpa, pode passá-los pela parte inferior.

Você deseja prestar atenção ao esquema (o esquema Eagle está disponível para download) ao rotear esses fios. Você também pode consultar o guia de cores para ajudá-lo com isso.

A ideia desse design de blindagem é permitir 3 entradas analógicas e 5 entradas digitais de cada controlador. Isso aproveita ao máximo todas as entradas analógicas em um Arduino Uno, bem como os fios restantes em nosso cabo de fita.

Etapa 4: Construindo: os Controladores, Configurando Suas Peças

A primeira etapa para construir seu controlador é planejar quais sensores usar. Em meus exemplos, tenho um controlador bastante padrão com um joystick e alguns botões. Eu também tenho um controlador com dois potenciômetros deslizantes.

Se você quiser replicar isso, você pode ver minhas imagens para veiculação.

A próxima etapa é soldar o cabo de fita à placa de desempenho.

1. Retire e estanhe o cabo de fita
2. Solde o cabo de fita no centro superior de sua placa de perf.

A próxima etapa é rotear seus fios. Comecei conectando a alimentação (5V / fio vermelho) e o aterramento (fio marrom) aos sensores primeiro. Em seguida, conectei as entradas analógicas. Achei fácil usar o cabo laranja (Analógico A0 ou A3) para movimentação horizontal e o cabo amarelo (Analógico A1 ou A4) para movimentação vertical.

Para manter as coisas consistentes, também conectei um pequeno botão em roxo em todos os meus controladores. Isso é útil para coisas como fechar a porta serial (examinarei isso mais tarde), bem como menus ou opções.

Eu carreguei um esquema rápido do meu controlador de joystick, se você quiser dar uma olhada nisso. Em nosso diagrama de pinagem, você pode ver a possibilidade de cada conexão do controlador (3 entradas analógicas e 5 digitais).

Etapa 5: Opcional: Gabinetes

Esta etapa é opcional, mas se você tiver acesso a uma impressora 3D, o resultado do seu projeto ficará um pouco mais refinado e acabado. Como você pode ver nos meus protótipos, usei um simples pedaço de papelão para evitar que as juntas de solda na parte inferior das placas perfurassem seus dedos.

Você pode encontrar meus modelos 3D anexados a esta etapa. Eu criei gabinetes para o hub tanto para o Arduino Uno / Leonardo quanto para o Sparkfun RedBoard (esta placa é um pouco mais larga e usa mini USB).

Para os controladores, você pode anexá-los com parafusos M2.5. Eu mantive a porca na lateral da placa de circuito impresso e uso uma arruela e o parafuso na parte inferior.

Também incluí o modelo 3D para os controles deslizantes dos potenciômetros que usei.

Você pode encontrar todos os arquivos 3D no GitHub.

Etapa 6: Programação: Arduino

Vamos começar configurando um esboço simples para testar. Eu sugiro usar o tutorial criado pelo ITP na NYU encontrado aqui. Para fazer este tutorial, você precisará ter p5.serialcontroll e node.js instalados. Neste tutorial, você será apresentado à configuração de um Arduino para enviar dados seriais que podem ser usados por nossa biblioteca javascript, p5.js. Você pode usar o hub e o controlador que criamos nas etapas anteriores para fazer isso ou pode replicar os circuitos demonstrados no tutorial. Este tutorial usa o pino de entrada analógica A0 no Arduino Uno que é mapeado para o fio laranja de seu primeiro controlador.

O próximo tutorial que você deseja seguir pode ser encontrado aqui. Este tutorial irá guiá-lo através da configuração de várias entradas e da sua utilização em p5.js. No tutorial, as entradas analógicas A0 e A1 são usadas. Eles corresponderão aos fios laranja e amarelo no controlador 1 do nosso sistema.

Depois de passar pelos tutoriais acima, podemos programar o Arduino. O código que queremos usar está abaixo:

// controlador 1const int dig2 = 2; // const azul int dig3 = 3; // roxo const int dig4 = 4; // cinza const int dig5 = 5; // const branco int dig6 = 6; // preto // controlador 2 const int dig7 = 7; // const azul int dig8 = 8; // roxo const int dig9 = 9; // const cinza int dig10 = 10; // const branco int dig11 = 11; //Preto

void setup () {

Serial.begin (9600); while (Serial.available () <= 0) {Serial.println ("olá"); // envia uma mensagem inicial delay (300); // aguarde 1/3 de segundo} pinMode (dig2, INPUT); pinMode (dig3, INPUT); pinMode (dig4, INPUT); pinMode (dig5, INPUT); pinMode (dig6, INPUT); pinMode (dig7, INPUT); pinMode (dig8, INPUT); pinMode (dig9, INPUT); pinMode (dig10, INPUT); pinMode (dig11, INPUT); }

void loop () {

if (Serial.available ()> 0) {// ler o byte de entrada: int inByte = Serial.read (); // leia o 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 os resultados: Serial.print (analog0); // [0] Serial.print (","); Serial.print (analógico1); // [1] Serial.print (","); Serial.print (analógico2); // [2] Serial.print (","); // Inicia o controlador 2 data Serial.print (analog3); // [3] Serial.print (","); Serial.print (analógico4); // [4] Serial.print (","); Serial.print (analógico 5); // [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 (","); // Inicia o controlador 2 data 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 envia os dados seriais de ambos os nossos controladores como uma matriz de 16 números. Os primeiros 6 desses números são nossas entradas analógicas (variando de 0 a 1023) e os 10 valores restantes são nossos valores digitais (0 ou 1).

Assim que nosso código for carregado, podemos testar isso abrindo o monitor serial e digitando um valor em nosso monitor serial como fizemos no segundo tutorial do ITP. Devemos obter uma string de nossos valores separados por vírgulas.

Etapa 7: Programação: HTML

Assim que tivermos nosso Arduino configurado e funcionando, podemos começar a programar nosso material da web. O código HTML é muito simples.

corpo {preenchimento: 0; margem: 0;}

O código html simplesmente vincula nossos arquivos javascript. A maior parte do nosso código realmente acontecerá em nosso arquivo.js de esboço.

Etapa 8: Programação: P5.js e Javascript

Assim que tivermos nosso HTML configurado, podemos trabalhar em nosso JavaScript. Se ainda não o fez, você deve fazer o download do p5.js e também do p5.play e adicioná-los à pasta de bibliotecas no diretório do seu site.

• p5.js
• p5.play

Em nossa etapa anterior, configuramos nosso arquivo HTML para chamar nossas bibliotecas p5.js e p5.play. Também o configuramos para usar nosso arquivo sketch.js, que é onde faremos a maior parte de nossa programação. Abaixo está o código do nosso esqueleto. Você também pode encontrar aqui.

// Serial Variablesvar serial; // variável para conter uma instância da biblioteca serialport var portName = 'COM4'; // preencha o nome da porta serial aqui // Variáveis globais do jogo ---------------

// Função de configuração ----------------------

configuração de função () {criarCanvas (640, 480); serial = novo p5. SerialPort (); // cria uma nova instância da biblioteca serialport serial.on ('list', printList); // define uma função de retorno de chamada para o evento de lista de porta serial serial.on ('conectado', serverConnected); // callback para conectar ao servidor serial.on ('open', portOpen); // callback para a abertura da porta serial.on ('data', serialEvent); // callback para quando novos dados chegarem serial.on ('error', serialError); // retorno de chamada para erros serial.on ('close', portClose); // callback para o fechamento da porta serial.list (); // lista as portas seriais serial.open (portName); // abre uma porta serial} // Função Draw ----------------------- function draw () {background (0); // fundo preto} // Interprete os dados seriais aqui ---------- function serialEvent () {// lê uma string da porta serial // até obter o retorno do carro e uma nova linha: var inString = serial. readStringUntil ('\ r / n'); // verifique se há realmente um ssetring lá: if (inString.length> 0) {if (inString! == 'hello') {// se você receber olá, ignore var sensores = split (inString, ', '); // divida a string nas vírgulas if (sensores.length> 16) {// se houver dezesseis elementos (6 analógicos, 10 digitais) // Use os dados do sensor aqui:

}

} serial.write ('x'); // enviar um byte solicitando mais dados seriais}} // obter a lista de portas: function printList (portList) {// portList é uma matriz de nomes de portas seriais para (var i = 0; i <portList.length; i ++) {// Exibe a lista do console: print (i + "" + portList ); }} function serverConnected () {print ('conectado ao servidor.'); } function portOpen () {print ('a porta serial aberta.')} function serialError (err) {print ('Algo deu errado com a porta serial.' + err); } function portClose () {print ('A porta serial fechada.'); } função Código de fechamento () {serial.close (nome da porta); return null; } window.onbeforeunload = closingCode;

Depois de salvar o esqueleto. Você pode usar esses valores de forma semelhante a como foi feito no tutorial ITP. A string de valores que enviamos de nosso Arduino na etapa 6 está sendo enviada como uma matriz de 16 números. Abaixo é onde analisamos este array.

// Interprete os dados seriais aqui ----------

function serialEvent () {// ler uma string da porta serial // até obter retorno de carro e nova linha: var inString = serial.readStringUntil ('\ r / n'); // verifique se há realmente um ssetring lá: if (inString.length> 0) {if (inString! == 'hello') {// se você receber olá, ignore var sensores = split (inString, ', '); // divida a string nas vírgulas if (sensores.length> 16) {// se houver dezesseis elementos (6 analógicos, 10 digitais) // Use os dados do sensor aqui:}} serial.write ('x'); // envia um byte solicitando mais dados seriais}}

Agora podemos executar nosso programa para ver se funciona!

Etapa 9: executando seu programa

Agora podemos executar nosso programa para ver se funciona. Você pode criar seu próprio jogo usando o arquivo skeleton.js em nosso arquivo anterior ou usar o jogo simples Pipe encontrado aqui.

Semelhante ao Laboratório ITP, para executar nosso programa, seguiremos os passos abaixo.

• Conecte o Arduino com os controladores que planeja usar.
• Abrir p5.serialcontrol
• Mude a porta do seu esboço p5 para o que você está usando (se você estiver usando o esqueleto, isso está na linha 3)
• Abra o arquivo HTML que vincula ao seu esboço p5

Se você tiver mídia externa, como imagens ou fontes baixadas, você desejará executá-la em um servidor. Você pode executar um servidor python local simples, se desejar.

Etapa 10: indo além

Para ir além e desenvolver mais jogos para isso, você pode seguir vários exemplos de p5.play encontrados aqui. Abaixo está um exemplo de um jogo mais complicado que criei. É um jogo de tiro de tanque 1 vs 1. Você pode encontrar todos os recursos para isso no GitHub.