ตัวควบคุมจอยสติ๊กที่เปิดใช้งาน Bluetooth: 9 ขั้นตอน (พร้อมรูปภาพ)

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

ตะลึงพรึงเพริดเพื่อนของคุณและทำให้ครอบครัวของคุณประหลาดใจ เมื่อพวกเขาดู "HypnoEllipse" เว็บแอป A/V แบบโต้ตอบ สร้างกล่องจอยสติ๊กที่เปิดใช้งาน Bluetooth เชื่อมต่อกับเว็บเบราว์เซอร์ และผลัดกันทำการสะกดจิตตัวเอง

นี่คือจอยสติ๊กที่เชื่อมต่อกับ Bluetooth ซึ่งส่งข้อความ HID (แป้นพิมพ์/เมาส์) ไปยังภาพร่าง p5.js ซึ่งแสดงภาพลวงตาแบบหมุนและตัวอย่างเสียงที่หมุนวน

ขั้นตอนที่ 1: วัสดุที่จำเป็น

เครื่องมือ

หัวแร้ง

ประสาน

เครื่องปอกสายไฟ

เจาะ

ดอกสว่าน 1/4"

รูเลื่อย 3/4”

อะไหล่

คอมพิวเตอร์ที่เปิดใช้งาน Bluetooth

สิ่งที่ส่งมาด้วย

www.adafruit.com/product/905

บลูฟรุต EZ-Key

www.adafruit.com/product/1535

เขียงหั่นขนมแบบโมดูลาร์ขนาดเล็ก

www.sparkfun.com/products/12047

สายจัมเปอร์

www.sparkfun.com/products/8431

จอยสติ๊ก

www.sparkfun.com/products/9182

บอร์ดฝ่าวงล้อม USB micro-B

www.sparkfun.com/products/1833

5vdc แบตเตอรี่ microUSB แบบชาร์จไฟได้

www.sparkfun.com/products/1467

ซอฟต์แวร์

เว็บแอป Hypnoellipse

hypnoellipse.netlify.com/

กำลังประมวลผล 1.5.1 (เพื่อทำการรีแมปคีย์ EZ)

processing.org/download/?processing

ควบคุม P5 (ไลบรารีประมวลผล)

www.sojamo.de/libraries/controlP5/

Firefoxhttps://www.mozilla.org/en-US/firefox/new/

หากคุณต้องการสร้าง Hypnoellipse เวอร์ชันของคุณเอง!

p5.js

p5js.org/download/

ตัวแก้ไขอะตอม

atom.io/

ขั้นตอนที่ 2: เตรียมจอยสติ๊กเป็น Bluefruit EZ Key Jumper Wires

ตัดและปอกปลายด้านหนึ่งของสายจัมเปอร์สี่คู่ที่มีสีต่างกัน

คู่สีแต่ละคู่สอดคล้องกับทิศทางของจอยสติ๊ก (ซ้าย ขวา ขึ้น ลง) ที่ไม่ซ้ำกัน โดยแต่ละคู่จะไปยังอินพุตคีย์ EZ และอีกคู่หนึ่งไปยัง GND

ด้วยความคิดนี้ ประสานสายจัมเปอร์กับจอยสติ๊กอย่างระมัดระวัง

ขั้นตอนที่ 3: เตรียมเอกสารแนบ

คุณจะต้องมีรูขนาด 1/2" หนึ่งรูที่ด้านข้างของตัวเครื่องสำหรับสาย microUSB และรูขนาด 1/4" สี่รูที่ฝาด้านบนสำหรับติดตั้งจอยสติ๊ก จอยสติ๊กจะต้องเจาะรู 3/4"

ฉันใช้กระดาษและดินสอแผ่นหนึ่งเพื่อแกะรอยรูที่ชุดจอยสติ๊กต้องใช้ ก่อนเจาะจริงที่ด้านบนของกล่องพลาสติก

ขั้นตอนที่ 4: ติดตั้งจอยสติ๊ก, คีย์ Bluefruit EZ และ USB Breakout Board

อย่าลืมพิจารณาอย่างรอบคอบว่าจัมเปอร์ลวดสี่สีของจอยสติ๊กเชื่อมต่อกับพิน #0 - #4 บนคีย์ EZ อย่างไร สิ่งนี้กำหนดวิธีที่ไมโครสวิตช์สี่ตัวบนจอยสติ๊กจะเปลี่ยนค่าของ mouseX และ mouseY ในภาพร่าง p5.js

เมื่อคุณกำหนดทิศทางของตัวเครื่องได้แล้ว ให้ดำเนินการตามเข็มนาฬิการอบๆ การเชื่อมต่อจอยสติ๊ก ติดจัมเปอร์เข้ากับอินพุตของ EZ Key และแก้ไขตามความจำเป็น (วิธีการทดลองและข้อผิดพลาด!)

หมุดกราวด์จากจอยสติ๊กสร้างบัสกราวด์พร้อมกับพินกราวด์ของคีย์ Bluefruit EZ

กราวด์และ +5vdc จากขั้วต่อ microUSB จะเชื่อมต่อกับคีย์ Bluefruit EZ

ขั้นตอนที่ 5: EZ Key GUI

คุณจะต้องใช้การประมวลผล 2.2.1 เวอร์ชันเก่าเพื่อเรียกใช้เครื่องมือ GUI นี้

หน้าสัมผัสจอยสติ๊กขึ้น/ลง/ซ้าย/ขวาจะจำลองการเคลื่อนไหวของ mouseX และ mouseY เพื่อควบคุมการสเก็ตช์ p5.js (HypnoEllipse)

บทช่วยสอน Adafruit นี้ให้ข้อมูลที่จำเป็นทั้งหมดเพื่อใช้ Bluefruit EZ-Key:

learn.adafruit.com/introducing-bluefruit-ez-key-diy-bluetooth-hid-keyboard

ขั้นตอนที่ 6: พลังและจับคู่ Bluefruit EZ Key

เปิดเครื่อง Bluefruit EZ-Key แล้วกดปุ่มคู่

คุณควรจะเห็นไฟ LED สีแดงกะพริบ กดปุ่มมินิบนปุ่ม EZ ค้างไว้ 5 วินาทีแล้วปล่อย การดำเนินการนี้จะลบข้อมูลการจับคู่ก่อนหน้าและให้คุณจับคู่กับคอมพิวเตอร์อีกครั้ง ไฟ LED สีแดงจะกะพริบ

เปิดบลูทูธในการตั้งค่าระบบแล้วคลิก "ตั้งค่าอุปกรณ์ใหม่"

ให้ผู้ช่วยทำงานจนกว่าจะพบและแสดงโมดูล EZ-Key - เลือกและคลิก "ดำเนินการต่อ"

ขั้นตอนที่ 7: ทำการแมปปุ่มบน Bluefruit EZ-Key. ใหม่

ในภาพหน้าจอ ให้สังเกตค่า mouseX และ mouseY ที่เชื่อมโยงกับหมุดคีย์:

พิน 0: x5

พิน 1: x-5

pin2: y5

pin3: y-5

ดาวน์โหลดไลบรารี ControlP5:

www.sojamo.de/libraries/controlP5/

ดาวน์โหลดไฟล์ zip ด้วยรหัส remapper ไร้สาย:

learn.adafruit.com/system/assets/assets/000/013/042/original/GUI_EZKey_remapper_12-20-13.zip?1387568625

คลายการบีบอัดและเปิด GUI_EZKey_remapper.pde ในการประมวลผล

ตรวจสอบอีกครั้งว่า Bluefruit จับคู่กับคอมพิวเตอร์ของคุณแล้ว

เลือก Sketch -> Run เพื่อเริ่มการรีแมปแบบกราฟิก

ตอนนี้เลือกหมุดและใช้เมนูเลือกรายงานของเมาส์

คลิกถัดไป "SEND_MAP" เพื่อส่งไปยัง Bluefruit EZ-Key ของคุณ

รายงานข้อความในหน้าต่างการประมวลผลควรระบุว่าพบ Bluefruit และส่งข้อมูลด้วยการจับคู่ Checksum

ขั้นตอนที่ 8: ควบคุม P5.js Sketch ที่มีอยู่ด้วยเว็บเบราว์เซอร์ Firefox แบบเต็มหน้าจอ

นี่คือภาพสเก็ตช์ p5.js ของฉันที่โฮสต์บน Netlify:

hypnoellipse.netlify.com

คุณสามารถทดลองด้วยเมาส์ของคุณ ก่อนสร้างและเชื่อมต่ออินเทอร์เฟซของจอยสติ๊ก เพื่อดูและได้ยินรูปแบบต่างๆ ของภาพและเสียง

ขั้นตอนที่ 9: แก้ไข แก้ไข หรือสร้างเว็บแอปของคุณเอง

นี่คือรหัสสำหรับเว็บแอปเอง:

github.com/dkonha01/HypnoEllipse

คุณสามารถพัฒนาเวอร์ชันของคุณเองได้โดยง่าย โดยลองเปลี่ยนค่าในบรรทัดที่ 44, 51 และ 66 ของ sketch.js - ลองดูตัวอย่างในบรรทัดที่แสดงความคิดเห็น