{"id":153,"date":"2010-09-19T12:39:00","date_gmt":"2010-09-19T19:39:00","guid":{"rendered":"http:\/\/knightware.net\/blog\/?p=153"},"modified":"2024-12-23T16:49:32","modified_gmt":"2024-12-23T23:49:32","slug":"bitmap-borders-and-shadows-part-1-of-n","status":"publish","type":"post","link":"https:\/\/www.knightware.net\/?p=153","title":{"rendered":"Bitmap Borders and Shadows: Part 1 of n"},"content":{"rendered":"<p>In this next series of posts, I\u2019m going to discuss the bitmap borders and shadows (BBS) feature that first appeared in Vista Advanced 3.5.0.\u00a0 If you haven\u2019t played with them yet, you owe it to yourself to do so.<\/p>\n<p>This first blog post will discuss how (and when) you can use the feature, how it works under the covers, and how to get the best possible performance from it.\u00a0 If you have no idea what the bitmap borders and shadows feature is, take a look at the action shot below.<\/p>\n<p><a href=\"http:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/3581.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"display: inline; border: 0px;\" title=\"358\" src=\"https:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/358_thumb1.jpg\" alt=\"358\" width=\"640\" height=\"199\" border=\"0\" \/><\/a><\/p>\n<p>The image above shows two related features, bitmap borders and shadows and window titling.\u00a0 I\u2019m going to skip over titling for this post, and concentrate only on the bitmap border \/ shadow feature.<\/p>\n<h2>What Can I do With Bitmap Borders?<\/h2>\n<p>Bitmap borders goes beyond the traditional supported borders to enable custom shapes and fills to be defined.\u00a0 Shadows applied will keep the same shape as the bitmap border, and can even have a color other than black defined (not shown).<\/p>\n<table border=\"0\" width=\"453\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"137\"><a href=\"http:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/onelayer1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" style=\"display: inline; border: 0px;\" title=\"one layer\" src=\"https:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/onelayer_thumb1.jpg\" alt=\"one layer\" width=\"136\" height=\"103\" border=\"0\" \/><\/a><\/td>\n<td width=\"414\"><strong>Features Shown:<\/strong><\/p>\n<ol>\n<li>\n<div align=\"left\">Non-Rectangular window (rounded edges in this example)<\/div>\n<\/li>\n<li>\n<div align=\"left\">Image file used as border texture<\/div>\n<\/li>\n<li>\n<div align=\"left\">Shadow shape that matches the border shape<\/div>\n<\/li>\n<\/ol>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>The Spyder software comes with about a dozen border shapes that you can use, as well as a number of images that can be used to texture the border.\u00a0 Of course you can create and use custom shapes and fill images, which I\u2019ll be discussing in detail in the next blog post.<\/p>\n<p>The KeyFrame property panel contains handles for all of the available bitmap border and shadow adjustments, and I\u2019ve included a few screenshots of the most interesting ones below.\u00a0 Using them is pretty self explanatory, and so I won\u2019t bother going through them exhaustively.<\/p>\n<div align=\"center\">\n<table border=\"0\" width=\"400\" cellspacing=\"0\" cellpadding=\"2\" align=\"center\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"99\"><strong><a href=\"https:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/bordersettings3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" style=\"display: inline; border: 0px;\" title=\"border settings\" src=\"http:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/bordersettings_thumb2.jpg\" alt=\"border settings\" width=\"172\" height=\"244\" border=\"0\" \/><\/a><\/strong><\/td>\n<td valign=\"top\" width=\"167\"><strong><a href=\"http:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/bordertexture3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" style=\"display: inline; border: 0px;\" title=\"border texture\" src=\"https:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/bordertexture_thumb21.jpg\" alt=\"border texture\" width=\"185\" height=\"244\" border=\"0\" \/><\/a><\/strong><\/td>\n<td valign=\"top\" width=\"133\"><strong><a href=\"https:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/bordershape31.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" style=\"display: inline; border: 0px;\" title=\"border shape\" src=\"https:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/bordershape_thumb21.jpg\" alt=\"border shape\" width=\"196\" height=\"244\" border=\"0\" \/><\/a><\/strong><\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"99\"><strong>General Settings<\/strong><\/td>\n<td valign=\"top\" width=\"167\"><strong>Border Texture<\/strong><\/td>\n<td valign=\"top\" width=\"133\"><strong>Border Shape<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2>So How Does It Work?<\/h2>\n<p>Under the covers, the border \/ shadow settings selected are used to generate a specially formatted image at a size relative to the input video resolution, which gets loaded once into the target layer where it is in turn merged with the video each frame. The Images below show this process.<\/p>\n<table border=\"0\" width=\"448\" cellspacing=\"0\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td valign=\"top\" width=\"167\"><a href=\"https:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/ExampleSource1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"\" style=\"display: inline; border: 0px;\" title=\"Example - Source\" src=\"http:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/ExampleSource_thumb1.jpg\" alt=\"Example - Source\" width=\"244\" height=\"184\" border=\"0\" \/><\/a><\/td>\n<td valign=\"top\" width=\"427\"><strong><strong>Video Frame Buffer (2048&#215;1200)<\/strong><\/strong>In this frame buffer, the active video is repositioned so that it will fit correctly when merged with the border image loaded.\u00a0 These offsets are programmed by the server as part of the image loading process<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"167\"><a href=\"https:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/ExampleBorder1.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"display: inline; border: 0px;\" title=\"Example - Border\" src=\"https:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/ExampleBorder_thumb1.jpg\" alt=\"Example - Border\" width=\"244\" height=\"184\" border=\"0\" \/><\/a><\/td>\n<td valign=\"top\" width=\"427\"><strong><strong>Bitmap\u00a0 Buffer (2048&#215;1200)<\/strong><\/strong>This buffer stores the generated image which will be merged with the video.\u00a0 Special bit values are encoded into the image to specify what area of the image should be mixed with the video and which area should be mixed with the VI.<\/td>\n<\/tr>\n<tr>\n<td valign=\"top\" width=\"167\"><a href=\"http:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/ExampleBoth11.jpg\"><img loading=\"lazy\" decoding=\"async\" style=\"display: inline; border: 0px;\" title=\"Example - Both\" src=\"http:\/\/www.knightware.net\/wp-content\/uploads\/2010\/09\/ExampleBoth_thumb1.jpg\" alt=\"Example - Both\" width=\"244\" height=\"184\" border=\"0\" \/><\/a><\/td>\n<td valign=\"top\" width=\"427\"><strong>Resulting Image<br \/>\n<\/strong><br \/>\nOnce the image is loaded, the hardware in the X20 layer will perform the video cutout and merge the image with the border on a frame-by-frame basis.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Note that the image sequence above makes a point to call out the frame buffer sizes in the layer hardware; a size of 2048&#215;1200.\u00a0 This is important because the generated image file previously mentioned needs to fit within these dimensions.\u00a0 Since the image file must be loaded relative to the input video resolution, there may not be enough \u2018free\u2019 frame buffer space to generate the desired effect.<\/p>\n<p>In cases where there isn\u2019t enough space to fit the requested bitmap border \/ shadow settings, the server will automatically scale back the border offset and then the border thickness until the image fits.<\/p>\n<p>Also note that the image files generated can be relatively large, and in almost all cases <strong>you really need to be running a still server<\/strong> to ensure a good experience.\u00a0 While technically the bitmap borders will work when using traditional USB loading, the image load times detract much of the experience.\u00a0 There is additional information on the still server on the Vista forum site, and I\u2019ve additionally just completed a post describing the still server <a href=\"https:\/\/knightware.net\/blog\/?p=126\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<h2>Where Bitmap Borders Won\u2019t Work<\/h2>\n<p>There are a few scenarios where bitmap border functionality isn\u2019t available, and this section attempts to list them all to save you from surprises in the field.<\/p>\n<ul>\n<li>&#8211; <strong>Input Resolutions above 2048 wide OR 1200 high<\/strong>.\u00a0 This causes the layers to enter a special mode that uses two layer frame buffers, and there is no bitmap border support when in this mode.<\/li>\n<li>&#8211; <strong>Running a VI height above 1850<\/strong>.\u00a0 When your running a VI at a height above 1850, certain layers cannot support still images, effectively disabling bitmap borders.<\/li>\n<\/ul>\n<h2>Tips for Getting the Best Experience<\/h2>\n<p>While certainly not required, the recommendations presented here are sure to be extremely beneficial for anyone using the bitmap border \/ shadow feature set.<\/p>\n<h5><strong>Use a Still Server<\/strong><\/h5>\n<p>I know I mentioned this already once in this post, but it can\u2019t possibly be stressed enough.\u00a0 If your using bitmap borders and shadows (or stills for that matter), then plunk down a few hundred bucks and buy a PC to hook up to your X20 for use as a still server.\u00a0 The speed performance improvement when using this accessory can easily be over 10x.<\/p>\n<h5><strong>Build Treatments to Recall Bitmap Border Settings<\/strong><\/h5>\n<p>Using treatments is good practice in general, but the load times involved with adjusting bitmap borders and shadows make it an even more beneficial practice.\u00a0 Instead of manually adjusting KeyFrame parameters each time you want to setup a bitmap border, just make a treatment for the looks you use most frequently (border \/ shadow treatment settings include bitmap border options).\u00a0 Not only does this clean up the workflow for the operator, the on-screen experience is nicer since the system will use the smooth go processor to automatically pull the layer off screen while loading the border.<\/p>\n<h2>Summary<\/h2>\n<p>I always like knowing how things work under the hood, and if your like me then hopefully this has shed a little light on how the bitmap border and shadow feature works.\u00a0 In the next post, I\u2019m going to discuss how you can create your own custom border shapes and use them with the Spyder X20.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this next series of posts, I\u2019m going to discuss the bitmap borders and shadows (BBS) feature that first appeared in Vista Advanced 3.5.0.\u00a0 If you haven\u2019t played with them yet, you owe it to yourself to do so. This first blog post will discuss how (and when) you can use the feature, how it [&hellip;]<\/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,22,28],"class_list":["post-153","post","type-post","status-publish","format-standard","hentry","category-software","category-vista-systems","tag-bitmap","tag-borders","tag-shadows","tag-spyder","tag-still-server","tag-x20"],"_links":{"self":[{"href":"https:\/\/www.knightware.net\/index.php?rest_route=\/wp\/v2\/posts\/153","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=153"}],"version-history":[{"count":2,"href":"https:\/\/www.knightware.net\/index.php?rest_route=\/wp\/v2\/posts\/153\/revisions"}],"predecessor-version":[{"id":4119,"href":"https:\/\/www.knightware.net\/index.php?rest_route=\/wp\/v2\/posts\/153\/revisions\/4119"}],"wp:attachment":[{"href":"https:\/\/www.knightware.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.knightware.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=153"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.knightware.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}