The iPhone 4 just begs for some good video content to be played on its high-resolution display—which, contrary to popular belief, isn't made of retinas. The easiest way to get video is through Apple's iTunes Store, but there are many reasons why you might want to watch videos that you already have lying around instead. If you're lucky, your video is already in a format that the iPhone supports. In that case, just add the file to iTunes and sync. But what if it's not in the right format?
The iPhone 4, the iPad, and the latest versions of the iPod touch all support H.264 main profile level 3.1. What that means is that you can play HD video with a resolution of up to 1280x720 and a framerate of 30 frames per second. That's a significant step up from the baseline profile level 3.0 (720x480x30 or 720x576x25) that the older iPhones and iPod touches support, and even an improvement over the older Apple TV, which could only play 1280x720 video at 24 frames per second or less. The main profile rather than baseline profile means that it's possible to use more effective compression.

So how to go about creating those H.264 files?







Read the comments on this post

Part 1: Loading, projecting, and drawing geodata

I’m getting into more canvas and JavaScript for interactive mapping. Much of the Flash/ActionScript work I’ve written or come to rely upon is directly portable to JS/canvas. What’s missing is a sweet RIA framework and IDE for the kind of development Flash and Flex have made possible for years.

Luckily it’s not hard to roll our own interactive web map using web standard technologies. In this post I’m just showing off the basics: dynamically loading geodata, projecting it client-side, and rendering to the canvas element.

Hopefully the above map shows up for you. It’s loaded into this blog post with dynamic KML data, projected using the Proj4js library, and drawn onto HTML’s canvas element using JavaScript. You can check out the P.O.C. on a separate page.

Loading geographic data
It all starts with data. Points, polylines, or polygons — typically defined by latitude/longitude coordinates. Your data may be in a CSV file or in a database. For a simple interactive web map it’s best if it’s in a common GIS file format, like the Shapefile or KML.

These days, it’s not too hard to load a geographic layer on top of a web map — using Google Maps or OpenLayers, say. But since we’re looking down the road to interactivity, custom projections, and thematic mapping, it’s best to roll our own. Luckily, getting the data in is pretty easy.

In ActionScript I would use Edwin van Rijkom’s ESRI SHP parser, my own E00 parser, or some simple custom methods I’ve written to load in KML documents. Tom Carden of Stamen has done some great work porting the AS3 SHP library to JavaScript, with additional classes and methods to allow basic layering, panning, and zooming.

Carden’s classes are great; for demo purposes, and to keep this as lightweight as possible, I’ve just written a quick JavaScript method to grab what I need from a KML document:

$.get( "data/kml/generalized_african_countries.kml", function( xml ) {
    var features = new Array();
    $( xml ).find( 'Placemark' ).each( function() {
        var rings = new Array();
        $( this ).find( 'outerBoundaryIs' ).each( function() {
            var ring = new Array();
            var coordsText = $( this ).find( 'coordinates' ).text();
            var coordStrings = coordsText.split( ' ' );
            for ( var coordText in coordStrings ) {
                var coordinate = new Array();
                var coordSplit = coordStrings[ coordText ].split( ',' );
                for ( var coordInd in coordSplit ) coordinate.push( Number( coordSplit[ coordInd ] ) );
                ring.push( coordinate );
            }
            rings.push( ring );
        } );
        features.push( rings );
    } );
       
    /* feature coordinates all loaded -- now do something with them */
       
} );
You’ll notice a bit of jQuery in there. And you’ll also notice that it grabs only coordinate data and works only for polygons. But it produces an array of feature coordinates, which is an array of ring coordinates, which is an array of lat/long coordinates, which is all we need for the current application.

Projecting geographic data
One of my biggest beefs with the typical online map providers is that they’re all rendered in a Mercator projection. No problem for most purposes (and great for producing those 90 degree road intersections), but not so great for country-level mapping and bad for many thematic mapping pursuits. That’s one reason we’re rolling our own here.

PROJ.4 is a generally sweet projections library, originally written in C by Gerald Evenden then of the USGS. It’s been ported to JavaScript as Proj4js. To use it you just have to define source and a dest objects:

Proj4js.defs[ 'albersEqualArea_Africa' ] = '+title= albers_AFR\
                                            +proj=aea\
                                            +lat_1=20\
                                            +lat_2=-23\
                                            +lat_0=0\
                                            +lon_0=25\
                                            +x_0=0\
                                            +y_0=0\
                                            +ellps=WGS84\
                                            +datum=WGS84\
                                            +units=m\
                                            +no_defs';
var source = new Proj4js.Proj( 'WGS:84' );
var dest = new Proj4js.Proj( 'albersEqualArea_Africa' );
And thereafter you can call

Proj4js.transform( source, dest, pt );
where pt is any object with x and y properties. So all coordinates gathered from the KML above can be run through the Proj4js.transform() method, in this case applying a custom Albers Equal Area projection (proj=aea) for the African continent.

Drawing geographic data on the canvas element
The results of the above can be easily rendered to HTML’s canvas element using JavaScript. I’m used to ActionScript’s Graphics class, and its assorted vector drawing methods. Of course, given the common ECMAScript heritage, the JS methods are nearly identical. So the projected linework is rendered thusly:

function drawPolygonFeatures( features, minX, maxX, minY, maxY )
{
    var c_canvas = document.getElementById( "map" );
    var context = c_canvas.getContext("2d");
    var multiFactor = Math.min( c_canvas.width / ( maxX - minX ), c_canvas.height / ( maxY - minY ) );
    var x = 0; var y = 0;
    for ( var featureNum in features ) {
        for ( var ringNum in features[ featureNum ] ) {
            var ring = features[ featureNum ][ ringNum ];
            context.moveTo( ( ring[ 0 ][ 0 ] - minX ) * multiFactor, c_canvas.height - ( ring[ 0 ][ 1 ] - minY ) * multiFactor );                  
            for ( var coordNum = 1; coordNum < ring.length; coordNum++ ) {
                x = ( ring[ coordNum ][ 0 ] - minX ) * multiFactor;
                y = c_canvas.height - ( ring[ coordNum ][ 1 ] - minY ) * multiFactor;
                context.lineTo( x, y );
            }
        }
    }
    context.shadowOffsetX = context.shadowOffsetY = 3;
    context.shadowBlur    = 4;
    context.shadowColor   = 'rgba(0, 0, 0, 0.5)';
    context.fillStyle = "#0099cc";
    context.fill();
    context.shadowOffsetX = context.shadowOffsetY = context.shadowBlur = 0;
    context.strokeStyle = "#fff";
    context.stroke();
}
That method’s made a bit longer by that bitchin’ drop shadow (sorry Firefox, but you Konqueror folks should be cool). See above, or the P.O.C. on a separate page.

Up next
So far this has been pretty sweet: we’ve loaded coordinate data dynamically, projected it, and drawn it to the canvas element. But it hasn’t exactly lived up to the “interactive” part of the title. Next time I hope to get going on panning and zooming, feature mouse-over, and perhaps even attribute loading and thematic mapping.

setting up a wireless access point with smoothwall

fix blue screens or Hive/HAL/INI/EXE/DLL-related stop errors from the recovery console

Having terminal text appear as if it were on your desktop, or as a transparent pop-up layer that shows other windows beneath it that can be stashed away and recalled with a single click is very handy in daily Gnome usage, where we need the terminal often,

I used this to load my Firewire/ieee1394 drivers. this let me use my external HDD via Firewire

Today we'll learn how to download a film, transcode it ready for DVD, create the file structure of a DVD, make a DVD ISO and burn the damn thing.

A slick script/GUI for installing many of the most neeeded software on Ubuntu. Amazing.

My LHMC would have to interface with my existing home configuration via a wireless network with WPA security enabled and output to my television's S-Video or composite inputs, and it would have to connect to my media server via NFS.

A full and complete-looking set of HowTos for Breezy (5.10)

Long time readers (pun intended) might recall me posting a link to a myth-tv howto. Well, there’s one more of the same kind.

HOWTO set up a mysql cluster for two servers

Build a low-cost, terabyte-sized backup server using Linux and back up your digital audio files, digital images and digital movie recordings.

Create your own how-tos and instructions

oh man this is awesome

Create a one-click button for a remote VNC display

Great site dedicated to howtos and step by step instructions for software configurations