Ovladače Arduino: 10 kroků (s obrázky)

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:23

Systém herního ovladače Arduino využívající Arduino a knihovnu p5.js. Cílem je vytvořit projekt Arduino, který lze snadno replikovat a rozšiřovat. Připojení řadiče je navrženo tak, aby využívalo spoustu různých senzorů a vstupů, které lze zaměňovat v závislosti na každém ovladači.

Tento projekt je také navržen tak, aby využíval knihovnu JavaScript p5.js spolu s knihovnou p5.play určenou pro p5.js. Tyto knihovny nám umožňují snadno programovat naše hry. Web p5.play má spoustu návodů a příkladů, jak pro něj uživatelé vytvářet hry. Tento projekt umožňuje uživatelům procvičit si dovednosti v oblasti vývoje hardwaru a softwaru.

Krok 1: Co budete potřebovat

Nástroje:

• Páječka
• Pájka
• Odizolovače drátu
• Boční řezačky
• Kleště

Hardware:

• Deska kompatibilní s Arduino (použil jsem Sparkfun Redboard a Arduino Uno a Leonardo)

• Perf Board:

  • 8 cm x 6 cm zelené perf desky
  • Perfektní deska Aduino Uno shield

• Různé senzory

  • Joysticky
  • Tlačítka (s odpory, 10 k ohmů, jděte s nimi)
  • Potenciometry
  • Flex senzory
  • Snímače tlaku
  • Atd…

• Drát:

  • Single Wire (použil jsem 26 AWG Solid)
  • Pásový drát a zvlnění
• Odlomte záhlaví (alespoň 20 z nich)

• Volitelný hardware (místo toho můžete použít lepenku a lepidlo/zipy):

  • Breadboard a propojovací kabely pro prototypování
  • 3D tištěné přílohy
  • Hardwarové spojovací prvky (použil jsem šrouby M2,5)

Software:

• Arduino IDE

• knihovna p5.js

  P5.play knihovna také

• p5.sériové ovládání
• Node.js

Krok 2: Budování: konzolový rozbočovač, nastavení štítu

Pájejte záhlaví na desku Arduino Uno shield perf.

• Začal jsem s hlavičkami štítu (napájení, analogový a digitální)
• Další jsou záhlaví 2x5. Můžete použít 2x5 záhlaví, nebo jen 2 řady po 5 odlomených hlavičkách. Seřadil jsem je A3 a A4 svisle a nechal mezi nimi 2 mezery.

Krok 3: Budování: konzolový rozbočovač, zapojení štítu

Dále chceme nasměrovat naše dráty na štít. Je snazší vést dráty nahoře, ale pokud chcete mít čistší vzhled, můžete je spustit dole.

Při směrování těchto vodičů byste měli věnovat pozornost schématu (schéma Eagle je k dispozici ke stažení). Můžete se také podívat na průvodce barvami, který vám s tím pomůže.

Myšlenkou tohoto designu stínění je umožnit 3 analogové vstupy a 5 digitálních vstupů z každého řadiče. To plně využívá všech analogových vstupů na Arduino Uno i zbývajících vodičů na našem plochém kabelu.

Krok 4: Budování: ovladače, nastavení vašich dílů

Prvním krokem k vybudování ovladače je naplánovat, která čidla použijete. Ve svých příkladech mám docela standardní ovladač s joystickem a několika tlačítky. Mám také ovladač se dvěma posuvnými potenciometry.

Pokud to chcete replikovat, můžete si prohlédnout mé obrázky pro umístění.

Dalším krokem je připájení plochého kabelu k desce perf.

1. Odizolujte a pocínujte plochý kabel
2. Pájecí kabel připájejte k hornímu středu desky perf.

Dalším krokem je vedení vodičů. Začal jsem nejprve připojením napájení (5V/červený vodič) a uzemnění (hnědý vodič) k senzorům. Poté jsem zapojil analogové vstupy. Zjistil jsem, že je snadné použít oranžový kabel (analogový A0 nebo A3) pro horizontální pohyb a žlutý kabel (analogový A1 nebo A4) pro vertikální pohyb.

Aby byly věci konzistentní, také jsem na všechny své ovladače zapojil malé tlačítko do fialova. To je užitečné pro věci, jako je zavření sériového portu (na to se podívám později), stejně jako pro nabídky nebo možnosti.

Pokud byste se na to chtěli podívat, nahrál jsem rychlé schéma ovladače mého joysticku. Z našeho schématu pin-out vidíte možnost připojení každého ovladače (3 analogové vstupy a 5 digitálních).

Krok 5: Volitelné: Přílohy

Tento krok je volitelný, ale pokud máte přístup k 3D tiskárně, výsledek vašeho projektu bude vypadat o něco rafinovanější a dokončenější. Jak vidíte na mých prototypech, použil jsem jednoduchý kus lepenky, abych zabránil pájení spojů na spodní straně desek perf prsty.

K tomuto kroku můžete připojit mé 3D modely. Vytvořil jsem skříně pro rozbočovač pro Arduino Uno/Leonardo a Sparkfun RedBoard (tato deska je trochu širší a používá mini USB).

U ovladačů je můžete připevnit šrouby M2,5. Nechal jsem matici na straně DPS a používám podložku a šroub na spodní straně.

Zahrnul jsem také 3D model pro posuvníky knoflíků pro potenciometry, které jsem použil.

Všechny 3D soubory najdete na GitHubu.

Krok 6: Programování: Arduino

Začněme nastavením jednoduchého náčrtu k testování. Doporučuji použít tutoriál vytvořený ITP na NYU, který najdete zde. K provedení tohoto kurzu budete muset mít nainstalovaný p5.serialcontroll a node.js. V tomto tutoriálu se seznámíte s nastavením Arduina pro odesílání sériových dat, která jsou použitelná naší knihovnou javascript, p5.js. K tomu můžete použít rozbočovač a řadič, který jsme vytvořili v předchozích krocích, nebo můžete replikovat obvody předvedené v kurzu. Tento tutoriál používá analogový vstupní pin A0 na Arduino Uno, který je namapován na oranžový vodič vašeho prvního ovladače.

Další tutoriál, který budete chtít sledovat, najdete zde. Tento tutoriál vás provede nastavením více vstupů a jejich využitím v p5.js. V tomto kurzu jsou použity analogové vstupy A0 a A1. Ty budou odpovídat oranžovým a žlutým vodičům na ovladači 1 našeho systému.

Jakmile projdete výše uvedené návody, můžeme Arduino naprogramovat. Kód, který chceme použít, je níže:

// řadič 1const int dig2 = 2; // blue const int dig3 = 3; // purple const int dig4 = 4; // šedá const int dig5 = 5; // white const int dig6 = 6; // černá // ovladač 2 const int dig7 = 7; // blue const int dig8 = 8; // purple const int dig9 = 9; // šedá const int dig10 = 10; // white const int dig11 = 11; //Černá

neplatné nastavení () {

Serial.begin (9600); while (Serial.available () <= 0) {Serial.println ("ahoj"); // odeslání zpoždění počáteční zprávy (300); // počkejte 1/3 sekundy} 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); }

prázdná smyčka () {

if (Serial.available ()> 0) {// přečte příchozí bajt: int inByte = Serial.read (); // přečtěte si senzor:

// Ovladač ANALOG 1

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

int digital5 = digitalRead (dig5);

int digital6 = digitalRead (dig6); // DIGITAL Controller 2 int digital7 = digitalRead (dig7); int digital8 = digitalRead (dig8); int digital9 = digitalRead (dig9); int digital10 = digitalRead (dig10); int digital11 = digitalRead (dig11); // tisk výsledků: Serial.print (analog0); // [0] Serial.print (","); Serial.print (analog1); // [1] Serial.print (","); Serial.print (analog2); // [2] Serial.print (","); // Spusťte data řadiče 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 (","); // Spuštění ovladače 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]}}

Tento kód odesílá sériová data z obou našich řadičů jako pole 16 čísel. Prvních 6 z těchto čísel jsou naše analogové vstupy (v rozsahu 0-1023) a zbývajících 10 hodnot jsou naše digitální hodnoty (0 nebo 1).

Jakmile je náš kód nahrán, můžeme to otestovat otevřením sériového monitoru a zadáním hodnoty do našeho sériového monitoru, jako jsme to udělali ve 2. tutoriálu od ITP. Měli bychom dostat řetězec našich hodnot oddělený čárkami.

Krok 7: Programování: HTML

Jakmile máme Arduino nastaveno a funkční, můžeme začít programovat naše webové věci. HTML kód je velmi jednoduchý.

body {padding: 0; okraj: 0;}

Html kód jednoduše spojuje naše soubory javascriptu dohromady. Většina našeho kódu se ve skutečnosti stane v našem souboru skica.js.

Krok 8: Programování: P5.js a Javascript

Jakmile máme HTML nastaveno, můžeme pracovat na našem JavaScriptu. Pokud jste to ještě neudělali, měli byste si nyní stáhnout p5.js a p5.play a přidat je do složky knihoven v adresáři pro vaše webové stránky.

• p5.js
• p5.přehrát

V našem předchozím kroku jsme nastavili náš soubor HTML pro volání našich knihoven p5.js a p5.play. Také jsme jej nastavili tak, aby používal náš soubor sketch.js, kde budeme provádět většinu programování. Níže je kód pro naši kostru. Najdete ho také zde.

// Serial Variablesvar serial; // proměnná pro uložení instance knihovny serialport var portName = 'COM4'; // zde zadejte název svého sériového portu // Globální proměnné hry ---------------

// Funkce nastavení ----------------------

nastavení funkce () {createCanvas (640, 480); serial = new p5. SerialPort (); // vytvoření nové instance knihovny serialport serial.on ('list', printList); // nastavení funkce zpětného volání pro událost seznamu sériových portů serial.on ('connected', serverConnected); // zpětné volání pro připojení k serveru serial.on ('open', portOpen); // zpětné volání pro otevření portu serial.on ('data', serialEvent); // zpětné volání, když dorazí nová data serial.on ('chyba', serialError); // zpětné volání chyb serial.on ('close', portClose); // zpětné volání pro port zavírající serial.list (); // seznam sériových portů serial.open (název_portu); // otevření sériového portu} // Funkce kreslení ----------------------- funkce draw () {pozadí (0); // černé pozadí} // Zde interpretujte sériová data ---------- funkce serialEvent () {// přečtěte řetězec ze sériového portu // dokud nedostanete návrat na začátek řádku a nový řádek: var inString = serial. readStringUntil ('\ r / n'); // zkontrolujte, zda tam skutečně existuje ssetring: if (inString.length> 0) {if (inString! == 'hello') {// pokud vás pozdraví, ignorujte to var senzory = split (inString, ', '); // rozdělte řetězec na čárky if (sensor.length> 16) {// pokud existuje šestnáct prvků (6 analogových, 10 digitálních) // Zde použijte data ze senzorů:

}

} serial.write ('x'); // odeslání bajtu požadujícího více sériových dat}} // získání seznamu portů: funkce printList (portList) {// portList je pole názvů sériových portů pro (var i = 0; i <portList.length; i ++) {// Zobrazení seznamu konzoly: print (i + "" + portList ); }} funkce serverConnected () {print ('připojeno k serveru.'); } function portOpen () {print ('the serial port opened.')} function serialError (err) {print ('Něco se pokazilo se sériovým portem.' + err); } funkce portClose () {print ('Sériový port zavřený.'); } funkce closingCode () {serial.close (název_portu); return null; } window.onbeforeunload = zatvárací kód;

Jakmile máte kostru uloženou. Tyto hodnoty můžete použít podobně, jako to bylo provedeno v kurzu ITP. Řetězec hodnot, který jsme poslali z našeho Arduina v kroku 6, se odesílá jako pole 16 čísel. Níže je analyzováno toto pole.

// Zde interpretujte sériová data ----------

funkce serialEvent () {// číst řetězec ze sériového portu // dokud nedostanete návrat na začátek řádku a nový řádek: var inString = serial.readStringUntil ('\ r / n'); // zkontrolujte, zda tam skutečně existuje ssetring: if (inString.length> 0) {if (inString! == 'hello') {// pokud vás pozdraví, ignorujte to var senzory = split (inString, ', '); // rozdělte řetězec na čárky if (ensens.length> 16) {// pokud existuje šestnáct prvků (6 analogových, 10 digitálních) // Zde použijte data ze senzorů:}} serial.write ('x'); // odeslání bajtu požadujícího více sériových dat}}

Nyní můžeme spustit náš program, abychom zjistili, zda funguje!

Krok 9: Spuštění programu

Nyní můžeme spustit náš program, abychom zjistili, zda funguje. Buď si můžete vytvořit vlastní hru pomocí souboru skeleton.js v našem předchozím souboru, nebo můžete použít jednoduchou hru Pipe, kterou najdete zde.

Podobně jako laboratoř ITP budeme při spouštění našeho programu postupovat podle níže uvedených kroků.

• Zapojte Arduino pomocí ovladačů, které plánujete použít.
• Otevřete p5.serialcontrol
• Změňte port svého skici p5 na ten, který používáte (pokud používáte kostru, je to na řádku 3)
• Otevřete soubor HTML, který odkazuje na vaši skicu p5

Pokud máte externí média, jako jsou obrázky nebo stažená písma, budete to chtít spustit na serveru. Pokud chcete, můžete spustit jednoduchý místní server python.

Krok 10: Jít dále

Chcete -li jít dále a vyvinout další hry, můžete sledovat různé příklady z p5.play, které najdete zde. Níže je příklad komplikovanější hry, kterou jsem vytvořil. Jedná se o střílečku tanků 1 proti 1. Všechny prostředky k tomu najdete na GitHubu.