Live Stream enables businesses to engage their customers face-to-face using the most recent and relevant Twitter™, Flickr®, and RSS newsfeeds. Community generated photos, tweets, and stories float across the Microsoft Surface display so that several people can touch and share interesting content with one another. People can flip the content over to generate a Microsoft Tag, and then use their phones to scan it and go straight to the source in their mobile web browser. From there they can further explore the content or jump into the conversation.
Surface administrators can quickly reveal a hidden status panel by placing down a tag on the screen. At a glance, the panel indicates service connectivity, adjusts flow speed and direction, controls the volume, and provides a very quick way to remove inappropriate content and accounts – all without having to leave the application or interrupt the experience.
This code sample is highly customizable and extensible. In minutes an administrator can quickly re-skin the interface and branding elements making it ready for deployment at any business or enterprise. With a little more time, Twitter, Flickr, and newsfeed integration can be expanded to other services or pointed directly at a new feed by extending it with custom code. Additionally, developers can use the code in any number of completely new or existing Surface applications.
Live Stream demonstrates an elegant, simplified, interface designed for touch from the ground up, and based on the Metro design language. It is a great reference for those interested in advanced touch application design.
Exploring Live Stream content
Selecting Live Stream content
Responding to tweets with Microsoft Tag
Viewing Flickr photos
Reading RSS newsfeeds
Using the Live Stream status panel
Building the project
You will need the following installed on your machine in order to open and build the project:
• Visual Studio 2010 (trial version, express version)
• Microsoft Surface SDK 1.0 SP1
• Microsoft XNA Game Studio 3.1
• Expression Blend 4 (trial version)
• Enterprise Library 4
• WiX 3.5 (only required to build the installer, and not yet released at the time of this writing. see the latest weekly build)
You will need to acquire your own API keys for the Flickr and Microsoft Tag services. Flickr API keys can be obtained here; the Microsoft Tag API keys can be obtained here. These keys are stored in the Constants.cs file.
The solution includes four projects:
• LiveStream: This is the main Surface application.
• LiveStream.Installer: This is the WiX project used to build the installer.
• FeedProcessor: This is a class library which pulls data from Twitter, Flickr, and RSS feeds.
• XAMLConverter: This is a version of the XAML/HTML Converter (more) which has been modified to support images and to disable many formatting features.
The main control which arranges the feed items and scrolls them along is called “River”, and lives in Controls/River.xaml. The layout of the river is not procedurally generated, instead it lives in the “RiverLayout” resource inside Resources/Resources.xaml.
Each item within the river is an instance of Controls/RiverContentItem. RiverContentItem contains an instance of all of the controls in Controls/RiverContent, such as “SmallTweet” for a tweet shown within the stream, and “LargeTweet” when it’s pulled out. Changing the looks of these controls would change the look of the entire application, and these controls are easily editable in Blend.
RiverContentItem is contained within a ScatterViewItem, the style for which is “FlippingScatterViewItemStyle”, in Resources/Resources.xaml.
You may want to change the behavior of how feeds are loaded in your application, or add new types of feeds. To do so, review the behavior of the Processor class.
To create a new type of feed, create a new class which inherits from FeedProcessor.Feed, which will handle the logic of requesting and parsing data. Create another class which inherits from FeedProcessor.FeedItem, which will represent items from that source. You may also need to add values to FeedProcessor.Enums.ContentType and FeedProcessor.Enums.SourceType.
Then review the logic in FeedProcessor.Processor and add the necessary properties and methods for your new type, following the same pattern as those used for Twitter, Flickr, and news.
Then you’ll need to modify RiverContentItem in the main project to display the new items.