Thursday, December 27, 2018

Hexadecimal Bitmap Codes for Sino:bit

The Sino:bit is a big LED matrix based on the Calliope mini and developed by Naomi Wu. It's also a lot more, with a bunch of sensors and accessible pins on the board, like the Calliope and the BBC Microbit. The matrix has 12 X 12 LEDs and is fun to make bitmap images for. I made a P5 app on Glitch for designing bitmaps and downloading the Arduino code to display it on the Sino:bit.


In the process of making the app I had to figure out just how the hexadecimal codes were mapped to the LEDs, and it's interesting so I figured I would explain it here!

The Code

An array of chars that comprises a bitmap looks like this (this actually makes the tree flashing above):
 const unsigned char myBitmap [] PROGMEM = {  
  0x10,0x80,  
  0x46,0x20,  
  0x0f,0x00,  
  0x1f,0x80,  
  0x4f,0x10,  
  0x1f,0x80,  
  0x3f,0xc0,  
  0x9f,0x80,  
  0x3f,0xc0,  
  0x7f,0xe0,  
  0x06,0x00,  
  0x06,0x00,  
 };  
There are 24 pairs of hexadecimal numbers in the array. In the app I have arranged them in 12 rows because it turns out each set of 2 hexadecimal pairs corresponds to a single row of 12 LEDs on the Sino:bit. To understand this better let's break down an individual hexadecimal pair.
The 0x in each is a prefix identifying the digits that follow as hexadecimal notation. The first number in the first pair controls the first set of 4 LEDs; the second of the first pair controls the next set of 4 LEDs. The first number in the next pair controls the third set of 4 LEDs. The second number in that pair is not used and is always 0.

The Hexadecimal

Hexadecimal numbers are the base 16 number system. The digits used to count are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f. In a set of 4 LEDs there are 16 different ways they can be lit up, and each hexadecimal number corresponds to one of the configurations of on and off LEDs in the set of 4. Through trial and error I figured out what they were:

0

1



2



3



4



5



6



7



8



9



a



b



c



d



e



f


Putting it together

Now that the pattern of hex assignments is clear, you should be able to see how a whole row is configured:
This line of hex codes: 0xd6,0xb0,
makes this pattern of LEDs light