Hacking RFID with NodeJS

tl;dr: you can write JS code (see below) to read RFID tags with NodeJS.

Last week-end, I found my old RFID reader in a drawer. It’s a mir:ror, made by Violet, you know, the company that invented Wi-Fi rabbits. The device is a USB HID device and used to ship with a lousy app that could trigger a few predefined actions. But the company is kind of dead now and the driver is no longer available.

So, how hard would it be to write a driver that could do whatever I want? The thing is that I need it to work on OSX. And it would be great if programs could be written in JS, because it’s a language I’m comfortable with.

Being a lazy programmer, I first searched the Web for existing drivers. I found some software written in ruby and .Net. The first one expects the mir:ror to be available in /dev, which is not the case on my Mac (no idea why). The second one is for Windows obviously. Moreover, I don’t know any of these languages.

Out of luck, I wondered: is it possible to communicate with USB HID devices in NodeJS? Thirty seconds of googling later, I stumbled on this cool node extension: Node HID that does exactly what I’m looking for (you could also program keyboards, keypads, mice, etc.).

The next step was to code the driver. Hopefully, the protocol is simple and documented on this blog: http://blog.nomzit.com/2010/01/30/decoding-the-mirror-comms-protocol/.

Below is the code of the driver. It can read RFID tags, detect when the device is upside down, and disable the annoying lights and sound.

var HID = require('HID');

var devices = new HID.devices(7592, 4865);
var hid;
if (!devices.length) {
  console.log("No mir:ror found");
} else {
  hid = new HID.HID(devices[0].path);
  hid.write([03, 01]); //Disable sounds and lights
  hid.read(onRead);
}

function onRead(error, data) {
  var size;
  var id;

  //get 64 bytes
  if (data[0] != 0) {

    console.log("\n" + data.map(function (v) {return ('00' + v.toString(16)).slice(-2)}).join(','));

    switch (data[0]) {
    case 1:
      //Orientation change
      switch (data[1]) {
      case 4:
        console.log("-> mir:ror up");
        break;
      case 5:
        console.log("-> mir:ror down");
        break;
      }
      break;
    case 2:
      //RFID
      switch (data[1]) {
      case 1:
        console.log("-> RFID in");
        break;
      case 2:
        console.log("-> RFID out");
        break;
      }

      size = data[4];
      id = (data.splice(0)).splice(5, size);
      console.log(id.map(function (v) {return ('00' + v.toString(16)).slice(-2)}).join(','));
      break;
    }
  }
  hid.read(onRead);
}

Now that NodeJS can react to RFID tags, we can do all sorts of things, like switching between spaces on a Mac. Check out the video to see a demo.

CSS Color Palette Extractor

There are already many web apps that extract colors from CSS. But none of them seemed to do what I need them to do. So I built my own.

Twitter Bootstrap extracted palette

Twitter Bootstrap extracted palette

Facebook extracted palette

Facebook extracted palette

My goal was to create a tool that would help me consolidate the palette of an ever growing CSS. To achieve this goal, I needed a tool that can:

  • extract all colors from the CSS code. Most extractors rely on regular expression to perform this task. It may work for most cases, but they tend to fail with rgba or named values.
  • order colors in a sensible way. I want colors on one side and greyscale on another. I also want colors ordered by hue. Ordering hex values by alphabetical order doesn’t make sense.
  • roughly show how much a color is used. This way, I know that lesser used colors might be merged with dominant colors. Obviously, more occurrences in CSS doesn’t mean that the color will be more present on the website. But that’s better than nothing.

The result is CSS Color Palette Extractor, a pure JS app that does what I need. You can try the demo and fork it on github.

On the technical side, the app uses the great CSS parser written by Daniel Glazman to extract color values. It also includes code from Andrew Brehaut for color management/conversion. My own code is a bit rough but does the job. There are a few known issues. I haven’t found how to make the parser work with media queries. If you’re doing responsive design, simply extract medium per medium. Also, my app cannot extract colors from gradient backgrounds.

It’s sometimes nice to step back from code and analyze what’s going on. I hope that CSS Color Palette Extractor will help you to do just that. If you want to use the code, feel free to fork it on github.

My JS1K 2012 demo: Heart Petals

JS1K is a competition where you have to create a cool demo with less than 1 kilobyte of code.

This year, I entered the competition for the first time with a demo named: “Heart Petals”. The theme is “Love”, hence the cheesy title.

Here’s what it looks like:

And here are some tricks I’ve used to reduce the code size:

  • Use unicode chars to draw shapes. The hearts are not images. They are drawn with the unicode char 0×2764. That’s only one char (2 bytes in UTF8?). Certainly less than a lengthy SVG path or a crazy equation.
  • Use byte saving techniques. Did you know that 0| is equivalent to Math.floor() ? I didn’t. Also, assign long function names to one letter vars.
  • Optimize your algorithm. Don’t write unnecessary steps.
  • Use magic. If a shorter but approximate version does the trick: it’s probably good enough.
  • Use a minifier. Just before submitting the code, I simply compressed the code further with uglify.js.

At the end, my code is far less than 1K. I could have added more features. I probably have no chances to win, but the experience was funny. You should check the other demos out: http://js1k.com/2012-love/demos. And why not submit yours?