Raspberry Pi bot progress

I've been chipping away at my Raspberry Pi/Arduino bot here and there so I decided it was time for an update.

Basic Controls

I've added more general functionality, such as turning left & right. That was easy with Firmata by setting a pin to a mode such as Digital Input or PWM and setting it Low. For example

this.firmata.digitalWrite( this.right.forward.pin, this.firmata.LOW);

would turn the stop the right wheel from moving forward.

Mobile-first UI

Once I got the new controls wired into Socket.io, I improved the interface. I forked a neat little project called virtualjoystick.js /by +Jerome Etienne. It is a canvas joystick library that supports touch on mobile (with a mouse fallback.) The primary directions are mapped to their respective socket.io method calls. Therefore, I can drive the bot directly from my android phone's mobile browser. While it doesn't show much, here's a screenshot:

Easy remote access with localtunnel

When building an internet-enabled device, you need to a way to get to it through the internet (duh.) Using an internal IP works when you're on the same network. When outside the network, you need a proxy of some kind. Localtunnel is "the easiest way to share localhost web servers to the rest of the world." There's a great port for Node.js that I got working in minutes.

Simple app for accessing multiple devices

I could get the local IP & localtunnel url and write it to std.out but that's not useful from my phone or laptop. I wrote a simple App Engine app I'm calling DHD that logs devices and their addresses. Here's another mildly-useful screenshot:

It basically takes a POST and stores it App Engine's NoSQL db. Nothing too fancy, really. I imagine that addressing is a common problem for networked/internet-connected devices (I wonder how other projects like Electric Imp deal with it?) I may open source the code when it becomes more sophisticated, seeing as other internet-connected device projects might need something like a DHD.

Next Steps

Software

I plan on writing an init.d script that uses Forever to fire up the bot code whenever the machine starts & always keep it running. I also would like a shell script that tries to join open networks when nothing else is found.

Hardware

I picked up that Rover 5 from +SparkFun Electronics as well as a sweet accelerometer, gyro & compass unit from +Pololu Robotics and Electronics. Between having more motors, optical encoders and the IMU might mean I need to upgrade to an Arduino Mega. No biggie.

I still have a pipe dream to do some OpenCV/SimpleCV tracking or use an obsolete CMUcam I have lying around. We'll see.

Hopefully I'll have some more fun updates the next time I decide to blog.

Cheers,

+Jonathan Beri

My weekend project: an Arduino, Raspberry Pi & Node.js robot

Yes I know, I'll get more buzzwords when I my JavaScript creates Cloud Synergy - but after I Pivot.

I've been spending my wee few hours a week designing, tinkering and finally building my little robotics platform. I've had ideas brewing for a while but haven't had enough time outside of work to start hacking.

It all started when I first saw Rick Waldron's Johnny Five framework for Node.js.

Sensors are asynchronous, so, ya, a node.js robot framework makes sense.

A few months later I started sketching designs, reading up on firmata and buying my arduino & Pi.

Before the what & why, here's the basic BOM:

• 1 Arduino Uno R3 running firmata
• 1 original Raspberry Pi with Raspbian, Node.js & 4gb of storage
• 1 Magicians chassis
• 1 SN754410NE Quad Half H-Bridge to drive the motors
• 1 dual-output mobile battery back
• A custom mount for the Pi & some custom USB cabling for power

Why Raspberry Pi

The main controller is a Rpi. It turns 2 small motors by delegating instructions to an Arduino. Overkill? For now, yes. But by having a powerful machine at the helm, I can expand the robot's capabilities. That means bigger boards like the Mega with 54 I/O, multiple boards via a USB hub and interpreting a bazillion inputs or adding vision with OpenCV.

Why Node.js

Short answer: Internet of things & I <3 Node. If you haven't heard of the Internet of Things concept, it basically means physical things will be connected to the web. TVs, Thermostats and of course robots! The main interface for my robot is a web app and that app will continue to get more sophisticated. Due to latency concerns, I wanted to control it over websockets, so Node.js was a good choice there. Plus, the more JavaScript in Node.js I write, the happier I am :)

Hardware choices

Outside using a cheapo chassis to get started, you may wonder why I'm using a mobile battery pack. I had the idea because the Raspberry Pi needs 5v and connects via USB. That made running cables easier. The model I went with also has 2 ports, so I could power the Pi and drive the motors at the same time.

What's next

I've already alluded to more & bigger boards but I'll definitely need a bigger base. I'm currently eyeing the Rover 5 from Dagu. It is a tracked chassis that has 4 independent motors with optical encoders. It can also be converted to an omni-wheel bot pretty easily. That also means more inputs & more inputs = Arduino Mega. Lastly, once I get the latest Raspberry Pi with more memory, I'll try out OpenCV for some basic blob detection.

Don't expect regular posts anytime soon. However, this is a pet project that I hope to take pretty far and hopefully inspire some weekend hackers along the way.

+Jonathan Beri

Designing for Hangout Apps - Dimensions

tl;dr Hangout Apps have a minimum size of 940 x 465 and Hangout Extensions have a minimum size of 300 (fixed) x 465. Use Media Queries and/or JavaScript to make a responsive design.

After someone has grocked how to developer a Hangout App, the first question I get asked is, "How do I start designing my UI?" Its the right question to ask early on as a Hangout App is not your Grandma's static web page. Designing for a Hangout App is pretty easy since another type of webapp has caused better tools for things like dimensions (spoiler: mobile.)

Hangouts Resize

To start out, what is actually going on visually in a Hangout and what does the browser see happening?  First, the Hangout usually launches in a chromeless popup window. The Hangout is elastic - if you resize the window, items like the film and the main video strip re-center using JavaScript. We've noticed that users like to resize Hangouts (usually for split-screen viewing,) so its a good thing the Hangout adjusts.

Lower Hangout Size Bounds

The Hangout doesn't have a maximum width or height (I haven't asked the team, but none AFAIK.) There are minimums, however. Everything will adjust until a certain dimension and then scrollbars will appear. My tests show that the minimum size before scrolling is 946 (width) by 709 (height.) That's the dimensions of the entire Hangout's <body>.

<body>'s Metrics in the Dev Tools

How does this affect your Hangout App? These minimums set the smallest size you should be designing against. We know the minimum size for a Hangout but what about an App? To figure that out, I built a Hangout App.

Dimensions for Hangout Apps

I started out with a great article on Device and Viewport dimensions from Ryan Van Etten who authors  Response JS, a responsive design toolkit for jQuery. I basically put in the fastest techniques he mentioned in a Hangout App. I actually made 2 version of this app, one for regular Hangout Apps and another for Hangout Extensions.

Dimensions for Hangout Apps

These apps helped me figure out the minimum dimensions for Hangout Apps and Hangout Extensions. For Hangout Apps, the minimum is 940x465. Hangout Extensions are a little different because they have a fixed width, but their minimums are 300x465.

Want to try them out? Click on Hangout App or Hangout Extension to launch them in a Hangout. I also posted the source on Github.

Next Steps: Make It Responsive

So now that you know the minimum size your app can be, what do you do next? Well, mobile-first, responsive techniques were all the rage last year. Media Queries and JavaScript techniques (and libraries) are plentiful. I won't spend time in this post about it, but you can get started with a great article on html5rocks.

I hope this helps you make better and smarter Hangout Apps. As always, drop me a line on Google+ if you have any questions or comments.

./BBK

BONUS!!! Are you new to Hangout Apps and what to learn? Check out my talk at Google I/O 2012:

How I manage my circles

My circles have been getting out of control lately so I finally decided to sit down and come up with a plan.

I love the asynchronous following model of Google+. I have people I like to follow, people who may be interested in something I have to say and a bit of both. When I first created my circles, they were around topics: scriptys (JavaScript folks,) noders (node.js,) Googlers, etc.

Over time, my initial approach became muddy.

Do I want person X to show up my stream all time? They post really interesting links on astronomy, but overwhelm my stream.

Does person Y want to be notified about the latest release on Hangout Apps?

I found myself thinking about sharing more than I'd like to. So I decided to refactor my circles based on Share and Consume, with an emphasis on keeping people in a single circle where possible. I have a collection of circles that I set to show in my stream, a collection that are muted and one circle to "graduate" people and +Pages into my stream (more on that later.)

For the sake of education, here are my circles. I've included how they show up in my stream and a brief description.

Show All

• Friends
• Dearest friends, I have their cell and been to their house
• Family
• Genetically bonded
• Web Platform
• Thinkers and doers of JS, HTML, CSS & various Server Side technologies
• G+ DevRel
• My team & our +Page
• Googlers
• Folks who I work with or work on projects which I want to know the day-to-day
• Exceptionally Interesting*
• Folks and +Pages who don't fall into any of the above categories and I want to see.

Muted

• Google+ Community
• Anybody who has posted interesting tidbits in the past and I plan on peeking at sometime in the future
• Extended Googlers
• Brilliant Googlers who share personal annecdotes or unrelated to my job directly
• Following
• All +Pages

As I reworked my circles, I first moved anyone who was obviously in one circle. For example, Tj Holowaychuk (of Express fame) clearly went into the Web Platform circle and Chrome went into the Following circle. I then put folks who did have clear overlap, like Paul Irish is in my Googlers & Web Platform. The last step was to "graduate" circles from muted to in my stream. Daria Musk is a big part of Google+, so I added her to the Google+ Community circle. But she is awesome so I also added here to the Exceptionally Interesting circle.

At this point, if discover someone interesting via a shared post or what's hot, I immediately add them to the Google+ Community circle. Then if they continue to be interesting, I include them into the Exceptionally Interesting circle. I'm finding this breakdown easier to manage as well as easier to share.

Any tips you might have on how to improve my new system? What do you do? I'd love to hear.

What do I need to know about San Francisco?

I’m a officially a NorCal resident as of this weekend. For this LA native, the bay area is drastically different then my hometown. But even for the things that are the same, like car washes, I gotz no cluez. Can folks who’ve lived here long enough answer my cries for help? Gracias.

Where do I get a car wash?

Is Verizon any good? Should I switch?

Are Woot shirts not considered clever up here?

Should I buy boating shoes?

Where are the best coffee places to check in on Foursquare to look bohemian and/or working hard?

Is there a good Bart app for Android?

What’s the deal with dog parks? Do you need licenses to go to one?

Where are the best dog parks, or a list of them?

If I get a bike, do the tires have to be skinny and the seat made of leather?

What are the radio alternatives to JackFM, KROQ & The SoundLA?

Where should I buy groceries? Why is it so hard to find a Trader Joes?!?

Please list the best places to get fresh fruit. If you do, I will provide the Gelato I will be making from said fruit.

How can I get a crash-course in SF politics?

How can I get a crash-course in political satire about SF politics?

Are there secrets to apartment hunting on Craiglist? Please help there.

Do people really place fake CL ads to swindle folks from their application fees?

I heard there are more dogs than kids in SF. Please verify.

I’ve been told that the sushi in LA is way better than SF. Say its a lie?

Best Mexican food? All classifications welcome. (authentic, healthy, cheap, different)

How’s the internet speeds? Cable vs dsl vs FIOS?

Is there a good deli? My genetic disposition needs an answer to that one.

###

That’s it for now. I may add more to the post as questions slap me in the forehead.

Hello San Francisco, I can’t wait to see what we accomplish together!

Molding Google+: what devs should be able to do

I’m really digging Google+. From the UX to the tight integration with Google products, I feel this is what I would want Google to build for me. As much as I think its great, Google+ is ripe for some serious modz - open platform style.

Here are some of my ideas on ways Google+ could open up to developers:

CRUD fluff
This is the most obvious. Give me R/W access to the Stream, Photos, Profiles & Circles. Make sure the API is consistent and all GData-ish. I realize Picasa already has an API, so make sure it fits nicely into the G+ stack. Also make sure that XFN/FOAF/Friend Connect is as easy to use and as well documented as the Facebook Graph API.

What’s not obvious is that the Stream should have the firehouse from day 1. But let me filter it like we did @ MySpace (we had limitations that I bet you could remove.) Actually, make it more like MySpace and let me subscribe to it. Let me subscribe to anything, with filters, PuSH style. PuSH it baby!

Hangout, from the inside
If Hangout is the killer feature of G+, then Hangout Apps will be a developer’s dream.



I bet a lot of Wave developer’s will be dusting off their old ideas around collaboration & games for this one. Speaking of wave…

BRING BACK ROBOTS!
Why can’t 1 of the 10 Hangout peeps be a bot? Still popular in IRC channel, a bot can actually be useful. For business folks, a bot can create project tasks based on text or audio commands. In games, a bot could be a teammate or an announcer.

Media Apps

It would be great to build rich media experiences around Images & Video. I’m not talking about an Aviary clone or an image slider. I’m talking about RICH experiences. I can’t think of anything right now, but reference anything Hakim El Hattab would make. Like Textify.it.

Mobile Social as a Service

This is easy - become the next OpenFeint. Differentiate by not just being for games - everything is better with friends. Also, it would be great if it was more like a native service, so products like PhoneGap would work sans SDK.

Final note

Lastly, don’t make this hard. Learn from the Facebook Graph API, OpenSocial & ITunes. Get the docs right, the SDKs on the homepage & real-life partners making money.

You can sign up to be on the Beta list here. Looking forward to see if anyone of my ideas predict the future. Or even better yet, become suggestions for the roadmap. :)

./BBK

“Ideation is romantic.”

~ Anon.