A brief history of five TouchSmart generations–pioneering ideas for Windows 8

September 26, 2011 10:15 am

A few weeks ago I attended Microsoft’s BUILD conference to get ready for what’s coming in Windows 8. As I was sitting in the first day’s keynotes and big picture sessions, I couldn’t help but think back on the work HP has done with its TouchSmart software and notice areas where the TouchSmart software pioneered ideas that Microsoft is now building into Windows 8 for the new Metro style of programming and the new touch-first Start screen. I decided to dig a little deeper and give you a brief tour of the history of TouchSmart and highlight some of the ideas now in Windows 8 that we put into the TouchSmart software a long time ago. I’ll put a [+Win8] marker by the ideas as I go along. Let’s get started!

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:

SmartCenter_1_HomeSmartCenter_1_Personalize_1SmartCenter_1_Personalize_2SmartCenter_1_Personalize_3SmartCenter_1_Weather_2SmartCenter_1_Weather_3

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:

image

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:

image

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:

Medium

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”):

image

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:

image

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:

image

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

image

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:

image

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):

image

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

image

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:

image

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:

image

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.

28 Responses to “A brief history of five TouchSmart generations–pioneering ideas for Windows 8”

Pedro wrote a comment on September 26, 2011

You’re kidding, right???

GeekTieGuy wrote a comment on September 28, 2011

It may seem like I’m kidding. And of course, I have no statements or anything tangible from Microsoft even hinting that this is or might be true. And most likely never will. But it is my (not completely uninformed) perspective, illustrated through a walk down memory lane. I know what kind of relationship HP and Microsoft have had over the years that the HP TouchSmart software was produced. Trust me, they’ve looked at HP’s products VERY closely and usually long before each generation of software was released to the general public. So they’ve had plenty of time to pick out what they thought might be interesting and incorporate it into their own designs. Obviously, the UI and UX is way different in Windows 8.

I stand by my perspective that HP pioneered the concepts I marked as such on touch-enabled all-in-one desktops (and eventually brought them to laptops, too). HP and Microsoft worked together VERY closely on the IQ770 hardware and software (and I was there for the bulk of the software collaboration). By the way, just as another reminder of what happened when: The IQ770 was announced by Bill Gates in his CES keynote on January 7, 2007 and was available in stores on January 30, 2007. The iPhone was announced two days later and made available on June 29, 2007, five months later.

The comments are open, so other perspectives are, of course, welcome. I’d appreciate if additional comments people want to make steer towards dialogue and progress.

Vincent wrote a comment on September 30, 2011

Any idea if HP is going to roll out Touchsmart 5.0 for existing Touchsmart 610 owners? I just bought mine a few weeks ago – and would hate to find out I’m stuck on 4.0.

Also with all the turmoil happening at HP and at the WebOS group, what’s in store for Touchsmart development? Will the computing group make Windows 8 touch computers and trash all the work done for the Touchsmart?

GeekTieGuy wrote a comment on September 30, 2011

Vincent, as of today there seem to be no plans to offer an upgrade from 4.0 to 5.0, unfortunately. I can pass along your comment to the people making those kinds of decisions, but I’m not sure how much effect that will have. A single customer saying so is better than none, but having more people express a desire for an upgrade from 4.0 to 5.0 may be helpful in swaying that decision (this comment is mostly for other people reading these comments – chime in if you would like an upgrade from 4.0 to 5.0).

As far as the future is concerned, I’m not really at liberty to talk about that – HP rules forbid it. Until Windows 8 ships, I think it is safe to assume that HP will continue shipping the TouchSmart software. If you see any good reasons to continue doing so after Windows 8 ships, I’m all ears and will do my best to communicate those to HP.

Vincent wrote a comment on October 1, 2011

I’m wondering how difficult is it to get 5.0 working on a Touchsmart 610? Are there processor restrictions? I know there wouldn’t be any support, but could a reasonably tech savvy customer get it working? I keep checking the Touchsmart developer forum and the Driver/Download sections of the HP site hoping that the 5.0 software is available for download for those people who have to (for whatever reasons) reformat their systems – but haven’t seen anything. Do you think the development team would be open to having other Touchsmart 4.0 owners “beta” test a 5.0?

I’m guessing that the same way HTC has built the Sense platform on top of android, the HP team could easily provide value by adding an even more polished suite of apps to the Windows 8 touch platform. The Touchsmart suite is a step in the right direction – basically making sure the touch paradigm is well executed across the most common apps. The advertising for Touchsmart shows that the product teams at least get the basic user personas – and have addressed the primary use-cases. 5.0 is a step in the right direction…I’m just worried the team won’t be allowed to go much farther – which makes me wonder if my buying a Touchsmart 610 a few weeks ago the right decision.

GeekTieGuy wrote a comment on October 1, 2011

Yes, a tech-savvy person could get 5.0 working on a TouchSmart 610. Each version of the software is generally designed to be easy to upgrade from the previous version. I believe that at some point the latest SmartCenter software will be released to the HP support website. Until then, nothing can be done. I’ve tried conducting a beta program in the past, precisely for people like you, who wanted to try out the latest without official support. Not sure I’ll be able to do that again, but let’s see what happens.

If nothing else, the 610 is a really, really solid desktop computer and it will most likely make a great Windows 8 machine as well. Thanks for the perspective on Windows 8 and TouchSmart.

Tom wrote a comment on October 5, 2011

I echo Vincent’s sentiment. I just bought the 610 (literally a week before the release of TS 5.0. I was faced with a choice of going through the hassel of returning the unit or counting on the fact that the software would be updated (which seemed obvious to me at the time). The new 610s (same hardware configuration) are sold with 5.0, so it can’t be a hardware issue. Seems like a little bit of fair disclosure would have gone a long way to creating some goodwill but obviously rather than telegraph it, it made more sense to aliennate loyal customers. I didn’t think I would have to worry about things like “refresh cycles” with HP, I always figured those concerns were reserved for consumers of the other large computer company based in Cupertino.

Certainly willing to beta test 5.0 for upgrade purposes!

Thanks!

GeekTieGuy wrote a comment on October 5, 2011

I’ll see what I can do. Thanks for getting in touch.

Vincent wrote a comment on October 20, 2011

Tom, if you’re reading this, GTG pointed out that the softpaq is out at the HP FTP site: http://ftp.hp.com/pub/softpaq/sp54501-55000/sp54879.exe

I installed it – and it goes right over TS 4 just fine on my 610-1147c. From what I can tell, the old apps work just fine (with the exception of the free version of Paint it!). I haven’t tested all of the apps, so there may be a few that have some trouble.

As of now, so far so good. Hope to see some of the updated apps also show up for download at the HP site.

GeekTieGuy wrote a comment on October 20, 2011

Glad to hear the 5.1 update worked for you. Thanks for commenting.

Domenic wrote a comment on October 21, 2011

I bought an open box HP Touchsmart 610 series a month ago and got a great deal on it. Anyway, I love it and I was one that was checking everyday for the past several weeks about a 5.0 update for the SmartCenter. And surprisingly, I came across it last night in the driver and downloads section of HP’s website for my particular model. Not sure why HP doesn’t announce these type of things. If I wasn’t looking for it, I wouldn’t have found it. Thanks HP for the update BTW.

Domenic wrote a comment on October 21, 2011

Forgot to mention, great article!

GeekTieGuy wrote a comment on October 21, 2011

Hey Domenic! HP is not always the fastest at announcing things. I do try to do my part by keeping an eye on TouchSmartDevZone.com and posting there and on the HP Support Forum every once in a while. Glad you like the update! Thanks for your comment.

GeekTieGuy wrote a comment on October 21, 2011

Thanks!

Allan Carrigan wrote a comment on October 21, 2011

I have a question.
I have TouchSmart 504IQ – second generation according above article.
Can it support version 5 or what is the latest version it will support?

Thanks for any feeback you can give.

GeekTieGuy wrote a comment on October 21, 2011

In theory, the IQ504 can support TS 5.0/5.1. My post was produced on an IQ5xx, so that can serve as a guidepost. Of course, HP won’t support any of that if you call them. Do it at your own risk. But it is doable.

BoxeeGrrrl wrote a comment on October 22, 2011

Thanks for this: http://ftp.hp.com/pub/softpaq/sp54501-55000/sp54879.exe

Installed it on top of v4.0 on my 600-1105xt just fine (did a restore point first, just in case) and I must say, I like having Windows and TouchSmart Center all at the same time. I always felt like I was neglecting the TouchSmart software in favor of doing a lot of things at once via the Windows Desktop ;)

Cheers!

GeekTieGuy wrote a comment on October 22, 2011

Thanks for the comment. Glad to hear it works and that the new version is more useful to you.

Jag20 wrote a comment on October 31, 2011

I recently bought a 420t and loaded windows 8 for dual boot, but I was unable to install HP touch driver in windows 8! Keyboard and mouse works fine, but not touch. Install program was always looking for Windows7 even when i tried compatibility mode. Touch works on windows 7.

Any help to resolve this issue is greatly appreciated!

Thanks,
Jagan

Dave wrote a comment on November 2, 2011

Just a note to say how wonderful it’s been upgrading a TS 804 from 3.0 to 4.0 to 5.0 all within a 24 hour timespan.
Additionally, I wholeheartedly concur with the ‘merging’ of Windows 7 desktop functionality into a TouchSmart environment make me a much more avid and consistant TS user; 3.0 was old, stodgy and not run much but with the incorporation of Canvas in 4.0, I begen using “that side” of my HP more Now, after the successful upgrade to 5.0, it’s the best of both worlds, and, MUCH smoother than the Windows 8 I have on a seperate partition.
A wonderful job very well done! Thank you

Dave wrote a comment on November 2, 2011

A PS: If the “Automatic Panning/Scrolling” video was done recently, I’d check the batteries in your Mouse….

GeekTieGuy wrote a comment on November 2, 2011

@Dave: Thanks for your comment. Glad to hear you’re finding new value in TouchSmart 5.0/5.1! As far as the battery icon goes – I’m not using the stock mouse from HP on that system, but the keyboard and mouse software always puts up both icons, and I want the software running so some of the non-standard buttons on the keyboard work properly. I’m surprised you noticed, you must have eagle eyes!

Gina Taylor wrote a comment on July 20, 2012

I have repeatedly tried to download TouchSmart 5.0/5.1, but receive a message stating that it was unable to download because of error 992. Have you heard of this before and is there anything I can do about it? Thanks in advance for your time.

GeekTieGuy wrote a comment on September 1, 2012

Hey, I think the download may be succeeding, but you’re getting an error when you run the program. I seem to remember error 992 as something the installer puts up when your system isn’t recognized as a system that’s eligible for the update. Sometimes this happens with refurbished machines. What kind of hardware are you trying to install on?

StefBot wrote a comment on January 11, 2013

Well…I gotta say-Windows 8 is available now. It ‘looked’ alright and I toyed around with the idea of upgrading. However, when I ran the tool that would tell me what programs of mine were compatible and it told me TouchSmart was not…I decided not to upgrade. I like the SmartCenter UI better and I’m willing to stick with Windows 7 for it. Windows 8 may have ‘borrowed’ a lot from SmartCenter but SmartCenter is still prettier and smoother. Please tell me Windows 8 will not bring further development of SmartCenter/TouchSmart Software to an end…it just has so much untapped potential left. Like educational apps. My sons who are young and both on the Autism Spectrum are very much visual learners and the SmartCenter UI can hold their attention like nothing else. The things that it could be used for…

GeekTieGuy wrote a comment on January 19, 2013

Thanks for the comment! Very kind of you.

Patti wrote a comment on May 31, 2013

Thank you so much for this excellent review of the TouchSmart systems thru the years. Because of your information I have been able to upgrade my TouchSmart IQ804 all the way to Version 5.0! I currently have Windows 7 Home Premium with the TouchSmart software 5.0 running. I love the integration of windows desktop and the TouchSmart carousel. I finally don’t feel like it was use one or the other they now seem merged.

Once again a big thanks for your very helpful and useful information.

GeekTieGuy wrote a comment on June 2, 2013

My pleasure! Glad to hear you enjoyed reading.

Care to comment?

%d bloggers like this: