Boxee devs one and all!

This week has been pretty damn rad.  On Tuesday we released our much anticipated new Boxee Box firmware 1.2 which included a lot of hot sauce for developers, including AirPlay support and fixes to our new JSON-RPC remote control API.  It also marked the launch of the new Boxee Media Manager to stream content from your PC or Mac to your Boxee devices more easily.  And of course we unleashed our wicked iPad app onto the world, racking up over 50,000 downloads and reaching #9 in the App Store.

Got a bit of personal news I need to share with you – today is my last day at Boxee.  Working with you has been my favorite part of this gig, so much so I’ve decided to do that full time with a career move to pursue developer evangelism.  Of all the insanely ridiculous opportunities I have had at Boxee, the most fun has been getting to know you and watch you turn this open source platform into a hurricane gale movement.

Boxee has been the most important work of my career, and you – the Boxee developer community – were the best part of it.

A familiar face will be taking my place on the community front in the form of Shawn Rieger, who you can reach at developers [at] boxee [dot] tv with any of your questions or support needs.

While I leave the Boxee crew, I’m staying solidly in the Boxee family as “Evangelist Emeritus.” You can expect to see me chiming in on the forums now and again, releasing the occasional app and encouraging every last person I see suffering from an ordinary television experience to cut that cord and be free at last.  I hope if I can help you in any way, you won’t hestitate to reach out and contact me.  You can follow my further misadventures over at Brooklyn Hacker.

May the road rise to meet you – as I will, some where down the way.

If you’ve logged into your Developer Dashboard today, you’ve noticed a new management feature for your apps.  With the upcoming 1.2 release for the Boxee Box, we are going to be introducing new Categories for apps.  Up until now, apps have been categorized solely by Video, Photo, and Music.  With 1.2, we’ll be helping navigate our exploding library of apps with a whole mess of new categories, including:

• Adult
• Education
• Entertainment
• Film and TV
• Gaming
• Kids
• Lifestyle
• Live
• Music
• News
• Photo
• Sports
• Social
• Tech

You don’t have to adjust anything in your application to get ready for this new release.  Just log in to your Developer Dashboard, click on Apps, select the app you wish to categorize, and choose three from the list above.

1.2 drops in a few weeks, so get your apps categorized with a quickness!

The fine folks over at Miso have announced a developer competition and are extending a warm invitation to the Boxee family to compete.  Miso serves up a piping hot social TV platform for checking into your favorite shows, earning points and badges while discovering what fun stuff your friends are watching.  We share a lot of users in common and now they’re rolling out the red carpet to our development crew to kick out some tight social TV apps.

Here’s the skinny:

Deadline: 10 May 2011, noon Pacific Daylight Time.

Prize: A brand spanking new iPad 2, ready for our upcoming Boxee iOS app.

Rules: Must leverage the Miso API to do something awesome.

What kind of awesome can be built with Miso and Boxee?  Oh how about some of these tasty treats:

• Auto check-ins on Miso when you watch shows on Boxee
• Change show on Boxee based upon what your friends watch in Miso
• Notification when a new episode of a show you follow on Miso is available on Boxee
• Check out your friends’ favorite shows
• Leave notes on shows for your friends to see
• A Boxee app hinting on how what would be best to watch to earn Miso badges
• Create an auto-running playlist Boxee app based on Miso trends

The ideas just fly off the fingers.  More details are available at the Miso blog including their sign-up form.

As usual, I’m here to make sure you win.  Hit me up on IRC at FreeNode at #boxee, on Twitter at @boxee_api and via email at rob [at] boxee [dot] tv if you run into any snags.

Go get ‘em!

This past weekend NYU’s Mathematical Sciences Building played host to the third hackNY Student Hackathon, drawing over 150 students from 50 different schools up and down the Eastern Seaboard.  Giving up a sunny Saturday in New York, college hackers drove through the night to produce 24 different hacks to present to luminaries of the NYC tech community.

Pulling down the top overall prize was a Boxee based hack called “Etsy Shopping Network.”  This HTML5 app is an elegant window-shopping-in-Williamsburg take on the TV shopping experience developed by the prodigious team of Adit Shukla (@aditshukla), Doug Fulop (@dougfulop) and Eric Siedel (@gridaphobe).

Designed by Adit, the simple interface let’s users peruse their favorite Etsy items and puts the gorgeous product photography front and center in a 10-foot interface.  Eric wrote the backend in Ruby, leveraging the Sinatra framework and the Etsy API.  Finally, Doug made the interface go, picking up some strong jQuery-fu in the process.

The app is available for Boxee Box users by adding this repository to your install:

http://tapp.boxee.tv/partners/etsyshoppingnetwork

Don’t have the Boxee Box?  Scope it out in your browser at:

http://etsy-tv.heroku.com

Congrats Adit, Doug and Eric – can’t wait to see what you come up with next!

Late last year Dutch developer Bartsidee exploded onto the Boxee scene with a popular custom repo delivering some widely used applications.  Bart has also been huge on the Boxee Forums helping developers get started on Boxee and providing a lot of tips and tricks.  His repository is one of my favorite to watch on GitHub and he just released a simple but helpful grid graphic to help debug your UI layouts in Boxee.

Check it out:

Bart has laid out markers in pixels to help you place your controls on the grid.  Super useful to put as a background on your application while you are doing your UI design.  Simply drop thing PNG inside your media folder and put it in the background by making it the bottom image control on your UI stack.  You can do so with just a few lines of XML:

<control type="image">
   <width>1280</width>
   <height>720</height>
   <texture>debuggrid.png</texture>

Thanks Bart – enjoy!

Is there something else going on in Los Angeles this weekend?  SCALE9x crashes the Airport Hilton in sunny Los Angeles this weekend and open source enthusiasts from around the globe are descending en force.  Swapping red carpets for red fedoras and VIP passes for IPv6 classes, the international FOSS community is gathering for one of the biggest open source conferences geared toward the discriminating hardcore geek.

Boxee will be there representing in full effect with your friendly neighborhood community evangelist Rob sporting the punch-drunk frog loud and proud all weekend long.  Check out these tasty Boxee appearances on Saturday:

• Open Source Television – 3pm Saturday, Century AB: Rob gives a talk on what Boxee gives and gets from the open source community.
• FLOSS Media Center Panel – 1:30pm Saturday, La Jolla: Rob joins XBMC’s Cory Fields and LinHES’s Cecil Watson and Michael Hanson to talk about the future of open source in the living room.
• The Weakest Geek – 7:30pm Saturday, La Jolla: Street cred is the most valuable currency in SCALE9x’s annual geek trivia contest – will Rob have what it takes to be the weakest of all?

Full schedule of festivities is here.  Rob will be in attendance all weekend, so keep an eye out for a Boxee t-shirt, a punk rock Thinkpad and a hearty laugh and say hello!

It’s Valentine’s Day at Boxee and users are already feeling the love. Of course, we never want to leave out our developers from our affection, so I thought I’d rap a bit about our support for HTML5.  

We feel strongly that the future of TV apps is a cross-platform one, where developers write code once and users enjoy the experiences across multiple devices and screens.  HTML5 can create rich experiences across many platforms on the desktop, on mobile devices and – of course – in the living room.  We’re on board with this new standard and would like to invite you to try your hand on building an HTML5 app on the Boxee Box.

Setting up an HTML5 app is super easy – just three steps!

1) Creating the descriptor.xml

Like RSS and skin Boxee apps, HTML5 apps start with a descriptor.xml.  Let us first consider this example.

<app>
  <id>example</id>
  <name>Example HTML5 App</name>
  <version>1.0</version>
  <description>An example HTML5 app using the new Boxee browser.</description>
  <thumb>http://example.com/thumbnail.png</thumb>
  <repository>http://dir.boxee.tv/apps</repository>
  <media>video</media>
  <copyright>Example, inc</copyright>
  <type>html</type>
  <url>http://www.example.com/html5app</url>
  <controller>http://example.com/boxee.js</controller>
  <platform>all</platform>
  <minversion>1.0</minversion>
  <test-app>true</test-app>
</app>

There are three new important values and one new element we introduced just for HTML5 apps.

• <type>html</type> – This element defines the Boxee app as an HTML5 app.
• <url>http://www.example.com/html5app</url> – Like in RSS apps, we use the url element as the link to our HTML5 application.
• <controller>http://example.com/boxee.js</controller> – A new element in the descriptor.xml, the value for controller should be the link to your Javascript control file.
• <minversion>1.0</minversion> – HTML5 support is a feature only available in Boxee 1.0; setting this value ensures that the app will be visible only for Boxee 1.0 clients (e.g. the Boxee Box).

2) Creating the Javascript controller

Along with HTML5 support, we’ve introduced a new browser mode to our Javascript API making it super simple to use the Boxee Box remote with your HTML5 app.  Called keyboard mode, setting this in your Javascript controller file now allows you to produce simple up/down/left/right navigation in your app with only three lines of Javascript code:

boxee.apiMinVersion=7.0;
boxee.reloadOnPageChange = true;
boxee.setMode(boxee.KEYBOARD_MODE);

3) Installing your app on your Boxee Box

Follow the handy and dandy new testing instruction we have available on the Developer wiki.

Enjoy this new feature of the Boxee platform and comment with your experience.

As you may have heard via email and on the forums, the upcoming SP4 release for the Boxee Box will include the introduction of API keys for Boxee developers.  Only barely eclipsed by the news that the White Stripes are breaking up, the announcement of this new process has generated a lot of questions and we’re happy to report that the interface to get your API key is now live here.

In the next release of Boxee, all apps running on the Boxee Box will need to be signed by an API key.  What does this mean for you and your application?

Here are some quick answers to the most common questions:

1) Why are you doing this?

This rollout is in reaction to an increasingly common security requirement among premium content providers.  Distributing API keys to create signatures for applications is a frequent feature of the Smart TV space and we’re following suit.

2) What do I need to do?

If your app is in the Boxee App Library, you don’t need to do anything.  Your app is already signed for you and will not be affected by the next release.  If you are distributing your app through your own repository, we recommend you get an API key and get your application signed.

3) How do I sign up for an API key?

You can sign up for a developer account and get issued an API key by going here and signing up for a developer account.  Developer accounts on Boxee are of course free and keys are generated automatically.

4) How do I sign my app?

Once you have signed up for a profile, you can get your app signed here.

1. Login to boxee.tv
2. Navigate to http://boxee.tv/developer
3. If you haven’t already, register as a developer by filling out the profile form
4. Click on the Apps tab
5. Upload the zip of your application that you will distribute in your repository
6. Click “All Versions and Signatures”
7. Click “Download Signature”
8. Place the downloaded xml file in your repository’s download directory

5) Should I sign up even if I don’t maintain my own repository?

Yes!  We’ll be using Boxee API keys in the future for making available new services and features for developers.  Sign up now and register your apps.

We are encouraging all developers maintaining their own repositories sign their apps as soon as possible.  If you have any problems or questions,  I’m here – you can get ahold of me through the following media:

Updated: 6) Are there any changes to the API?

Be sure your descriptor.xml has a <repository> element – it is now a required.  For apps submitted to the App Library this value should be “http://dir.boxee.tv/apps/”.

• Email: developer [at] boxee [dot] tv
• Twitter: @boxee_api
  
• IRC: #boxee on FreeNode

We’re 15 days away from the launch of the Boxee Box from D-Link, our first dedicated hardware device to hit the market! Boxee HQ is buzzing with anticipation of the release and I know you in our developer community are as well.  It’s a special time for this community that we’ve built together and a whole lot of engineering blood and sweat will be on display in a couple short weeks.

In anticipation of the release, I’ll be giving a talk to the New York Personal Computer User Group about how we use open source at Boxee, give a brief overview of the development platform, show off the new Boxee Box and of course answer a bunch of your questions.  Here are the details on this month’s meeting of NYPC:

At Ripley-Grier, 520 8th Ave, between 36th & 37th Street
10th floor, Room 10D
Doors Open 6pm, Presentation 6:45 – 8:45

And on launch day 10 November Boxee and D-Link will be throwing a Boxee Box launch in Manhattan.  We’ll be debuting the Boxee Box live, showing off some new surprises and pushing our baby out into the market in style.  Already 1,000 people have RSVPed – be sure to sign up now before the event sells out!

A great new feature in our last client release that devs have been asking about is the introduction of the “dialog” window type to our platform UI.  Dialogs allow you to define frequently used combinations of UI elements in a separate XML file and activate them from any window.  This allows you to reduce the amount of duplicate markup in your app and make future maintenance far simple than duplicating similar controls in each window.  In this post we’ll look at a simple example demonstrating how to use this feature.

First, we create a simple skin with two controls: a background image and a button control in a file called main.xml and assign it Window ID 14000.

<?xml version="1.0"?>
<window type="window" id="14000">
	<defaultcontrol always="true">100</defaultcontrol>
	<allowoverlay>no</allowoverlay>
	<controls>
		<control type="image" id="101">
			<posx>0</posx>
			<posy>0</posy>
			<width>1280</width>
			<height>720</height>
			<texture>background-main.png</texture>
		</control>
		<control type="button" id="100">
			<posx>200</posx>
			<posy>200</posy>
			<width>145</width>
			<height>145</height>
			<label>Click Me!</label>
			<font>font36b</font>
			<textcolor>white</textcolor>
			<focusedcolor>gray</focusedcolor>
			<texturefocus>-</texturefocus>
			<texturenofocus>-</texturenofocus>
		</control>
	</controls>
</window>

The result looks a little like this:

Next, we create our dialog window with three controls in a file named dialog.xml and assign it Window ID 14001.

1. A diffused background image to darken the window we just created behind our new dialog.
2. A button control to close our dialog window.
3. A Boxee logo (who doesn’t need to see more of them?)

<?xml version="1.0"?>
<window type="dialog" id="14001">
 <defaultcontrol always="true">300</defaultcontrol>
 <allowoverlay>no</allowoverlay>
	 <controls>
	 	<control type="group" id="7001">
			<control type="image">
				<width>1280</width>
				<height>720</height>
				<texture>white.png</texture>
				<colordiffuse>DD202020</colordiffuse>
			</control>
			<control type="button" id="300">
				<posx>565</posx>
				<posy>75</posy>
				<width>145</width>
				<height>145</height>
				<label>Close Me!</label>
				<font>font36b</font>
				<textcolor>green</textcolor>
				<focusedcolor>green</focusedcolor>
				<texturefocus>-</texturefocus>
				<texturenofocus>-</texturenofocus>
			</control>
			<control type="image">
				<posx>244</posx>
				<posy>100</posy>
				<width>792</width>
				<height>612</height>
				<texture>logo.png</texture>
			</control>
		</control>
	 </controls>
</window>

Now we need to activate our dialog from our main window.  To do this, we add an onclick event to the button control in main.xml and introduce an easy ActivateWindow() method using the ID of our dialog (14001) as the argument.

		<control type="button" id="100">
			<posx>200</posx>
			<posy>200</posy>
			<width>145</width>
			<height>145</height>
			<label>Click Me!</label>
			<font>font36b</font>
			<textcolor>white</textcolor>
			<focusedcolor>gray</focusedcolor>
			<texturefocus>-</texturefocus>
			<texturenofocus>-</texturenofocus>
			<onclick lang="python"><![CDATA[
mc.ActivateWindow(14001)
]]></onclick>
		</control>

Once we restart the app, we can now see the three controls we created in our dialog appear over our window.  Bamf!

But, it is not merely enough to display a dialog window – we need the user to be able to close it as well.  So we use the xbmc module to execute a method called “Dialog.Close()”.  We do this by first importing the xbmc module in an onload event for the dialog.

<?xml version="1.0"?>
<window type="dialog" id="14001">
 <defaultcontrol always="true">300</defaultcontrol>
 <allowoverlay>no</allowoverlay>
 <onload lang="python"><![CDATA[
import xbmc
mc.LogDebug(message)
]]>
</onload>

We then can execute it by adding the following onclick event to our dialog’s button control.

			<control type="button" id="300">
				<posx>565</posx>
				<posy>75</posy>
				<width>145</width>
				<height>145</height>
				<label>Close Me!</label>
				<font>font36b</font>
				<textcolor>green</textcolor>
				<focusedcolor>green</focusedcolor>
				<texturefocus>-</texturefocus>
				<texturenofocus>-</texturenofocus>
				<onclick lang="python"><![CDATA[
xbmc.executebuiltin("Dialog.Close(14001)")
]]></onclick>
			</control>

Once we restart the app, we can now toggle between our dialog window and our main window!

The uses for dialogs in Boxee apps are limited only by your own creativity and can help keep your app’s XML tight and maintainable.  Enjoy!

Complete examples:

main.xml

<?xml version="1.0"?>
<window type="window" id="14000">
	<defaultcontrol always="true">100</defaultcontrol>
	<allowoverlay>no</allowoverlay>
	<controls>
		<control type="image" id="101">
			<posx>0</posx>
			<posy>0</posy>
			<width>1280</width>
			<height>720</height>
			<texture>background-main.png</texture>
		</control>
		<control type="button" id="100">
			<posx>200</posx>
			<posy>200</posy>
			<width>145</width>
			<height>145</height>
			<label>Click Me!</label>
			<font>font36b</font>
			<textcolor>white</textcolor>
			<focusedcolor>gray</focusedcolor>
			<texturefocus>-</texturefocus>
			<texturenofocus>-</texturenofocus>
			<onclick lang="python"><![CDATA[
mc.ActivateWindow(14001)
]]></onclick>
		</control>
	</controls>
</window>

dialog.xml

<?xml version="1.0"?>
<window type="dialog" id="14001">
 <defaultcontrol always="true">300</defaultcontrol>
 <allowoverlay>no</allowoverlay>
 <onload lang="python"><![CDATA[
import xbmc
mc.LogDebug(message)
]]>
</onload>
	 <controls>
	 	<control type="group" id="7001">
			<control type="image">
				<width>1280</width>
				<height>720</height>
				<texture>white.png</texture>
				<colordiffuse>DD202020</colordiffuse>
			</control>
			<control type="button" id="300">
				<posx>565</posx>
				<posy>75</posy>
				<width>145</width>
				<height>145</height>
				<label>Close Me!</label>
				<font>font36b</font>
				<textcolor>green</textcolor>
				<focusedcolor>green</focusedcolor>
				<texturefocus>-</texturefocus>
				<texturenofocus>-</texturenofocus>
				<onclick lang="python"><![CDATA[
xbmc.executebuiltin("Dialog.Close(14001)")
]]></onclick>
			</control>
			<control type="image">
				<posx>244</posx>
				<posy>100</posy>
				<width>792</width>
				<height>612</height>
				<texture>logo.png</texture>
			</control>
		</control>
	 </controls>
</window>