In the first part of this series of posts I discussed how to use the bitmap border / shadow feature on Spyder X20 and how it works under the hood.  In this post, I’m going to discuss the process for creating custom shapes and getting them loaded into the X20 video processor.  You might want to create custom shapes for any number of reasons, a common one being for corporate logos.  Below are a few examples of custom shapes I’ve generated for the sales team for various demos over time.

DVD player video cut into CNN logo

Another DVD player cut into shards

So How is a Shape Defined?

The bitmap border / shadow engine uses a XAML (eXtensible Markup Language)  parser to convert a vector-based shape definition into the specially formatted raster-based image that is loaded to the video processor hardware.  The shape definition is imported into the system as a .shape file, which contains a single XAML PathGeometry definition. Below is the contents of a shape file defining one of the ‘shard’ shapes above:

<PathGeometry    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"     Figures="M 100,0L 62.75,0L 51.75,24.3333L       65.9166,24.3333L 66.25,45.3333L 75.75,30.5L      5.5833,62.3333L 92.5833,75.5L  100,75.8333L 100,0 Z "/>

The real meat of the shape definition is defined in the Figures section of a PathGeometry object, which is written in a mini path syntax.  In practice you’ll be copying and pasting this data out of a tool like Microsoft Expression Design, but in case your curious there are several pages online that describe the XAML path mini-language (one here) that you can peruse in your free time if your curious to know more about how this syntax works.

Tools of the Trade

There are many tools capable of generating XAML output, but my personal preference is Microsoft’s Expression Design tool.  You can download a 60-day free trial of this tool on Microsoft’s site (here).

You’ll also want to have a basic template file that you can paste your custom shape data into.  You can pull this off my site here.

OK I have the Tools, now what?

The steps involved are easier to show than describe, and so I created a video walkthrough showing the process of creating a custom shape with Expression Design, saving it into a .shape file, and then finally importing that shape into Spyder using Vista Advanced.  The walkthrough moves pretty fast; if you have any questions just leave a comment on this blog post for me and I’ll try my best to help.

 

Summary

So hopefully this post has helped explain the basics of creating custom shapes for your X20 system.  In the next post I’ll spend some more time building custom shapes and logos in Expression Design, and I’ll cover a few tips and tricks I’ve found to make the process more efficient.