Activity zones for touch devices.

Thanks Dan!

This was posted a couple of weeks ago on RWW - I know old, but I’m still doing my post Xmas feeds catch-up.

Again as with a lot of Kinect work I’m loving the potential here even though it’s only really at alpha stage – full body control of off the shelf games for PC. Now I just need to find that room in my house dedicated to gaming with 360 scene wall projection and I’ll be happy

The Kinect work (I hesitate to call them hacks because they are projects in their own right) as well as the video is produced by USC and there’s a good technical wrap up at the end of the video.

Maybe it was the coffee talking but I nearly went hoarse screaming with joy at this.

Some background: many years ago now I researched an alternative to mouse input to defer future arm and hand injuries from mouse over-usage. A friend and I went halves in this little known device called a FingerWorks iGesture Pad. It took a little while to memorise and practice the gestures (over 20) but it completely eliminated my mouse usage and a significant portion of my keyboard shortcuts. Mouse gone, locked in a draw. I love it with the passion of a thousand suns and have continued to use it over the last few years only recently switching to pen tablets which allow me to be more accurate and natural with artwork.

FingerWorks dropped off the radar in 2005 when they were bought by Apple and while the site stayed live for quite some time it was cut last year as Apple moved to start releasing more of the tech as seen on this post at TiPd. All the while I’m sweating that my iGesture pad would die and there would be no way to get a replacement.

Cut to a slo-mo of the last six years as I’ve painfully watched the best technology in the world be incrementally released to a populace being taught the ways of good gesture usage as Apple gradually made the size of the trackpads bigger and bigger and bigger until… you can buy one separately in the shape of the Magic Trackpad.

And now with the biggest multi-touch track pad of all, the iPad the geniuses at m3me  have created a link app that allows the iPad to fill the shoes of the iGesture Pad. Well they’re little feet and big shoes but there’s room to grow

And I’m watching intently.

I’ve been absolutely blown away by the sheer amount of Kinect based development that the wider community have been putting together since the Kinect’s release late last year.

The video above is one of the most in depth ‘next gen UI’ projects I’ve seen working. Comments on upper body strength reserved until I’ve seen it used in practice for some every day tasks though.

I love the distributed processing and knowledge of the community all crunching away on every aspect of the Kinect’s potential – gives me shivers.

Gonna get myself some action on it very shortly! … or at least add it to my list of things to do :/

Arduino The Documentary (2010) English HD from gnd on Vimeo.

While not a practising electronics guy I get very excited by the capabilities of Arduino and how I can combine my interactive knowledge into hardware form using programming in Processing, the Arduino base board and the massive array of sensors available for it right now.

This docco gives really good insight into how the open source electronics kit that’s merging interactive design and electronics all started.

Find out more at the official Arduino site or its Wikipedia entry.

It is with a fresh new view that I look out on the new year.  I decided to make some pretty firm and sweeping changes at the end of last year to my approach to the terrain of ideas that pans through my head daily.

Effectively, I need to get on and do them before they drive me mad

To do this I need space and skills and time and, having the first two, I needed to make sure I’d got a plan to get the third one lined up.  So freelancing in Interactive Design is where I’ve chosen to push in order to allow me the freedom to start realising some of these scribbles and ghosts of ideas.

I’ve thoroughly enjoyed working at Metia for the last nearly three years and it wasn’t an easy decision. I have also run my own business many years ago and I’m happy to take on the challenge of finding and managing paid work around the extra fun of managing and building my own projects.

Part of the New Year’s Resolution then (if you must have one) is to update my blog a lot more and with the new template I’ve got in place I want to start to highlight some of the awesome videos I find around that have really blown me away lately.

So with that said, a very happy new year to you all and looking forward to catching you in 2011.

Dean

But first let’s set this baby up.

Right now I’m not using it with a sim card just on WiFi but that’s fine right now.

I have two Windows Live accounts. One is quite old that I created when I first got Messenger way back when. This account contains all my Messenger contacts and history and while it’s associated with a Hotmail account I don’t use Hotmail at all – I’m a long time Gmail user.

Another Messenger account I created more recently was to log into the ‘Games for Windows Live’ service in order to buy points for Fallout 3 expansions. Going through the process to acquire those addons was the single most frustrating experience of my life which as a user experience designer nearly turned my hair grey and could easily take up three blog posts all by itself.
At least it was the most frustrating experience until today.

So my problem begins with wanting to use my old Windows Live account on phone 7 to import all my contacts, which adds them to the phone; no problem. So far so good. I then try to log into Zune with it. Nope. Computer says no. Apparently my old Windows live profile is geo-located to Australia. Even though the profile itself has all its possible location fields set to the UK. So when I attempt to log into Zune it now says that the profile’s region doesn’t match that of the pc on which Zune is installed and that I should just ‘change my pc’s region setting’. I really shouldn’t have to do that.

Ok so then I log into Zune with my newer Windows Live account. Not a problem, it was created in the UK so it’s off and running no problem and I can attach a credit card to it etc etc. Done. Fine. No probs.

Then I try to download an app from the Marketplace. Which while I’m logged into Zune with my UK Windows Live account wants me to sign in again with the Windows Live account I have entered on my phone as it’s device specific. Ok. Seriously, if I have to. Which when I do throws up the region mismatch error. No app downloady for me.

So I can log in to Zune with my new Windows Live ID successfully and I can add my old Windows Live ID onto my phone and import the contacts successfully but I can’t buy apps through Zune because of the region mismatch.

OK. Fine. I’ll delete the Windows Live profile off my phone.

Uh-uh. There’s no deleting Windows Live profiles. At least nothing I’ve found on the phone will let me do that.

Sigh. So I reset my phone and only enter my newer Windows Live ID which is UK specific. I’ll figure out a way to pull those contacts through later – maybe it adds it as a secondary account on the phone and Zune will ignore it.

Reset the phone, add my newer Windows Live ID.

Except I run into another problem. My newer Windows Live ID uses my Gmail address and not Hotmail. This is seemingly not really an issue until you add it as a Windows Phone 7 account because the phone automatically wants to sync that account to the server m.hotmail.com. Busted.

So I enter the mail.google.com address. Nope – Gmail doesn’t register as an exchange server. So now the account permanently requires attention – not a biggie but I can’t resolve it.

However, most importantly, now Zune will now let me buy apps. Also adding the older Windows Live account after the newer one seems fine and Zune happily uses the newer UK specific one and ignores the older Australian specific one as it was entered second. Finally.

So in summary:

• Region settings of Windows Live ID’s conflict with those of the PC you connect Zune to
• You can’t delete or most importantly set which Windows Live ID account is the primary account after you enter them
• Using a Windows Live ID with any email service that isn’t exchange compatible is fraught and unexpected behavior

After all this it’s now set up and working but it took way longer than it should have and the neighbours now think I have Tourettes.

The Phone 7 interface is lovely and minimalistic I really don’t mean to tear it apart as 99% of people won’t have the circuitous route that I took but it does point to some assumptions that have been made that my use case didn’t fit into.  Phone 7 persons please take note of my plight so that others needent suffer

A plugin-free rich interaction showcase for the IE9 beta launch, surprisingly.

Just over two months ago Metia had an opportunity and set ourselves the task of developing some sort of idea that could become part of the IE9 beta showcase launched in London and San Francisco this very eve. The what, where, why and most importantly how were entirely unknown, the risks were high and the time-frame quite short. A fairly standard project to sink our teeth into then obviously

Having just looked very lightly at HTML5 for TrainHound, and seeing the substantial list of canvas and video tag demoes that early adopters were putting out, we were confident that we could get something interesting out but honestly couldn’t have predicted at that point just what we achieved.

The showcase itself is a standalone microsite for Rough Guides that mixes flickr imagery with selected travel experience content from Rough Guides’ new second edition release Make The Most Of Your Time On Earth. The mixer for these two pieces of content is where HTML5 comes in. Using a canvas tag, which is an area of the page you have the ability to draw into via code, we show a 2d world map created entirely from photos sourced from Flickr and Rough Guides. The world map is interactive, so you can drag it around and zoom in up to 5x to view more and more imagery. Each of the images that you see are geo-located meaning you’re seeing photos in the areas of the world in which they are taken. Using the canvas tag means we can constantly re-render this area to become a map that is geo-located based on Mercator projection that uses images from Flickr and Rough Guides and then performs effects and animation on it to give a really smooth feel.

Flickr
That’s all well and good but the photo tiles are kinda small so clicking on each tile does a quick Flickr search to check if there are more images and presents a card showing the co-ordinates and an approximated name for the tile area along with a link to view a full photo gallery of photos sourced from Flickr from that area. In testing I lost count of the number of times I got seriously engrossed in various photo sets from around the world. Very cool.

On that note, photos we source from Flickr need to go through a few hoops to make sure we’re only using photos that people allow us to use. The photos have to be available to view publicly, they need to be geo-located and most importantly they need to have their creative commons license set to either Attribution or Attribution-Sharealike. I was fairly confident that we’d still have a reasonable number left over after all those requirements but it was still a happy surprise to find out it wasn’t 25. There’s around several million left out of a possible 117 million photos on Flickr as of today

So with this pool of awesome photos we not only show grouped images from locations on tiles and in galleries but we also allow searching for keywords and through Flickr user accounts too. All while still observing our sharing requirements of course.

SVG
SVG has been around for a while now and there have been some interesting vector demos more recently but I’ve never had a need for a proper hands-on. After an initial test we decided to use SVG in the showcase for the Rough Guides experience cards, the Flickr location cards and our ‘add images’ instruction card. Initially we’d planned on using SVG in a slightly different manner however our timeframe, workflow and javascript responsiveness ended up limiting us somewhat. In the end it’s raison d’etre is primarily from a visual design POV so that we can have dynamic rotated card objects which aren’t in the current IE9 implementation of CSS3. But I have to say that despite this it renders crisply and even with a boatload of dynamic content initialisation logic and then jQuery animation on the containing element it’s nice and fast. From a workflow POV I’d want to find a few more pieces of software that allow a designer/developer production ecosystem before I seriously look in that direction again. Unless we generate the whole SVG dom dynamically of course

WOFF fonts
After the canvas tag the designer in me is next most excited about the push forward in web fonts. To use a font you’ve paid for in a protected capacity on the web and as pure HTML without having to rely on loads of script or a 3rd party service is really nice. I know there’s been plenty of font solutions around for a while but to just reference one in your CSS and have work across your HTML and SVG is just nice. I’ve used the Google Font API on another personal project recently and it was really simple but you’re still limited to the fonts they have in their library.

jQuery
Something I’ve never really thrown myself at is javascript. I’ve done heaps of ActionScript, quite a bit of C# and read through countless JS code but something always spooked me a bit on actually using it. Glad I’m over that because more than ever javascript is becoming essential if you’re trying to achieve rich interaction with the growing amount of new HTML toys to manipulate. We used jQuery as a starting point for property manipulation and it was absolutely essential – it shortened our dev times and meant that everyone could add a bit of finesse to the elements they worked on. Nested jQuery events meant that we could get some really nice lengthy animations out that tied quite a few elements and screen views together as well. We did experiment with a few jQuery plugins as well, some worked, some didn’t but my favourite by far was the bezier path plugin. Gave our animations an extra shot in the arm – curved path animations FTW!

In the coming days I’d like to update with general usage and feedback and also how the launch was generally received. I suspect there’s going to be all sorts of conversations around HTML5 and browsers in the next few weeks. Not really much of a prediction I know but fun nonetheless.

Dean

Recently we at Metia Labs, have been introducing ourselves to HTML5 and the current crop of both browser support and levels of that support.  We’d also been looking at doing something  useful with data feeds and came up with an excellent contender of an idea for a proof-of-concept project.

I like my smart-phone, in my case an iPhone, in other’s cases here at work, Android, additionally I catch the train into central London for work everyday. How cool would it be to have access to National Rail’s departure boards on my phone? Not a full journey planner but something nice and simple, I want to see the boards for the station I’m at or about to be at. Then we struck a very important point: the iPhone’s implementation of the current HTML5 standard includes native geolocation. Meaning in short that via an HTML app I can reach out to the phone’s geolocation service.  How well would that work we wondered?

In essence then not only could I get a particular station’s departure board but also get the departure boards for the station I’m at right now and the stations nearby effectively doing a proximity search and making validated filtering assumptions thereby making the information instantly more useful… if it was correct

Well a week’s worth of work and a couple of weeks of iteration and testing and we have a beta launch candidate! We’ve named the beta TrainHound and it does a fairly good job on an iPhone (OS 2.~ and later) or Android 2.0+ as well as Chrome on the desktop.

So without further ado here it is!

www.metia.com/labs/trainhound

Currently it has a basic feature set but it’s a set that we’re really happy with. If you’ve given the site access to your geolocation it will go off and identify the top 10 closest stations to you in order of nearest to furtherest . You can also do a search for any UK station and the site also keeps track of your last 10 viewed stations. When you select a station it will show you the departures for that station in a scrollable list. You can swap the list view between departures from the station and arrivals to the station as well as viewing a simpler information view by toggling the service operator name with the ‘less info’ button. Then you can click any of the rows in the table to view the stations called at and time estimates with navigation to get you back to previous pages.

Additionally from the main stations select screen you can refresh your geolocation and from the station screen you can refresh the departure board.

I can say that this webapp has already come in handy for me several times now as well as others on the team. Specifically when down in Brighton recently and heading back to the station up the hill checked to see if we’d make the service in time. We wouldn’t have made the train in the 6 minutes we had to spare so a quick pint at the pub we happened to be checking outside of was in order; much better than waiting at the station for 25 minutes!

Also when individual stations’ board display systems go down the data feed is still updated and so having your own access really helps.

Lastly the iPhone specific Meta tagging Apple’s pushed out is quite cool, allows us to use a custom splash screen and also remove the browser chrome when you run the page as a link from your home screen. HINT: I didn’t actually know about creating shortcuts to sites as a home screen link which you do via the + button on the bottom of the safari toolbar. A few iPhone features I’ve found out about lately that seemingly aren’t common knowledge…

All in all I’m really impressed not only with HTML5′s scope in general but also Apple’s support of HTML5 on the iPhone which after reviewing test scores through www.html5test.com apparently outscores the most recent release of Safari for Windows.

So a very positive outcome for future web app possibility; go, use it and let us know what you think and how you use it.

/D

Given that this is my first trip to the US and I’ve started in Seattle, I keep getting told that the comparison between the two cities will be vast. And then people laugh

I’m already looking forward to the Windows Phone 7 announcements which have my brain on overload already. Silverlight 4 and as much designer/dev and best practice talks as I can wrap my mind around will be top of the list. Dying to put some faces to names on the Expressions team and the Silverlight community bloggers as well.

I’ll be there with quite a few other people from our company including Gavin Wignall from Silverlightbuzz.com which will be great.

Looking forward to meeting everyone!