Code Monkey home page Code Monkey logo

webusb-i2c's Introduction

WebUSB-I2C

Sending commands from a browser (web page with JavaScript) via a WebUSB-I2C dongle to an I2C slave.

system

Introduction

This project implements a WebUSB-I2C dongle, and uses the ENS210 I2C slave as an example. See this video for a quick introduction.

A WebUSB-I2C dongle is a dongle has a USB plug that can be plugged into a PC. A WebUSB-I2C dongle has a second connector, which allows plugging in I2C slaves. This connector has 4 pins (3V3, GND, SCL, SDA), and usually the I2C slave is mounted on a small PCB (a "shield"). The shield has a connector that can be mated with the connector on the dongle.

The firmware in the dongle bridges USB to I2C. As a result, this setup allows a PC to execute I2C transactions: writing bytes to or reading bytes from the I2C slave.

There is one important design decision to make: what form does the USB interface have. There are some likely candidates.

  • The dongle uses HID.
    HID is a standard USB class for Human Interfaces Device. Since this is a standard USB class, there is no driver required for the OS. Another advantage is that this is a binary interface, so easy for application to send or receive bytes. Disadvantage is two-fold: a "HID to I2C" layer is required, and there is no easy way for a human to issue I2C transactions.
  • The dongle uses CDC.
    CDC is also a standard USB class known in full as Communications Device Class, or more simply, virtual serial port ("COM22"). Since this is a standard USB class, there is no driver required for the OS (however, Windows prior to version 10 did require a driver). If the data over CDC is textual, it is easy for a humans to issue I2C transactions (using any terminal). A disadvantaged is for applications: they need to convert bytes back and forth to text.
  • The dongle uses WebUSB.
    This is a new USB standard, not yet fully deployed at the moment of writing this project. The advantage is that a browser can access the USB device. To some extend this is a security risk. The big advantage is that the driver for the USB device can be written in JavaScript and loaded on the fly when browsing to the web page for that USB device.

As the name WebUSB-I2C implies, this project uses the third option. It was actually my second WebUSB project, I learned a lot of details in my first project WebUSB-LED.

Components

This project has several components

  • Hardware for the WebUSB-I2C dongle.
    This consists of an Arduino Pro Micro (and optioally an I2C level-shifter and I2C shield connector).
    See documentation for details of building the hardware.

  • Firmware for the WebUSB-I2C dongle.
    This is basically an Arduino sketch. It implements a WebUSB stack and a command interpreter for I2C commands. Note that this firmware has a "serial" port towards the web browser, but also a serial port (COMxx) towards the OS. The latter is used for debug tracing.
    The actual source is WebUSB-I2C.ino in this directory.
    See documentation for details on the firmware, and on the libraries used.

  • Web pages that interact with the dongle.

    • A web page with a terminal to enter commands for the WebUSB-dongle.
    • A web page with an ENS210 driver in JavaScript that plots the temperature and relative humidity reported by the ENS210 in a live graph.

    These are available in the web directory in this project.

Demos

The following screenshots show the two web pages interacting with the dongle.

Console in action

console

ENS210 in action

ens210

(end)

webusb-i2c's People

Contributors

maarten-pennings avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.