Welcome to Ben Newhouse's Homepage
Ben isco-founder of Aria Glassworks, an augmented reality startup
formerly part of Yelp's Mobile Team, the creator of Monocle AR
a graduate of the EE BS program at Stanford University
formerly co-artistic director of Stanford Swingtime
an alumnus of Microsoft Research Asia
an alumnus of SwayLaw
an alumnus of the Rotary Youth Exchange Program to Taipei
on twitter @newhouseb


Past Talks
2/6CS193PiPhone Application Development: Yelp Monocle (Stanford iTunes U link)
4/21ARConfSci-Fi to Sci-Fact: How Computer Vision Will Change AR and the World
4/24VTMiPhone Sci-Fi: What's Possible and How with Augmented Reality
6/2AREBuilding Yelp's Monocle
Things I've Made
I code all the time. When I take a break from coding, I code. Before I go to bed, I code. Henceworth, I've made a lot of things, here's a bunch that made it public:

Active:
  • Yelp's Monocle - The first Augmented Reality app for the iPhone
  • Choreographi.es - Communicating how a choreography goes to others is hard
  • Add Pinyin - Half of reading Chinese is knowing how to pronounce the characters
  • Shadow Calendar - Schedule sharing for those too lazy to maintain a full calendar
Retired:

Name:
Link:
Birth:
Technologies:

Yelp's Monocle Late July/Early August 2009 Objective-C, OpenGL, Python (server side)

It all started with this tweet by Robert Scoble on July 14th, 2009:

"I hear from good sources that Yelp is coming out with one of the coolest iPhone apps using the compass. Me wants!"

At the time, Yelp was not working on such a feature - no one was really sure what Scoble was talking about. While the team shrugged it off, I took it as a challenge from Scoble (especially considering I'd never really developed anything for the iPhone or done any OpenGL). I went home a couple nights later and hacked away from 8pm to 5am on my own interpretation of a Yelp Augmented Reality using Yelp's public APIs. To my surprise, I had a working demo (albeit ugly) a mere two days later. I started showing it to some other Yelp developers during my lunch break and soon enough word got to the rest of the team and I was busy porting the code I wrote in my aparment at 4am into Yelp's iPhone codebase.

After a couple weeks of polishing, we shipped it hidden as an easter egg in our v3.0 of the iPhone app (if you're curious, contrary to popular belief, we used no private APIs). Given the shortened development cycle, it still wasn't as polished as the rest of the app so we decided to hide it for all but the tech savvy users who would find it cool.

After weeks of waiting for the App Store to approve our app it was finally released, and a day later, none other than Robert Scoble himself posted to friendfeed the following message:

"New Yelp iPhone app is also out. There's a cool easter egg (Augmented Reality feature). Here's how to do it:..."

With that, the race was on. Within minutes Mashable had cobbled together a demo video, with RWW soon to follow. A few hours later, it was a trending topic on twitter.

You're not familiar with the concept here's an (eventually in focus!) quick video from Steve Garfield:

In the months that followed, we released a version of the Monocle for 3.1 and received a constant supply of press (that is surprisingly still coming). Here's an abbreviated list of top media stories

  1. Businessweek: Augmented Reality Goes Mobile (mentions me personally)
  2. Fast Company: Augmented Reality Is Both a Fad and the Future - Here's Why
  3. AP: High-Tech X-Ray Specs: 'Augmented Reality' Melds Physical, Virtual Worlds
  4. New York Times Magazine: Consumed: Reality Bytes
  5. Gizmodo: Augmented Reality Yelp Will Murder All Other Restaurant Apps, My Health
  6. Mashable: Easter Egg: Yelp is the iPhone's First Augmented Reality App
  7. CNET TV: Yelp for Monocle
  8. Wired Magazine: 7 Best Augmented Reality Apps (Monocle is #1)
  9. CNN: A New Way of Looking at the World (Monocle on slide 3)
  10. RWW: Yelp Brings First US Augmented Reality App to iPhone Store
  11. Everything else (google search)

(Augmented Reality)
Choreographi.es November 2009 http://choreographi.es Django, jQuery

When I'm not coding, there's a decent probability I'm swing dancing. I've been dancing since I was a kid, and since coming to Stanford I joined Swingtime, a Lindy Hop performance troupe. During my final year, I've taken over as a co-artistic director and thus end up teaching a lot of Choreography (which I admittedly love doing).

The problem is - Choreography is incredibly hard to convey by any means other than having someone dance in front of you. Up until recently, many of us have relied on excel spreadsheets with counts marked out explicitly. Lining up these counts with the actual music secondhand is quite a challenge.

I put together this simple Django app with the aid of the jPlayer plugin for jQuery (which I modified to always use Flash instead of HTML5 Audio, which is buggy). As the song plays, the app shows the corresponding move. It's simple, effective, and by no means done. It's not particularly high on my priorities, but expect slow progress.

- Tools for Dancers
Add Pinyin November 2008 http://addpinyin.com PHP, C
Add Pinyin - Instant Annotations

Between my (now retired) Mobile Safari handwriting recognition site, iFone Chinese, and the assortment of random tools online, surfing the Chinese internet is not only a mental exercise but also an excercise in alt-tabbing between different translation tools.

One weekend at Microsoft Research Asia, I was gearing up for a heavy weekend of coding. Alas, apparently a pipe broke in the data-center (apparently?) and all the servers I needed were taken offline. I had to put my pent up momentum into something and so I decided to create a bookmarklet that could annotate chinese characters on any domain with their pronunciation, and Add Pinyin was born (it was actually originally called Pinyinify).

The idea is that on a Chinese page you click a bookmarklet and the pronunciations are added alongside each character. Try clicking here and watching the text below

欢迎你来"加拼音"

Add Pinyin has two possible underlying engines - a PHP engine that references a memory-mapped file and a C server that serves requests asynchronously from an in memory dictionary. The C server can serve around 10,000 requests per second, but (obviously) required more maintenance than a stateless PHP script. At the moment, the C server is tucked away until traffic spikes.


Open Sourced Code

Here are a number of things that are either quick (useful) hacks or things friends of mine have asked to use.

  • Simple Website Schema - A simple XML-based engine for static websites (and powers this site!). This is probably one of the few places in the world where XML makes sense
  • MatTex - Embedding Matlab into your LaTeX documents that gets run at compile time
  • ImpTran - A quick script hacked together to calculate impedance transforms without a smith chart
Simple Website Schema

The Problem

Creating a personal website formerly requires either an immensely complex folder tree of HTML files or an overblown CMS that does way beyond what the average user needs.

The Solution

Extend on XHTML such that a single file can describe not only a single page, but an entire website. SWS merely requires PHP5, and can optionally use mod_rewrite for pretty URLs. You don't even need access to a database.

A Hello World

template.sws
<site title="John Doe" template="default.tmpl" css="main.css">
    <page link="" name="Home">
        <header>My Home Page</header>
        <content>
            <p>Hello World!</p>
        </content>
    </page>
    <page link="Contact me">
        <header>To contact me</header>
        <content>
            <p>choose a medium</p>
        </content>
        <subpages>
            <page link="Email">
                <header>Email</header>
                <content>
                    <p>superhappyfuntime@me.com</p>
                </content>
            </page>
            <page link="IM">
                <header>IM</header>
                <content>
                    <p>IM superhappyfuntime</p>
                </content>
            </page>
        </subpages>
    </page>
</site>

default.tmpl
<html>
<head>
    <title />
</head>
<body>
    <div id="alllinks" />
    <h3 id="header" />
    <div id="content" />
</body>
</html>

main.css - Your run of the mill CSS stylesheet (empty for this example)

Result

Features

  • No maintaining a file tree. Want a new page? Add a page element to the site tag.
  • No compiling required
  • Automatic clean URL generation (assuming you have mod_rewrite enabled)
  • Automatically generated links (and nested links)
  • Templatizing of standard HTML - no new syntax required
  • Virtually infinite nested pages
  • Static file generation if you need it

History

Fall quarter my sophomore year at Stanford (2007), I took CS145 - Introduction to Databases. This class spent about half of its time on RDBMS and half its time on XML. I understood why we were covering RDBMS, but I had never actually seen any usage of XML beyond XHTML and nasty Java configuration files, and no real examples of XPath being used anywhere. At this point in time I was using a shared hosting provider that provided little beyond PHP5, MySQL, and PHPMyAdmin (ie. no ssh). I imagined that other people were often not even fortunate enough to have access to an SQL database. My website needed updating and thus I decided to build my website around an XML document, queried with XPath, and hence SWS was born.

SWS happily kept my personal website up for a couple years and eventually enough people told me I should open source it that I bunkered down for a couple days over christmas 2009 and completely rewrote it from scratch to allow for a lot of more advanced features (namely recursive page trees), and then released it. And here it is, under a BSD license (a la Django).

Simple Website Schema Set Up

Only three easy steps!

  1. Download the source from github and copy all five files (index.php, template.sws, .htaccess, base.tmpl, base.css) to your site directory.
  2. (Optionally) Enable mod_rewrite. SWS will fallback without it by inserting "/?p=" after your domain name in all of its URLs.
  3. Fill base.tmpl with your base html structure, base.css with your styles, and template.sws with your content. You can put other static content in an /other directory, where mod_rewrite won't intercept the requests and try to parse them.

If You say: But I can only use static HTML!

It's OK, I forgive you. Just add these three (easy!) steps

  1. Set a 'filepath' attribute in the <site> tag to where you want the static html files to compile to, and set the 'urlpath' attribute to where the site root will be in your URLs (ie. for a SWS site at the domain root, this is just "/")
  2. Visit the index page of your site in your sandbox to recompile [all of] your static files
  3. (Optionally) If your 'filepath' attribute does not point to your production environment, copy all files from your filepath to your corresponding production environment.

A Static Example: My Stanford Web Space

(1) For my Stanford web space my filepath is "WWW" and my urlpath is "/~benzn". (2) I visit my staging environment (at http://stanford.edu/~benzn/cgi-bin/SWS/), and (3) I run:

myth:~$ cp ~/cgi-bin/SWS/WWW/* ~/WWW

Ideally, I could set my filepath to "../../WWW", and skip this command, but something about Stanford's arcane file permissions is throwing up a roadblock at the moment. I will try to fix it soon!

Simple Website Schema Documentation

Ground Rules

Here's a few ground rules and bits of important information

  • Everything needs to be valid XML, tags must be closed and properly nested
  • You need to escape '&'s as '&amp;'
  • The parsing engine is pretty naive, so you have a lot of power. For example, it will even let you completely redefine <div> tags.
  • If you're using SWS dynamically without mod_rewrite (don't imagine why you wouldn't just use static mode at that point), you need to fully qualify any would be relative links to include "/?p=" (automatically rewriting these links is a yet-to-be-implemented feature).

Document Structure

template.sws must contain a root <site> node. A root node must contain a template attribute pointing to an HTML template. The <site> node must contain at least one page. Variables can be "defined by default" by declaring them in the <site> node. Pages are not strictly required to contain anything, but can contain variable definitions and a <subpages> tag in which sub pages are defined and potentially default variables for the sub pages are defined. Thus the node types are as follows:

<site>

Attributes:
template = The HTML template to parse
filepath (optional - static compilation) = The root directory on the filesystem to compile static html files to
urlpath (optional - static compilation) = The site URL path to the static files
css (optional) = The css stylesheet to include
title (optional) = The defualt title to be prepended to all page titles

Contains: <page> tags and <*> tags.

<page>

Attributes:
link = The address of this page relative to its parent (URLs are case insensitive and a space matches an underscore)
name (optional) = A name to display in autogenerated links
hidden (optional) = If "true", the page is never displayed in any menus
ref (optional) = An external url to reference, for links in menus to external web sites
title (optional) = The title to be appended to all page titles

Contains: a <subpages> tag and <*> tags.

<subpages>

Attributes: None

Contains: <page> tags and <*> tags.

<*> (a.k.a variable tags)

Attributes: None

Contains: The arbitrary HTML to replace this variable with when found in the html template and other variable definitions

Parsing Stages

Variable Initialization and Scoping

In the first pass through template.sws, all tags that are children of <site> or <page> that are not named <page> or <subpages> are treated as variables in which their value is the inner value of the given element. Variables are scoped according to depth and the selected page. Only nodes in the line of ancestors from the requested page are collected from and deeper definitions take precedence over shallower definitions. A few variables are automagically created for your convenience (see Automagic Variables).

Automagic Variables

For convenience a few variables are automatically populated

alllinks - All links as <a> tags, collected into <div> tags by level in the navigation tree.
links - Only the top level links
sub(*n)links - Links at level (n+1)
breadcrumb - A list of <span> tags that contain each section of the URL
path - Only the top level part of the URL
sub(*n)path - Path at level (n+1)

Recursive Variable Substitution

Next, each tag in the template is replaces by its variable contents, and then the variable contents are parsed for potential replacements. Note that if you reference a variable within its definition, it will result in an infinite loop (so don't do this). The replacement rules are as follows. Assuming "foo" is defined as "bar":

Source Replacement
<div id="foo" /> <div id="foo">bar</div>
<foo /> bar

An Example

See the example here or the template.sws and html template for this website