Scott Hanselman

Viewing a LOT of Images Effectively (plus 700 Obama Newspaper Covers in Silverlight Deep Zoom )

November 7, '08 Comments [24] Posted in Silverlight
Sponsored By

I don't talk politics as a rule on this blog. However, regardless of your political affiliation, the last week has generated a lot of news. When I saw these 730 Newspaper images from 66 countries at the Newseum, Scott Stanfield and I immediately said Silverlight Deep Zoom!

There's a number of good ways to view LOTS of images at a time. I'll share the ones I use. First, here's our Silverlight DeepZoom Obama News page.

image

Scroll…zoom…

image

Scroll…zoom…

image

Cool. I had to manage these files and check them out before we made the Silverlight DeepZoom version, so I tried these programs:

Windows Explorer

So, the story is, the Newseum assembled 730 newspaper front pages from all over. I downloaded them with DownThemAll and put them in a folder in Explorer. I run 64-bit Windows Vista and didn't have to much trouble with Windows Explorer with only ~700 images. I could use the View Thumbnails feature and zoom in and out and it worked pretty good.

Windows Photo Gallery (the Default Preview)

If you double click on an image in Windows, you'll get the Windows Photo Gallery by default, which just shows the image. You can then navigate around the folder with the left and right keys. It works pretty well, although the previewer fills the screen completely and starts up maximized which I find kind of irritating. Also, there's no way to see previews of the images that are coming up next. The thumbnail view is gone.

Windows Live Photo Gallery

This is a big improvement on the default one. It's a much more polished version of the default one. The most dramatic feature addition is face recognition. If you click on an image, it'll find people:

image

If you click on "people found," the system will highlight the face that you can then identify, and more importantly, search on.

image

Picasa 3 from Google

Picasa 3 is pretty much on par with Windows Live Photo Gallery. They are both fast, they both have some face recognition, although WLPG is much more granular while Picass just has a "show me photos with faces" option.

Where Picas really shines is with its replacement of the default image previewer. If you let it take over as your default image viewer, when you double click on a file you'll get a nice animation, a gray curtain that falls over your desktop, but more importantly a "FilmStrip" of all the files. This little touch lets you much more easily navigate while still previewing files.

Fullscreen capture 1172008 20555 PM

Expression Media 2

A commenter suggested I add Expression Media 2 as the whole point of Expression Media is to catalog butt-loads of media assets. It shouldn't blink at 700 images…and it didn't.

Catalog1 - Microsoft Expression Media 2

It's very bare bones from a Consumer point of view, as it's not meant for organizing the family photos. However, it's power is hidden in its keyboard shortcuts. It's obscenely fast. Truly. Everything moves at the speed of thought, and you can batch rename, tag, change, your photos.

It also notably has a ridiculous number of sorting options, like dozens. You can sort by height, width, author or whatever metadata you like. Definitely something I'd return to if I had several thousands images.

Silverlight DeepZoom

First I tried using DeepZoom Composer, which is a free tool for making DeepZoom collections really easily. We figured we'd drag these 700+ files into DeepZoom and bam! We're done. Well, DeepZoom Composer currently can't handle single collections with THAT many images. This isn't a limitation of DeepZoom, it appears, but the editor which hit 2 gigs of RAM and died. Additionally, with that many files, it's easier to just position the images programmatically. I talked to the PM for the product and they're already on it. However, I can still use the DeepZoom tools programmatically. It's not DeepZoom Composer that does ALL the work, in fact. There's a "SparseImageTool.exe" that we can call programmatically.

Giorgio Sardo has a blog post about this (latest version here), and I was able to use his code directly to make a local DeepZoom collection. Here's a snippet of his code with my changes. It's rough, but it's a one off, so be forgiving:

static void Main(string[] args)
{
// Collection name
string collectionName = "ObamaZoom";
// Folder containing images to be processed
string sourceImagesFolder = @"C:\\Users\\Scott\\Desktop\\Obama\\";
// Destination folder of the batch process
string outputFolder = "D:\\DeepZoomObamaNews\\";

// Eventually create the output directory
if (!Directory.Exists(outputFolder))
Directory.CreateDirectory(outputFolder);

CreateCollection(collectionName, sourceImagesFolder, outputFolder);
}

/// <summary>
/// Create a Test collection using automation
/// </summary>
static void CreateCollection(string collectionName, string sourceImagesFolder, string outputFolder)
{
// Create a collection converter
CollectionConverter collectionConverter = new CollectionConverter();
// Required parameters
collectionConverter.SparseImageToolPath = GetSparseImageToolPath();
collectionConverter.ImagesCollection = GetImages(sourceImagesFolder); // IEnumerable<string> containing the path of the images
collectionConverter.ImagesDestinationFolder = outputFolder;
// Optional parameters
collectionConverter.CollectionName = collectionName;
collectionConverter.CollectionFormat = CollectionConverter.CollectionFormats.XML;

//collectionConverter.ConvertedOverlapPixels = ...
//collectionConverter.ConvertedTileSize = ...
//TODO: You can customize the exporting experience here, by setting the according parameters such as:
// Tile Size, File Format, Collection Format, Compression, Quality, ...

// Attach to completion handler
collectionConverter.BatchCompleted += delegate
{
Console.WriteLine("Conversion completed\nPRESS <ENTER> TO EXIT");
};

try
{
collectionConverter.BatchCollectionExport();
}
catch (Exception e)
{
Console.WriteLine(e.Message);
}

Console.WriteLine("Conversion started...");
Console.ReadLine();
}

This code takes the input folder and creates an output folder with the DeepZoom processed files you need. ScottS then said he thought the result would look better if it looks more like the HardRock Cafe Memorabilia site, so we used Vertigo Software's "BigPicture" application (it's internal for now, but he's looking into what to do with it. Contact him if you want more details.) which easily handles all the dynamic positioning of the images in their collections.

The result is pretty cool. Even cooler if you press the Full Screen button (fourth from the left):

image

I think it'd be interesting if this technology wasn't just used as an occasional showcase when an event happens, but as a regular everyday thing. I wonder if it would be hard/cool/interesting/compelling to read a regular newspaper like this? Or of PDF files supported this kind of view? For me, the fun is just the buttery smoothness of the zooming. The frame-rate is crazy fast. Enjoy.

Thank Scott Stanfield and Vertigo Software for hosting it!

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

ASP.NET and jQuery

November 6, '08 Comments [8] Posted in ASP.NET | ASP.NET Dynamic Data | ASP.NET MVC | Javascript
Sponsored By

image It looks like many of you have already noticed that there's an official Visual Studio autocomplete file for jQuery posted up at the jQuery site. It's significant that it's hosted by the jQuery team in that it's a contribution by the Visual Studio team but it's not up at CodePlex, because it really belongs to jQuery so there's where you'll find it.

This isn't a new jQuery file and nothing's been "forked" so don't freak out. It's just a documentation file, as you can see if you go to the Download jQuery page.

Now, the Visual Studio-specific aspect of this is a temporary thing, as it's planned for Visual Studio to support a more standard syntax at some future date, but until then, there's this file and we'll make sure it's kept updated.

Jeff King has details on how to use this file in your projects. In the VERY near future there will be a hotfix that will cause Visual Studio to look for files that end in "-vsdoc.js" for intellisense which will make including it in your project automatic.

UPDATE: The very near future is NOW. You can now download a small hotfix that causes Visual Studio to automatically look for intellisense files named *-vsdoc.js" next to the runtime file. From Jeff King's blog:

Last week I mentioned we would be releasing a Hotfix to accompany our new jQuery VSDoc file.  This Hotfix is now available at the MSDN Code Gallery.  Here's a direct download link for this small (2MB) patch:

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736

I want to emphasize that this patch is intended for all JavaScript files, not just those related to jQuery.  Generally, we will opportunistically look for documentation files related to the script file.  For example, given "mylibrary.js", we will search in the same directory for:

  • mylibrary-vsdoc.js, then if we don't find it we will search for...
  • mylibrary.debug.js, then if we don't find it we will search for...
  • mylibrary.js

There's a few things that are nice about this jQuery file is that it supports and understands jQuery plug-ins. If you're into jQuery and ASP.NET, go check it out.

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

The Weekly Source Code 36 - PDC, BabySmash and Silverlight Charting

November 6, '08 Comments [6] Posted in ASP.NET | ASP.NET MVC | BabySmash | Open Source | PDC | Silverlight | Source Code
Sponsored By

Scott Hanselman presenting at PDC 2008First, let me remind you that in my new ongoing quest to read source code to be a better developer, Dear Reader, I present to you thirty-fifth in a infinite number of posts of "The Weekly Source Code."

At the end of my crazy babies talk at PDC (Tips on how I prepared here) I had a big demo where I gave a URL to a Silverlight version of BabySmash that Grant and I built for the show. You can watch the presentation online if you like and fast forward to the end (around 60 minutes in) and see the big demo. Basically we had the Silverlight BabySmash talk via ADO.NET Data Services (I'll post in detail in the near future) to a SQL backend. Then I had an MVC reporting site that had some charts that would update as folks smashed. There were over 90,000 smashes during the talk.

imageThe chart was updating as folks were smashing and we even had a Baby vs. Baby fight break out where the "A" people and the "J" people were going at it. Jeff Atwood started the bloodbath with this tweet as he urged on the overflow room along with Phil Haack. That man's trouble, I tell you.

In the talk, I started out with a old .NET 1.1 chart from 2003 and showed it working, unchanged, in ASP.NET 3.5 SP1. It's just a nice reminder that things usually work just as they should. Then I upgraded it to a new .NET 4.0 ASP.NET Chart that I'll blog about in detail soon. Then, I showed the final site with the new Silverlight Charts. Tim Heuer has a great post on how to databind with these new charts.

What's really cool about these Silverlight Charts is that they are Ms-PL (Microsoft Public License) which is a REALLY relaxed license. They're released as part of the larger Silverlight Toolkit up at http://www.codeplex.com/Silverlight. There's a bunch of controls in there. It is a preview release though, so things will change, and hopefully only get better:

You can check out the Toolkit Chart samples and run them yourself here. It's nice that the chart sampler actually includes the source code within the Silverlight sample app. You can browse dozens of charts, then switch tabs and see the XAML and code-behind. This all lives in Microsoft.Windows.Controls.DataVisualization, the namespace (so far) for these controls.

image

My reporting page included a Silverlight Chart and a Virtual Earth control to show where people were smashing from. The data is coming from the Astoria ADO.NET Data Service, which is easy to get to via either JavaScript or from Silverlight.

You add the charts to your Silverlight application by adding a reference to the assembly then assigning a namespace to them:

xmlns:charting="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization;assembly=Microsoft.Windows.Controls.DataVisualization"

Them, lay them out. I've got two charts here, one column and one pie. I also did some stuff like the linear gradient for the background, etc. Still, pretty simple.

<charting:Chart Grid.Column="0" Height="300"  StylePalette="{StaticResource PaletteColors}" Style="{StaticResource ChartStyle1}" >
<charting:Chart.Background>
<LinearGradientBrush EndPoint="1.332,1.361" StartPoint="-0.107,-0.129">
<GradientStop Color="#FF6CA9D5"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</charting:Chart.Background>
<charting:Chart.Axes>
<charting:Axis x:Name="colAxis" Orientation="Vertical" AxisType="Linear" Minimum="0" Maximum="1"></charting:Axis>
</charting:Chart.Axes>
<charting:Chart.Series>
<charting:ColumnSeries x:Name="colSeries" ItemsSource="{StaticResource BasicValues}" DependentValueBinding="{Binding Count}" IndependentValueBinding="{Binding Character}" Title="Character">
</charting:ColumnSeries>
</charting:Chart.Series>
</charting:Chart>
<charting:Chart Style="{StaticResource ChartStyle1}" Grid.Column="1" Height="300" StylePalette="{StaticResource PaletteColors}" >
<charting:Chart.Axes>
<charting:Axis Orientation="Vertical" AxisType="Linear" Maximum="100000"></charting:Axis>
</charting:Chart.Axes>
<charting:Chart.Series>
<charting:PieSeries x:Name="pieSeries" ItemsSource="{StaticResource BasicValues}" DependentValueBinding="{Binding Count}" IndependentValueBinding="{Binding Character}" Title="Character">
</charting:PieSeries>
</charting:Chart.Series>
</charting:Chart>

We had a generic list of "CharacterSmash" data, as in List<CharacterSmash> that we'd be binding to the chart.

private readonly List<CharacterSmash> characterData = new List<CharacterSmash>();

For the purposes of the presentation, I just polled for the data by making an asynchronous call to the service, then updating the bar and pie chart when it returned:

private void RequestSmashCountData()
{
var container = new SmashMetricsContainer(new Uri("/BabySmashPDC/SmashService.svc", UriKind.Relative));

// Setup data query
var query = container.SmashCount;

// Start the async query
query.BeginExecute((asyncResult =>
{
// Get the matching results from the service call
var matches = query.EndExecute(asyncResult);
UpdateCharacterData(matches);
UpdateBarChart();
UpdatePieChart();
}), null);
}

See how the BeginExecute includes the "do this when you return" as a lambda? It's a tidy syntax.

UPDATE: Tim Heuer emailed me to say that we're re-databinding the results. Instead, he wisely points out:

"On the code where you are getting the smash metrics for the silverlight charts…I see that you are re-binding the data?

If you bind to an observablecollection and just change that the chart should change with the data…including the Y-axis growth."

Excellent point! Tim's right. The way I'm doing it works, but it's old school. If I just updated a ObservableCollection the chart would notice the changes and update itself.

The updates are also clean, just databinding the results:

private void UpdateBarChart()
{
var axis = (Axis)FindName("colAxis");
if (axis != null)
axis.Maximum = GetMaximumCount() + 50;

var colSeriesControl = (ColumnSeries)FindName("colSeries");
if (colSeriesControl != null)
colSeriesControl.ItemsSource = characterData;
}

All we had to do that was interesting at all was to make sure the Y-axis grew as the data grew.

Who do we have to thank for this charting control? David Anson is who. Basically he was the Primary Dev and only Tester on the whole thing, and you should check out his blog for lots of inside information on charting in Silverlight.

UPDATE: David had development help from Jafar Husain, Jeremy Sheldon, Delian Tchoparinov, Alex Gorev and Sean Boon and designer Mehdi Slaoui Andaloussi.

If making a complex chart seems daunting, David has ChartBuilder that you run now in your browser. It'll generate and show you the XAML you need for your chart.

image

There was so much announced at PDC, I wanted to make sure that folks heard about this important release that might have been lost in the shuffle. Even better, the source is open so if you don't like it, change it.

Related Links

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

2008 - Congratulations, America has a President-Elect

November 5, '08 Comments [72] Posted in Musings
Sponsored By

We have a new president here in the US. He is president-elect Barack Obama. This was a very long presidential race, long by even American standards. We're all exhausted from this race as a country and excited for January 20th, when the new president is inaugurated. It was a good race. John McCain gave a thoughtful and gracious concession speech. Barack Obama gave an inspirational acceptance speech.

My wife, Mo, voted in her first election as a US Citizen. My boys will grow up in a country that values people of all kinds, including ones that look like them. Voter turnout was at historic levels and was organized and peaceful - THAT is a testament to this country and what we stand for.


Now, let's get to work, America.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Tips for Preparing for a Technical Presentation

November 4, '08 Comments [12] Posted in PDC
Sponsored By

I felt pretty good about my presentation at PDC last week. They are WAY more uptight about presentations at PDC than at TechEd. You have to go through dry-runs and slide reviews and all sorts of things that I was dodging at every turn.

The talk is available, as are all PDC talks, up at http://sessions.microsoftpdc.com. You can get them in these formats WMV-HQ, WMV, Zune, MP4 which is cool. I like the WMV-HQ version, over the WMV version, because it includes picture-in-picture video. My talk is no fun if you can't see me being silly. You can also watch it streaming in the browser via Silverlight and download my PPTX. If you saw it live, don't forget to evaluate the session as I have to Crush Anders in the scores. (Note to self, register CrushAnders.com and .net)

Anyway, someone was asking how I prepare for a talk, so I figured this would be as good enough time as any for a post on the topic.

imageThese basic tips from a few years back still stand - 11 Top Tips for a Successful Technical Presentation, but this post is about the actual preparation process and some tips and techniques that might help.

I thought I did a good job, with 72 slides and 8 demos in 75 minutes and only one person said it felt rushed in the comments. ;) Of course, I had about 9 hours of content, but I did prepare in specific ways in order to pull it off.

Know Where Things Are - Beforehand

You can easily waste 2 to 5 minutes over an hour long talk looking for crap. Seriously, I don't need to see how slow you are with Explorer. If you want to have your audience rush the stage, be slow in finding stuff. ;)

Make a folder of links that is specific to your talk. I made one and numbered each link in the order I was going to use them. That includes links to folders, files, browsers, batch files, reset scripts, whatever.

My talk also included a lot of websites that I knew I'd be visiting. I made a Links toolbar in IE and setup links to everything I'd visit, in order.

image

My tiny head is on those links not because of my huge ego, but because those links are inside my domain and IE used my favicon.ico. ;)

"Sync to Paper" and Know Your Timing

I'm a gadget guy, sure, and I've got the same todo.txt file on my desktop that the rest of you do, but there's really something about "syncing to paper." before every talk I write a few things down. I do it on a Moleskine notebook that I wrote about in my Personal Systems of Organization post.

Over the years I've come up with a few techniques on paper that have helped me greatly. Scanned below is the notes I used in my PDC talk.

On the left-hand side you'll see 5 sections, numbered from top to bottom. I make one section per 15 minute segment. This was a 75 minute talk, so there's 5 sections. Sometimes I'll take the FIRST and LAST section and split them into 5/10 and 10/5 respectively. Regardless of how you do it, the point here is to know these things:

  • Know Where You Are Supposed to Be
    • I use the segments to let me know where I'm supposed to be at 15 min, 30 min, etc. Looking at the notes, if I'm on the PLINQ demo and it's only 20 minutes in, I'm going WAY too fast for example.
  • Know Where You Are Going
    • It's nice to be free of knowing what's next. The mind can free associate better if it isn't saddled with where it's headed. That's the paper's job. I glance down just to see that I'm on track.
  • Know Your Pacing and Know What You Can Drop
    • On the left side I've numbered the demos 1 or 2. The #2's I can drop if I need to save time. The #1's can't be dropped or it'll ruin everything. Have enough demos to fill the time, but also know ahead of time which demos to drop if need be.

BabySmash Presentatio nNotes

Know Your Narrative and Where to "Pivot"

If you've ever been unfortunate enough to come upon me freaking out before a talk at a conference, I've likely accosted you and run through the narrative or the "story arc." I keep doing this until it really resonates with me and the half-dozen folks I abuse regularly, like Phil Haack and Rob Conery.

It's all the same basic middle-school speech stuff we've all learned before, but I'm constantly reminding myself of these questions:

  • Why is the audience there?
  • Who is the audience?
  • How can I avoid wasting their time?
  • What's the one thing they should get out of the talk?

I also try to focus on a story arc that looks like:

  1. What is this?
  2. This is it.
  3. What was that?

The .NET Framework UniverseSeems silly, but it works. You'll see that I repeat myself four or five times to make sure important points get hit and pounded in. This style of arc works in most technical talks, but others are more complex so I use what I call a "pivot point."

I call it that because in basketball once you've planted your feet you have to pivot on one foot. You can move all over as long as you keep that one foot planted. If the basketball analogy doesn't work for you, then think of holding your finger on a chess piece while you think of your next move.

For the PDC talk, we had these nice posters to pass out. They look nice as placemats or on the wall, but they look busy on a slide, so I covered them with bright colored shapes. The Core shape was my pivot point. I'd start there, go to Client, then come back to Core. I'd go to Data, then back to Core. Just like that, Rinse, Repeat.

If you've got a meandering talk, like I did, finding a place to keep coming back to can really help. It helps me.

Have a Pre-Talk Checklist and Demo Reset

Make a complete list of everything that you need to do before your talk. If that means find a Diet Coke and use the bathroom, fine, put it on the list. Here's mine for this talk, unedited.

reset the database
resize and prep the browser
cache the font list
remove my son's face from the xaml
* Pick up the Samsung SilverLight Phone
Test the Phone remote viewing software
prep the mac, test the mac's video output (1280)
*dvi-vga adapter for the mac
check all font sizes in all apps
run zoomin
shutdown services, and the mesh
Warn orcsweb that traffic is coming

I had a bunch of stuff that could have gone wrong if I hadn't checked ahead of time. The Mac I used for the Surface demo only output at 1280x1024. I checked that with the tech guy at 8am. I didn't have a DVI-VGA adapter, so I got one at Radio Shack. I went into every app I was going to run and made sure the fonts were at a visible size (I like Consolas 15pt). I also shutdown all non-essential services. ALL of them. I go from 107 programs running to less than 50. I shutdown piles of stuff in Services.msc like "Infrared Service" and all that crap. I called my ISP, Orcsweb, and warned them I was doing a demo so they'd babysit the box and not think there was an attack.

Preparations like this, and batch files that reset your demos, drop and recreate your database, clear caches, prime caches or whatever administrivia you need, just take a few minutes to do, but they make a presentation look much more professional.

Related Posts

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.