TouchSmart 1, aka SmartCenter, aka LaunchPad (January 2007)

The first version of TouchSmart was not called that. It was named SmartCenter and shipped with the very first modern all-in-one touch-enabled PC, the HP TouchSmart IQ770.

This machine was one of the so-called “Dream PCs” for Microsoft’s introduction of Windows Vista in January of 2007. I’ve written about this version of SmartCenter before, so I won’t repeat much of that here.

Touch-first [+Win8]

Of course, the main point of even embarking on a project such as the SmartCenter software was that Windows wasn’t even remotely ready for touch interactions. Every app on the Windows Desktop requires the precision that the mouse pointer provides. Fingers and touch can’t hit the tiny controls accurately enough. So SmartCenter was designed with that in mind, and as a result had large targets all throughout its user interface. Here are some sample screenshots:

Note that all buttons, checkboxes, radio buttons, scrollbars, etc. are large enough to be easily tapped with a finger. Note also that, for example, the on-screen keyboard that is used for entering a ZIP code in the Weather app defaults to the correct layout, i.e. the numeric one.

Live app data in shortcuts [+Win8]

This idea wasn’t really all that new, of course. Snippets of live app data displayed in a mini-view of sorts had been introduced with Windows Sidebar gadgets and other widget-like UIs on other operating systems, but SmartCenter was the first to use live data as part of the shortcut that launches an app. You could say the shortcuts were more like mini-versions of the full app. Live data is of course hard to demo with screenshots, so here is a small video clip of the SmartCenter home screen (or start screen, if you will), showing shortcuts that update their information as time passes:

This major version of the SmartCenter software was delivered with four total releases: 1.0, 1.1, 1.2, and 1.4. Towards the final delivery of version 1.0, it became clear that a standardized way of getting the live information from the apps was needed. This became a major area of investigation and investment for the next major version of the software.

TouchSmart 2 (June 2008)

The second generation of TouchSmart software, 2.x, was introduced with IQ500/IQ800 series hardware. These two hardware models marked the beginning of the monitor-like appearance of the TouchSmart PCs. The IQ770 was a “multi-volume” chassis – these new models had a “single volume” design, supported by the “easel” style feet that were used in the follow-on generation as well.

The 2.x series of software was released in three versions: 2.0, 2.5 and 2.8.

Fixed layouts for apps [+Win8]

With SmartCenter 2.0, we introduced the concept of fixed sized layouts for the TouchSmart apps. We initially picked three: small, medium and large. You can see two of the three illustrated by this screenshot:

The Tutorials, Canvas and Calendar apps are shown in medium size, while the remaining apps are shown in small size. By tapping on an app, you would go to the large size:

This layout is purposely not called full screen, since there is a reserved area at the top of the screen for navigation, app name/time and music playback controls.

Tiles concept [+Win8]

In order to make it clear that the app representations in SmartCenter were not just icons, we decided to call them tiles, or rather “live tiles.” This term was used in the developer documentation that was produced to help other people plug their apps into SmartCenter, and so we had “small tiles,” “medium tiles” and “large tiles.” For each tile size we gave guidance about how to use it appropriately. We introduced the term “layouts” to suggest that each tile size should use a different layout of basically the same content or information. As you notice from the screenshots above, when the Weather tile is small, it shows only basic information. In the large tile, the information is more full-featured and also provides access to settings for the Weather app. The medium tile for Weather looks like this:

As you can see, this layout for Weather includes only the current conditions and the forecast for the day.

With TouchSmart 2.0, a big investment was made to produce media consumption applications: Music, Video and Photo (often shortened to “MVP”) as well as a WebCam and DVD app. The screenshot above shows other apps that were published later (Netflix and Recipe Box, for example), but that just goes to show that following development guidelines has benefits: newer apps can work with older SmartCenter versions…

Other changes from the 1.0 version include the top and bottom row of “tile scrollers” and the music playback control set (aka. “media plate”) that I already mentioned. The tile scrollers had two different behaviors, depending on how full they were. If enough tiles were present, the scroller would become an infinitely looping container. If not enough tiles were present, it would have “snap-to” endpoints.

The TouchSmart 2.0 software was unveiled at a big press event in Berlin, Germany. Several of my colleagues were invited to attend to make sure everything went smoothly from a technical perspective. The most nerve-wracking part was that the TouchSmart IQ500 was to come out of a pedestal on stage after sitting inside said pedestal for an extended period of time before its unveiling. People were not sure the thermals were designed to handle as little exchange of air as this posed. Here’s a video from the introduction to give you a better idea of what I’m talking about (skip towards 1:18 or so to see the pedestal and the TouchSmart lifting out of it):

As you can see, everything worked out pretty well. This was the biggest introduction ever made for a TouchSmart PC line. No event after that had that much effort put into it.

TouchSmart 3 (October 2009)

With the third generation of SmartCenter, we piggybacked onto the 600/300 series of hardware. The enclosures still used the easel stand design with three feet for support, and the exterior was tweaked a bit along with the screen aspect ratio (now 16:9 instead of 16:10).

Generally, though the concept was largely the same, except for the software. A big investment was made to produce more apps for the TouchSmart software suite, and this brought us apps like Canvas, Twitter, Hulu, Live TV, Link, Movie Store, Recipe Box and a bunch of others. The TouchSmart software development guidelines were augmented with more of a proper SDK with app samples, installer samples and more guidance.

New layout

SmartCenter 3.0 introduced another layout that we called wide-interactive. You see, in SmartCenter 2.x there was no way to interact with the medium sized tiles in the upper tile scroller (except for in the browser, but that’s a small detail). In this version we wanted to provide interaction with the app in the upper scroller. In order to do that properly we needed a bigger size tile and a new layout to have enough space for interaction to make sense. Here’s a screenshot of 3.0 (running on a 16:10 screen, not the aspect ratio it was designed for – so circular elements are “squished”):

In SmartCenter 3.0 the touch scrollers no longer “looped” infinitely, but each had a “snap to” end regardless of how many tiles were present; each wide-interactive tile was given a colored title bar to add a little splash of variety and visual interest. In addition, the “media plate” and other control elements on the home screen were redesigned to appear a bit lighter than before. Also, standard button glyphs were introduced for closing and minimizing SmartCenter. Oh, and the clock was moved around and given a day of the week display. Phew – at least the Personalize button stayed almost in place…

The final big change was that tiles in the bottom scroller no longer used the small layout. They were simply icons to launch the app into large layout directly. This was done to improve performance and load less stuff at the startup of SmartCenter.

TouchSmart 4 (September 2010)

Okay, so here we are, almost at the last chapter of this brief history (which is turning out not so brief after all…) TouchSmart 4.0 was introduced with the TouchSmart 310 (and 610) series of hardware. These departed from the easel-type stand and went to a single-foot design (I know there’s a better term for it, I just can’t think of it at the moment).

TouchSmart 4 didn’t see much investment in new apps, but focused on new capabilities provided by the SmartCenter framework.

Infinite Canvas [+Win8, sort of, on the Metro Start screen]

A major goal of the SmartCenter framework software had been to provide an almost limitless space for apps to live in. With SmartCenter 4.0 that goal was finally realized. Not only did the framework provide for an infinitely expanding space for hosted apps to live in, it also did away with the upper tile scroller and let the apps be positioned freely on the canvas. This is what TouchSmart 4.0 looks like after initial startup:

And once again, things were moved around on screen: The clock from lower left to lower right (and it was given a function: click to show a mini-calendar), personalize from lower right to lower left (and the word personalize removed). The “media plate” music playback controls were removed and put into the music app instead. The volume control was separated out from the media plate and put in the upper left. The bottom carousel was redesigned and had the infinite looping re-introduced (to allow for a bit of visual and interactive playfulness). Tapping a tile launches the corresponding app:

Apps can be moved around freely and the carousel shows a colored highlight for each running app:

If you look at the above shot closely, you’ll notice the Weather app in what looks like another layout. What’s happening there is not a new layout, though. It’s simply the wide-interactive layout, shrunk down to an “inactive” size. Thus we called it “shrunk layout” or “shrunk view”.

The button next to personalize in the lower left can be used if the app you’re looking for in the carousel is hard to find: QuickLaunch is sorted alphabetically:

Parallax background [+Win8, sort of, on the Metro Start screen]

Scrolling the canvas (or panning it, if you prefer) is done by grabbing empty space (with mouse or touch) and moving from side to side. To add a little visual interest to this, and to demonstrate the departure from the 3.0 tile scrollers, we added a parallax effect to the background to give you the illusion of looking into the distance on your screen. Several sets of parallax backgrounds were developed for variety’s sake, to be picked in the personalize area.

Magnets

Another major feature of SmartCenter 4.0 was the introduction of something we called “magnets”. These represent active content that originally came either from an app or from SmartCenter itself (in the case of Graffiti magnets). Magnets eliminate the need to start an app when you want to enjoy a favorite piece of content, be it a photo, video or some music you want to keep handy for quick enjoyment. Here are a few magnets placed on the canvas (they can be “pinned” so they always stay visible or “unpinned” to scroll with the canvas):

Here’s what it looks like after panning a bit (while playing the fireplace video):

You can see the pinned magnets haven’t moved and the background looks slightly different (the islands have moved at different paces to give the illusion of depth as they’re moving).

Okay, let’s see what it looks like in action:

TouchSmart 5 (September 2011)

And that brings us to the latest generation of SmartCenter (as of this date), i.e. 5.0. This version of the TouchSmart framework software was brought to market with the just recently introduced 520/420/320 series of TouchSmart PCs. The exterior of the machines has been updated once more to keep up with design trends, but otherwise the single-volume enclosure is still the chosen form.

Integration of Windows apps, desktop icons

The biggest change in SmartCenter 5.0 regards the blending of the two environments that were previously separated: SmartCenter and the Windows Desktop. This means you no longer need to exit the SmartCenter environment when you want to run Windows apps. Here’s a screenshot of SmartCenter 5.0:

Note that the Windows 7 taskbar is fully visible and that you can use it for launching apps and seeing what apps are running. The SmartCenter app carousel now has the icon highlight turned on permanently and only shows a short animated starburst as an app is launched. You also see all your desktop icons represented on the SmartCenter canvas. As you can see, the magnets overlap the desktop icons, which can be a bit of a clutter issue. No worries, you can turn off the desktop icons via Settings, if you don’t like them on the canvas. Or you can rearrange your magnets so they occupy different space:

In general, SmartCenter 5.0 attempts to bring the touch-first environment of past generations together with the traditional, mouse-centric desktop. That’s a value-proposition you don’t have in Windows 8, which is most likely not available until sometime in late 2012 anyway…

Automatic panning/scrolling

One additional thing SmartCenter 5.0 does is automatic panning of the canvas/desktop whenever an app is launched. This removes the need for you to have to rearrange app windows frequently when you want to switch from one app to another. The canvas pans automatically to make more room for every app you start. To return to an app, you just click on it in the taskbar or the app carousel. Another video might explain it a bit better:

This behavior can be turned off in Settings as well, in case it’s not useful to you. There are many, many areas that I haven’t touched on in this post, such as all the personalization and customization aspects that SmartCenter contains and how they changed over time. Or the fact that you can make your own parallax backgrounds (not documented anywhere, unfortunately, but pretty easy to figure out for enterprising souls). Or the easter eggs, oh yes…

Let me make some general remarks about the last four generations of SmartCenter: Any apps written to observe the guidelines of SmartCenter 2.0 are able to run on SmartCenter 2.0 through 5.0. A nice compatibility feature. Of course, older versions of apps needed updates as new SmartCenter functionality was introduced (or removed, as with the media plate removal in 4.0), but as you’ve seen, the Netflix app (which was published with SmartCenter 3.0) runs just fine in SmartCenter 2.0 and 5.0 as well. What’s more, if you know what you’re doing, you can have all the versions of SmartCenter 2.0 – 5.0 running on the same system. That’s how I was able to collect screenshots and videos for this post. Oh, and the technology underlying all these versions of SmartCenter is Microsoft’s Windows Presentation Foundation (WPF), 3.0, 3.5, and 4.0. The various apps were written in anything from compiled-to-native-code-Python to WPF to Adobe Flash. The software development process used since about SmartCenter 2.5 is anchored in Scrum, an Agile software development framework.

This concludes my brief history of the TouchSmart software. As you have seen, Windows 8 definitely picked up a lot of the features that the SmartCenter framework pioneered: Live tiles, fixed layout sizes for apps, parallax scrolling with an expandable space and touch-first design. Until Windows 8 is available, the TouchSmart 5.0 software suite is most likely the best alternative for touch – combined with new thinking on how to add something more to the the desktop environment – that you’ll find on an all-in-one PC anywhere.

If you see me at PDC, say hi, and I may be able to hand you one of these puppies. I only have a limited supply, though. 15 to be precise.

Check out the pictures:

Front of the card

Back of the card

Back of the card with USB memory stick flipped open/out

Front of the card with USB memory stick flipped open/out

Today HP is announcing a new Software Development Kit for helping you write apps that play well in the HP TouchSmart “shell” environment. The new SDK still contains the general guidelines that outline both what makes a good app that’s optimized for touch interaction and the general rules you have to play by in order to “fit” into the HP TouchSmart shell.

But this time around there’s more: For the first time there is also documentation for a WPF library that you can use to more quickly write an app that heeds all of the rules that need to be followed. This library has actually existed for a few releases already, but it was not documented until now (for HP TouchSmart 3.0).

There are also two sample applications. One that demonstrates the basics of the WPF library (and that shows you what the shell does to the apps on a pretty detailed level – it’s great for seeing what registered messages are sent to the app, how the app gets sized, etc.) and one that’s a little game. To round out things, there’s some skeleton sample app code as well, so you can get started quickly with your app idea.

Here are a few screenshots of the two sample apps:

“Hello world” Wide-interactive tile

“Hello world” Large tile

Notification with CircleX icon

Notification with CircleCheck icon

“Hello Mole” Wide-interactive tile

The documentation is provided in two forms: PDF for easy printing and reading offline as well as in Windows Help format for easy searching and looking at class library details.

You’ll notice that most of this only applies to WPF development. If you’re not using WPF yet (why aren’t you? – it’s a great platform), the general guidelines still apply and work. The shell is actually technology agnostic, since all it cares about, really, is the window (handle) your app produces. As long as your technology stack produces a Win32 window, you can “play”. The essence of that is something I’ve talked about before.

So where can you get this newfangled contraption? Head right over to http://www.touchsmartdevzone.com/download/file/2074-27 to start downloading. There’s still a license agreement in the installer (to make the lawyers happy), but I believe you can now download the thing without having to consent to the agreement first.

PCMag.com:

This third-generation TouchSmart PC is boosted by Windows 7′s gesture support, but HP’s custom multitouch software is even more impressive.

But as with the earlier models, on the TouchSmart 600 it’s HP’s custom software that really shines. Version 3.0 is a significant upgrade, offering touch-friendly versions of Hulu, Netflix, Twitter […]

And the HP apps now multitask, letting you hop back and forth by sliding them around with a fingertip. The interface is responsive, and is the benchmark for upcoming Windows 7 all-in-one PCs from Acer, Asus, Dell, Gateway, and MSI.

 Engadget:

[…], but more important is what HP is doing with its own TouchSmart application. It’s added panes for Hulu, Netflix, Twitter and an HP Music Store powered by Rhapsody, which work in nicely with the rest of the touch-friendly apps onboard and a bit of underlying Microsoft technology keeping things humming — like a nice big handwriting pane for quick Rhapsody searches. There’s also a voice controlled recipe app that can capture recipes from popular recipe sites and read them out loud to you, and the photo app can hook up with a phone over Bluetooth and pull off photos.

Gizmodo:

But to really take advantage of the system, you’ll want to use the TouchSmart interface and the wonderful, custom apps.

The one downfall here is that HP has designed TouchSmart to run all of the bundled apps at once. You’re truly multitasking, and that means stacking HDTV, Hulu, Netflix, photo editing, a browser, Twitter, and even more video playback. The system generally handles itself admirably, but the TV tuning definitely tips the scales on occasion (just watch the video for interface stutters). If I were to use the system as my DVR on a regular basis, I’d probably cut down the fat on HP’s apps and buy myself some resources.

I want to love the TouchSmart 600, but I just really, really like it a lot. The functionality is all there; no one can question the full media suite of apps, like Netflix, Hulu, and Twitter, let alone the full Windows 7 OS sitting right behind HP’s optional software. It’s the light performance hiccups coupled with a less than 100% touch interface that stop me from screaming at the top of my lungs, "YOU SHOULD BUY THIS RIGHT NOW OR GIVE UP ON LIFE COMPLETELY."

CNet.com:

While HP has clearly borrowed from Sony in its wall-mounting and video input capabilities, the software designed for its touch interface is unique and just as compelling.

As promising as we find HP’s new touch programs, Recipe Box in particular, we found the touch interface unresponsive at times, and the main touch software carousel can be slow to load.

Neither Sony nor Gateway have put as much effort into their respective touch software as HP has.

You might also appreciate the numerous video tutorials included with the system to help you navigate the new touch software.

Howtohackstuff.com:

HP continues to put its TouchSmart user interface on top of Windows 7 and it is one of the best I have seen. The new stuff comes in the way of applications; there are now loads of new third party applications, including Hulu, Twitter and Netflix. The interface is as smooth as a baby’s bottom and the main set of tiles fan across the screen and you can easily flick to toggle them. Again, check out the full review of the TouchSmart 600 to get a glimpse of how it really works. HP may just have a method to its touch madness.

Laptopmag.com:

Not only is the touch interface on the refreshed tx2 much better than anything else we’ve used on a notebook, HP is adding cool new apps like Twitter and Hulu, with more to come.

What makes the “new” tx2 stand out is what it does with touch.

Unlike the very limited MediaSmart software HP bundled previously, this machine has HP’s full TouchSmart treatment, which means it has the same slick tile interface and nearly all the same applications. These include photos, music, weather, notes, games, a touch-friendly Web browser, and more. Just like on the desktop, you can move smaller menu items to the main menu by dragging the tiles up, or vice versa.

ChipChick.com:

HP has released two new TouchSmart All-in-one PCs and these latest models come preloaded with an  impressive, and very much improved upon set of built-for-touch applications.

GottaBeMobile.com:

HP’s new all-in-one TouchSmart PCs come with an improved touch interface and some new apps. I really like Recipe Box, an application that organizes all of your online recipes. The application can be controlled with your fingers or through a Bluetooth headset. I rarely cook, but I’d probably be willing to spend more time in the kitchen if I had something like this.

The new TouchSmart PCs have a touch interface that’s a lot more lively than previous versions.

The new TouchSmart PCs come with touch applications for Hulu, Netflix and Twitter. Consumers may have fun with these applications, but I found the business applications HP had on display much more compelling.

Edit [adding more stuff just because]:

CrunchGear:

I will hand it to HP and Sony: their interfaces are gorgeous. The HP interface I saw last week has a number of simple tools – a recipe box, for example, that can take recipes from the web and import them into a private database – as well as the standard stretch’n’drag photo and note-taking applications that make touch actually compelling.

I’m sure there will be more, and there will be more criticism too. Developing software is always about trade-offs, and sometimes customers want other trade-offs to be made; that’s why software is never “done”.

But these first few reviews make me feel it was worth the time, working on the TouchSmart software. And yes, the “shell” that hosts all the various applications is still written in WPF. WPF rocks!

And let me tell you, it’s a big mess! To illustrate, let me use the WIC query notation for metadata that Microsoft uses and list which program uses what locations to store “caption” (and “select” other) information:

Adobe Photoshop Elements 6.0 Organizer
/app1/ifd/{uint=270}
/xmp/dc:description/x-default
/app13/irb/8bimiptc/iptc/Caption

Windows Live Photo Gallery 12.0.1347.718
/xmp/dc:title/x-default

Google Picasa 3.1.0 (build 70.71, 0)
/app13/irb/8bimiptc/iptc/Caption

Microsoft Pro Photo Tools 1.0
Title
/app1/ifd/{uint=270}
/xmp/dc:title/x-default
/app13/irb/8bimiptc/iptc/Object Name

Headline
/xmp/dc:description/x-default
/app13/irb/8bimiptc/iptc/Caption

Adobe Photoshop 7.0.1
Caption
/app1/ifd/{uint=270}
/xmp/dc:description/x-default
/app13/irb/8bimiptc/iptc/Caption

Title
/xmp/dc:title/x-default
/app13/irb/8bimiptc/iptc/Object Name

I actually used Simple Photo Tagger to discover these differences, since it will query most of the above locations and display any that have data “in them”. The ones that don’t have data, will not be shown.

So if you want to make sure that no matter which tool you use to work on your digital photos, they will pick up your caption properly, use Simple Photo Tagger. It will make sure to write your caption to as many locations as the various other tools out there seem to use.

I’ve been looking for a program that will help me work through commenting on thousands of my digital photos. I haven’t found anything that’s focused solely on this one task that I consider essential for adding value to my collection. So, like any developer not finding what he/she wants, I rolled my own.

I’m making the result available to you, in case you’re interested. It’s written in WPF 3.5 SP1, in case you’re curious about such details. I’m looking for testers and feedback, so for a while I’ll waive the nominal charge for a license key.

So far, a search on Google has yielded few usable results. I hope this post will change that, yielding at least one useful thing.

The Exception message tells you that you’re trying to write data to a property that doesn’t exist in the file. Microsoft has a tool called WICExplorer that can show you the metadata like this:

The above shows an image in WICExplorer directly after coming off of my digital camera. Notice that there is no “XMP Reader” node, which would represent XMP metadata. So if you want to put new XMP metadata into the picture, you need to know two things: how to create a new metadata node and what the correct syntax is for doing so.

What helped me figure those two things out were these pages:

http://social.msdn.microsoft.com/forums/en-US/wpf/thread/8f297b11-99ba-459c-b085-1ff3ae526487/

http://msdn.microsoft.com/en-us/library/bb643802.aspx

The first one showed how one can create new metadata objects using WIC, the second showed the needed syntax for some of the queries.

So here’s an example of how to create XMP metadata in an image that doesn’t have XMP metadata embedded yet:

   1: string file = "C:\Temp\IMG_1687.JPG";

   2: BitmapCreateOptions createOptions = BitmapCreateOptions.PreservePixelFormat | BitmapCreateOptions.IgnoreColorProfile;

   3: Stream originalFile = File.Open(file, FileMode.Open, FileAccess.ReadWrite)

   4: BitmapDecoder original = BitmapDecoder.Create(originalFile, createOptions, BitmapCacheOption.None);

   5: BitmapMetadata metadata = original.Frames[0].Metadata.Clone() as BitmapMetadata;

   6:  

   7: string q = "/xmp/exif:UserComment/x-default";

   8: if (metadata.ContainsQuery(q))

   9: {

  10:   metadata.SetQuery(q, comment);

  11: }

  12: else

  13: {

  14:   metadata.SetQuery("/xmp/exif:UserComment", new BitmapMetadata("xmpalt"));

  15:   metadata.SetQuery(q, comment);

  16: }

The keys are in line 7, where the initial metadata query is shown and in line 8, where the code tests if the metadata is already present. If not, line 14 shows how to create a new XMP metadata node, which then gets populated in line 15. The writing of the data can be done using a JpegBitmapEncoder according to Robert Wlodarczyk’s blog post (without the InPlaceBitmapMetadataWriter piece.)

After running code like this, you’ll now have the metadata in the file, as shown by this WICExplorer screenshot (I added “App0 Reader” metadata to this image as well):

Hopefully this is useful to some folks out there. Enjoy!

—

One of the really unsettling events before the launch of the TouchSmart PC was that Engadget somehow got a hold of some pictures that had been prepared for the launch in early 2007 at the Consumer Electronics Show. It was billed in the first sentence as “AMD’s sweet new rig”, which was a little bit of a slap in the face, since most of the real work fell outside of AMDs realm. I remember the team meeting when our program manager came in and told us about the “leak”. He had heard it from Microsoft just a few moments before joining the meeting. The mood in the room instantly turned. People started feeling both mad at the leaked information (and the leaker) and depressed about the potential impact this would have on our launch at CES. Microsoft especially was disappointed, since the TouchSmart PC represented a big investment on their part, carrying some of the Vista messaging. The TouchSmart PC was to be billed as one of a few “dream” PCs at CES. Having gone through an experience like that, I now always think about how the people involved must feel when I see “leaked” information about upcoming products. It’s not fun to have it happen to you.

On a happier note, the TouchSmart PC seemed to make quite a splash at CES. At the last minute I was asked to attend the show to help with technical support on the show floor. This was my first time attending CES and going to Las Vegas, and I quite enjoyed the experience. I ran into quite a few of the people that had worked with us on the project, and it was fun to see the crowds milling about the TouchSmart PCs at the HP and Microsoft booths. Having backstage access was a unique thing, but it involved a lot of walking around, helping the people doing demos by making sure the software was installed properly.

Since then, the HP TouchSmart PC has received numerous awards (including spot number seven on PC World’s list of most innovative products of 2007) and for a short while even had a fan website, the HP TouchSmart Owner’s Club.

—

This is the tentative end of the series. If you’re curious about other aspects, let me know, and if I can talk about it, I’ll see if I can accommodate your curiosity.

—

The guiding principles for HP SmartCenter and the other touch-optimized applications were to provide quick, “transactional” experiences, to have the applications be as intuitive as possible to use, and have them look polished and clean. HP SmartCenter was to be the “home page” for touch-based interactions with the PC. It had to easily give the user access to key Media Center experiences (TV, music, games) as well as two other touch-optimized programs HP was developing (HP SmartCalendar and HP Photosmart Touch). Finally the user had to have the ability to add access to a certain number of programs of their choice.

To enable some of the quick, “transactional” experiences using a touch screen, HP SmartCenter had to have large “target” areas that are easy to hit using a finger. This requirement helped making decisions about the layout of the “tiles” that the user touches to “launch” something.

We wanted to highlight a few of the key features of the TouchSmart suite of software. We decided that three tiles would be larger than the remaining ones, and that those three would be able to show more details from the underlying program than the smaller tiles. The calendar tile, for example, will pull three upcoming events out of the calendar program and display key information about those events right within the calendar tile. The Photosmart Touch tile will look for pictures in the My Pictures folder and display five of those in a rotation. The weather tile will display high and low temperatures expected for the day as well as the current temperature as reported by the weather service. The analog and digital clock tiles will display two additional clocks (probably configured for different time zones) in text form, in addition to the main clock, which is shown in a larger, graphical look.

The three user configurable tiles would be able to either start a program on the system or a web page, using Internet Explorer. We settled on only having three configurable items, since there was an overall limit in the graphical design at nine small tiles plus three large tiles, and we wanted to encourage people to stick with tiles that didn’t take you out of a touch-optimized / touch oriented environment.

Beyond picking a software development technology (WPF), our other challenges were the many changes in both Windows Vista and WPF as both matured. WPF introduced “breaking changes” several times in our short cycle, and we discovered numerous problems with the integration of WPF and Windows Media Center. We worked closely with Microsoft to get these addressed. But a few problems remained, one of which is that every time you start one of the programs we developed, the computer screen will go black for a few seconds. It gives you the unsettling feeling that something went wrong, but it’s actually a consequence of the interactions between certain software components that are controlling the graphics card (DirectX, WPF and Media Center). As much as we didn’t like it, we were out of time to address these problems by the time our shipping date came.

—

That’s a wrap for part 3. Next time you’ll hear about the reactions from the team when information about the TouchSmart PC was leaked to Engadget way before the actual launch event, and I’ll also talk a little about the launch at CES 2007.

Update (2008-04-30): Part four is now posted.

—

I hacked together a very simple first version of HP SmartCenter (then codenamed LaunchPad, which still is the name of the executable, incidentally) in HTML and my colleague Maguy added some rough graphical elements to give our design firm an idea of what we were looking for.

My quick HTML mockup

Improved graphics

From about February 2006 until April 2006 we then iterated with our design firm on the GUI and user experience design. Towards the end of May 2006 we took final delivery of the work from them. I was to turn their beautiful work into a living application with page navigation, drag-and-drop functionality, configuration options, and settings persistence. They had provided a solid foundation to build on, including well thought out namespaces, classes, animations and navigation design.

But there was still a lot of work to be done during the next three to four months. In addition to the application itself I was also responsible for delivering an installer, a supporting “touch optimization” program, and integration with our factory PC build process, including dealing with the “sealing” process that prepares the master hard drive for replication.

We participated in Microsoft’s early adopter program for Windows Presentation Foundation and Windows Vista, which gave us access to builds of the WPF bits, with a seemingly never-ending stream of Community Technology Preview versions. Windows Vista was in a similar state of flux, and I had my hands full, wiping out and reinstalling test machines and updating my developer machine to keep up with the changes.

At the same time I climbed the learning curve for WPF (which Simon Middlemiss once described as more of a cliff), trying to figure out how to get the mostly fixed-content XAML pages that the design company had delivered turned into malleable components and re-configurable layouts.

The initial design from the outside company included two components that pull information from the web: weather and stocks. We had to drop the stocks piece for business reasons early on, and had big challenges working out the business issues for the weather feed integration. We wanted our own high-quality images to illustrate the weather conditions and had to get approval from the owner of the feed data. I thought several times that the weather feature was dead, but stubbornness overcame pessimism, and we pulled all the right people from several companies together to get our images approved within 24 hours before the final code submittal deadline. I remember pulling a work-at-home weekend to fine-tune the weather feature where I had to stop working because I was hit with the flu. I was out for three days. After something like that happens you don’t give up a feature without a fight.

One benefit of being part of the early adopter program for WPF and Vista was that Microsoft arranged for training and troubleshooting sessions. I made two trips to Redmond under this program, once to get more in-depth training on WPF and Vista, and once to get help with troubleshooting performance issues we had run into. That’s when I learned that there is such a thing as a “managed memory leak“, which can be introduced in WPF without the programmer necessarily realizing it. Towards the end of the program three of my colleagues and I got to spend a couple of days with Microsoft again, this time at their Platform Adoption lab (Building 20), going over some last minute design and performance questions with their WPF developers one-on-one. This especially helped with getting HP Photosmart Touch into better shape for final release. We got a lot of tips and strategies for dealing with images, collections and containers in these sessions.

—

That’s it for part 2. Next time I’ll dig a little more into the guiding principles that were used for the implementation of HP SmartCenter, as well as some of the challenges and problems I encountered on the way.

Update (2008-04-30): Parts three and four are now posted.

My involvement with the HP TouchSmart PC began in about December of 2005. The decision was made to invest in software that would be best suited for the touchscreen that the unit would have. One of the results is HP SmartCenter as seen here (screenshot from my developer machine, not necessarily representative of the final product):

We had tight deadlines. Our final bits would be due in about six months, around June / July 2006. Our product marketing folks decided they wanted the touch application to provide quick access to TV and music as primary features. Windows Media Center was our software of choice for delivering TV and music experiences, and so we made HP SmartCenter run within Windows Media Center. This helped to avoid waiting for Media Center to start up when the user wants to watch TV or listen to music. In other areas the choice created lots of challenges. The initial one was picking a software development technology.

I had just attended PDC05 and was pretty excited about Windows Presentation Foundation (WPF) and the speed I could sense it would give developers and designers for rapidly creating exciting software. I had learned that Media Center in Windows Vista would support WPF, and my recommendation to use it for our apps to make the deadlines while delivering a polished user interface was accepted.

An interface developed in HTML would not have had the same quality (read: look-and-feel). Using the Media Center Markup Language (MCML / SplashFX) was not an option, since that was not going to be revealed in any useful detail until about March 2006, way too late for us to learn how to use it and produce a product.

At PDC05, it had been mentioned that a well-know design company had worked on some XAML styles for the show. We approached them to help out with the application design and asked them to deliver their stuff as working XAML / WPF code. They were pretty excited about the idea and signed on.

—

That’s it for now. Check back soon for the next installment of this mini-series, where I’ll show you a few screenshots of very early prototypes.

Update (2008-04-30): Parts two, three and four are now posted.

Anyway, if you’re having trouble with .NET 3.5 on Vista x64, try uninstalling the KB110806 update. I’m going to assume you know where to do that if you’re reading this.

A Triggers’ EnterActions or ExitActions don’t seem to get fired when a UserControl is constructed. If you want, say, an animation in your control to start on a property change, you can put a BeginStoryboard element into a Trigger’s EnterActions and a reverse BeginStoryboard into the ExitActions.

But for the control to start out right at initialization you also need to have the right Setter element on the Trigger to set initial states (in addition to setting the opposite initial states on the elements to be animated/initialized.)

Here’s a tiny example:

 1 <UserControl> <!-- Namespaces omitted for brevity -->
 2   <Grid>
 3     <ToggleButton x:Name="Toggle">
 4       <ToggleButton.Template>
 5         <ControlTemplate TargetType="{x:Type ToggleButton}">
 6           <Grid>
 7             <!-- Initial opacity is 1 for the initially unchecked ToggleButton state. A trigger changes it to 0 for an initial checked state. -->
 8             <Grid x:Name="HideMe" Opacity="1">
 9               <TextBlock Text="Hidden"/>
10             </Grid>
11             <!-- Other parts of the control go here -->
12           </Grid>
13           <ControlTemplate.Triggers>
14             <Trigger Property="ToggleButton.IsChecked" Value="True">
15               <!-- This setter hides the desired element when the ToggleButton's initial state is checked -->
16               <Setter TargetName="HideMe" Property="Opacity" Value="0"/>
17               <Trigger.EnterActions>
18                 <BeginStoryboard>
19                   <Storyboard>
20                     <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.05" Storyboard.TargetName="HideMe" Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
21                   </Storyboard>
22                 </BeginStoryboard>
23               </Trigger.EnterActions>
24               <!-- ExitActions go here to make the Grid with the TextBlock visible again -->
25             </Trigger>
26           </ControlTemplate.Triggers>
27         </ControlTemplate>
28       </ToggleButton.Template>
29     </ToggleButton>
30   </Grid>
31 </UserControl>

The ToggleButton contains a TextBlock in line 9 that I want hidden when the ToggleButton’s IsChecked state is True. The animation in line 18 takes care of doing that when the user interacts with the control, but when the control is initialized, I need the Setter in line 16 to hide the TextBlock initially if the ToggleButton is checked by default (through data binding, for example.)

It’s a bit of an experiment, and I’m looking for some real-world “beta” testers. My plan is to try my hand at charging for the program. But to see if word will spread, I’m planning to give out 50 or so licenses without charge while I work out any kinks that might be in the program.

If you’re interested in trying it out, download the program, install and run it, and then click the “Request License” button.

Read more about it on the CardSharkV page.

Update (2007-11-25): CardSharkV depends on the .NET Framework 3.0. It’s thus meant to be installed on Vista systems only. If you have XP and the .NET Framework 3.0, it should still work. Also, since I posted the whole thing Saturday night after a whole day of re-shaping my first, never published version, I didn’t test the install too well. I’ve since had a little time to test and found some issues, especially with the license mechanism. I’ve posted version 1.0.2.0 to correct those issues and to improve the installer as well.

Deprecated features

The following features have been deprecated:

• Hosting for Microsoft .NET Framework 3.0 Extensible Application Markup Language (XAML) browser applications (XBAPs).
• The Triple-tap/Soft-keyboard ActiveX control for hosted HTML applications.
• Support for using alternative shells to run and host HTML applications.

The reason I’m surprised is that Microsoft announced the support for WPF based extensibility apps at PDC05 with some fanfare.

I guess interest among developers just hasn’t been there for WPF-based Media Center apps, and Microsoft needs to make judgment calls on where to invest in their extensibility platform. The rest of the deprecated features seem to have been made for the same reason: limited interest among developers for these features. In addition I think there might be issues of an architectural nature that just make the three things that got dropped too expensive to maintain or improve.

I’m sad about this development, mostly because I still don’t see a great set of development and design tools around for MCML. WPF seems to me to have a whole lot more momentum than MCML (WPF has the Expression suite of tools and has been billed as the “GDI for the next 20 years”), but who knows what may be coming for Windows 7, or even an earlier interim update for Media Center?

I had set my system up according to Tim Sneath’s post on the perfect WPF developer system, including VS 2005 SP1 and the beta version of the Vista extensions for VS 2005. I was running VS “as administrator”.

As it turns out there are some technical details around starting XBAP debugging sessions from an elevated VS process that cause this behavior if you already have another instance of IE running when starting the debugging session.

Thanks to Tim Sneath and Chango Valtchev at Microsoft for helping in tracking this down!

Moral of the story: If you want to debug an XBAP from VS 2005 under Vista, run VS non-elevated, or make sure you have no other instances of IE running when you start the debugging session.

So with all those problems, we decided to take a different approach for our WPF XBAP applications. We put all our strings into a standalone XAML file, producing a ResourceDictionary. This way our application can pick up strings using Text=”{StaticResource strXYZ}” for XAML markup and/or use Application.Current.FindResource(“strXYZ”) for codebehind. We name the file “Strings_en-US.xaml”. We can localize this file nicely, and name the resulting set appropriately: “Strings_de-DE.xaml”, “Strings_fr-FR.xaml” and so on. These files can then be included as resources in the application. They can also be added as “loose” XAML files, so we can add languages or make corrections after compilation.

The string resource file looks something like this:

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sys="clr-namespace:System;assembly=mscorlib"
>
  <sys:String x:Key="strButtonOK">OK</sys>
  <sys:String x:Key="strButtonCancel">Cancel</sys>
</ResourceDictionary>

At application load time, we look at the CurrentCulture and attempt to load the ResourceDictionary object like this:

ResourceDictionary rd = null;
System.Globalization.CultureInfo ci =
     System.Globalization.CultureInfo.CurrentCulture;
string langCountry = ci.Name;
string languageFile =
     string.Format("/Resources/Strings/Strings_{0}.xaml", langCountry);
try
{
  rd = (ResourceDictionary)Application.LoadComponent(
                              new Uri(languageFile, UriKind.RelativeOrAbsolute)
                                  );
}

You can imagine this with some catch {} fallbacks for when a specific language-country combination doesn’t exist. We’ll fall back to a file that’s only language specific, and if that doesn’t work out, we’ll fall back to en-US.

We’re not using CurrentUICulture, since that seems to be tied to the UI language of Vista, and we want our apps to follow what the user sets in Control Panel. CurrentCulture seems to work for that.

To load the strings into the global resource dictionary, we just do

Application.Current.Resources.MergedDictionaries.Add(rd);

To load loose XAML files that are not part of the application’s resources, we do something like this:

ResourceDictionary rd1 = null;
string languageFileLoose = string.Format(
         "pack://siteoforigin:,,,/Resources/Strings/Strings_{0}.xaml",
         langCountry
      );
Uri uri = new Uri(languageFileLoose, UriKind.Absolute);
System.Windows.Resources.StreamResourceInfo info;
System.Windows.Markup.XamlReader reader;
try {
  info = Application.GetRemoteStream(uri);
  reader = new System.Windows.Markup.XamlReader();
  rd1 = (ResourceDictionary)reader.LoadAsync(info.Stream);
}

Again, we extend this with catch {} blocks to fall back to a file that’s only language specific. We do the loose XAML loading after we’ve loaded embedded resources, so we can rely on a basic set of languages and strings, but can add languages, fix string translation errors or make improvements in the loose XAML after compiling things.

It may work for you as well, but ymmv.

Update: Changed the first Uri to UriKind.RelativeOrAbsolute

At this late a stage in a product’s delivery cycle it is common to make very few changes to the code in order not to create more bugs than one fixes. Ideally each change should be peer-reviewed and thouroughly tested before getting checked in (like with Windows Vista and the contortions people have to go through in the “shiproom” to get a bugfix approved). Too bad for me that I’m the only “peer” on the project (i.e. I’m the only developer). There’s nobody I can go to for a review.

And in the last few weeks I’ve broken the “as few changes as possible” rule a number of times. Why? Because I’m confident in the features that WPF provides. And because I do tend to run extensive tests before I check stuff in.

So what kinds of changes have I put in at the “last minute”? I’ve shuffled buttons around on the page, I’ve added code for drawing the user’s eyes to input fields containing invalid data, I’ve added data-bound and data-driven UI elements.

WPF has given me the confidence to be able to do this at the last minute. The fact that moving buttons around is a simple XAML markup change, for example, is just great for last minute UI adjustments.

But I’m not exactly proud of doing it. Oh well. So far everything seems to have worked out.

If you have an XBAP WPF application that tries to access files at the location identified by CSIDL_COMMON_APPDATA (Environment.SpecialFolders.CommonApplicationData in .Net 2.0/3.0) they need to be marked with Read/Write permissions for ”Everyone”. Otherwise File Virtualization kicks in and Vista creates copies of the files in the VirtualStore.

This shouldn’t be a problem per se, but if you have data integrity issues with your application reading/writing files it’s nice to eliminate the virtualization for troubleshooting.

Also, if your application needs to share the same data among users you don’t want virtualization, since that is a per-user thing, and you’d end up with one set of data files for each user.

If you’re installing some default data files for the application using Windows Installer (which will run elevated), you need to make sure you change the permissions on the data files so “Everyone” gets read/write permissions. This can be done using the LockPermissions table of Windows Installer.

My last two projects before starting on WPF were built around hosting IE in “something”.

The first “something” was an exe hosting IE and adding a bunch of window.external functionality. I took the lead in moving a somewhat old, pretty static UI infrastructure for presenting internet-updatable content to the XML/CSS/XSLT age. That involved a lot of using dynamic expressions to enable reflowing of the UI for different monitor sizes (the app was a fullscreen app). Towards the end of that project I started hearing about an XML-based application development thing coming from Microsoft, and I remember thinking “How cool! No more need for the mess of HTML / CSS / XSLT and JScript/dynamic expressions to glue it together.”

 The second “something” was an application for Windows Media Center, which at the time only offered hosted IE as its application development model (with a bunch of window.external functionality thrown in to get at the Media Center stuff, similar to how our exe had worked). Three of us wrote a pretty interesting little application that shipped for about a year and then was discontinued when circumstances changed on us drastically. Around the time this happened, the XML-based app development thing from Microsoft, better known then as “Avalon”, took more shape.

I was lucky enough to get to experience the energy that Microsoft projected at PDC05. It felt like an explosion of enthusiasm around the newly re-christened “Windows Presentation Foundation”. My eyes were popping at Greg Schechter’s talk. Manuel Clement’s talk was chock-full infectious excitement. I wanted to work with this new stuff.

Luckily the project(s) we were given to work on next required a level of “polish” that I doubted we could achieve using HTML, WinForms or any other technology we were proficient in. I advocated strongly for using WPF, and for some reason management went along. One of the requirements for one of the projects was that it had to run under Vista and more specifically under Media Center to get a great user experience. The level of “polish” that was required pretty much ruled out using HTML. We could have done all ActiveX controls, I suppose, or an HTML/Flash hybrid, but none of us had the required expertise to implement that, and the time frame was extremely tight to begin with.

To me the only way to solve the problem was using the incredible leverage of WPF to “get things done”, even with the steep, steep initial learning curve. I worked on some throw-away applications just to show my manager that this new platform had incredible potential and that I would be able to pick it up quickly enough to work with it seriously. He liked what he saw. The rest is material for another post. Let me just say now that the devil is in the details, and we had lots of challenges on the project overall. Once it’s out there I can talk more about it, but not yet.

XAMLPad (from the Windows SDK [Full ISO|Express Web Download])
Snoop (from Pete Blois)
Perforator (from the Windows SDK) (Don’t forget to turn on the required debugging setting in the registry - mentioned in the article)
CLR Profiler
.Net Reflector (from Lutz Roeder)

If you’re a designer / developer you also want:

Microsoft Expression: Interactive Designer
MOBIFORM Aurora XAML Designer
Electric Rain Zam3D

And of course the staples:

.Net Framework 3.0 September 2006 CTP (I usually pick the complete installer to avoid download problems – it’s hidden a few paragraphs down under a link that says “for x86″)
Visual Studio 2005 / Visual Studio 2005 Express
“Cider” / “Orcas Preview for WPF”

Did I miss anything?

With Vista, not only do you get the .Net Framework 2.0 (much improved over the previous versions) in the box, but also the amazingly powerful Windows Presentation Foundation (which is what I’ve worked with), Windows Communication Foundation and Windows Workflow Foundation (two pieces I know nothing about yet).

This will lower the barrier to entry for applications developed using these powerful tools to zero. As long as you’re writing your application for Vista you can be sure the basic requirements are there.

There will be issues with certain features of WPF (rendering in software vs. hardware, especially for 3D), but the framework helps you detect these issues and makes it possible to adapt your application to lower its “flashyness” (RenderCapability.Tier, remember this needs to be shifted down by 16 bits if you want to use 0, 1 and 2 as the human readable values).

To me Windows Presentation Foundation is the most important technology to come out of Microsoft for a long time. I’ve never written too much actual Win32 or even MFC/ATL UI code for client applications, but I’ve done a lot of HTML / CSS stuff and pure business object stuff (COM/ATL). More about that in my next post. I don’t want this to get too long.

System.Windows.Media.RenderCapability.Tierreported a wrong tier (zero) after I upgraded my Windows XP dev box’s .Net Framework 3.0 installation to the RC1 release. My card used to be a tier two and I had just upgraded the drivers, too. I contacted Microsoft about it and they said this is a known issue with the RC1 release and that it will be fixed in the upcoming RTM release. The problem is only with this particular API and only happens on Windows XP. All the actual rendering is still done correctly based on the capabilities of the hardware. So the only problem is if your WPF application is built to behave differently based on the value of this API call.There is a workaround that has to do with changing the value type of a certain registry entry (the video memory size) from Binary to DWORD. I’ll point to more details once I get a URL from Microsoft to point to.

I had several UIElements that each had the Rendering event hooked up, and the code in the event handler would do next to nothing most of the time, since the animation only was kicked off on a mouse up event. I modified the code, so that the event hookup doesn’t happen until the mouse up event comes in, and also so that an unhook happens when the animation is finished. This promptly took down the CPU load to the typical intermittent 1-2%.

If you’re writing a Windows Presentation Foundation app that has just a little bit of complexity to it, you may do things like hook up UI Elements to event handlers. This could be for navigation, reacting to data changes, timers etc.

An important thing to remember is to unhoook those event handlers when your UI Element is unloaded. Otherwise the event handler hangs on to the visual tree and the garbage collector will not let go of it. This results in memory consumption “problems”, which is a nice word for a “managed memory leak”.

So if you do something like this:

public MyElement()
{
  InitializeComponent();
  Loaded += new EventHandler(OnLoaded);
}

public void OnLoaded(object sender, EventArgs e)
{
  myTimer.Tick += new EventHandler(OnTick);
}

Don’t forget to also hook the Unloaded event and do this in it:

public void Unloaded(object sender, EventArgs e)
{
  myTimer.Tick -= new EventHandler(OnTick);
}