All of the lights
Let's get down to business and code our first app.
First, you need to connect your Spencer to your computer's USB port.



CircuitBlocks should now say "Spencer connected".

If CircuitBlocks didn't recognize your Spencer, please check if the USB cable is plugged in properly and if you are using a working USB port on your computer.
If you still cannot get CircuitBlocks to recognize your Spencer, something possibly went wrong with the driver installation on your computer. Drivers are these little programs that help your computer communicate with Spencer and they sometimes act funny. Reach out to us via email at contact@circuitmess.com if you cannot get your computer to recognize your Spencer.
If you still cannot get CircuitBlocks to recognize your Spencer, something possibly went wrong with the driver installation on your computer. Drivers are these little programs that help your computer communicate with Spencer and they sometimes act funny. Reach out to us via email at contact@circuitmess.com if you cannot get your computer to recognize your Spencer.
Let's make Spencer display an animation on its LED display
Find the section called "LED matrix" on the left side of the screen.
This group of blocks has different commands in it that are used for drawing images and on Spencer's LED display (we also call this display the "LED matrix").


We want to put the play animation block here so that the animation starts playing only once when the device starts.
Ah yes, back to the tutorial - pick the "heart" animation because I like that one :)

Before going further, press the Save button on the top left of the screen and save your program. Name it something creative.



Code compilation (or code compiling) is the transformation from a human-readable form of code (such as the colorful blocks you are looking at) into machine code (a form of code that the computer understands - ones and zeros all squashed together).
Since this is the first time you are compiling code for your Spencer, it might take a few minutes to compile. This is happening because
CircuitBlocks needs to compile all the important core parts of the code needed for your Spencer and save it to your computer. When this compiles for the first time, it will be saved on your computer and all of your next programs will compile much faster (yay!).

Is everything ok? Great, let's move on.
Something not working? Please press the Send error report on CircuitBlocks' homepage, contact us via email at contact@circuitmess.com and provide us with your error report ID.
This group of blocks has different commands in it that are used for drawing images and on Spencer's LED display (we also call this display the "LED matrix").

Find the block called "Play animation".

Drag and drop the block into the turquoise block that's already in the drawing area.
Stick the Play animation block under the text saying "Arduino run first".
Stick the Play animation block under the text saying "Arduino run first".
We want to put the play animation block here so that the animation starts playing only once when the device starts.

Click on the tiny arrow on the Play animation block and a drop-down menu will appear. Here you can find all the GIF animations that are saved on your Spencer's flash memory.
Currently, you cannot add new GIF animations to your Spencer, but we're working on making that easily doable in the next CircuitBlocks update.
On the other hand, you can manipulate the individual pixels of the display, but we'll cover that later on in the tutorial.
Currently, you cannot add new GIF animations to your Spencer, but we're working on making that easily doable in the next CircuitBlocks update.
On the other hand, you can manipulate the individual pixels of the display, but we'll cover that later on in the tutorial.
Ah yes, back to the tutorial - pick the "heart" animation because I like that one :)

Perfect! Our first ever program is done (that was easy!).
This code that we have written just now is going to play the heart animation on your Spencer when it turns on and the animation is going to be played endlessly.
This code that we have written just now is going to play the heart animation on your Spencer when it turns on and the animation is going to be played endlessly.
Before going further, press the Save button on the top left of the screen and save your program. Name it something creative.

Alrighty, now find the big red Run button on the top right and press it.

A yellow loading bar will appear on the top of the screen.

Your program is now going through a process called compilation.
Code compilation (or code compiling) is the transformation from a human-readable form of code (such as the colorful blocks you are looking at) into machine code (a form of code that the computer understands - ones and zeros all squashed together).
Since this is the first time you are compiling code for your Spencer, it might take a few minutes to compile. This is happening because
CircuitBlocks needs to compile all the important core parts of the code needed for your Spencer and save it to your computer. When this compiles for the first time, it will be saved on your computer and all of your next programs will compile much faster (yay!).

If your code was compiled and uploaded successfully, you should see the heart animation playing on your Spencer.
Is everything ok? Great, let's move on.
Something not working? Please press the Send error report on CircuitBlocks' homepage, contact us via email at contact@circuitmess.com and provide us with your error report ID.