İçindekiler:
- Adım 1: Gerekli Malzemeler
- Adım 2: Joystick'i Bluefruit EZ Anahtar Jumper Kablolarına Hazırlayın
- Adım 3: Muhafazayı Hazırlayın
- Adım 4: Joystick, Bluefruit EZ Key ve USB Breakout Board'u kurun
- Adım 5: EZ Anahtar GUI
- 6. Adım: Bluefruit EZ Anahtarını Güçlendirin ve Eşleştirin
- 7. Adım: Bluefruit EZ-Key'deki Düğmeleri Yeniden Eşleştirme
- 8. Adım: Firefox Web Tarayıcısı ile Mevcut P5.js Taslağını Tam Ekranda Kontrol Edin
- 9. Adım: Kendi Web Uygulamanızı Düzenleyin, Gözden Geçirin veya Oluşturun
2025 Yazar: John Day | [email protected]. Son düzenleme: 2025-01-13 06:58
Etkileşimli bir A/V web uygulaması olan "HypnoEllipse"e baktıklarında arkadaşlarınızı şaşırtın ve ailenizi şaşırtın. Bluetooth özellikli bir joystick muhafazası oluşturun, onu web tarayıcısına bağlayın ve sırayla kendi kendine hipnoz gerçekleştirin.
Bu, dönen bir optik illüzyon ve dönen bir ses örneği sunan bir p5.js çizimine HID (klavye/fare) mesajları gönderen Bluetooth bağlantılı bir Joystick'tir.
Adım 1: Gerekli Malzemeler
Aletler
havya
lehim
tel striptizci
delmek
matkap ucu 1/4"
delik testeresi 3/4”
Parçalar
Bluetooth özellikli bilgisayar
muhafaza
www.adafruit.com/product/905
Bluefruit EZ-Anahtarı
www.adafruit.com/product/1535
mini modüler devre tahtası
www.sparkfun.com/products/12047
atlama telleri
www.sparkfun.com/products/8431
oyun kolu
www.sparkfun.com/products/9182
USB mikro-B koparma kartı
www.sparkfun.com/products/1833
5vdc şarj edilebilir microUSB pil
www.sparkfun.com/products/14167
YAZILIM
Hipnoellipse web uygulaması
hypnoellipse.netlify.com/
1.5.1 işleniyor (EZ Anahtarını yeniden eşlemek için)
processing.org/download/?processing
Kontrol P5 (İşleme kitaplığı)
www.sojamo.de/libraries/controlP5/
Firefoxhttps://www.mozilla.org/en-US/firefox/new/
Hypnoellipse'in kendi versiyonunu yapmak istiyorsan!
p5.js
p5js.org/download/
atom düzenleyici
atom.io/
Adım 2: Joystick'i Bluefruit EZ Anahtar Jumper Kablolarına Hazırlayın
Dört çift farklı renkte atlama telinin her birinin bir ucunu kesin ve soyun.
Renk çiftlerinin her biri benzersiz (Sol, Sağ, Yukarı, Aşağı) joystick yönüne karşılık gelir - her çiftten biri bir EZ Key girişine, diğeri GND'ye gider.
Bu akılla, jumper kablolarını joystick'e dikkatlice lehimleyin.
Adım 3: Muhafazayı Hazırlayın
microUSB kablosu için muhafazanın yan tarafında bir adet 1/2" deliğe ve joystick'i monte etmek için üst kapakta dört adet 1/4" deliğe ihtiyacınız olacaktır. Joystick'in kendisinin 3/4" delik kesimine ihtiyacı olacaktır.
Plastik muhafazanın üst kısmını delmeden önce, joystick tertibatının gerektirdiği deliklerin izini sürmek için bir kağıt ve kurşun kalem kullandım.
Adım 4: Joystick, Bluefruit EZ Key ve USB Breakout Board'u kurun
Joystick'in benzersiz renkli dört tel atlama telinin EZ Key üzerindeki #0 - #4 pinlerine nasıl bağlandığını dikkatlice belirlediğinizden emin olun. Bu, joystick üzerindeki dört mikro anahtarın, p5.js çiziminde mouseX ve mouseY değerlerini nasıl değiştireceğini tanımlar.
Kasanızın yönünü belirledikten sonra, joystick bağlantılarının etrafında saat yönünde ilerleyin, jumperları EZ Key'in girişlerine takın ve gerektiği şekilde revize edin (deneme yanılma yöntemi!).
Joystick'teki topraklama pimleri, Bluefruit EZ Key'in bir topraklama pimi ile birlikte bir topraklama veriyolu oluşturur.
MicroUSB konektöründen gelen toprak ve +5vdc de Bluefruit EZ Key'e bağlanacaktır.
Adım 5: EZ Anahtar GUI
Bu GUI aracını çalıştırmak için İşleme 2.2.1'in daha eski bir sürümünü kullanmanız gerekecektir.
Joystick yukarı/aşağı/sol/sağ kontakları, p5.js taslağını (HypnoEllipse) kontrol etmek için mouseX ve mouseY hareketlerini taklit edecektir.
Bu Adafruit öğreticisi, Bluefruit EZ-Key'i kullanmak için gerekli tüm bilgileri sağlar:
learn.adafruit.com/introducing-bluefruit-ez-key-diy-bluetooth-hid-keyboard
6. Adım: Bluefruit EZ Anahtarını Güçlendirin ve Eşleştirin
Bluefruit EZ-Key'i çalıştırın ve eşleştirme düğmesine basın.
Kırmızı LED'in yanıp söndüğünü görmelisiniz. Ardından 5 saniye boyunca EZ Tuşundaki mini düğmeye basın ve bırakın, bu önceki eşleştirme bilgilerini siler ve bilgisayarınızla yeniden eşleştirmenize izin verir. Kırmızı LED şimdi yanıp sönecektir.
Sistem Tercihleri'nde Bluetooth'u açın ve "Yeni Cihaz Kur" u tıklayın.
Asistanın EZ-Key modülünü bulup görüntüleyene kadar çalışmasına izin verin - onu seçin ve "Devam"a tıklayın.
7. Adım: Bluefruit EZ-Key'deki Düğmeleri Yeniden Eşleştirme
Ekran görüntüsünde, tuş pinleriyle ilişkili mouseX ve mouseY değerlerini not edin:
0 pimi: x5
pim 1: x-5
pin2: y5
pin3: y-5
ControlP5 Kitaplığını İndirin:
www.sojamo.de/libraries/controlP5/
Zip dosyasını kablosuz yeniden eşleştirici koduyla indirin:
learn.adafruit.com/system/assets/assets/000/013/042/original/GUI_EZKey_remapper_12-20-13.zip?1387568625
GUI_EZKey_remapper.pde dosyasını İşlemde açın ve açın.
Bluefruit'in bilgisayarınızla eşleştiğini iki kez kontrol edin.
Grafik yeniden eşleyiciyi başlatmak için Sketch -> Run'ı seçin.
Şimdi pinleri seçin ve menüleri kullanarak fare raporlarını seçin.
Ardından Bluefruit EZ-Key'inize göndermek için "GÖNDER"i tıklayın.
İşleme penceresindeki bir metin raporu, Bluefruit bulduğunu ve Checksum Match ile veri gönderdiğini belirtmelidir.
8. Adım: Firefox Web Tarayıcısı ile Mevcut P5.js Taslağını Tam Ekranda Kontrol Edin
İşte Netlify'da barındırılan p5.js çizimim:
hypnoellipse.netlify.com
Görsel-işitsel model varyasyonlarını görmek ve duymak için joystick arayüzünü oluşturmadan ve bağlamadan önce farenizle deney yapabilirsiniz.
9. Adım: Kendi Web Uygulamanızı Düzenleyin, Gözden Geçirin veya Oluşturun
İşte web uygulamasının kendisi için kod:
github.com/dkonha01/HypnoEllipse
Sketch.js'nin 44, 51 ve 66. satırlarındaki değerleri değiştirmeyi deneyerek kendi sürümünüzü kolayca geliştirebilirsiniz - bunun örnekleri için yorumlanmış satırlara göz atın.