Airhorner with added Web USB

This new year Andre Bandarra left me a little surprise on my desk: A physical airhorner built with Web USB!

Check it out, well actually it will be hard, Andre created a small sketch for an Arduino Uno that connects over USB that is not yet available, however the code on the site is rather neat and not too complex if you are experienced with any form of USB programming.

Andre’s code connects to the device and waits for the user to approve, configures the connection, and then continuously reads from the device looking for the string ‘ON’ (which is a flag that is set when the button is pressed).

const HardwareButton = function(airhorn) {
  this.airhorn = airhorn;
  this.decoder = new TextDecoder();
  this.connected = false;
  const self = this;
  this._loopRead = async function() {
    if (!this.device) {
      console.log('no device');
      return;
    }

    try {
      const result = await this.device.transferIn(2, 64);
      const command = this.decoder.decode(result.data);
      if (command.trim() === 'ON') {
        airhorn.start({loop: true});
      } else {
        airhorn.stop();
      }
      self._loopRead();
    } catch (e) {
      console.log('Error reading data', e);
    }
  };

  this.connect = async function() {
    try {
      const device = await navigator.usb.requestDevice({
        filters: [{'vendorId': 0x2341, 'productId': 0x8057}]
      });
      this.device = device;
      await device.open();
      await device.selectConfiguration(1);
      await device.claimInterface(0);
      await device.selectAlternateInterface(0, 0);
      await device.controlTransferOut({
        'requestType': 'class',
        'recipient': 'interface',
        'request': 0x22,
        'value': 0x01,
        'index': 0x00,
      });
      self._loopRead();
    } catch (e) {
      console.log('Failed to Connect: ', e);
    }
  };

  this.disconnect = async function() {
    if (!this.device) {
      return;
    }

    await this.device.controlTransferOut({
      'requestType': 'class',
      'recipient': 'interface',
      'request': 0x22,
      'value': 0x00,
      'index': 0x00,
    });
    await this.device.close();
    this.device = null;
  };

  this.init = function() {
    const buttonDiv = document.querySelector('#connect');
    const button = buttonDiv.querySelector('button');
    button.addEventListener('click', this.connect.bind(this));
    button.addEventListener('touchend', this.connect.bind(this));
    if (navigator.usb) {
      buttonDiv.classList.add('available');
    }
  };

  this.init();
};

If you are interested in what the Arduino side of things looks like, Andre will release the code soon, but it’s directly inspired by the WebUSB examples for Arduino.

Picture of me smiling.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

Likes

Yannick Dmytro Olefyrenko 𝐁ⒺŇ ⓜ𝐨Ř𝐒ᔕ Robin Bakker Eric Erway Thomas Steiner m.kupriyanov Rafael Amorim Saurabh Rajpal #WeAreWebinions Jorge Arboleya Sarah Clark Andy Gore Faishal Mirza monggoo Una Kravets 👩🏻‍💻 Richard Hyndman Alessandro Gatti Tomoyuki Kashiro I'm Jimmy 🌕 쥐미문 Viktor Pasynok Fran Brennan SayChunKim Sezgin Ege Yoshi Yamaguchi 🇯🇵 Djordje Stojanovic Houssein Djirdeh Alex Ainslie Vikram is hiring! 👩‍💻 👨‍💻 👾 Michał Szklarski Lars Knudsen in 🇩🇰 Ville Lahdenvuo Maye Edwin Matt Ludwig Maximo Cozetti PJ McLachlan 🌄 Charl Best 🇿🇦 🇮🇪 David Farrell Kobe Dave Rupert Adam Argyle Jake Archibald Stefan Fejes Tim Pietrusky KΞNNΞTH C. ⚡ 🦊 Luca Iaconelli 🐣 Denis TRUFFAUT ⭐️ Harshil Agrawal ⚡ Klaxon Nikolay Cholakov 🙏 4 ❤ Alberto Medina Ryan BrowserNative Rowan Merewood Andre 🦄 Henry Lim Kai Abraham Williams Experimental Web ItzLevvie andreban Yemi Sebastian Benz npm i -D figuarnieri Dion Almaer Cryptopunk #3788 Awais Luke Moll 🙃 Samir Saeedi Tierney Cyren

Reposts

Richard Cabrera Jorge Arboleya Kevin Lozandier Lars Knudsen in 🇩🇰 Maye Edwin Comandeer PJ McLachlan 🌄 Kobe KΞNNΞTH C.⚡ Nikolay Cholakov🙏4❤ George Salib® Patrick Kraaij Chrome Developers Andre 🦄 Satya Kresna Experimental Web ItzLevvie

Comments and Replies

Phil HawksworthPhil Hawksworth
You must be a pleasure to be around.
KΞNNΞTH C.⚡KΞNNΞTH C.⚡
Gotta make a Web NFC version... tap a tag for a blow of nice horn sound!
Thomas 🚫Thomas 🚫
I need this. Where's your kickstarter page?!
AwaisAwais
I'd like to join as the Executive General Manager AirHorn™
Paul KinlanPaul Kinlan
We have our leads meeting today!
Alex Davies (Avicii)Alex Davies (Avicii)
😁“We cite our sources”🖕👁👁🖕
Rowan MerewoodRowan Merewood
Oh my god... Please use this in meetings for timekeeping.
andrebanandreban
Will make the Arduino sketch and the STL file for the 3D printed box available soon. The stuff in github.com/webusb/arduino made it really easy to get started.