Feeds:
Posts
Comments

Archive for the ‘Programming Tools’ Category

In case you missed the news, Microsoft just hit a major milestone on its road to shipping Windows 8 with the public launch of the Release Preview version. With this new version comes new features and as expected: a number of trivial, yet importing changes that will affect app developers and their apps.

Meanwhile, here at Vertigo we’ve been toiling day (and sometimes night) to help developers and clients prepare for this update so they can hit the ground running and create some of the first apps to ship on the new platform.

One such effort that we were proud to release alongside the launch of Windows 8 Release Preview is the update to the Microsoft Media Platform Player Framework (an open source video player component for Windows 8 metro style apps).

win8_pf.jpg

While Windows 8 includes some essential and great components to help building top notch media apps (namely the MediaElement for Xaml developers and the Video tag for JavaScript/HTML developers), the purpose of these components is primarily aimed at providing the fundamentals and low level support for playing audio and video. We here at Vertigo Software know video and we know that there is still a mountain to climb before you can ship a great media app. In a joint effort with Microsoft, we’ve worked hard to fill this gap by building a media player framework to make it simple and straightforward to accomplish the vast majority of your media app needs in Windows 8.

The Microsoft Media Platform Player Framework ships with a JavaScript and Xaml version of the framework that offers out of the box features to build great video apps without the fuss and months of development required to build your own media player. Besides support for the Windows 8 Release Preview, our latest update also includes support for major features such as player DVR controls (scrubbing, FF, RW, play/pause, …etc), player styling and branding, closed captioning, and just released today: video advertising!

Video advertising is very different from traditional banner advertising – which is already included with the Microsoft Advertising SDK. Video advertising allows you to seamlessly connect to video ad servers and stitch together commercials, overlays, and companion ads with your own content.

Advertising is an extremely important monetization strategy for many media companies and an equally significant undertaking to build from scratch. With the latest version of the player framework, you can simply add the new advertising plugin, schedule when ads should play and point your app at a VAST standards compliant ad server to play ads with your content. Ad scheduling, downloading, playback, and tracking is all handled for you by the player framework using IAB recommended standards such as VAST and VPAID.

Download everything you need today to start (or finish) your media app for Windows 8:

Microsoft Media Platform Player Framework

Windows 8 Release Preview

Visual Studio 2012 RC

Smooth Streaming SDK

PlayReady DRM SDK

 

Enjoy!

Read Full Post »

As an amateur photographer, I have always kept my eyes open for new tools to help me search, sort, filter, and view my own photos. Microsoft Pivot (a cool new technology that lets you easily view, search, and filter data using deep zoom) seemed like a natural and obvious fit for the task.

Therefore, using Microsoft Pivot and the Pauthor open source libraries, I created  a tool that helps users create a pivot collection from the photos on their hard drive and supports filtering by all the nifty meta data embedded in those files such as shutter speed, aperture, film speed, and focal length. Plus, users end up with a great look set of deep zoom images from their photo collection!

How:

Step 1: Install Microsoft Pivot

Step 2: Install PhotoPivot beta (I’m calling it a beta because I wrote it in about 8 hours).

image

Browse for the folder containing the photos that you would like to “Pivot-ize”

Browse for the location where you would like to dump the pivot collection and all the associated deep zoom files.

Note: This can take up a lot of space

Click “Go”

Warning: If you run this on a couple hundred high resolution photos it will take ~5-10 minutes, if you run it on all 20,000 photos in your My Pictures folder… do it before you go to bed!

The Result:

In the end, assuming Microsoft Pivot is installed, it will launch the Pivot app and automatically load your collection…

image

Highlights:

  1. The end result is awesome… especially when it’s your own photos that you’re filtering and deep zooming on.
  2. This collection is totally compatible with the Microsoft Silverlight PivotViewer control which makes it super easy to publish the result on the web. All you have to do is upload the output to a web server, toss a clientconfigpolicy.xml file in the domain’s root and build a 3 minute Silverlight PivotViewer app to view them. Read my earlier blog post for more details. The only down-side: if you thought it took a long time to generate the files, wait until you try to upload them; yikes!
  3. Source code is available. Knock yourself out!

Kudos:

  • Microsoft Pivot. Seriously folks, this is where all the real work was done.
  • DeepZoom. It wouldn’t be nearly as cool without it.
  • Pauthor. And without this awesome open source library, I would never have bothered to build this. (It even uses parallel processing to generates all the deep zoom images). Great work guys!

Read Full Post »

Silverlight 4 introduces XPath support including XPathNavigator and LINQ to XML extension methods for evaluating XPath expressions on your XElement objects! For those that aren’t familiar with XPath, it is essentially a big string that contains specially formatted text that is interpreted at runtime to describe a pattern for finding nodes in an XML document. You can use it to find nodes with specific conditions much like how regular expressions finds smaller strings in a bigger string. 

The downsides to using XPaths are 1) the string describing your XPath can get quite complicated and difficult to read, and 2) because the string must be interpreted at runtime, performance is worse than alternate methods. This is why I normally discourage using XPaths and probably why Microsoft shyed away from including XPath in earlier versions of Silverlight… thereby bolstering using the better practice of LINQ to XML for searching and parsing XML documents. However, XPaths (like regular expressions) have their place and at times come in very handy! 

One particular use that I’ve come to love over the years is the ability to create and run XPath queries at runtime. You don’t have to know very much about XPaths to easily write simple ones like “/vehicles/car” to find all the ‘car’ nodes in the ‘vehicles’ node. Or slightly more complex XPaths like: “/vehicles/car[@color=’green’]” (find all car nodes with a ‘color’ attribute of ‘green’). Because an XPath is just a string, it is very easy to assemble at runtime or even allow a power users to enter it in the UI if you dare open that can of worms 🙂 However, there is one kind of user I feel perfectly comfortable allowing in the can of worms… developers. Which is why I’ve created… 

XPathPad

How often do you just want to find out very simple information about an Xml file? Maybe you want to know how many nodes are in your document or how many have a certain attribute. Maybe you want to extract the text values from certain nodes so you can use them in another application. Maybe you want to paste all the values of a certain attribute into Excel so you can manually graph them. The possibilities are endless and if you ever have to work with Xml files (especially someone else’s), a tool to easily help without writing a program can be invaluable! 

How to use it:

  1. Run the app. Note: You can also install Out of browser.
  2. Browse for any xml file…
  3. Type in an XPath for the nodes you want to find
  4. Type in another XPath in the Output field for what stuff in each of those nodes you want to display.
  5. Click Go

 

Note: You can optionally enter a comma delimited list of XPaths in the output field if you want to get multiple things about each node found. Multiple results per node are separated by tabs so you can easily copy and paste the results into Excel and get different columns for each.

How it works under the hood:

Silverlight 4’s new XPath features did just about all of the work for me. First, I had to add a reference to the new XPath assembly:

Then, I simply load a standard XDocument from a filestream and call the new extension method that is available:

IEnumerable<XElement> elements = xdoc.XPathSelectElements(XPath);

This returns all the elements found at the provided XPath. I then loop thru each of these elements and call a second extension method to get a node relative to that element based on the output XPath:

var result = element.XPathEvaluate(outputXPath) as IEnumerable;

XObject value = result.Cast<XObject>().FirstOrDefault();

if (value is XElement)

    return ((XElement)value).Value;

else if (value is XText || value is XCData)

    return ((XText)value).Value;

else if (value is XAttribute)

    return ((XAttribute)value).Value;

else

    return value.ToString();

XPathEvaluate returns a collection of XObjects. I simply take the first one and return its value to be displayed in the results window.

To find out more about how XPathPad was written or to modify it to better fit your needs, download the source.

Read Full Post »

Here’s a new panel to add to your tool chest. It’s one I expect to use almost daily and save approximately 3.1 hours of typing over the next year. Hopefully you’ll find it useful as useful as I think it is.

What’s wrong with the built-in StackPanel:

You can’t get children to conform to the size of the panel. Imagine you want the following label and list but want the height of the Listbox to stretch or shrink according to the room available:

At first glance, a StackPanel would seem to be the natural choice for which panel to accomplish this. Afterall, you just want a linear list of two objects: a TextBlock and ListBox. However, unless you are willing to hardcode the size of the ListBox or resize it with code, with a StackPanel you’ll end up with:

Yuck! Clipping instead of a scrollbar. So how do you get the desired behavior?

Answer: Grid.

So what’s wrong with a Grid?

  1. Grids take more lines xaml to create. Compare the StackPanel Xaml to the Grid’s above and notice the 4 extra lines of Xaml. Ok, not a huge deal but if you’re doing this every day like me, you start to get sick of creating RowDefinition and ColumnDefinition objects.
  2. With a grid you have to explicitly define the order of the children. Adding the attached property Grid.Row is easy on your first pass but what happens if you want to insert a new row somewhere in the middle. You not only have to add a new RowDefinition, but you also have to remember to go increment the row number on all subsequent siblings. This is a pain and error prone because a sibling would potentially be defined in any order in the grid.

Wouldn’t it be great if you could get the best of both worlds?

What we really want here is a StackPanel that allows you to define the size of the children.

Welcome SuperStackPanel:

Just set the attached property StackPanel.Length to “*” to get a child to stretch.

In fact, SuperStackPanel lets you use all the same GridLength values you can use in a Grid (Auto, *, n*, and x):

Have I sold you yet? The nice part is that SuperStackPanel is completely compatible with a normal StackPanel. Just swap out your StackPanel for SuperStackPanel and everything will look the same because the default value of Length is “Auto”. Frankly, I’d love to see Microsoft expand the role of StackPanel to support this natively. Of course, until then, there’s SuperStackPanel.

SuperStackPanel is lightweight and simple to add to your project, just download the C# source code, add to your project, add the namespace to your xaml and away you’ll go. Enjoy!

Read Full Post »

I finally got my entry to the MIX 10K contest accepted!

The idea was inspired by MyPadlock Password Manager: a simple, secure, and free password manager developed by yours truly. The 10K entry is a fun little Silverlight app that lets you store any kind of text data behind one master password. That data is then encrypted with your password and stored in isolated storage.

Check it out

Click here to check it out. There’s a fun animation entering your password and locking it back up again (with the X in the upper right that appears once you’re in the program).

Developing this was a good test of borrowing something written in WPF and getting parts of it to run in Silverlight. Implementing the behavior I wanted was super fast and the hardest part by far was systematically destroying the readability of my code as I whittled it down from ~30K to just under 10K (with fewer than 100 bytes to spare!) I kept thinking, I sure hope I don’t have to fix a bug after I strip out all spaces, rename my variables to single characters and all the other ugly tricks I had to do to shave off those unwanted bytes.

Hope you all enjoy this fun little project and be sure to check out MyPadlock Password Manager if you’re not already using something to keep your usernames and passwords safe.

Read Full Post »

ASP.NET allows you to get at some great information about the client and the server via the HttpContext.Current.Request.ServerVariables collection. Likewise, Silverlight allows you to get at a few local variables of its own through the System.Windows.Browser.HtmlPage.BrowserInformation object.

But, to use these variables we often need to know what kind of values to expect. For example, let’s say you’re going to create a condition based on which browser the user is using. You would use BrowserInformation.Name. But Name is a string, not an enum. So what are the various values that can be returned by this property? This might be documented somewhere for the officialy supported browsers, but the only fool proof way is to actually try it by writing a dummy Silverlight app that spills out this variable and run it in all the different browsers to see what comes back. The same applies to ServerVariables but even more so because this is just a big dictionary so you don’t even know which variables are going to be present let alone what their values will be.

Here’s a utility I wrote for anyone to use that will help you look at all the BrowserInfo properties and ServerVariables. Hit this page from any machine to see what values it is sending up to the server. Bookmark this page, it will probalby come in handy someday when you’re scratching your head wondering what useragent you’re sending up to the server.


BrowserInfo and ServerVariables

Another cool part is that it not only shows you what servervariables are available at the time your web page is requested, but also what servervariables are available when you hit a WCF service from Silverlight. There are some subtle differences.

Also note that it’s hosted on Azure so you can also get a glimpse of which ServerVariables Azure provides access to. On first glance it looks the same as Windows Server but I haven’t done a variable by variable comparison.

Enjoy, I hope this comes in handy!

Download the source code here to see how it works or to host on your own server.

Read Full Post »

Here’s a fun and useful UI control I suspect many developers out there are writing over and over again. It’s essentially a border control with an independent autosizing header. It’s not included in the framework, toolkit, or any of the open source libraries that I’ve seen and I’ve needed it myself on more than one occasion so I thought I’d share and save everyone a little work.

Silverlight Border control with a header

Click to run


Here an example of it in it’s more basic form.

The code to use it is simple:

<pp:HeaderBorder Header=”Header” Content=”Content goes here”/>

You can control the radius, border, and individual backgrounds of the two main containers. The header and content areas are just standard containers so you can put any type of content in them — like all good Silverlight controls should allow. 🙂

To create this control, I sandwiched a line in between two border controls (the top containing the header ContentPresenter and the bottom containing the main ContentPresenter). Wrapped around the 2 borders and line controls is another Border control.

I found two different techniques to make sure the inner border controls don’t blead out over the containing border control (which is really the only modestly complex part about this control).

  1. In the first technique, I was able to clip the inner contents using a RectangleGeometry control with RadiusX and RadiusY matching that of the outer border
  2. As an alternate technique I set the individual pieces of the CornerRadius property on the two inner border controls. For example, the top might be set to “6,6,0,0” and the bottom: “0,0,6,6”. This made them match the containing border control’s border and not extend beyond it.

The rest of the work is just putting it in a control and wiring up the properties with the xaml in generic.xaml so the control’s consumer can control it.

Download the source code and check out both techniques if you’re curious or just throw it in your app and start using it.

Happy Silverlight coding!

Read Full Post »

Older Posts »