If any of the info on this website was useful for your projects or made your head spin with creative ideas, and you would like to share a token of your appreciation- a donation would be massively appreciated!

Your donation will go to my Robotics Fund, straight towards more sensors, actuators, books, and journeys. It takes a lot to continue building these robots, and I’m really thankful of everyone who helps encourage me along the way.



“A wise robot once said to me through Serial.println- that robots teach us about ourselves.”

All posts in Tutorial

Google+ Hangout Extension – Arduino Example

Get your Arduino working with Google+ Hangouts! :)

I hacked this together a while ago, and now here is the tutorial for it. A lot of people have requested it, so hopefully it is of help!

Check out the video!

Watch on YouTube

In order for this to work, there are four main parts. The web app, Processing sketch, Arduino, and Google+ Hangouts xml.

Google+ Hangout Extension - Arduino Example

The web app is the core of it all. The way it works is that it uses web sockets for communicating between the browsers, and a tcp socket to communicate back to Processing.

Google+ Hangout Extension - Arduino Example

Processing is listening to this tcp socket, and then it tells Arduino what to do.

Google+ Hangout Extension - Arduino Example

To get it working in Google+ Hangouts, the web app is included as an iframe. If your camera is pointing at the Arduino, then everyone will be able to see it work!

Google+ Hangout Extension - Arduino Example

I have posted the code for all of this on Github. Go check it out!

A large amount of the code was based off of the code by John Schimmel: node-session. He was really awesome on Twitter helping me get it working!

The tutorial, with all the steps listed out, is over on I really recommend looking at it, because it tells you where to replace the variables for your own ones. 😉

If you decide to take the plunge and try it out, I created a long in-depth tutorial walking through the code.

Watch on YouTube

I really hope that this helps people out there to get started! I would love to control some of your robots and blinky lights through Google+ Hangouts. Oh yeah, and it would be great to see them on the Robot Party!

Let me know if you have any questions along the way, and I can try and answer them! Gooooood luck!

php include in .tpl for Vanilla theme using plugin

When creating the RoboBrrd forums a few days ago, I wanted the theme to have the same header and footer as the rest of the site. The way the site is ‘designed’ is that the header and footer can be included via a php include. This is in order for the main website to be run from a Twitter Bootstrap framework, the blog from WordPress, and the forum from Vanilla. Switching between these should not be interruptive to the visitor.

Vanilla themes are different though. They use a .tpl file, which is as it sounds, a template file. Smarty, which is the template engine is able to parse through this, and perform its template magic.

There are two ways that php includes could be done, however do not work with Vanilla. These are:

  1. {literal} your literal content here {/literal}
  2. {php} your php code here {/php}

The literal tag way does not work. Not quite sure why, but I spent the time with it and it doesn’t work.

The php tag way does not work because the php tag in Smarty was deprecated.

Instead, the best way to do this is with a custom function! This way works, and it is quite fun.

Here is how to do it:

  1. Navigate to /vanilla/plugins — where ‘vanilla’ is whatever folder name your forum install is in
  2. Create a new file named: function.myinclude.php
  3. Add in this php code below, where the include path is whatever path to the php file you want to include (such as header.php or footer.php)
    1. <?php
    2. function smarty_function_myinclude($params, $smarty) {
    3.         include("path.php");
    4. }
    5. ?>
  4. Save it. Now navigate to your .tpl file for your theme. Example: /vanilla/themes/BrandFriendly/views/default.master.tpl
  5. Wherever you want your php include to be, add this line to your tpl file:
    1. {myinclude}
  6. Save it and test it. It worked for me, so hopefully it works for you too!

Those steps are all that is needed to get your lovely headers and footers added in. To create multiple of these plugins, be sure to rename the filename as well as the function name, and the tag name as well. For example, we used the name ‘myinclude’, and if you wanted you could create a different one like ‘leadsolder’, by renaming the places where it says ‘myinclude’, in the file name, function name, and tag in the tpl file.

Well, I hope this will help someone on the internet somewhere! It took a while for me to figure out.

Also yes, the RoboBrrd forums are open! There isn’t much to discuss yet, but hopefully soon there will be! :)

Picture on Pins/Pads layer in gEDA [Tutorial]

Screen Shot 2012-07-16 at 5.26.02 PM

This is a little tutorial for a little trick that was figured out! It stemmed from the question that I posted on the EMSL forums.

Here’s a video of the tutorial as well! Double sweet!

Watch on YouTube

Basically, in gEDA it’s pretty fantastically easy to put pictures on the silk layer using pstoedit. However, for the pins/pads layer this can’t be done because there is no support for polygons in the footprint files.

You could draw the picture yourself using lines, but if there are a lot of curves that could take a long time. Since it’s gEDA and everything is open, it’s pretty straight forward that you can make whatever you want to do whatever you want.

There is a really great document to read the describes the structure of the footprint files: “Footprint creation for the open- source layout program “PCB”“. This is where you can see what the variables for element and pad correspond to.

For pad, this is basically what it looks like:

  1. Pad [x1 y1 x2 y2 thickness clearance mask name pad_number flags]

With this info, we could make tiny ‘pixel pads’ for the black pixels that we see in the image!

I created a Processing sketch that reads in the image, looks for non-white pixels, then creates a square line segment pad with a given width and clearance. You can grab the sketch on Github here!

Here are some additional commentary on some parts in the code.

  1. int x1 = 0;
  2. int y1 = 0;

These are our coordinate variables that are used when looping through the image. Essentially, each pixel pad is just x1 x x1, or y1 x y1. The width is what gives it how wide it is, and then the coordinates are incremented based on that width. It’s odd, but was quick to write it this way.

  1. int t = 200; // thickness of line segment (aka pixel) 100
  2. int c = t/4; // 2000

These are two fun variables.

t is the thickness of the pixel pad. The smaller it is, then essentially the more “resolution” you would get in your output footprint picture. Larger, the more pixely and big it will look.

c is the clearance on the solder mask layer. I’m not sure if you can get away with this being 0, but I guess it would depend on your board house. If you have it as t/4, it works out pretty well as it is a very tiny outline.

More on the c now. If the value is large (eg, 2000), it might look a little goofy:

Screen Shot 2012-07-16 at 5.27.20 PM

If it is a small value, or say t/4, then it looks decent:

Screen Shot 2012-07-16 at 5.26.44 PM

  1. output.println("\tPad["+x1+" "+y1+" "+x1+" "+y1+" "+t+" "+c+" 0 \"\" \"1\" \"square\"]");

This is what makes up each pixel pad. It’s the start point, end point, thickness, and clearance. This is added to the footprint file for every non-white pixel that the sketch sees. You can check out the document linked to above for more information on the Pad structure details.

  1. output.println("\n\t)");
  2. output.flush(); // Write the remaining data
  3. output.close(); // Finish the file
  4. println("done");

Well, that was pretty easy, wasn’t it?! 😀

It only took about 20 mins to write the sketch, which was pretty cool. It was pretty exciting when it worked first try!

So hopefully this will help people make their boards with more creativity. I was inspired by the SpikenzieLabs boards where sometimes they have their logo on the pins/pads layer (but they use Eagle).

What do I plan to do with it? I want to make an Arduino derivative that has lots of stars on it. I dunno why, it just sounds cool! It would look really good as a black board with silver solder. … or just good purple and gold from OSH Park 😉

Screen Shot 2012-07-16 at 5.25.23 PM

SQUAWK! Happy boarding!