Synergist

Zoetrope: Create Motion from Pictures on Windows 8

Synergist — Tue, 18 Jun 2013 06:53:10 GMT

I just published Zoetrope a Windows Store app that makes it super easy to create movies from still photographs. My inspiration for this app is seeing my boys build and play with LEGO and create adventures with their creations. I wanted to make it easy for them to create movies with devices like the Surface RT which, with its back-facing camera, can serve as a perfect camera and film studio all-in-one device.

Here is a move that my son Alex (age 11) just made with a Microsoft LifeCam Cinema attached to my PC

The Engine Behind this App – Media Foundation

To make this app work, I needed a way to create a video from a series of still images. I started with this sample, creating a C++ WinRT component that had a simple interface where I pass an empty video file, a collection of image files, a width, height and frames per second:

IAsyncActionWithProgress<double> WriteAsync(
            IRandomAccessStream videoStream,
            Array<StorageFile> imageFiles,
            unsigned int width,
            unsigned int height,
            double framesPerSecond)

Once I did that, creating a Windows Store app around it was easy.

Sharing Target

If you have an app that creates or manages pictures and it shares those pictures (PNG, JPEG, ICO, GIF, or TIF) as a collection of StorageItems, Zoetrope can use those as a share target – giving your app an easy way to make stop-frame animations or slide show videos.

Sharing Source

Zoetrope can also act as a sharing source to share the movie that you are creating with someone via email, to SkyDrive, to your Windows Phone, or any other app that is a share target for .mp4 videos.

Multi-Camera Movies

Using the PeerFinder, you can very easily make a connection to nearby PCs running the same app. In Zoetrope, I wanted to make it easy to use another PC to simultaneously capture photos and then send photos or videos between the two PCs. The PeerFinder works over TCP/IP, Bluetooth or Wi-Fi Direct and supports the following scenario once the connection is established:

Pressing the photo button on the controlling PC takes a photo on the controlled PC.
After photos are take, the user can select individual photos and then press Send to send the photos to the other PC or create a movie and send that to the other PC.

In Zoetrope, I only work with a single pair of PCs, but from looking at the API, I could have simultaneous connections between multiple PCs – that could get pretty interesting.

Printing a Zoetrope

Ever since I was a child, I’ve loved creating things with paper and wanted to come up with a way to print out the images to make a cut-out Zoetrope device – this is a work-in-progress and any feedback would be appreciated. Like all Windows Store apps, open the Devices charm and select a printer

Play-To Support

If you have a DLNA-compliant TV and want to use it as supplemental monitor when making a Zoetrope movie – whichever image you select is sent to the wirelessly connected TV.

Localization

Zoetrope is available in all markets worldwide but is only in English today. I have globalized the app and I’m ready to add language-specific resources to it. If anyone is fluent in other languages and would like to translate a resource file for me, please send me a message – I will add you to the app credits if it works out!

Share The Movies That You Create

In my career, my passion has been in crafting tools to support creative design processes and for me this is the next step in that journey. If you create a movie with Zoetrope, please post it as a response to Alex’s movie here.

Authentic: a Connected Media Experience Player

Synergist — Fri, 31 May 2013 15:44:21 GMT

For the past year I have been working with the record labels (Sony Music, Warner Music Group, Universal Music Group) on building a new way of creating digital connected albums, called Connected Media Experience, or CME. It is based on a zip package with an XML manifest and HTML, JavaScript, CSS, and media content within it. Throughout the process of developing the specification I have served as Microsoft’s voice on the technical working group and steering committee and helped drive the specification towards completion of a version 1.0 document – which you can download for free here. As you look at the specification, you will notice that it is based on industry standards like zip archives, HTML5, CSS, JavaScript, WOFF Fonts, h.264 video, MP3 audio, JSON, RSS, ATOM, JPEG, PNG, and GIF – nothing proprietary or device-specific.

As I was working on the technical working committee, I found it necessary to start prototyping a CME player and experimenting with building packages. Building technology while writing the spec helped us write a more complete and usable specification – and helped us find inconsistencies and problem areas early on – when they were easy to fix. The prototype evolved and I finally released it yesterday as a free Windows 8 App, Authentic.

The first version of this app plays back the CME Packages and shows packages in your My Music and SkyDrive as well as an Azure service. I am working on enabling authoring tools in the app to make it possible to create CME packages as well as Windows 8 apps that wrap those packages in future versions – so CME Packages could be sold as apps in the Windows Store.

Though the CME format was conceived of for music experiences, there is really nothing in it that precludes it from being used for any other type of publishing.

Technical Details

The App is built in HTML, CSS, and JavaScript with some parts built in C# and exposed as Windows Runtime Components.
The package is a Zip archive with a .CME extension – with an XML manifest, HTML, CSS, JavaScript, MP3, and h.264 video – and WOFF Fonts
Download the spec here http://connectedmediaexperience.org.
This works by unpacking the Zip archive into local storage and then setting up an iframe which points to a http://localhost:xxxx service. I setup a StreamSocketListener in the app to get all HTTP get traffic to that port and then just serve up the files that are requested.
When .html files are requested, I inject additional CSS and JS to make it feel like a native app on Windows 8.

The first CME Package available for testing and demonstrations is based on content from John Common which includes video, images, music, liner notes, and biographical information. It uses jQuery and Knockout JavaScript libraries for UI and data templating capabilities. Download it here. If you want to see the simplest package possible, download this.

How You Can Participate

Create CME Packages using the HTML skills that you already have learned for building websites.
Build players for other platforms like Windows Phone, Android, and iOS.
Build authoring tools and workflows to ease the creation of CME packages.
Join the Connected Media Experience consortium to join the discussion and drive the evolution of this exciting format.

5/31/2013 – MSS: Added a link to a simple .CME package.

Windows Store App Xaml GridView with Variable Templates

Synergist — Tue, 25 Sep 2012 19:49:52 GMT

One of the useful controls to use when creating a Windows Store app for Windows 8 is the GridView which can use a VariableSizeWrapGrid to support item templates of varying size. Using this in conjunction with an DataTemplateSelector makes it possible to vary both the size and data template of the items in a GridView. Here is how you do it:

Setting the VariableSizeWrapGrid Item Height and Width

The VariableSizeWrapGrid works with a unit size and you can define whatever unit size you want – each template should be a multiple of that. In your GridView.GroupStyle, you should define the ItemHeight and ItemWidth. Add the spacing between the columns & rows; based on the Microsoft guidelines, the height and width should be layed out on a 20-pixel grid and the spacing should be 10 pixels between each item. So in this case each item would be 200x100 with 10-pixel spacing, so ItemWidth=210 and ItemHeight=110.

<GroupStyle.Panel>
    <ItemsPanelTemplate>
        <VariableSizedWrapGrid Orientation="Vertical" 
            Margin="0,0,80,0" 
            ItemHeight="110" 
            ItemWidth="210"/>
    </ItemsPanelTemplate>
</GroupStyle.Panel>

Create Data Templates for each item type

Create Data Templates in a resource file that would be used for each item type. In this case, I have a ProjectItemTemplate and FavoriteProjectItemTemplate in a Xaml resource file included in my App.xaml. The FavoriteProjectItemTemplate shows a Gold Star (xE082 in the Segoe UI Symbol) and additional project information that I only want to load for favorite projects:

    <DataTemplate x:Key="ProjectItemTemplate">
        <Grid HorizontalAlignment="Left" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Width="200" Height="100">
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}"/>
                <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <TextBlock Text="{Binding UpdatedAt}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="FavoriteProjectItemTemplate">
        <Grid HorizontalAlignment="Left" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}" Width="200" Height="210">
            <TextBlock HorizontalAlignment="Right" VerticalAlignment="Top" x:Name="Star" TextWrapping="Wrap" Text="&#xE082;" FontFamily="Segoe UI Symbol" Foreground="Gold" FontSize="24" Margin="0,5,10,0"/>
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Margin="0,0,32,0"/>
                <TextBlock Text="{Binding Description}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <TextBlock Text="{Binding UpdatedAt}" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[0].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" discussions" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[1].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" todos" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[2].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" files" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[3].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" text documents" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[4].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" dates" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Aspects[5].Items.Count}" Style="{StaticResource CaptionTextStyle}"/>
                    <TextBlock Text=" people" Style="{StaticResource CaptionTextStyle}"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </DataTemplate>

Create an Item Template Selector

The Item Template Selector is called each time a new item template is needed. In this, you should pick the item template and set the number of columns & rows the item should span. In this case if the project.IsStarred is true, then the template would use the FavoriteProjectItemTemplate and set VariableSizedWrapGrid to span 2 rows instead of 1.

    public class ProjectDataTemplateSelector : DataTemplateSelector
    {
        protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
        {
            var project = item as Project;

            var uiElement = container as UIElement;

            if (project.IsStarred)
            {
                VariableSizedWrapGrid.SetColumnSpan(uiElement, 1);
                VariableSizedWrapGrid.SetRowSpan(uiElement, 2);

                return App.Current.Resources["FavoriteProjectItemTemplate"] as DataTemplate;
            }

            VariableSizedWrapGrid.SetColumnSpan(uiElement, 1);
            VariableSizedWrapGrid.SetRowSpan(uiElement, 1);

            return App.Current.Resources["ProjectItemTemplate"] as DataTemplate;
        }
    }

Adding the ItemTemplateSelector to the GridView

On the page resources, add an instance of the ItemTemplateSelector and then reference it in the GridView.ItemTemplateSelector=”{StaticResources ProjectTemplateSelector}”

<support:ProjectDataTemplateSelector x:Key="ProjectTemplateSelector"/>

Responding to Changes in the Data Model

If the selection criteria changes and you need the selector logic to run again, just reset the selector. Thanks to this StackOverflow answer for the assistance here.

var projects = this.selector.SelectedItems.Cast<Project>();

foreach (var project in projects)
{
    project.IsStarred = !project.IsStarred;
}

var itemTemplateSelector = this.selector.ItemTemplateSelector;
this.selector.ItemTemplateSelector = null;
this.selector.ItemTemplateSelector = itemTemplateSelector;

Summary

Varying the item template and size of items increase the visual interest of your app and can help highlight important differences when standard DataTemplate binding won’t work.

Making a Great Snapped View for your Web Site on IE10 on Windows 8

Synergist — Tue, 24 Apr 2012 03:11:15 GMT

One of the great features of Windows 8 Metro Applications is the Snapped View where app developers create a 320px wide view of their app. When the user snaps their app to the left or the right of the screen they can continue using their primary app while still having the secondary app visible in a thinner view. The project templates in Visual Studio come with this capability built-in to make it easier to address this important part of the application experience. If you build your Metro application with HTML, you see that this is done with CSS Media Queries, a feature supported in all HTML5 modern browsers. This is also the way that you support snapped view for your website, with the @-ms-viewport rule (since it’s Microsoft-specific today, it has the –ms- prefix and can be safely ignored by other browsers.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width snapped view goes here */
}

Since Mobile browsers like Windows Phone’s IE and the iPhone both report their width as 320 px, you may be able to reuse the media queries that you created for mobile for the snapped view by adding one line of css to your style sheet. If you are intrigued by CSS Media Queries, and want to see more examples of responsive design that use them, take a look at the Media Queries site which hosts a great collection of them.

You can also take a look at a site that I’ve been working on that uses media queries and implements the snapped mode media query at TimeLapseApp.com.

More details

My Favorite New Features of Windows Phone 7 Mango

Synergist — Sat, 01 Oct 2011 07:28:57 GMT

A few days ago I got a notice over my phone that an update was ready to be installed and I should connect it to my computer. Mango had arrived for my Dell Venue Pro on T-Mobile’s network. I connected my phone to my computer and proceeded to update the phone. A few minutes later it was ready. Now after using it for a few days, I am really happy with so many of the new features. I’d like to share my favorites with you:

Turn-by-turn audible directions on Bing maps
Podcasts are now in the Marketplace and you can now subscribe to them
Visual Voice Mail – I had to enable/disable/enable this on the T-Mobile account website but finally it is working
Quick App Switching/Multitasking
Easy check-in to locations
Integrated Messenger/SMS/Facebook Chat
Twitter & LinkedIn integration
Ability to open and Share Office documents on SkyDrive
Pinning a playlist to my home screen
Pinning an Outlook folder to my home screen
Groups in the People hub (and pinning groups)
Auto-Fix for photos
Upload videos from the phone to Facebook
New HTML5 IE9

What are your favorite Windows Phone 7 Mango features?

Teaching Computer Programming at Home

Synergist — Mon, 27 Jun 2011 16:16:27 GMT

This past week I had a great time teaching my 9-year-old son Alex and 9 of his friends computer programming in my home. I used Kodu Game Lab and Small Basic, two free tools created for kids to learn programming. I wrote a series of blog posts about it on my personal site Charette.com:

Has anyone else had an experience teaching programming at home? Please share it.

I’m About to Start Teaching Ten 9-Year Olds Computer Programming

Synergist — Fri, 17 Jun 2011 17:00:55 GMT

Next week, the Fairfax Computer Camp will open in my home. As I work from home, I have a bit of flexibility in scheduling my working hours, so I’m attempting an exciting new challenge – how to teach my son Alex computer programming in a fun environment with 9 of his friends. Take a look here – I plan on writing about the experience on my website Charette.com.

Wish me luck.

Converting SVG to XAML with IE9 and the Microsoft XPS Document Writer

Synergist — Wed, 20 Apr 2011 16:56:00 GMT

There is a growing library of content on the internet in SVG, especially with sites like The Noun Project. With a Windows Phone project that I am working on I wanted to use a graphic from the Noun Project. To do this I needed to convert the SVG file to XAML in order to put the graphic into a Silverlight application on the phone as XAML Paths. Here is how I did it:

I downloaded a SVG file to my computer from the Noun Project
I double-clicked on the SVG file and it opened up in Internet Explorer 9
On the Command bar I clicked on the Print Icon…Page Setup and set all the headers and footers to –Empty-
I printed the page using the Microsoft XPS Document Writer and saved the file to my desktop.
I changed the filename of the file created by the XPS Document Writer from .XSP to .zip and opened the zip archive
I opened the file Documents\1\Pages\1.fpage from the zip archive in Notepad – this is XAML text
I copied everything inside the <FixedPage> which included <Canvas/> and <Path/> elements to my clipboard
I created a new Canvas element in Expression Blend and pasted the contents of the clipboard into it.

Note: this might not work for all SVG graphics, especially those with more complex combined paths.

Silverlight UI Developer Job at Check Six Training Systems

Synergist — Tue, 19 Apr 2011 14:55:58 GMT

Immediate Opening with one of the fasting growing U.S. companies. What? You haven't heard of Check Six Training Systems? Oh, you will! Even sooner if you are the right fit for our totally unique, rapidly growing company. Our roots come from aviation, but we are taking aviation training solutions and applying them to other high performance industries. After the BP offshore disaster, the Oil and Gas companies are struggling with a complex training problem and they know that we have the solution. Our clients, which include Chevron, Shell, Exxon Mobil, etc. are begging for our Human Performance systems now, but we need your help.....

We have an immediate need for the best Silverlight / UI Developer and Web Graphics Developer in the Dallas/Fort Worth area. If you feel that you've got "The Right Stuff", but you are not from here, we're still interested since a lot of us work virtually. You’ll be instrumental in the design and development of our Human Performance application's look and feel to make it intuitive, simple and "loveable". Best of all, your software will save time, money, and LIVES in high performance industries that drive world economies. If you are ready to make a difference in addition to embarking on a fantastic career, we are your company.

Silverlight / UI Developer Job Posting

Generous salary and options depending on your contribution. Substantial bonus opportunity.
Qualifications:
Everybody seems to equate "years" to experience. If you can work in an agile startup atmosphere and can turn a complex data set into an elegantly simple, yet stable interface, your "years" don't matter to us!

Mandatory:
Experience designing and implementing web-based user interfaces.

UI portfolio available including Microsoft Silverlight examples.

Candidates must have current work authorization in the US. We will not sponsor visa candidates.

Desired:

Experience building web services and integrating with Microsoft SQL Server 2005 or 2008

Experience designing and implementing middle tier business logic in C#

Strong familiarity with web graphic formats and tools

Experience delivering commercialized software

Please send your resume and/or portfolio to korn@c6ts.com.

Why I Chose the Dell Venue Pro

Synergist — Fri, 14 Jan 2011 23:33:16 GMT

After more than a month of waiting, I am the proud owner of a new Dell Venue Pro Windows Phone. As a Microsoft employee I had my choice on phones and carriers and I wanted to share the reasoning behind my choice.

The T-Mobile network has great coverage in my area and where I travel. Like all carriers today, T-Mobile has an interactive coverage map where I was able to see the quality of coverage in the areas that I care about. When people ask me about which mobile carrier they should go with, this is the primary determining factor, I always ask them about the carrier quality in the areas that they care about. If you can’t make call’s it’s not a phone.
Numerous colleagues have told me that T-Mobile had great customer service.
After using virtual keyboards on a phones for over a year, I am still horribly inaccurate. I wanted a phone with a real keyboard that didn’t force me to reorient what I was doing. The Dell Venue Pro has a great slide-out keyboard and when collapsed, the phone is barely bigger than my former phone, the HTC Imagio.
The 4.1 inch AMOLED screen is very large and bright making the the graphics beautiful and the text crisp. Because the screen uses Corning’s scratch-resistant Gorilla® Glass, I can be confident that the phone will withstand the travel pressures that I put on it. The new Surface computer demonstrated at CES earlier this month also used Gorilla Glass.
The phone has a solid feel and a professional look. I’m done with flimsy-feeling plastic phones.

Great job Dell, T-Mobile, and Windows Phone!