All posts by Martijn

Lowlands Project II: FIY Map.

Main, , , , , , , , ,


Besides the OneFrameOfFame Lowlands edtion, I did a second Lowlands project. For the VPRO I made the map for the Film It Yourself project. Visitors to the festival could use the FIY iPhone app to film a concert. These movies are uploaded to the server, together with their metadata (location, heading, exact timestamp etc).

All movies are shown in a map. It features a slider, which visitors can use to select a timeframe they want to see video’s of. The movies are shown as icons, indicating the direction they are shot in, and as thumbnails next to the map.

The system is compatible with all modern browsers. iPhone, iPad and recent Android versions are also supported, as these are served a HTML5 video, and the maps are all built using the new version 3 of the Google maps API. And all items have their own unique URL, making sharing the video’s easier. Since the Lowlands terrain is a field with cows for most of the year, we also added an overlay, showing the stages of the festival. It also features a dynamic legend under the slider, showing how many video’s are shot at a time. All this is rendered client-side.

You can watch the map live in action at http://lowlands.vpro.nl/fiy.html and some montages of the multi-angle video’s can be seen at http://filmityourself.nl/blog/fiy-montages/

There are many future plans for FIY, but for now this is a great first step!

Multiple thumbnail resolutions with FFMpeg

Main, , , ,

For a project I’m working on, we need to generate thumnails from video files. While there are many tutorials for generating multiple thumbnails at different timestamps, we need to generate multiple, different resolution, thumbnails at the same timestamp. Using a post-processing tool here was not convenient.
Fortunately, its possible with just 1 ffmpeg command: you can have it use multiple output file names, each with their own parameters:
ffmpeg -i inputfile.flv -vframes 1 -ss 1 -s 320x240 -f image2 thumb1.jpg -s 160x100 -f image2 thumb2.jpg

-i is input file
-vframes 1 stop after 1 frame
-ss is skip time (where to take the thumb)
-s is size of the image
-f is format. image2 works.
thumb1.jpg and thumb2.jpg are the filenames

Just a quick heads up if anybody is looking for the same :)

OneFrameOfFame: the Lowlands 2010 edition!

Main, , , ,

After the online success of OneFrameOfFame, we decided to take the concept offline. We built a photobooth, and invited the 55.000 visitors of the festival to mimic one frame. Every fifteen minutes we rendered a new clip with the latest additions.

Since Internet access was unreliable at the festival, all software was modified to run offline. We used the same stack (Apache, PHP, MySQL, FFMpeg) as the online version, but it all ran on 2 mac mini’s in our booth. The interface was modified to run on one big red button. Since we couldn’t use Crowdflower for the moderation (as that runs online), I built a local moderation interface which runs on iPhones and iPads.

In the end it was a great success: We needed 1400 pictures, and collected over 2200 in just 3 days. The resulting video can be seen above, and has a complete different feel from the webversion which has changing backgrounds.

Google Styled Maps are quite powerful!

Main, , ,

Today, while looking into the new Google Maps Docs, I ran across the Styled Maps. They are quite powerful! While Cloudmade offers a similar service for a while, I didn’t expect Google to offer this, and for free.
A bit of technical background: these mapping services work by splitting the world into tiles. The whole world takes millions of tiles (depending on zoom level), and thus hundreds of gigabytes to render and store. While rendering and storing the world once isn’t that much effort for Google, rendering it in as many styles as it’s customers come up with does take quite a bit of processing power (For more background on the subject: See my Thesis on LBS)

While I have run a tile render server in the past, this was always an expensive, and not that scalable operation. So I’m suprised (but happy!) that Google now offers this to the world, for free! In just a few minutes, I was able to create the demo Waterworld shown above.

More examples can be seen on the Google Maps blog

VGZ op Reis live on iPhone and Android

Main, , , , , , ,

Last week VGZ op Reis went live. It’s a mobile application for people on vacation, build by me.

It’s the first application I’ve worked on that simultaneously is released on iPhone and Android. Below you can find a (dutch) screencast which explains the functions of the application. It features several phone numbers that can be usefull on vacation, you can save your own phone numbers to it, you can share your location by email, and the iPhone version also allows you to create your own iPhone Wallpaper.

The design of the application was done by the brilliant guys at BUROPONY.

Sensation Vodafone 360 widget live

Main, mobile, PanMan Productions, , , , , , , ,

Sensation_H1
It’s always cool to work on new mobile platforms. And since I’m a big believer of HTML as a future cross-platform development environment, the Vodafone widget platform shows a nice promise. I had done some experiments with the platform, but now the first widget went live.

Together with The Saints I developed a widget for Sensation for the Vodafone platform. It shows the latest video’s from Sensation’s Youtube channel. It also shows the news around their world-wide events, and the latest tweets from the official Sensation channel.

For those running the Vodafone widgets, or owning the H1 or M1: It’s available in the Vodafone widget market. http://widget.vodafone.com/dev/widgets/sensation_16528

Since most of the content of Sensation is on public platforms (Youtube, Twitter), which all have an API, the widget could be developped fairly easy without further technical support by the organisation.

HTML5 webapps broken on the iPad

Main, mobile, , , ,

iPad?

Apple seems to be a big proponent of HTML5: They use it for their new iAds, as Steve proudly announced during his last Keynote. So when I wanted to maken an Ipad webapp, I didn’t expect any issues. For a client of mine, I planned to work on an iPad webapp this week. It’s even the reason I bought an iPad.

Let’s start with the only good news: Setting an homescreen image, with

<link rel="apple-touch-icon" href="/custom_icon.png"/>

does work, and if you make the image 72 pixels wide, it looks great on both iPhone and iPad (the previous advice was 57 pixels, but this looks blurry on the iPad as it’s scaled up).

On the iPhone, there are some other properties you can set on a webpage to make it work offline: Besides the homescreen icon, you can set the status bar color, startup image, and viewport size, and make files work when not online. The result looks and works like an app instead of a webpage: No URL field, navigation buttons, a startscreen, etc. Apple invented these, and has extended their support in their OS updates. See for a good description: How to Make an HTML5 iPhone App and a great HTML5 example app is the PieGuy game. They work great, and can make it easier to build and distribute an application, without sending it to Apple for approval (the current appstore mess is a whole different blogpost).

Since Apple supports this in their iPhone OS, and the iPad runs iPhone OS 3.2, I expected this all to work. Unfortunately, it doesn’t.
On the iPad, the startup image and viewport size are ignored when run in webapp-mode. The viewport size is only used when shown in a normal browser window, and the startup image is never shown :(.

On an iPhone with OS 3.1, both do work. This makes the result, on an iPad, work more like a (broken) webpage, than an application.

Why did apple take working stuff out, when upgrading the iPhone OS from 3.1 to 3.2 for the iPad? Is this a simple omission which will be fixed, or is apple actively moving away from HTML5 webapps for the iPad, further pushing their appstore? Only time will tell.

Update:

I looked into this some more, and have more results:

If  you use a image with the right size, (1024*768), it does (sometimes) work on my iPad as startup image. My previous tests used a iphone-sized image, which is totally ignored on the iPad. However, it often takes a few tries before it shows the loading image, and sometimes shows a screenshot of the page, before showing the default loading screen. (so the flow is then screenshot->default.png->webpage).

I still can’t get the viewport tag to work in webapp mode: If I set the viewport to a predefined with, like:
<meta name=”viewport” content=”user-scalable=no, width=1024″/>
this does work in Safari, but is ignored in Webapp mode. If I set a scale:
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”/>
and test in Safari, this does work on first load. However, if I rotate my ipad, and rotate back, the scale is set differently.

Build your own Internet of Things Thing in a day

Main, mobile, Talks, Video, , , , , , , ,

The MomoMeter on Stage

At the Mobile Monday Amsterdam, which I co-organise, I did a short talk on how to build your own Internet of Things Thing, in a day. The technical process is explained in my blogpost from last year: called The MoMoMeter.
Since we videotape all our talks, it’s included here:


The slides:

More on the IOBridge I used can be found on their blog
Photo’s by Filip Bunkens.