{"id":190,"date":"2010-10-04T19:07:00","date_gmt":"2010-10-05T02:07:00","guid":{"rendered":"http:\/\/knightware.net\/blog\/?p=190"},"modified":"2025-01-05T16:01:17","modified_gmt":"2025-01-05T23:01:17","slug":"bitmap-borders-and-shadows-part-2-of-n","status":"publish","type":"post","link":"https:\/\/www.knightware.net\/?p=190","title":{"rendered":"Bitmap Borders and Shadows: Part 2 of n"},"content":{"rendered":"\n

In the first part of this series<\/a> 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\u2019m 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\u2019ve generated for the sales team for various demos over time.<\/p>\n\n\n\n

\"CNN_Logo\"<\/a><\/figure> 
DVD player video cut into CNN logo<\/span><\/td>
\"Shards\"<\/a><\/figure> 
Another DVD player cut into shards<\/span><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

So How is a Shape Defined?<\/h2>\n\n\n\n

The bitmap border \/ shadow engine uses a XAML<\/a> (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 \u2018shard\u2019 shapes above:<\/p>\n\n\n\n

\n

<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 “\/><\/span><\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

The real meat of the shape definition is defined in the Figures section of a PathGeometry<\/a> object, which is written in a mini path syntax.  In practice you\u2019ll 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<\/a>) that you can peruse in your free time if your curious to know more about how this syntax works.<\/p>\n\n\n\n

Tools of the Trade<\/h2>\n\n\n\n

There are many tools capable of generating XAML output, but my personal preference is Microsoft\u2019s Expression Design tool.  You can download a 60-day free trial of this tool on Microsoft\u2019s site (here<\/a>).<\/p>\n\n\n\n

You\u2019ll also want to have a basic template file that you can paste your custom shape data into.\u00a0 You can pull this off my site here<\/a>.<\/p>\n\n\n\n

OK I have the Tools, now what?<\/h2>\n\n\n\n

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\u2019ll try my best to help.<\/p>\n\n\n\n

<\/object><\/p>\n\n\n\n

 <\/h2>\n\n\n\n

Summary<\/h2>\n\n\n\n

So hopefully this post has helped explain the basics of creating custom shapes for your X20 system.  In the next post I\u2019ll spend some more time building custom shapes and logos in Expression Design, and I\u2019ll cover a few tips and tricks I\u2019ve found to make the process more efficient.<\/p>\n","protected":false},"excerpt":{"rendered":"

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\u2019m going to discuss the process for creating custom shapes and getting them loaded into the X20 video processor.  You might want […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,10],"tags":[12,13,20,21,28],"class_list":["post-190","post","type-post","status-publish","format-standard","hentry","category-software","category-vista-systems","tag-bitmap","tag-borders","tag-shadows","tag-spyder","tag-x20"],"_links":{"self":[{"href":"https:\/\/www.knightware.net\/index.php?rest_route=\/wp\/v2\/posts\/190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.knightware.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.knightware.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.knightware.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.knightware.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=190"}],"version-history":[{"count":2,"href":"https:\/\/www.knightware.net\/index.php?rest_route=\/wp\/v2\/posts\/190\/revisions"}],"predecessor-version":[{"id":4124,"href":"https:\/\/www.knightware.net\/index.php?rest_route=\/wp\/v2\/posts\/190\/revisions\/4124"}],"wp:attachment":[{"href":"https:\/\/www.knightware.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=190"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knightware.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=190"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knightware.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}