Connect an Arduino Project to Spacebrew via Processing
/In this tutorial we will walk you through how to take an existing Arduino project and make it talk with Spacebrew. We will use an Arduino to connect a photocell sensor to an existing javascript graph example.
This tutorial builds on an example that comes with Arduino software. To access the example within the program, go to File -> Examples -> 04.Communication -> Graph, or view it online here: http://www.arduino.cc/en/Tutorial/Graph.
Note: We are currently working on adding tutorials for connecting Arduino directly to Spacebrew without Processing, so stay tuned to this site.
Step 1: Setup
Connect your sensor and Arduino. Your circuitry should look similar to the diagram at left (click the diagram to enlarge).
Step 2: Adding Arduino Code
Once you have wired everything correctly, you are ready to load the software onto the Arduino that does the sensing. If you have never used Arduino before, they have some great getting started resources.
If you have installed Arduino before and have successfully run one or two examples, then this is nothing new - just copy and paste the code below into your Arduino window and press “upload”.
The Arduino code for this example is relatively straightforward. The best way to test if it is working is to open the serial monitor on the upper right hand corner of the Arduino window (the magnifying glass icon). If everything is connected properly, you will see a stream of numbers appear in the serial monitor window. Try putting your hand over the photocell to see if the number changes.
Step 3: Installing the Spacebrew Processing Library
Once we have Arduino setup and sensing properly, we can begin using Processing to help us turn the value we see in the serial monitor into a publisher that Spacebrew can recognize. Before we can do that, however, we need to download and install the Spacebrew Processing Library.
Unzip the downloaded ZIP file and you will see three folders: "build," "dist," and "library". Open the "dist" folder and the enclosed "Spacebrew" folder (the one with a capital S). Copy this folder to your Processing "libraries" folder. This folder will be wherever you told Processing to save your sketches. On my Mac, this is in Documents -> Processing -> libraries.
Open Processing and navigate to File -> Examples -> Contributed Libraries. You should now see Spacebrew.
Please note: If you already had Processing open, you will need to restart the program for it to recognize the new library.
Step 4: Connecting Arduino to Spacebrew
Now that we’ve installed the Spacebrew Processing Library, let’s create a Processing sketch to connect our Arduino to Spacebrew. Open a new sketch and paste the following code into the window. Run the sketch.
Let’s see if our Processing sketch worked. Launch the public Spacebrew admin page - you should see a client called “PhotoCell_Publisher_XX” with a RANGE type publisher.
Note: if you do not see clients, publishers or subscribers on your admin page try it with another browser - we have mostly tested this with Chrome and have on occasion had issues with Safari and Firefox. You may see more clients if other users are connected to the public Spacebrew admin.
The name "PhotoCell_Publisher_XX" comes from the 4th line of the processing code and is the name of your Spacebrew node on the admin. Try changing the "XX" of the client name to your initials (you will need to rerun the code to see the 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.
Step 5: Creating a Javascript Graph Subscriber
Now that we’ve successfully connected our Arduino sensor to Spacebrew as a publisher, let’s launch something that can subscribe to the data it publishes.
Since our photocell is publishing information in the form of a RANGE, we will need something that can interpret RANGE type information. We have a few examples we’ve put together than can do just that. The easiest one to launch is our Javascript Graph example. Click here to launch it in your browser - it is already set to point to the public Spacebrew cloud.
The launched graph should look like the top image at left. If you go back to the Spacebrew admin page, the graph client should now appear (bottom image at left).
As you can see, this graph can subscribe to up to 9 publishers.
- 3 of the type RANGE (line1, line2, line3)
- 3 of the type BOOLEAN (bool1, bool2, bool3)
- 3 of the type STRING (string1, string2, string3)
Step 6: Making them Talk
Now that we have both a publisher and a subscriber connected to Spacebrew, and they are capable of speaking the same language, let’s make them talk. Click the publisher of the PhotoCell client (clicking either the blue rectangle or circular node works), and then click one of the graph’s RANGE subscribers. You should now see a line connecting the two.
That's it!
Our photocell sensor is now connected to our graph - wave your hand over the photocell to see the graph change in real time.
Again, since our Processing sketch is publishing information of the type RANGE, we can connect this output to any of the graph’s three RANGE subscribers.
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.
More to Explore
You’ve successfully connected two clients through Spacebrew - now think of all the other things that could publish or subscribe to RANGE type data. A quick way to experiment more is to launch some of our other javascript examples that can speak and/or interpret RANGE:
Javascript Slider (Launch Example in New Window)
This javascript example launches two sliders that can act as input or output (i.e., publishers or subscribers). As you can see in the admin view, these sliders both publish and subscribe to RANGE type information. Try connecting one of the Slider publishers to line2 of the Graph client. Or maybe you'd like the Photocell to send information to both the graph AND one of the sliders...
Javascript Button (Launch Example in New Window)
This javascript example will launch a button that publishes BOOLEAN type information based on whether it is clicked or not. What is fun in our case, however, is that it can also subscribe to RANGE type information to control the button’s background color. Try connecting the PhotoCell publisher to the button’s RANGE subscriber.
Have fun experimenting!