Graphics toolkit for batch-rendering list bitmaps

I’ve created a graphics toolkit for batch-rendering list bitmaps for the Electra One. This relies on AppleScript (on a Mac), Adobe Illustrator and ImageMagick.

ImageMagick batch converts the exported files from Illustrator into XBM files in the command line. To install it with Homebrew, enter this into Terminal:

brew install imagemagick

Once that’s installed, open “” in Illustrator. This contains a matrix of 48x18 artboards for drawing your designs in. You should uncheck “Anti-aliased Artwork” in the preferences and turn on ‘Pixel Preview’ in the View menu, as this will show you how the paths will look in monotone (which XBMs are) before they are converted.

The final list names will be based on the artboard names.

Before running the AppleScript, hide the paths on the artboards (including the black rectangles) you don’t want to export.

The result will be a JSON file with a block of code you can paste into an EPR file. I’ve had the best success with creating all the graphics first for a preset, and then building the rest in the web app (instead of creating the preset and adding the bitmaps later).

One could run the steps on a Windows machine using the ‘standalone’ scripts in illustrator in the ‘Resources’ folder and running the ImageMagick shell script in folder of the exported images.

mogrify -format xbm *.psd[0]

The AppleScript simply runs all the apps in the right sequence for you on a Mac.


Thanks a lot for this tutorial, however I didn’t get once you have your .ai file ready, how do you make it available inside the preset editor in Chrome and how do you say which “art” goes with such or such value ?

There’s still no way to bring graphics into the preset editor web app, so you have to paste the output of the tutorial into some Electra preset code in a text editor.

To stay organised, give the name of your graphics the same names as your list items and put them in the order you want them to appear.

The way I started was to use the web app and create a preset with a single list control in it, and download the .epr file. You’ll probably need a plug in for your text editor to re-format the JSON code, as it comes out minified (there are online tools that do this, too)

Then paste the code block into the right section of the .epr, save it, import the altered file into the web app, and send the new preset file to the device to see if the graphics worked.

If that’s turns out as expected and you want to add the graphics to an existing preset, you can download that .epr and paste the code in that. Can be a bit tricky at that point, as a complex preset does turn into spaghetti as the arrays often get re-ordered as you use the web app. I tried to start with the graphics first because of that.