Benutzeroberflächengeräte im Web: einige kurze Beispiele

Verbindung zu ungewöhnlichen Geräten über Ihre App herstellen.

Joe Medley
Joe Medley
Matt Reynolds
Matt Reynolds

Was ist die WebHID API?

Viele Human Interface Device (HIDs) sind zu neu, zu alt oder zu ungewöhnlich, um für die Gerätetreiber des Systems nicht zugänglich zu sein. Die WebHID API löst dieses Problem, indem sie eine Möglichkeit bietet, gerätespezifische Logik in JavaScript zu implementieren.

Empfohlene Anwendungsfälle für die WebHID API

Ein HID nimmt Eingaben von Menschen an oder liefert sie für Menschen. Beispiele hierfür sind Tastaturen, Zeigegeräte (Mäuse, Touchscreens usw.) und Gamepads. Das HID-Protokoll ermöglicht den Zugriff auf diese Geräte über Desktop-Computer mithilfe von Betriebssystemtreibern. Die Webplattform unterstützt HIDs und stützt sich auf diese Treiber.

Die Möglichkeit, nicht auf ungewöhnliche HID-Geräte zuzugreifen, ist besonders ärgerlich, wenn es um die Unterstützung von Gamepads geht. Gamepads, die für den PC entwickelt wurden, verwenden häufig HID für Gamepad-Eingaben (Tasten, Joysticks, Trigger) und Ausgaben (LEDs, Rumble). Die Ein- und Ausgaben des Gamepads sind jedoch nicht gut standardisiert und Webbrowser erfordern oft eine benutzerdefinierte Logik für bestimmte Geräte. Dies ist nicht nachhaltig und führt zu unzureichender Unterstützung für die Longtail-Version älterer und ungewöhnlicher Geräte. Außerdem hängt der Browser von Eigenheiten im Verhalten bestimmter Geräte ab.

Demos, Demos, Demos

Wenn Sie wissen möchten, wie diese Beispiele funktionieren, finden Sie den jeweiligen Quellcode auf GitHub. Die Erläuterung enthält ein einfaches Codebeispiel.

Hintergrundbeleuchtung der MacBook Pro-Tastatur

Das größte Hindernis beim Testen dieser Demos ist der fehlende Zugriff auf das Gerät. Wenn Sie ein MacBook Pro mit TouchBar haben, müssen Sie nichts kaufen. In dieser Demo können Sie die API direkt auf Ihrem Laptop verwenden. Außerdem wird gezeigt, wie WebHID verwendet werden kann, um Funktionen integrierter Geräte und nicht nur Peripheriegeräte zu entsperren.

Autor: FWeinb
Demo/Quelle:Keyboard Backlight

Gamecontroller

PlayStation 4 Wireless Controller

Als Nächstes kommt etwas, das wahrscheinlich weniger von Ihnen sein wird. DualShock 4 von Sony ist ein kabelloser Controller für PlayStation 4-Spielekonsolen.

Die DualShock 4-Demo verwendet WebHID, um Eingabeberichte zu Rohdaten von DualShock 4 zu erhalten, und bietet eine allgemeine API für den Zugriff auf das Gyroskop, den Beschleunigungsmesser, das Touchpad, die Taste und die Stick-Eingänge des Controllers. Er unterstützt auch Rumble und das Festlegen der Farbe einer RGB-LED im Controller.

Autor: TheBITLINK
Demo: DualShock 4 Demo (Quelle)

Nintendo Switch Joy-Con-Controller

Spiele das Chrome-Dino 🦖 Offline-Spiel und springe einfach mit einem Nintendo Switch Joy-Con-Controller in deiner Hosentasche. Diese Demo basiert auf Joy-Con WebHID, einem WebHID-Treiber für die Nintendo Switch Joy-Con-Controller.

Autor: Thomas Steiner
Demo: Chrome Dino WebHID (Demoquelle, Treiberquelle)

Der BlinkStick-Streifen

Der BlinkStick Strip ist ein HID-kompatibler Lichtstreifen mit 8 RGB-LEDs. In der Demo kann der Nutzer aus verschiedenen Blinkmustern auswählen, darunter Chase, Blinken und Larson-Scanner (auch Zylon genannt).

Autor: Robat Williams
Demo:blinkstick-strip (Quelle)

Was macht diese Demo? (Warten Sie ab.) Es blinkt. Bei drei Demos kommt die blink(1) USB-Benachrichtigungsanzeige zum Einsatz.

blink(1) ist einfach und gut dokumentiert, was es zu einer guten Option für die ersten Schritte mit HID macht.

Autor: Tod E. Kurt
Demos: blink(1) (Quelle)

Danksagungen

Vielen Dank an Pete LePage und Kayce Basques für die Rezensionen dieses Artikels.

Foto von Ugur Akdemir auf Unsplash