Устройства пользовательского интерфейса в Интернете: несколько быстрых примеров

Подключение к необычным устройствам из вашего приложения.

Джо Медли
Joe Medley
Мэтт Рейнольдс
Matt Reynolds

Что такое WebHID API?

Многие устройства пользовательского интерфейса (HID) слишком новые, слишком старые или слишком необычные, чтобы к ним можно было получить доступ системным драйверам устройств. API WebHID решает эту проблему, предоставляя способ реализации логики конкретного устройства в JavaScript.

Предлагаемые варианты использования WebHID API

HID принимает входные данные или предоставляет выходные данные людям. Примеры устройств включают клавиатуры, указывающие устройства (мыши, сенсорные экраны и т. д.) и геймпады. Протокол HID позволяет получить доступ к этим устройствам на настольных компьютерах с помощью драйверов операционной системы. Веб-платформа поддерживает HID, полагаясь на эти драйверы.

Невозможность доступа к необычным HID-устройствам особенно болезненна, когда дело касается поддержки геймпадов. Геймпады, предназначенные для ПК, часто используют HID для входов геймпада (кнопки, джойстики, триггеры) и выходов (светодиоды, вибрация). Однако входы и выходы геймпада недостаточно стандартизированы, и веб-браузерам часто требуется специальная логика для конкретных устройств. Это неустойчиво и приводит к плохой поддержке длинного хвоста старых и необычных устройств. Это также приводит к тому, что браузер зависит от особенностей поведения конкретных устройств.

Демо, демо, демо

Если вам интересно, как работает любой из этих примеров, исходный код каждого из них доступен на GitHub. В объяснителе есть пример простого кода .

Подсветка клавиатуры MacBook Pro

Самым большим препятствием для опробования любой из этих демоверсий является отсутствие доступа к устройству. К счастью, если у вас MacBook Pro с TouchBar, вам не нужно ничего покупать. Эта демонстрация позволяет вам использовать API прямо с вашего ноутбука. Он также показывает, как WebHID можно использовать для разблокировки функций встроенных устройств, а не только периферийных устройств.

Автор: FWeinb
Демо/Источник: Подсветка клавиатуры

Игровые контроллеры

Беспроводной контроллер PlayStation 4

Следующее — то, что, скорее всего, будет у меньшего числа из вас. DualShock 4 от Sony — беспроводной контроллер для игровых консолей PlayStation 4.

Демо-версия DualShock 4 использует WebHID для получения необработанных отчетов о входных данных от DualShock 4 и предоставляет высокоуровневый API для доступа к гироскопу, акселерометру, сенсорной панели, кнопкам и джойстику контроллера. Он также поддерживает вибрацию и настройку цвета светодиода RGB, расположенного внутри контроллера.

Автор: TheBITLINK
Демо: Демо DualShock 4 ( Источник )

Контроллеры Joy-Con для Nintendo Switch

Играйте в офлайн-игру Chrome Dino 🦖, прыгая с контроллером Nintendo Switch Joy-Con в кармане брюк. Эта демонстрация основана на Joy-Con WebHID , драйвере WebHID для контроллеров Joy-Con Nintendo Switch.

Автор: Томас Штайнер
Демо: Chrome Dino WebHID ( исходный код демонстрации , исходный код драйвера )

Полоска BlinkStick

BlinkStick Strip — это световая лента, совместимая с HID, с 8 светодиодами RGB. Демо-версия позволяет пользователю выбирать один из нескольких шаблонов моргания, включая погоню, моргание и сканер Ларсона (он же Сайлон).

Автор: Робат Уильямс
Демо: блинкстик-полоска ( источник )

Что делает эта демонстрация? (Подождите.) Он мигает. На самом деле это три демо-версии, в которых используется индикатор уведомлений USB (1).

Blink(1) прост и хорошо документирован, что делает его отличным вариантом для начала работы с HID.

Автор: Тод Э. Курт
Демо: Blink(1) ( источник )

Благодарности

Благодарим Пита ЛеПейджа и Кейси Басков за рецензии на эту статью.

Фото Угура Акдемира на Unsplash