Date Tue 26 May 2020 Tags

Today I took delivery of an imagiCharm, a portable 8x8 pixel LED charm designed by imagiLabs here in Stockholm to help teenage girls learn to code. Let's take a look.

The device

The imagiCharm not yet super cheap, costing €92. It's a multi-color bluetooth-connected 8x8 pixel display, paired with the imagiLabs app for iOS and Android whcih provides a coding environment and teaching material to go with.

The charm itself is pretty simple, having only a single power/wake button. When you turn it on, it does an animation of a face waking up, then displays a number. Mine showed 82 in green, which I mistakenly thought was its battery level, but actually it's the charm's id. If you're teaching a group, people can identify their charm by color and number together.


Arrived at last!

The device itself has a soft rubber casing, and a sturdy feel. It charges with micro-USB, and has a short carry cord around it for hanging it from things.


Charm powered on, full unicorn!

Making pixel art

All interaction with the device happens through the imagiLabs app for iOS and Android, which has a code editing environment, a social sharing space, and coding tutorials for getting started.

The imagiCharm is coded with a restricted set of Python, with some handy builtins, including:

  • m global variable is an 8x8 list of lists representing pixels
  • on and off variables for white LED color
  • R, B, O, and other shorthand color variables

For example, to put a pixel in each corner:

m[0][0] = on
m[0][7] = on
m[7][0] = on
m[7][7] = on

For example, to draw a triangle across the screen:

for y in range(8):
    for x in range(8):
        if y >= x:
            m[y][x] = on

When you've written a program, you have to click the "Debug" button before using it. This seems to effectively pre-run your program and find any errors preventing output. If you get a Python exception, it's shown nicely to you, but without the stack trace you'd normally see accompanying it. This makes sense, since it's a tool for learners. The only downside is you can't print-debug, since there's nowhere for that output to go. But given the simple programs being run, it's not a biggie.

You can save your code as you go, and once debugged, you can upload it to your charm or share it with others. Uploading worked smoothly every time, although in a few cases the charm had turned off its bluetooth and the app asked me to wake it again. A single press of the charm's power button got it working again. Programs don't appear to actually run on the imagiCharm itself, but instead are pre-rendered on the phone and uploaded. Given that the charm has no network connection, it's a pretty minor detail.

Over a full day the app crashed once or twice in the social sharing space, no doubt something they're working on, but it never happened during coding. As a professional programmer, I definitely got sick of using the phone keyboard for input, and eventually ended up using a bluetooth keyboard to let me explore faster. But I see coding on mobile as an interesting accessibility tradeoff, since it lets people get started with what they have at hand.

Making animations

There's a mechanism for animations which is a ton of fun. You do it by basically adding a single frame at a time, then they get compiled into a sequence:

a = Animation()
u = make_unicorn()
a.add_frame(u)
h = make_heart()
a.add_frame(h)

The frame rate is not high on the output, perhaps changing frame every 0.8s, but that's quite friendly for doing simple and fun animations. I tried to establish how many frames the device can store, but didn't hit the limit in my tests. It's at least 64 frames.

I had a lot of fun here, firstly experimenting with simple movement, then building to Conway's Game of Life:


Conway's game of life

I also hunted down a Japanese pixel font to try see if I could render some hiragana in the space. The result was not too bad:


The square layout could work for low-res Japanese and Chinese

As a learning tool

The app features a learning section, with "Seasons" of content that imagiLabs are still building out. I tried the first interactive tutorial, which teaches the basics of accessing zero-indexed matrices (or lists of lists) in Python and using the building blocks above. They make it pretty easy to get started, and link to other online resources and a chatroom for getting help.

There's definitely a ceiling to what you learn with the charm, especially since so much of programming involves working with strings and the network/disk, and those are things you can't do in this environment. But it could make that next step much easier if you're familiar with the problem solving style already.

Overall

The imagiCharm's definitely a lot of fun. At the heart of it is an experiment, and a question. Suppose we can make awesome portable devices that you can do pixel art with. Will you then learn for loops in order to do animations? Will you learn basic functions to let you reuse code and keep track of it better? Will you see cool examples from other people, and learn from looking at their code?

It'll take some time to answer those questions. In the meantime, the imagiCharm is a awesome albeit pricey first step. But if tools like these help more girls realise that programming can be an authentic way to express themselves, that's a massive win for them and for the industry.