Bygg din egen spelkontroll

Av karl.svartholm@gmail.com / 0703-886860 (control.thatvoid.com).

Kontakta mig om du behöver delarna (200 kr), eller köp själv: Appendix B: Komponenter (blir lite dyrare).

Kontrollen fungerar som ett tangentbord och kan kopplas till dator eller Android-telefon / -tablet, kan fungera på iOS & andra enheter - berätta om det funkar!

1. Anslut minidatorn (till datorn)

...se att minidatorn får ström & startar.

🧩 Delar:

• ESP32-S3-Zero (på breadboard + lego platta)
• USB kabel
• Dator (din egen eller en som står här)

Koppla in USB-kabeln till datorn & ESP32:n.
...LED-lampan på minidatorn ska blinka till.

2. Säg "Hej" med minidatorn

...för att se att vi kan köra kod.

🧩 Delar: Thonny (program / kod-editor), 1 rad kod.

1. Installer Thonny från https://thonny.org/ & starta programmet
2. Klicka längst ner till höger i Thonny och välj att du vill jobba med CircuitPython på ESP:n.
   
3. Skriv in kod c och tryck ▶️ Run current script (F5).
4. Texten Hej! ska komma upp under kodrutan (under Shell):

2. Kör ett program som får datorns LED att lysa

...för att se att & hur saker funkar.
🧩 Delar: 4 rader kod.

1. Kopiera koden & klistra in koden:

import board, neopixel
led = neopixel.NeoPixel(board.IO21, 1, brightness=0.1)

while True: # Programloop
    led.fill((0, 255, 255)) # fyll i en färg

2. Tryck ▶️ Run current script (F5).

Eller öppna filen 2a-led-minimal.py (som igger på ESP:n), när frågad om varifrån välj "CircuitPython device":

Tryck ▶️ Run current script (F5).

Side Quests 🧙‍♂️

• Testa också 2b-led-blinkar.py.
• Ändra färgen på lampan.
• ...eller vad du vill.

3. Koppla in en knapp

🧩 Delar: knapp, 2 sladdar (en jord / nolla & en för signal).

ℹ️ Svarta sladdar används normalt för jord / 0 volt / -
Röda sladdar används normalt för ström, 3,3 volt för denna ESP32.

1. Koppla (svart) sladd från "-" på knappen till gnd på ESP:n (
2. Den andra sladden till "S" (Signal) på knappen.
3. Svart sladd till "GND" på ESP:n, se bilden nedan.
4. Den andra sladden till "(PIN) 1" på ESP:n, se bilden nedan.

ℹ️ Breadborden (den vita grejen med hål i) ansluter pinnarna från ESP:n så som pilarna visar (att sätta i en stadd i ett av hålen längs pilarna är alltså samma sak som att sätta en sladd direkt på pinnen).

4. Få knappen att tända lampan

...för att se att knappen fungerar.

Delar 🧩

• 6 rader kod
• programbibliotek digitalio (för att läsa digital input; på/av)

1. Kopiera & klistra in koden:

import board, neopixel, digitalio

# Ställ in knappen
knapp = digitalio.DigitalInOut(board.IO1)    # IO1 = pinnen knappen sitter på
knapp.direction = digitalio.Direction.INPUT  # vi ska läsa värdet från knappen (INPUT)
knapp.pull = digitalio.Pull.UP               # inbyggt motstånd, normalt "på"

led = neopixel.NeoPixel(board.IO21, 1, brightness=0.1)  # LED på pinne IO21

while True: # Programloop
    if not knapp.value:        # om knappen är nedtryckt
        led.fill((0, 0, 255))  # fyll i en färg
    else:
        led.fill((0, 0, 0))    # släck

2. Tryck ▶️ Run current script (F5).
3. Testa knappen.

Eller öppna & kör filen 4-knapp-tänder-led.py som ligger på ESP:n.

Side Quests 🧙‍♂️

• Koppla in en knapp till & få den att ändra till en annan färg
  • ...vad händer om man trycker på båda knapparna? Kan du ändra vad som händer?

5. Få knappen att skicka mellanslag (SPACE)

Delar 🧩

• 5 rader kod
• 1 programbibliotek: adafruit_hid (för att läsa digital input; på/av)

1. Kopiera och klistra in koden:

import board, neopixel, digitalio, time, usb_hid
from adafruit_hid.keyboard import Keyboard
from adafruit_hid.keycode import Keycode

led = neopixel.NeoPixel(board.IO21, 1, brightness=0.1)  # LED på pinne IO21

# Ställ in knappen
knapp = digitalio.DigitalInOut(board.IO1)    # IO1 = pinnen knappen sitter på
knapp.direction = digitalio.Direction.INPUT  # vi ska läsa värdet från knappen (INPUT)
knapp.pull = digitalio.Pull.UP               # inbyggt motstånd, normalt "på"

kbd = Keyboard(usb_hid.devices) # initiera USB-tangentbord

while True:
    if not knapp.value:         # om knappen är nedtryckt
        led.fill((0, 0, 255))   # fyll i en färg
        kbd.send(Keycode.SPACE) # skicka space (tryck + släpp)
    else:
        led.fill((0, 0, 0))     # släck

    time.sleep(0.1) # liten paus: skicka space max 10 gånger / sekund
    
    # Nu kan du t ex spela chrome://dino eller flappybirds 

2. Klicka Run.
3. Testa till exempel: chrome://dino/

Eller öppna & kör filen 5-knapp-skickar-space.py som ligger på ESP:n.

Side Quests 🧙‍♂️

• Skicka en annan knapp, namnen på knapparna finns här: https://docs.circuitpython.org/projects/hid/en/latest/api.html#adafruit-hid-keycode-keycode

6. Koppla in joystickens knapp

Delar 🧩: 1 Joystick, 3 sladdar: svart, röd & färgglad

1. Koppla den svarta sladden från joystickens "GND" pinne till "GND" på ESP:n.
2. Koppla den röda sladden från joystickens "+5V" till ESP:ns "3.3v" ⚠️ Inte "5v" utan 3.3v --> 5v**.**
3. Koppla den färgglada sladden från "SW" på joysticken till "PIN2" på ESP:n (eller nästa lediga nummerpinne om du kopplat in flera knappar).

7. Få joystickens knappen att skicka en tangent

Delar 🧩: ~7 rader kod

1. Kan du klura ut koden själv?
2. Annars lägg till den här koden:

# Jämte den andra knapp koden:
joy_knapp = digitalio.DigitalInOut(board.IO2)   # joystick-knapp
joy_knapp.direction = digitalio.Direction.INPUT
joy_knapp.pull = digitalio.Pull.UP              # håll "på" när knappen inte trycks

# Och i programmloopen:
    if not joy_knapp.value:
        kbd.send(Keycode.SPACE)

3. Och kör.

Eller öppna filen 7-joystick-knapp-skickar-space.py.

8. Koppla in Joystickens x-axis (vänster till höger) & skriv ut vad den skickar

...så att vi förstår vad för data / information som kommer från joysticken.

Delar 🧩:

• 1 sladd, gärna en färg du inte använt (för att minska risk för förvirring)
• programbibliotek: analogio (för att läsa data som inte bara är digitala; av/på som knappar)
• 2 rader kod

1. Koppla sladden mellan joystickens "VRX" & ESP:ns PIN3 (eller nästa lediga nummer-pinne).
2. Mata / kopiera in koden:

import board, neopixel, digitalio, time, usb_hid, analogio

x = analogio.AnalogIn(board.IO3)         # joystick X-axel

# och i Programmloopen:
    print(x.value)

3. Kör programmet
4. Se vad som skrivs ut under Shell i Thonny (editorn).
5. Vilket värde skrivs ut när du inte rör på den?
6. ...och när du trycker den längst åt varje sida?

Eller öppna och kör filen 8-joystick-skriv-ut-x.py.

9. Skicka vänster & höger när Joystickens rörs (tillräckligt mycket

Delar 🧩: 4 rader kod

1. Du kommer att behöva en if-sats som denna:

if NÅGOT NOGOT
  # Skicka en knapptryckning
elif NÅGOT NÅGOT
  # Skicka en annan knapptryckning

2. Skriv den själv eller kopiera denna:

    if x.value < 25000:
        kbd.send(Keycode.LEFT_ARROW)
    elif x.value > 40000:
        kbd.send(Keycode.RIGHT_ARROW)

3. Kör & testa koden 🙂
4. Rör den sig åt fel håll tycker du? I så fall ändra på vilka knappar som skickas.

10. Gör samma sak för up/ner (y-axeln)

...kan du klura ut detta?

11. Känns kontrollern lite buggig?

...detta är för att knappar normalt säger till både när de trycks ner och släpps upp, just nu skickar vi bara en "knapptrycking" istället (max 10 gånger per sekund). Testa den här koden om du vill:

import time, board, digitalio, neopixel, usb_hid, analogio
from adafruit_hid.keyboard import Keyboard
from adafruit_hid.keycode import Keycode

led = neopixel.NeoPixel(board.IO21, 1, brightness=0.1)  # LED på pinne IO21

# --- knapp för SPACE ---
knapp = digitalio.DigitalInOut(board.IO1)    # IO1 = pinnen knappen sitter på
knapp.direction = digitalio.Direction.INPUT
knapp.pull = digitalio.Pull.UP              # håll pinnen "på" när knappen inte trycks

kbd = Keyboard(usb_hid.devices)  # initiera USB-tangentbord

# --- joystick-inställningar ---
joy_x = analogio.AnalogIn(board.IO3)         # joystick X-axel
joy_y = analogio.AnalogIn(board.IO4)         # joystick Y-axel
joy_knapp = digitalio.DigitalInOut(board.IO2)  # joystick-knapp
joy_knapp.direction = digitalio.Direction.INPUT
joy_knapp.pull = digitalio.Pull.UP           # håll "på" när knappen inte trycks

CENTER = 32768   # mittvärde för analog läsning (0..65535)
DÖDZON = 6000    # område runt mitten där inget händer

# Upprepningshastighet för SPACE när knappen hålls nere
SPACE_REPEAT = 0.08  # sekunder mellan varje SPACE (0.08 ≈ 12.5 st / sekund)
senaste_space = 0.0

while True:
    nu = time.monotonic()

    # --- LÄS KNAPPAR ---
    knapp_tryckt = not knapp.value          # True = tryckt (pga pull-up)
    joy_tryckt = not joy_knapp.value        # True = tryckt

    # Tänd LED om huvudknappen hålls nere
    led.fill((0, 0, 255) if knapp_tryckt else (0, 0, 0))

    # --- SPACE: HÅLLA NED = SPAMMA SPACE ---
    space_aktiv = knapp_tryckt or joy_tryckt

    if space_aktiv and (nu - senaste_space) >= SPACE_REPEAT:
        kbd.send(Keycode.SPACE)
        senaste_space = nu

    # --- JOYSTICK-RIKTNING ---

    # Läs joystickens position (byt plats på x/y om det känns "fel")
    y = joy_x.value - CENTER
    x = joy_y.value - CENTER

    # Vänster / Höger
    if x > DÖDZON:
        # höger
        kbd.press(Keycode.LEFT_ARROW)
        kbd.release(Keycode.RIGHT_ARROW)
    elif x < -DÖDZON:
        # vänster
        kbd.press(Keycode.RIGHT_ARROW)
        kbd.release(Keycode.LEFT_ARROW)
    else:
        # ingen riktning
        kbd.release(Keycode.LEFT_ARROW)
        kbd.release(Keycode.RIGHT_ARROW)

    # Upp / Ner
    if y > DÖDZON:
        # ner
        kbd.press(Keycode.DOWN_ARROW)
        kbd.release(Keycode.UP_ARROW)
    elif y < -DÖDZON:
        # upp
        kbd.press(Keycode.UP_ARROW)
        kbd.release(Keycode.DOWN_ARROW)
    else:
        # ingen riktning
        kbd.release(Keycode.UP_ARROW)
        kbd.release(Keycode.DOWN_ARROW)

    # Liten paus för att inte överbelasta allt
    time.sleep(0.003)

12. Se till att kontrollen funkar på andra datorer

...så att det körs varje gång kontrollern får ström, oavsett var den ansluts.
Spara din fil som code.py (på CIRCUITPY devicen), skriv över den gamla.

Extra: Kontroll med två joysticks

Den andra kan till exempel skicka W, A, S, D (istället för piltangenter).
(Eventuellt kan vi senare göra en version där ena joysticken funderar som en mus).

Delar 🧩:

• 1 Joystick
• 5 Sladdar, gärna en svart/brun, röd & 3 andra färger
• Flera rader kod (nästan samma som för första joysticken)

1. Koppla den svarta sladden från joystickens "GND" pinne till "GND" på ESP:n.
2. Koppla den röda sladden från joystickens "+5V" till ESP:ns "3.3v" ⚠️ Inte "5v" utan 3.3v --> 5v**.**
3. Koppla en färgglad sladd från "SW" på joysticken till "PIN5" på ESP:n
4. Koppla en sladd mellan joystickens "VRX" & ESP:ns PIN6.
5. Koppla en sladd mellan joystickens "VRY" & ESP:ns PIN7.
6. Mata / kopiera in koden:

import time, board, digitalio, neopixel, usb_hid, analogio
from adafruit_hid.keyboard import Keyboard
from adafruit_hid.keycode import Keycode

led = neopixel.NeoPixel(board.IO21, 1, brightness=0.1)  # LED på pinne IO21

# --- knapp för SPACE ---
knapp = digitalio.DigitalInOut(board.IO1)    # IO1 = pinnen knappen sitter på
knapp.direction = digitalio.Direction.INPUT
knapp.pull = digitalio.Pull.UP              # håll pinnen "på" när knappen inte trycks

kbd = Keyboard(usb_hid.devices)  # initiera USB-tangentbord

# --- joystick-inställningar ---
joy_x = analogio.AnalogIn(board.IO3)         # joystick X-axel
joy_y = analogio.AnalogIn(board.IO4)         # joystick Y-axel
joy_knapp = digitalio.DigitalInOut(board.IO2)  # joystick-knapp
joy_knapp.direction = digitalio.Direction.INPUT
joy_knapp.pull = digitalio.Pull.UP           # håll "på" när knappen inte trycks

joy2_x = analogio.AnalogIn(board.IO6)         # joystick X-axel
joy2_y = analogio.AnalogIn(board.IO7)         # joystick Y-axel
joy2_knapp = digitalio.DigitalInOut(board.IO5)  # joystick-knapp
joy2_knapp.direction = digitalio.Direction.INPUT
joy2_knapp.pull = digitalio.Pull.UP           # håll "på" när knappen inte trycks


CENTER = 32768   # mittvärde för analog läsning (0..65535)
DÖDZON = 6000    # område runt mitten där inget händer

# Upprepningshastighet för SPACE när knappen hålls nere
SPACE_REPEAT = 0.08  # sekunder mellan varje SPACE (0.08 ≈ 12.5 st / sekund)
senaste_space = 0.0

while True:
    nu = time.monotonic()

    # --- LÄS KNAPPAR ---
    knapp_tryckt = not knapp.value          # True = tryckt (pga pull-up)
    joy_tryckt = not joy_knapp.value        # True = tryckt
    joy2_tryckt = not joy2_knapp.value      # True = tryckt

    # Tänd LED om huvudknappen hålls nere
    led.fill((0, 0, 255) if knapp_tryckt else (0, 0, 0))

    # --- SPACE: HÅLLA NED = SPAMMA SPACE ---
    space_aktiv = knapp_tryckt or joy_tryckt or joy2_tryckt

    if space_aktiv and (nu - senaste_space) >= SPACE_REPEAT:
        kbd.send(Keycode.SPACE)
        senaste_space = nu

    # --- JOYSTICK-RIKTNING ---

    # Läs joystickens position (byt plats på x/y om det känns "fel")
    y = joy_x.value - CENTER
    x = joy_y.value - CENTER

    # Vänster / Höger
    if x > DÖDZON:
        # höger
        kbd.press(Keycode.LEFT_ARROW)
        kbd.release(Keycode.RIGHT_ARROW)
    elif x < -DÖDZON:
        # vänster
        kbd.press(Keycode.RIGHT_ARROW)
        kbd.release(Keycode.LEFT_ARROW)
    else:
        # ingen riktning
        kbd.release(Keycode.LEFT_ARROW)
        kbd.release(Keycode.RIGHT_ARROW)

    # Upp / Ner
    if y > DÖDZON:
        # ner
        kbd.press(Keycode.DOWN_ARROW)
        kbd.release(Keycode.UP_ARROW)
    elif y < -DÖDZON:
        # upp
        kbd.press(Keycode.UP_ARROW)
        kbd.release(Keycode.DOWN_ARROW)
    else:
        # ingen riktning
        kbd.release(Keycode.UP_ARROW)
        kbd.release(Keycode.DOWN_ARROW)

    # --- JOYSTICK2-RIKTNING ---

    # Läs joystickens position (byt plats på x/y om det känns "fel")
    y2 = joy2_x.value - CENTER
    x2 = joy2_y.value - CENTER

    # Vänster / Höger
    if x2 > DÖDZON:
        # höger
        kbd.press(Keycode.A)
        kbd.release(Keycode.D)
    elif x2 < -DÖDZON:
        # vänster
        kbd.press(Keycode.D)
        kbd.release(Keycode.A)
    else:
        # ingen riktning
        kbd.release(Keycode.A)
        kbd.release(Keycode.D)

    # Upp / Ner
    if y2 > DÖDZON:
        # ner
        kbd.press(Keycode.S)
        kbd.release(Keycode.W)
    elif y2 < -DÖDZON:
        # upp
        kbd.press(Keycode.W)
        kbd.release(Keycode.S)
    else:
        # ingen riktning
        kbd.release(Keycode.W)
        kbd.release(Keycode.S)

    # Liten paus för att inte överbelasta allt
    time.sleep(0.003)

Appendix A: Gjort/gör i förväg med varje esp32-s3

1. Installera CircuitPython från https://circuitpython.org/board/waveshare_esp32_s3_zero/ kan göras från webbläsare, klicka "Open Installer 🪄" & instruktionerna.
2. Ladda ner Adafruit_CircuitPython_HID kod biblioteket och lägg hela katalogen adafruit_hid under katalogen lib på esp32s usb device (ex D:\lib).
3. Pack upp denna zip https://thatvoid.com/espyssel.zip & kopiera innehållet i katalogen code till usn:n (ex D:).

Appendix B: Komponenter {#appendix-b:-komponenter}

• ESP32-S3 utvecklingskort - Electrokit - 99kr
• Kopplingsdäck 170 anslutningar - Electrokit - 35kr
• Tryckknapp momentan - Electrokit - 19kr
• Analog joystick 2-axel - Electrokit - 32kr
• Kopplingskabel 20-pol 15cm med dupont hona/hane - Electrokit - 49kr
• Stiftlist 2.54mm 1x40p - Electrokit - 9,5kr (jag använde extra höga, men det var onödigt)

Montering

• Legoplattor: 4x6, 4x4 & 2x3.
• Tjock Dubbelhäftande tejp (två lager mellan joystick & lego) oklart var tejpen kommit ifrån men går säkert att lösa med annan tejp eller lim

PS. Stiften har lötts på ESP32n, det bör gå att hitta moduler som redan har stift.

Spel att testa med

https://gadiim.github.io/Space_Blast/
https://chromedino.com/
Space Waves 🕹️ Play on CrazyGameshttps://www.crazygames.com/game/space-waves (eventuellt)
Spel som kostar:
https://store.steampowered.com/app/1794680/Vampire_Survivors/
Megabonk (2 thumbsticks)

Vill du ha ett kit? {#vill-du-ha-ett-kit?}

Kontakta mig på karl.svartholm@gmail.com eller 0703-886860 så sätter jag ihop det för inköpspris.

Vill du se detta på ett annat event?

Kontakta mig på karl.svartholm@gmail.com eller 0703-886860.