Displaying the code

Now that we've got the needed code, it's time to use it in a program.

We've already shown that 'sprites.c' file that holds various icons' codes. Since all of those icons are declared as global constants, we're going to do the same thing here.
To do this next step, you have to open either CircuitBlocks or Arduino IDE. If you have setup Ringo library in any other text editor, that will do the trick as well.
This tutorial is going to be done inside CircuitBlocks, but the process itself is the same for Arduino.
First, open CircuitBlocks and start a new project.

You need to select the 'Code' button since we're going to have to type a little bit here.

This process can't be done in a 'Block' project. What you can do is take your block project's code, copy it to the code project, and then add the finishing touches there.

Now, let's copy our bitmap snippet as the global constant.

For that all we need to do is write the following line:

With our colors' hex codes being between the brackets.

That means that it would all look like this

The SIZE variable actually determines how many pixels are there. Since we have an icon that is 24x26, that would be a total of 624 pixels. If you convert that to hexadecimal (notice the '0x' before the number) it would translate to 270, which is the number we've got here.

The rest of our variable are just color codes for each specific pixel. If you look closely, you'll notice that the white color (0xffff) that colors our icon's outline, is on the "edges" of the code.
Now, all we need to do is print that little icon out.

We've also added a little text so that the icon is not lonely on the screen!

Function 'mp.display.drawIcon()' has variables in this order: (imageFile, locationX, locationY, width, height, scale).
Pretty self-explanatory as it is, just like in the previous example.
Here is the full code:

See, it's not that hard!

Transparent bitmaps

What if we want to have an icon that is not a rectangle, but rather a circle or some other shape?

Well, since all icons are rectangles, that means that some pixels are going to have to be transparent.
The problem with bitmaps - they don't have a transparent channel. Luckily, you can just pick a color that will serve as a transparent one, so that each pixel with that color will not be shown.
In the function drawIcon(), you can also add a color parameter.

So for example, if we wanted to draw our snake icon without white color outlines, our function would look something like this:

On our screen now we have 24x26 snake icon located in the upper left corner of the screen, and of course, without white borders.

Now you can get to drawing and importing some more complex images to your new apps!