LogoWeekend Hack: Degrading QR Codes

My friends (Siwei and Hugo) and I were recently discussing some of the possible limitations of QR Codes. This re-animated an idea I'd had many years ago which relied on deliberately degrading QR Codes. One of the aspects was varying the bg/fg colors.

So, I thought I'd challenge myself to get something working in a weekend which allowed me to test this out. However, I started this on a Friday evening and wanted something ready by Sunday, with plenty other stuff to do amongst that.

So, I ended up with a fairly simple front-end implementation (Github):

  • uses create-react-app
  • uses a color scale from d3-scale-chromatic twice to get bg/fg color pairs
  • randomly chooses a pair and renders it using an embedded Rust QR Code library
  • allows people to say "Not Scannable"/"Scannable" and send this as a custom event to Plausible.io where it is recorded as Goals
  • the Goal summaries can then be manually downloaded from Plausible.io as JSON, and sorted and rendered again in the app as QR Codes.

Learnings

Some QR Codes that are really easy to distinguish by eye are unreadable by pretty much all of the QR Code Apps I tried (on iOS). This likely means I'm going to have to be a lot more subtle in my degradations. Update: turns out if you use the same qr code repeatedly, which I was, then the iOS Camera App will not re-identify it. So, I updated the site to show a unique code each time, and now have more successes.

I really need to be more understanding of context when asking people for help. I'd asked people on a local Edinburgh Slack to help me collect data, but got frustrated when they pointed out a button wasn't obviously working; I'd deliberately went for the simplest possible thing (for me) of making the button do something behind the scenes, even if it didn't indicate it in the UI. Of course, that was the first thing people noticed!

My reaction was quite negative on this. I was strongly forcing myself to not be a perfectionist as that would risk not completing something in a weekend. However, nobody else knew that, because I hadn't told them. As it turns out, making the button do something to indicate it worked wasn't too hard, so I did get something better out of this.

I'd been doing a lot of Rust/WASM stuff for my Garibaldi project about 6 months ago, and I found the Rust/WASM parts a lot more buggy than expected. This time I encountered problems in publishing and in building. It didn't take me long to find workarounds, but this indicates that Rust/WASM is still not plain sailing.

Btw, a Rust version of the QR Encoder is not strictly necessary. However, I am trying to follow the pattern of doing the UI parts in React and anything that could benefit from stronger-typing or performance in Rust. This also allows me to get more practice in Rust on real problems.

Next Steps

I will most likely return to this Baton project again, but probably not for a while. This was just a weekend hack as a bit of a "palette cleanser" before I return to my Playout work.

Finally, if you have a few minutes, please go to https://baton.houseofmoran.io/ and give it a try yourself. All Data welcome, and I'll even accept criticism of the UI :-)