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 Devices (HIDs) sind zu neu, zu alt oder zu ungewöhnlich, um von den Gerätetreibern der Systeme erkannt zu werden. Die WebHID API bietet eine Möglichkeit, gerätespezifische Logik in JavaScript zu implementieren.

Vorgeschlagene Anwendungsfälle für die WebHID API

Ein HID nimmt Eingaben von Menschen entgegen oder gibt Ausgaben an Menschen aus. Beispiele für Geräte sind Tastaturen, Zeigegeräte (Mäuse, Touchscreens usw.) und Gamepads. Das HID-Protokoll ermöglicht den Zugriff auf diese Geräte auf Desktopcomputern über Betriebssystemtreiber. Die Webplattform unterstützt HIDs mithilfe dieser Treiber.

Der fehlende Zugriff auf ungewöhnliche HID-Geräte ist besonders ärgerlich, wenn es um die Unterstützung von Gamepads geht. Gamepads für PCs verwenden häufig HID für Gamepad-Eingaben (Tasten, Joysticks, Trigger) und -Ausgaben (LEDs, Vibration). Gamepad-Ein- und ‑Ausgaben sind jedoch nicht gut standardisiert und Webbrowser erfordern oft benutzerdefinierte Logik für bestimmte Geräte. Das ist nicht nachhaltig und führt zu einer schlechten Unterstützung für ältere und ungewöhnliche Geräte. Außerdem führt dies dazu, dass der Browser von Eigenheiten im Verhalten bestimmter Geräte abhängt.

Demos, Demos, Demos

Wenn Sie wissen möchten, wie die einzelnen Beispiele funktionieren, finden Sie den Quellcode für alle auf GitHub. Im Explainer finden Sie ein einfaches Codebeispiel.

Tastaturbeleuchtung des MacBook Pro

Die größte Hürde beim Ausprobieren dieser Demos ist der fehlende Zugriff auf das Gerät. Wenn Sie ein MacBook Pro mit Touch Bar haben, müssen Sie nichts kaufen. Mit dieser Demo können Sie die API direkt auf Ihrem Laptop verwenden. Außerdem wird gezeigt, wie WebHID verwendet werden kann, um Funktionen von integrierten Geräten freizuschalten, nicht nur von Peripheriegeräten.

Autor:FWeinb
Demo/Quelle:Tastaturbeleuchtung

Controller

PlayStation 4 Wireless Controller

Als Nächstes kommt etwas, das wahrscheinlich weniger von euch haben. Der DualShock 4 von Sony ist ein kabelloser Controller für PlayStation 4-Spielkonsolen.

Die DualShock 4-Demo verwendet WebHID, um die Rohdatenberichte vom DualShock 4 zu empfangen, und bietet eine API auf hoher Ebene für den Zugriff auf das Gyroskop, das Beschleunigungsmessgerät, das Touchpad, die Tasten und die Thumbsticks des Controllers. Außerdem werden Rumble-Effekte und das Festlegen der Farbe einer im Controller verbauten RGB-LED unterstützt.

Autor:TheBITLINK
Demo:DualShock 4 Demo (Quelle)

Nintendo Switch Joy-Con-Controller

Spiele das Chrome-Dino-Spiel 🦖 offline, indem du mit einem Nintendo Switch Joy-Con-Controller in deiner Hosentasche springst. Diese Demo wird von Joy-Con WebHID unterstützt, einem WebHID-Treiber für die Nintendo Switch Joy-Con-Controller.

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

Der BlinkStick-Streifen

Das BlinkStick-Band ist ein HID-kompatibles LED-Band mit 8 RGB-LEDs. In der Demo kann der Nutzer zwischen verschiedenen Blinkmustern wählen, darunter „Chase“, „Blink“ und „Larson Scanner“ (auch bekannt als „Cylon“).

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

Was macht diese Demo? (Warte ab.) Es blinkt. Eigentlich sind es drei Demos, die das blink(1) USB-Benachrichtigungslicht verwenden.

blink(1) ist einfach und gut dokumentiert und daher eine gute Option für den Einstieg in HID.

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

Danksagungen

Vielen Dank an Pete LePage und Kayce Basques.