← Offline QR Codes

Using QR Codes to send data from offline devices

👉 From a sensor

If a sensor has a display, it can show a qr code with the data encoded in a url. An example is this temperature sensor sharing recent values in a collector page.

A Pi Pico + e-ink display linking to a web page that shows a graph of values

🛜 Everything works offline. The microcontroller has no network code and the collector page can work offline.

🔋 Power efficient. E-ink displays don't require continous power so controller could go into deep sleep between updates.

🔨 Robust. You could take a polaroid photo of the sensor and mail it to your friend for them to scan it if you want!

💾 Collection. Storing historical data is possible by forwarding to server when the collector device is back online.

👉 From a web page

You don't need a microcontroller to collect data. Browsers are a rich source of content. When you draw in the box below it'll encode your art in a qr code (source).

You might notice as you draw more lines the QR code becomes more dense. I implemented some rudimentary path simplification, but there's limits to the amount of content you can share this way.

The key requirement is that target page state should be derived from the url, and once you've got that you can save and share content in any number of ways, not just a qr code.

👉 Between web pages

Browsers can also scan QR Codes. This allows us to create a bidirectional socket between two offline devices using their front-facing cameras.

QR Socket Demo

I implemented this as a joke, but after a while it started seeming actually good.

To manage the connection I used a basic protocol; a client bootstraps the connection by displaying the url of the current page (useful for setting up the second device). When a matching url is detected the devices go into "data mode", where a string of [RX, TX, Data] is encoded in the qr code.

Messages are chunked to a fairly arbitrary string length. This could definitely be improved to target the capacity of a particular code size. An interesting extension could be switching between different resolutions to pick the highest capacity for a camera+screen combination.

Side note: QR Codes support structured append for spreading messages over multiple codes. Pretty cool, but I didn't use it.

The coding interface feels a bit like a WebSocket:

const qs = new QRSocket();

qs.on("message", (message) => console.log(message));
qs.send("Hello World!");

One area for improvement is disposing of the socket; currently you have to close the page otherwise the camera will still be active. Having some method for pausing the socket might make this feel more natural.

🕹ī¸ There's some demos online at remotehack.space/QR-TX and source on github.

As before, these demos have a Serice Worker so they load offline. I've enjoyed giving demos to people before showing them that my phone is in aeroplane mode đŸ¤¯. It feels like there's interesting use cases of being able to sync with someone when either of you are completely offline.

I showed a quick demo at Future of Coding [slides] last year. And a longer talk about QR Codes and other stuff at MKGN [video].

More things

That I've built:

That I like: