Connecting a SparkFun Kit to Spacebrew

Connecting a SparkFun Kit to Spacebrew

Prototyping interactive environments can be tricky and time-consuming. One of our favorite time-saving tricks is to turn existing interactive projects into components we can use - akin to standing on the shoulders of giants. 

This tutorial walks you through how to connect a SparkFun Bar Graph Breakout Kit to Spacebrew. Once the kit is built and connected to Spacebrew, you can have any number of interactive projects publish data to it.

Hardware Needed

Software Needed

Step 1: Assemble the SparkFun Bar Graph Breakout Kit

The SparkFun kit guide is all you really need to assemble the kit. 

If you'd like more information, check out these links:

Consider soldering wires to male headers to easily disconnect and reconnect your boards.

Step 2: Solder Wires to Headers

This step isn't absolutely necessary, but it will allow you to easily disconnect and reconnect your boards in case you need to use them for other projects.

Just solder the wires to male headers as the pictures at left show.

Wires soldered to male headers on Arduino board for easy connection/disconnection.

Wires soldered to male headers on SparkFun board for easy connection/disconnection.

Consider making a base for your boards to nest - this is our custom acrylic box.

Step 3: Mount the Kit to a Base

This step also isn't absolutely necessary, but might be helpful if you'd like to clean up the wires running from the Breakout kit to the Arduino.

We mounted the Board and Arduino to an custom designed acrylic base. We laser-cut the base to have a ledge for a lid to fit into - making a neat little box for the kit.

If you'd like to make a similar case, you can download a PDF or DWG file of the acrylic box we made.

Step 4: Add Arduino Code

Once you have everything wired correctly, you're ready to load software onto the Arduino that does the sensing.

If you have never used Arduino before, it may be worthwhile to read through some of their getting started resources before proceeding with this tutorial.

If you already have Arduino installed and have successfully run one or two examples before, then this is nothing new - just copy and paste the code below into your Arduino window and press "upload".

/* SparkFun Bargraph Breakout example sketch
Mike Grusin, SparkFun Electronics

This sketch shows how to use the SFEbarGraph library to send data to SparkFun's Bargraph Breakout board

Hardware connections:
Connect the following pins on the bargraph board to your Arduino:
Name Function Uno pin Mega pin

+5V Power supply 5V 5V
SIN SPI input 11 (MOSI) 51 (MOSI)
CLK Clock input 13 (SCK) 52 (SCK)
LAT Latch input 10 (SS) 53 (SS)

This code is free to use, change, improve, even sell! All we ask for is two things:
1. That you give SparkFun credit for the original code,
2. If you sell or give it away, you do so under the same license so others can do the same thing.
More at

Have fun!
-your friends at SparkFun

// Step one: include both the SFEbarGraph and SPI libraries
#include <SFEbarGraph.h>
#include <SPI.h>

// Step two: create a bargraph object; we call it BG in this example but you can call it whatever you wish
// (use the same name in front of all the library functions)
SFEbarGraph BG;

// Some of the math we're doing in this example requires the number of bargraph boards
// you have connected together (normally this is one, but you can have a maximum of 8).
const int numbargraphs = 1;

void setup()
// Runs once upon reboot
// Let's initialize the bargraph library!
// You can call BG.begin() several ways:
// Without parameters, it defaults to one bargraph board and LATch pin set to 10 on Uno, or 53 on Mega.
// You can also call it with the number of daisy-chained boards (1-8, default 1), using the default LATch pin.
// Or you can call it with both the number of boards and the LATch pin you wish to use.
// For two bargraphs and pin 9 for the latch pin, call BG.begin(2,9);

// initialize the serial communication:

void loop()
// Runs continuously after setup() ends
unsigned long endtime;
byte value;

unsigned char bar;
if (Serial.available()) {
// read the most recent byte (which will be from 0 to 255):
value =;
bar = int(map(value, 0, 255, 0, 30));
BG.barGraph(bar,0); // Make a bargraph! (No "peak" indicator)
// delay(50);

Step 5: Download and Install the Spacebrew Library

First, download the Spacebrew Processing Libary

To install the Spacebrew Processing Library, refer to Step 3 of our Connect an Arduino Project to Spacebrew via Processing tutorial. 

Step 6: Add the Processing Code

Once you've successfully installed the Spacebrew Processing Library, it's time to create a Processing sketch to connect your Arduino to Spacebrew. Open a new sketch and paste the following code into the window. Run the sketch.

import spacebrew.*;
import processing.serial.*;
Serial port;

String server="";
String name="Sparkfun_Bargraph_JRT";
String description ="This is an example client which publishes the value of a photocell connected to an Arduino ";

Spacebrew spacebrewConnection;
int bright = 0;
// the value of the photocell we will send over spacebrew

void setup() {
size(600, 400);
spacebrewConnection = new Spacebrew( this );
// add each thing you publish to
spacebrewConnection.addSubscribe( "bright", "range" );
// connect!
spacebrewConnection.connect("ws://"+server+":9000", name, description );
port = new Serial(this, Serial.list()[0], 9600);
void draw() {
// i should be the brightness
void onRangeMessage( String name, int value ) {
println("got int message "+name +" : "+ value);
bright = int(map(value, 0, 1023, 0, 255));
// send the variable bright to the arduino

SparkFun kit as "Sparkfun_Bargraph_JRT" client in Spacebrew

Step 7: Connect to Spacebrew

If everything worked correctly, you should see your SparkFun kit appear as a client on the public Spacebrew admin page.

By default, the name of the the client node will be "Sparkfun_Bargraph_JRT" - this comes from the 5th line of the Processing code. Try changing the name of your client in your code and rerun the sketch. You should see the name change reflected in the admin.

It’s best to choose a descriptive name so others have an idea of what your client does and if they’d like to subscribe or publish to it.

Since the SparkFun kit can receive range-type information, it has a RANGE type node that appears under the subscribers column. Because this node controls the brightness of the graph, it is labeled "bright" (defined in line 14 of our Processing code). 

This specific SparkFun kit does not send any RANGE, BOOLEAN, or STRING type information to Spacebrew, so no publisher nodes are listed in the publishers column.

Example Javascript GUI

Step 8: Create a RANGE Type Publisher

Now that you have the SparkFun Bar Graph appearing as a subscriber client in Spacebrew, create a publisher client that  can connect to and control the graph.

SparkFun Bar Graph and Javascript GUI clients in Spacebrew.

Since the SparkFun kit can subscribe to information in the form of a RANGE, we will need something that can publish RANGE type information. We have a few examples we’ve put together that can do just that. The easiest one to launch is our Javascript Slider exampleClick here to launch it in a new browser window - it is already set to point to the public Spacebrew cloud.

The launched Slider should look like the top image at left. If you go back to the Spacebrew admin page, the Slider client should now appear (bottom image at left).

As you can see, the Slider publishes two RANGE type nodes: slider 1 and slider 2.

Remember to give your client a unique name. You can add your unique name after the "name=" in the query string - press enter to re-load the page with your unique name.

GUI connected to SparkFun LED Bar Graph in Spacebrew

Step 9: Make the Clients Talk

Now that you have both the SparkFun kit and javascript sliders connected to Spacebrew, let’s make them talk. Click one of the RANGE publisher nodes of the Slider client (clicking either the blue rectangle or circular node works), and then click the SparkFun graph's RANGE subscriber. You should now see a line connecting the two.

That's it!

Try moving the connected Slider to see your bar graph's brightness change -the background of your Processing sketch will also change.

LED Bar Graph responding to javascript slider input via Spacebrew.

Since several publishers can be connected to one subscriber, and one publisher can be connected to several subscribers, you can actually connect both of the Sliders to your LED bar graph.

To break a connection, click one of the nodes you’d like to edit, then click the "X" next to whichever node you’d like to disconnect from.

The background of your processing sketch will also change when the GUI slider is moved.