Introduction: Prototyping Wizardry With SPACEBREW

Picture of Prototyping Wizardry With SPACEBREW

The biggest prototyping challenges is in creating a robust network that enables communication across many devices (Arduino, iPhone, Processing, OpenFrameworks, web browser, etc).

SPACEBREW is an extremely powerful socked-based tool created by the wizards at Rockwell Labs to make your life easy.

I am going to create this Instructable to guide you (and me) through Spacebrew. This is my first time using it, so we might be on the same page :]

My goal for this Instructable is to create a series of super SIMPLE networks that showcase communication between OpenFrameworks, Processing, Rasberry Pi, web browser (Javascript), and Arduino.

You should have some coding experience before proceeding. I will not stop to explain all the coding fundamentals. Sorry, that would just take far too long. Without previous experience in Arduino/Web/Processing, you may find this Instructable a bit difficult.

I highly recommend reading the Spacebrew getting started guide before continuing this Instructable.


Step 1: Test1: Processing to Processing (With SPACEBREW)

Picture of Test1: Processing to Processing (With SPACEBREW)
Download the following: From the Spacebrew Processing library, copy the 'library/spacebrew' folder to 'documents/processing/libraries' (see image). If your on Windows, keep in mind, your Processing folder may be in a different location.

Open 'Instructables_Test1.pde' in Processing and read through the code.

Processing Code

You will quickly discover that this code is very simple. We created a publisher (outgoing data) called 'outgoing'. We created a subscriber (incoming data) called 'incoming'.
spacebrewConnection.addPublish( "outgoing", "boolean", false );
spacebrewConnection.addSubscribe( "incoming", "boolean");

When the mouse is pressed we send a message.
void mousePressed() { //mouse is pressed
spacebrewConnection.send( "outgoing", true); //send a boolean
}
When a message is received we toggle the background color.
void onBooleanMessage( String name, boolean value ){
println("got bool message " name " : " value);
current_color = !current_color;
}

RUN 'Instructables_Test1.pde'.

See the window that pops up and says 'main window' in red. Click anywhere on that window. Wow, nothing happens.

Now the MOST IMPORTANT part. Visit the Spacebrew sandbox: http://spacebrew.github.io/spacebrew/admin/admin.html?server=sandbox.spacebrew.cc. Scroll down to see the project 'Instructables / Fuzzy Test 1'. You should see two unconnected boolean nodes. Click each of them to connect (see image).

Now visit the Processing 'main window'. Click it, and if it is working, you should see the background color change between black and white. Wooooooo!

Connecting the nodes enabled us to send a message from Processing, to itself.

Your probably thinking, what a waste of time to make Processing talk to itself. And your right. The whole point of Spacebrew is to connect DIFFERENT things. In the next step, we are going to do just that.
 

Step 2: Test 2: Web to Processing (With SPACEBREW)

Picture of Test 2: Web to Processing (With SPACEBREW)
The goal here, is to get a web browser talking to Processing with Spacebrew.

Download the following: RUN 'Instructables_Processing_Test2.pde' in Processing.

OPEN 'Instructables_Web_Test2/index.html' in a web browser.

VISIT http://spacebrew.github.io/spacebrew/admin/admin.html?server=sandbox.spacebrew.cc

CONNECT the two 'range' nodes.

TEST



WOW, we can now control Processing from the web.

Now let's go over the code.

Processing Code

You will notice the code is very similar to step 1.

We create a subscriber:
spacebrewConnection.addSubscribe( "slider1", "range");

When Processing receives a range-message, the following function is called:
void onRangeMessage( String name, int value ){
println("got int message " name " : " value);
if (name.equals("slider1") == true) {
if (value >= 0 && value <= 255) {
bg_grey_val = value;
}
}
}

Web (javascript/jquery) Code

First, we must setup spacebrew.

$(window).on("load", setupSpacebrew);

function setupSpacebrew (){
console.log("Setting up spacebrew connection");
sb = new Spacebrew.Client();
sb.name(app_name);
sb.description("Web->Processing");
sb.addPublish("slider1", "range", "100");
sb.onOpen = onOpen;
sb.connect();
};

Then, we must setup the slider.

$(document).bind("pageinit", setupUI);
 
function setupUI() {
console.log("Setting up the UI listeners");
// when the slider state changes it sends a message to spacebrew
$(".slider").bind( "change", function(event, ui) {
if (values[event.target.id] != event.target.value) {
sb.send(event.target.id, "range", event.target.value);
values[event.target.id] = event.target.value;
}
});
}

And that's it. Piece of cake.

Step 3: Test 3: Arduino/Processing to Web (With SPACEBREW)

Picture of Test 3: Arduino/Processing to Web (With SPACEBREW)
We are going to setup a Spacebrew network that enables Arduino data to be received in a web browser. In this example, we are going to use a regular Arduino Uno. The Arduino will communicate with Processing using serial communication. Processing will then send our data to the web browser through the Spacebrew network. Okay I know that sounds a bit intimidating, but I assure you, it isn't so bad.

Download the following: All the code for this step is identical to the two previous sections so I will not take any time to go over the code.

Test A - Only Arduino

Plug in a sensor (any analog sensor) to the Arduino analog pin zero. I am using a pressure sensor for this example. Notice a resistor is also needed in series with most analog sensors. Also connect an LED between pin 11 and ground.

Open 'Instructables_Arduino_Test3' in Arduino and upload it to your Uno. Open the serial monitor to interact with the sensor. See video below.



Test B - Arduino To Processing

The Arduino must communicate with Processing through the serial (USB) connection.

Open 'Instructables_Processing_Test3' in Processing. Ensure that the correct serial port number is entered (see image). If not, Arduino and Processing will be unable to communicate. If the ports are correct, but there is no communication, do the following: Stop Processing, restart your Arduino (click the button on the board), then restart Processing.

When you interact with your sensor the data should be passed through to Processing. See video below.



Test C - Arduino/Processing To Web

And now, the final step - getting the Arduino to talk directly to the web.

RUN Instructables_Arduino_Test3, Instructables_Processing_Test3, and Instructables_Web_Test3.

OPEN 'Instructables_Web_Test3/index.html' in a web browser.

VISIT http://spacebrew.github.io/spacebrew/admin/admin.html?server=sandbox.spacebrew.cc

CONNECT the two 'range' nodes (see image).

Step 4: Test 4: Web & OpenFrameworks (With SPACEBREW)

Picture of Test 4: Web & OpenFrameworks (With SPACEBREW)
OpenFrameworks might be new to you. Likely, you have heard of Processing. OpenFrameworks is like Processing, except, with muscles. The foundation is built with C++ so it easily outperforms Processing. Also, you can export openFrameworks projects to iOS Devices (iPhone and iPad) -- bonus!

I am going to build a example that enables both web and OpenFramework users to add/remove circles from a screen (two way communication). This example is more difficult than the previous ones. You will need to know C++ as well as some more advanced jQuery/Javascript.

Download the following: RUN 'spacebrew_and_web_ofx.xcodeproj' in XCode

SETUP XCode/OpenFrameworks with the addons so it looks like the attached image. 

OPEN 'Instructables_Web_Test4/index.html' in a web browser.

VISIT http://spacebrew.github.io/spacebrew/admin/admin.html?server=sandbox.spacebrew.cc

CONNECT the nodes as shown in the image.

TEST



    Step 5: Test 5: Arduino Ethernet to Web (With SPACEBREW)

    Picture of Test 5: Arduino Ethernet to Web (With SPACEBREW)
    In step 3 we used an Arduino coupled with Processing to communicate over the web. It was a bit clumsy - requiring an extra laptop alongside the Arduino. The Arduino ethernet shield resolves this. In this simple example we will show how you can use the Arduino to send data to a web app. 

    Download the following: Build the circuit seen in the image. Pushbutton connected to 7. LED connected to 8. LED connected to 9.

    Put the library files in Arduino libraries folder: 'documents/arduino/libraries'. Note that if you are using Windows the directory will be different. 

    Close and reopen Arduino. Open 'Instructables_ArduinoEthernet_Test5.ino'. You need to edit one line of code to include the MAC address of your ethernet shield. The MAC address should appear as a big white sticker on the underside of your Ethernet shield (see image). 

    uint8_t mac[] = {  0x90, 0xA2, 0xDA, 0x0D, 0xA8, 0x52 };
     
    Upload the code to your Arduino. Open the spacebrew sandbox: http://spacebrew.github.io/spacebrew/admin/admin.html?server=sandbox.spacebrew.cc. You should see 'Instructables / Arduino Ethernet / Fuzzy Test 5' in the client list! 

    Open 'Instructables_Web_Test5/index.html' in a web browser.

    Test



    Step 6: Test 6: RasberryPi to Web (With SPACEBREW)

    coming soon...

    Step 7: Test 7: Everything to Everything (With SPACEBREW)

    coming soon...

    Comments

    About This Instructable

    3,991views

    16favorites

    License:

    Bio: fuzzywobble.com
    More by Fuzzy-Wobble:Best (Or Worst?) Meme Video Alarm Clock "Wake Up Wake Up"Cykill – a Bike Powered Gaming Console'90s Payphone Boombox Hack
    Add instructable to: