HID Control of a Web Page

Contributors: Nate
Favorited Favorite 12

HID Communication

Moving data between a microcontroller and a computer is tricky. Up to this point the serial protocol and USB-to-Serial converters have filled the gap. Today we will show you how to listen to and control a USB HID based board via a webpage. This is very helpful if you're designing an interactive webpage that needs to respond to the physical world.

Human Interface Devices, or HID, was created to allow lots of different types of hardware to pass information back and forth over USB. A keyboard is a good HID example but a keyboard only passes data in one direction ('you pressed the k button'). Full duplex is more complicated but is much more valuable once you have it up and running.

Motor control from a webpage

It's not pretty, but the sky is the limit when you can read and control hardware from a web page!

Covered in This Tutorial

This is not a 'turn your Leonardo into a keyboard' example. This tutorial demonstrates full two-way HID communication. This technique is helpful if you need to control outputs such as motors, LEDs, and buzzers. We apologize, but certain tools used in this tutorial are Windows only. If you have similar tool chains to get RawHID working on Linux and Mac please let us know.

This tutorial is based heavily on the Teensy RawHID library by PJRC. None of this would be possible without Paul's awesome work developing the RawHID library. If you're thinking about making a true USB device, consider developing it with a Teensy from PJRC or from SparkFun. They are truly easy-to-use little devices.

The idea behind this tutorial came from a project where we needed to create a board the could output sensor data (analog values, digital values) to a web page. We also needed to control motors and LEDs based on where the user clicked on that same page. To do this we needed the board to be able to pass HID packets back and forth. Again, there are plenty of tutorials out there showing how to implement a joystick or a keyboard, but these are often one way and rarely talk directly to a webpage.

Required Materials

Here's a list of parts you may want to gather:

You can add all these parts to your cart then remove any you already have.

Suggested Reading/Viewing: