DIY und IOT Projekte

Buzzer selber bauen: Arduino Micro als USB-Tastatur

Buzzer selber bauen aus Pilztaster und Arduino Micro: So entstand in anderthalb Wochen die Zeitmessung mit Rangliste für eine Akkuschrauber-Challenge.

Zwei schwarze Pilztaster mit USB-Kabel als selbst gebaute Buzzer, daneben ein Laptop mit laufendem Timer
Rolle
Elektronik und Frontend
Stack
Arduino Micro, Pilztaster, Arduino-C++, HTML, CSS, JavaScript
Jahr
2024

Ein Freund von mir hatte gerade bei Milwaukee angefangen und wollte für den Stand auf dem Scholzkopf Festival 2024 (öffnet in neuem Tab) etwas, bei dem die Leute mitmachen: Zwei Personen treten mit Akkuschrauber oder Säge gegeneinander an, und die schnellere gewinnt. Was fehlte, war eine Zeitmessung, die niemand erklären muss. Draufhauen, die Zeit läuft, noch einmal draufhauen, die Zeit steht. Bis zum Festival blieben anderthalb Wochen. Also haben wir beschlossen, die Buzzer selber zu bauen, und ich habe dazu einen Timer mit Rangliste für den Browser geschrieben.

Was die Buzzer bei der Akkuschrauber-Challenge machen

Auf dem Tisch am Stand sitzen zwei Buzzer, einer für jede Person. Den Tisch hat mein Freund gebaut und die Buzzer darauf montiert. Beide hängen per USB an einem Laptop, auf dem der Timer im Browser läuft.

Eine Runde läuft so ab:

  1. Wer den Stand betreut, tippt die Namen der beiden Teilnehmenden ein.
  2. Beide drücken ihren Buzzer. Ab diesem Moment zählt ihre Zeit von 00:00:000 hoch, in Minuten, Sekunden und Millisekunden.
  3. Sie schrauben oder sägen um die Wette.
  4. Wer fertig ist, drückt den Buzzer noch einmal, und die eigene Zeit bleibt stehen.
  5. Stehen beide Zeiten, zeigt der Timer, wer gewonnen hat, und wechselt nach vier Sekunden zur Rangliste mit den sieben besten Zeiten.

Wie das am Stand aussah, zeigt ein Video von Bauforum24: der ganze Aufbau mit Tisch, Buzzern und Bildschirm und eine Runde der Challenge.

Video von Bauforum24: die Akkuschrauber-Challenge mit Tisch, Buzzern und Timer am Stand Video von YouTube laden Mit dem Klick werden Daten an YouTube übertragen. Mehr dazu

Neben dem Timer gibt es einen zweiten Modus, ein Quiz-Duell. Zwei Personen bekommen eine Frage gestellt, und der Bildschirm zeigt, wer zuerst gedrückt hat und antworten darf.

Buzzer selber bauen: Bauteile und Werkzeug

Die Liste gilt für zwei Buzzer. Die Preise sind die, die ich 2024 bezahlt habe.

Bauteil Anzahl Preis Bezugsquelle
Pilztaster, schwarz, zum Aufschrauben (öffnet in neuem Tab) 2 je 25 € Amazon
Arduino Micro (öffnet in neuem Tab) 2 zusammen 20 € Amazon
Micro-USB-Kabel 2 je 1 bis 3 € Tedi, Action, usw.
Elektrischer Draht (öffnet in neuem Tab) 2 Meter 4 € Amazon oder AliExpress

Ein Pilztaster ist ein großer Taster mit pilzförmigem Kopf, wie er an Maschinen als Not-Aus sitzt. Er wird auch Grobhandtaster genannt, weil er sich mit der flachen Hand schlagen lässt. Das Gehäuse lässt sich aufschrauben und anschrauben, und die Kontakte im Inneren sind frei für eigene Schaltungen. Er war mit 25 € das teuerste Teil.

Zusammen kommen die Bauteile ohne Draht auf 77 bis 86 €.

An Werkzeug brauchst du:

  • Lötkolben, Lötzinn und Lötfett
  • Abisolierzange, um die Isolierung vom Draht zu entfernen
  • Präzisions-Seitenschneider, um den Draht abzulängen
  • Bohrmaschine mit einem normalen Spiralbohrer für das Kabelloch Ø 12 - 14 mm
  • Schraubendreher für die Klemmen und das Gehäuse des Pilztasters

Ich habe anderthalb Wochen lang abends jeweils zwei bis drei Stunden an dem Projekt gesessen. Ein großer Teil davon war Testen.

Pilztaster mit dem Arduino Micro verkabeln

Der Arduino Micro ist ein kleiner Microcontroller, also ein Rechner auf einer Platine, der ein einzelnes Programm ausführt. Er hat einen Micro-USB-Anschluss und bekommt darüber Strom und Daten vom Laptop. Eine eigene Stromversorgung braucht der Buzzer nicht.

Die Verkabelung besteht aus zwei Drähten je Buzzer:

Vom Pilztaster Zum Arduino Micro
Kontakt 1 GND
Kontakt 2 Pin 2

So gehst du vor:

  1. Schraube den Pilztaster auf.
  2. Bohre an der Aussparung in der Seite des Gehäuses ein Loch für das USB-Kabel.
  3. Schraube je einen Draht in die beiden Klemmen des Tasters.
  4. Löte den einen Draht am Arduino Micro an GND (Ground, die Masse) und den anderen an Pin 2.
  5. Führe das USB-Kabel durch das Loch und stecke es am Arduino an.
  6. Lege den Arduino in das Gehäuse und schraube es wieder zu.

Statt Pin 2 gehen je nach Board auch andere Pins. Dann musst du die Nummer im Code anpassen.

Der Arduino Micro meldet sich als Tastatur

Der Trick an diesem Aufbau: Der Arduino Micro gibt sich am Laptop als USB-Tastatur aus. Drückt jemand den Buzzer, tippt der Arduino eine Taste. Der Laptop braucht dafür keinen Treiber und kein eigenes Programm, und alles, was auf Tasten reagiert, lässt sich mit dem Buzzer bedienen.

Die Idee stammt aus dem Tutorial DIY: Wir bauen einen DSGVO-Button (öffnet in neuem Tab) von Marketing Factory. Danach haben wir die beiden Arduinos mit der Arduino IDE (öffnet in neuem Tab) geflasht, also das Programm auf sie übertragen. Bei Arduino heißt so ein Programm Sketch. Das ist der ganze Sketch für einen Buzzer, gekürzt nur um ein paar Kommentare:

#include <Keyboard.h>

// Pin für den Schalter definieren
const int schalterPin = 2;

// Variable zur Speicherung des vorherigen Zustands des Schalters
int vorherigerZustand = HIGH;

void setup() {
  pinMode(schalterPin, INPUT_PULLUP);
  Keyboard.begin();
}

void loop() {
  int aktuellerZustand = digitalRead(schalterPin);

  // Wenn der Schalter gedrückt wurde (von HIGH zu LOW)
  if (aktuellerZustand == LOW && vorherigerZustand == HIGH) {
    Keyboard.write('1');
    delay(100); // Eine kurze Verzögerung, um Mehrfachauslösungen zu verhindern
  }

  vorherigerZustand = aktuellerZustand;
}

Drei Stellen sind wichtig:

  • INPUT_PULLUP schaltet den Pull-up ein, einen Widerstand im Arduino, der den Pin auf HIGH hält, solange nichts gedrückt ist. Der Taster verbindet den Pin beim Drücken mit GND, der Pin fällt auf LOW. Deshalb reichen zwei Drähte ohne weiteres Bauteil.
  • Der Vergleich mit vorherigerZustand sorgt dafür, dass ein Druck genau eine Taste auslöst, egal wie lange die Hand auf dem Buzzer liegt.
  • Keyboard.write('1') legt fest, welche Taste getippt wird. Der erste Buzzer sendet 1, der zweite bekommt denselben Sketch mit 7.

Timer und Rangliste im Browser

Splitscreen für die Akkuschrauber-Challenge. Genaue Zeitanzeige auf die Millisekunde mit Bestenliste

Das Frontend, also die Oberfläche auf dem Bildschirm, besteht aus HTML, CSS und JavaScript ohne Framework und ohne Server. Es sind ein paar Dateien, die der Browser direkt öffnet. Erzeugt habe ich es zusammen mit ChatGPT: HTML und CSS für das Aussehen in den Farben von Milwaukee, JavaScript für alles, was beim Drücken passiert. Die Zeit läuft in einer Schrift im Stil einer Digitaluhr.

Weil der Buzzer eine Tastatur ist, braucht das JavaScript nur auf Tasten zu hören:

document.addEventListener('keydown', function(event) {
  if (event.key === '7' || event.key === '1') {
    const timerId = event.key;
    const isTimerRunning = timerId === '7' ? Boolean(timerInterval1) : Boolean(timerInterval2);

    if (isTimerRunning) {
      stopTimer(timerId);
    } else {
      startTimer(timerId);
    }
  }
});

Jeder Buzzer hat seine eigene Uhr. Der erste Druck startet sie, der zweite hält sie an. Die Anzeige wird alle 10 ms aus der Differenz zur Startzeit neu berechnet.

Sind beide Uhren gestoppt, speichert der Timer Namen und Zeiten im LocalStorage. Das ist ein kleiner Speicher im Browser, der auch nach dem Schließen des Fensters erhalten bleibt. Eine Datenbank gibt es nicht. Die Rangliste liest diese Einträge, sortiert sie nach Zeit und zeigt die sieben besten.

Bedient wird der Timer über die Tastatur des Laptops:

Taste Wirkung
n Neues Spiel, fragt nacheinander beide Namen ab
r Setzt beide Uhren und die Namen zurück
f Schaltet auf Vollbild

Das Quiz-Duell ist ein eigenes, kleineres Frontend mit denselben beiden Tasten. Der erste Druck sperrt den anderen Buzzer und hebt die Seite der schnelleren Person hervor. Die Taste g gibt beide Buzzer für die nächste Frage wieder frei.

Splitscreen für die Quiz-Challenge. Der Spieler mit dem gelben Rahmen hat zuerst gedrückt.

Was am Festivaltag gehakt hat

Beim Bauen und Testen zu Hause lief alles ohne Probleme. Auf dem Festival hat der Timer einen Druck manchmal verzögert angenommen oder gar nicht gestartet. Woran es lag, habe ich nicht herausgefunden. Ein Teil davon war vermutlich schlicht Bedienung.

Im Code sehe ich drei Stellen, die dazu passen würden. Nachgeprüft habe ich keine davon:

  • Prellen beim Loslassen. Ein mechanischer Taster schließt und öffnet nicht sauber, der Kontakt flattert für ein paar Millisekunden. Der Sketch wartet nach dem Drücken 100 ms, nach dem Loslassen aber nicht. Flattert der Kontakt beim Loslassen, kann der Arduino die Taste ein zweites Mal senden, und die gerade gestartete Uhr hält sofort wieder an.
  • Fokus des Browserfensters. Der Browser gibt Tasten nur an die Seite weiter, wenn das Fenster aktiv ist. Nach einem Klick daneben kommt ein Druck auf den Buzzer nicht mehr an.
  • Kein gemeinsamer Start. Jede Uhr startet mit dem eigenen Buzzer. Wer eine halbe Sekunde später drückt, bekommt diese halbe Sekunde geschenkt. Für einen fairen Vergleich müsste ein Signal beide Uhren zugleich starten.

Das Quiz-Duell kam auf dem Festival nicht mehr zum Einsatz.

Stand heute

Die beiden Buzzer gibt es noch. Ob die Challenge danach noch einmal mit diesem Aufbau gelaufen ist, weiß ich nicht.

Am Anfang standen bei diesem Projekt nur ein Tutorial und ein Anlass. Den Rest haben wir in anderthalb Wochen an den Abenden zusammengesetzt. Wenn dir für dein eigenes Projekt noch der Anstoß fehlt, lies weiter bei DIY-Projekt anfangen: Wie schwer kann das schon sein?. Mehr über mich und meine anderen Projekte steht auf der Seite Über mich.

← Alle Projekte