If you're not interested in the techincal details but rather just want the working program, You can just get it HERE

A friend of mine has recently asked if it's possible to write a console .net application to make a thumbnail of a website. The task is pretty trivial with Windows forms actually. But him being the Linux guy and all... I decided to pick up the challenge :)

An interesting use case. In winForms all you really need to do is drop a WebBrowser on your form and once it's loaded the page call:

webBrowser.DrawToBitmap(bitmap, bitmapRect);

When it gets tricky is when you want to do it in a console application is a way that can take a shot of multitude of websites provided in a batch file. There is a dirty way of instantiating a whole form, making it show (or not), doing the work and  then exiting the Winforms app. Which might probably be enough for a quick solution, but I wanted to publish this piece of code, so I would actually NOT take a pride in something like that.

How is it done the proper way then?

So we instantiate the web control (I've written a separate class to do the dirty work for me called WebPageBitmap..

public WebPageBitmap(string url, int width, int height, bool scrollBarsEnabled)
{
    this.url = url;
    this.width = width;
    this.height = height;
    webBrowser = new WebBrowser();
    webBrowser.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(documentCompletedEventHandler);
    webBrowser.Size = new Size(width, height);
    webBrowser.ScrollBarsEnabled = scrollBarsEnabled;
}

Easy so far and pretty similar to what the regular app would do anyway. The documentCompletedEventHandler is a delegate to tell that the has loaded (I initially wanted to use that for drawing the bitmap but deferred that to the point where the bitmap is actually fetched after I added the resizing part). Now comes the interesting case.

Since the call is asynchronous a simple webBrowser.Navigate(url); won't cut it. Since we are in a single thread and the browser does not create a separate thread for that. Which makes sense by the old windows rule: Only th thread that creates a control, accesses the control. We need to somehow allow the control to take the flow of the thread and do its work. Navigate only tells it that it should perform the action and immediately exits. The developer's responsibility then is to know when the control is ready for consumption. Which is the case when the webBrowser.ReadyState progresses to (or returns to) the state of  WebBrowserReadyState.Complete. To pass the flow to the app controls you need to perform Application.DoEvents();. which was a bit of a wild guess when I used it. Surprise, surprise, it works just like it did in other Windows frameworks I used before.

public void Fetch()
{
    webBrowser.Navigate(url);
        while (webBrowser.ReadyState != WebBrowserReadyState.Complete)
        {
            Application.DoEvents();
        }
}

The effect is a tiny and neat (I hope) app that pulls a web page from the net and makes a screenshot off of it (with possible rescaling):

You can get the source here.

Also there is a compiled... binary... ready to use... compiled with love... for your downloading pleasure... HERE

If Stardock gave WindowBlinds version names like Microsoft did with XP and its successor, WindowBlinds 5 would probably be called "WindowBlinds Translucent" or "WindowBlinds See-Through" or... oh no... it can't be... or can it (?) "WindowBlinds Vista"!

In the first part I've explained the most noticeable changes you will see in a new WindowBlinds 5 skin but to be honest it went all crazy about translucent parts. We've got used to the translucent start panel since 4.6 which I've described how to create in this article. But in WindowBlinds 5 you can make the whole taskbar translucent as well as the drop down menus, and the "Please Wait" dialog!

Here comes my skin!

Like it or not first impressions are important. For a skin, the first impression often determine whether the user will try it long enough to appreciate the qualities or reach for that "Delete This Skin" button right away. Right now you've really got the tools to make your skin transition smoothly onto the user's system or make a big splash!

WB5 adds a new section that you can find in SkinStudio under "XP Shell"->"Please Wait Dialog". The section is so straightforward there's really not much to say about it. I just wanted to make sure you're aware of its existence ands importance. The image now separated from the shutdown image and is no longer limited to the system dialog size. It blends nicely into the desktop and you gain the control over the text font and color! Think of it like of a movie trailer. It's very important that it expresses the spirit of the skin and makes an excellent impression.

... with a cool taskbar...

The taskbar is probably more omnipresent on your user's desktops than other controls you may consider crucial to your skin. It gives you a vast area to paint upon and allows for a quite a bit control over it. Now you can use that space in an even better way and you can finally make it blend nicely with the desktop wallpaper.

The effect is pretty simple to achieve. If you have read my other (previously linked) articles then you have a good idea about how translucency works. The simple Per-pixel effect has never worked on the taskbar before. WindowBlinds is always trying to be as backward-compatible as possible so not to break skins for which it might have been accidentally (or for research purposes) enabled, another switch has been enabled in section: "Taskbar"->"Taskbar Background"->"Horizontal". The "Background Effect" attribute.  That failsafe need to be enabled on top of what you would regularly do to enable translucency. To summarize - to make the sample horizontal taskbar translucent enter the section: "Taskbar"->"Taskbar Background"->"Horizontal" and set the following attributes to their respective values:

• "Painting options"->"Transparency and translucency - Switch" as "Transparent",
• "Painting options"->"Translucency - Switch" to "Translucency IS being used" and
• "Background Effect" to "Translucent Taskbar effect"

Needless to say the taskbar must actually be a translucent image for the effect to work :)

The first two switches are enabled for each section respectively (vertical/horizontal taskbar/gripper) but the last one (the "Background effect") is shared among all of them and toggling it in any of the taskbar sections will toggle it for the whole taskbar.

... and a sparkling menu.

Similarly the drop down menus are now skinned in a per-pixel manner...

It's as simple making your "Controls"->"Menus"->"Pull Down Background"-> "Pull Down Background Image" translucent and enabling the usual:

• "Painting options"->"Transparency and translucency - Switch" as "Transparent",
• "Painting options"->"Translucency - Switch" to "Translucency IS being used" and

attributes in the "Controls"->"Menus"->"Pull Down Background" section. Such menus will automatically become translucent in the new WindowBlinds version.

Similarly to what has been described in this article the new menus may have the shape that does not look good with the regular menus shadow that is simply square. So if your menu is of some irregular shape or simply do the shadow blending itself you can disable the system shadows with the "Hide Shadows" attribute in the same section. Also for the feature to work you should check to make sure that the "Flat menus - disables skinning" attribute is disabled. This will especially be the case with MSStyles converted to WindowBlinds skins.

One of the features that generated a lot of excitement in the comments of the first part of the series was the ability to define a reflection map for the window frames. The cool news is that the drop down menus will allow for the same features to work on them. One can only imagine what cool effects the skinners could make with it. Suffice to say the menu can look different depending on which part of the screen it's open on.

The drop down menu section for the feature is located in "Controls"->"Menus"->"Pull Down Background"->"Pull Down Back - Reflection" in SkinStudio.

WindowBlinds 5 is one of the most exciting releases so far. The numerous translucency additions allow skinners to create smoother, more visually appealing skins. New features like the "progress flash" and the default button fading make them more dynamic and interactive.

One of the coolest features of WindowBlinds 5 is the possibility to define a translucent frames in your skin. This means a lot of things and a lot of new possibilities. Your windows can drop shadows, glow but most of all you don't have to look at those jaggies if your skin features rounded corners in them. The level of excitement can probably be shown by the fact that it does not have even shown in the public beta, yet it already has artists creating artwork advocating it. and a number of authors creating a mock-ups of the skins they intend to create. I have to admit I do not recall being contacted so much about any previous version of WindowBlinds and any other version that generated such passion among even the MSStyles users.

The new window frames blend nicely into the current feature set of WB.

The window part is divided into 5 parts, one for each side: top, bottom, left and right like in the following picture:

If you look at the picture carefully you'll notice that unlike before the top and bottom part of the frame goes from the very left to the very right of the window. Meaning that unlike previously the corners belong to the horizontal images rather that vertical. I must say I like that change a lot as it's much more natural. The frames layout inside the images have remained the same. The vertical images (left and right) contain 2 frames side by side horizontally. The first frame belongs to the active state of a window while the second one belongs to the inactive state. Similarly the Horizontal images (top and bottom) has 2 frames placed on top of each other. The upper one is the active state, while the inactive one is placed on the bottom.

Should you be reading it carefully you have probably noticed that I've said 5 but only mentioned 4, that is because the 5th one is the maximized caption

The image is formatted just like the regular caption image - 2 frames on top of each other. The images in all of the frames MUST be 32-bit TGA-s which SkinStudio can create for you from PNG images or even allow you to edit like described in one of my previous articles.

Now what about the buttons?

The per pixel buttons are a bit less flexible on those new borders than they are on the regular windows borders, but the good news is that they are MUCH, MUCH easier to understand and test! Currently WindowBlinds allows you to define 5 buttons: minimize, maximize & restore, close and a special close button for the frames that cannot be maximized or minimized (basically those Dialog frames like Display properties.

The frames in the image  are in the following order:

• Normal
• Mouse Over
• Pressed
• Disabled
• Inactive
• Inactive Mouse Over
• Inactive Pressed
• Inactive Disabled

And although not all of them may always be used the image can look like this: 

The buttons are in their respective sections conveniently places under the "Window Borders - Per-Pixel"->"Buttons" section. there is currently no way to define additional buttons and the buttons should use the same 32-bit TGA format as the frames.

Now SkinStudio 5 gives you a way to test those images by means of 4 new sub-previews added to the main preview.

Just like any other preview - clicking on an image will take you to its respective section. SkinStudio also allows you to reposition the buttons on the preview by dragging and dropping them in the places of your choice. There is a limit to how the buttons are placed currently - they have to be aligned to the top right corner and they have to be positioned in the window caption area, With an exception of the system icon which is aligned to the top-left corner of its window. You should be aware however that each button has 2 coordinates, one for when the window is maximized and the other for the non-maximized version of the window.

Cool! So I won't ever have to create those regular borders, right? Wrong.

Unfortunately WindowBlinds still requires you to define the regular borders. Most users will not see them or just not too often, but it's just like that vertical taskbar which is supposedly used only by me and probably the other freak at Microsoft that actually designed it :). WindowBlinds requires those frames for 2 situations:

1. MDI Windows - the applications like SkinStudio that allow you to open multiple documents (skins) at once. Those will use the old frames when the document inside is not maximized and therefore requires the app to paint its frame.
   
2. Older systems that WindowBlinds detects they cannot support it due to the lack of support on the driver's side.

The good news is that you are WindowBlinds longer constrained on the per pixel frames to the size of the caption height - system metrics. You know... the error SkinStudio reported when you had the value of  Section: "Window Borders"->   Attribute: "Top Image"->"Caption Height" defined to a different height that the caption image height. You only should check that the maximized per-pixel caption does not collide with it as WindowBlinds will then crop the image.

Window caption text

All the caption text definitions are stored withing the definition of the caption image, that is the Section: "Window Borders - PerPixel"->"Caption"->   Attribute: "Text Settings". You can define the text font there as well as it's placement and color. You can shift if vertically and horizontally by means of: Section: "Window Borders - PerPixel"->"Caption"->   Attribute: "Content Margins".

Other than the imperative to have TGA's as the images on those new sections they are pretty much a standard WindowBlinds sections like for push buttons and such.

What is the reflection map?

Reflection map is a new concept that allows the skinner to have a kind of watermark that does not belong to a particular window but adds a nice feeling that binds a number of windows together, creating a smooth desktop-wide feel. I've added to Mike's skin this reflection map (the preview shows it rescaled to 50% of its size).

the image is indeed all white and the gray areas are just translucent background that you can see through the image.

Now if you apply the image (remember to turn the translucent and transparent bits on) the sample reflection will look like this.

Now that feature is liable to make things paint slower. So use it with caution and use it only if you really have something that you can only express that way.

If you use the classic widget fonts referenced from section "Miscellaneous"->"Fonts for classic widgets" and defined as subsections to the section, make sure you specify the font sizes in negative values. Should you fail to do this, all kind of bad things may happen. Firefox will look bad. Outlook 2003 will most probably have problems and applications are liable to have some of their fonts blown out of the proportion.

It all started with another brain-freeze today. I just couldn't find a section that contained the File Dialog places bar images. You know the bar on the left on the File->Save and File->Open dialogs? I bet you've been cursing more than once searching for a section like that. SkinStudio will help you with searching for a section if you know it's UIS name or its part AND if such section actually exist. But in my case it didn't.

Wouldn't it be great if I could just lookup the section by it's name or a part of it?

So I've added a tool button like you can see on the image below.

Press this button (or press Ctrl+F while the tree view is focused) and you're getting the familiar "Find" dialog.

Enter the section name or a part of it and press the "Fine Next" button.

There you are... Where have you been? I've been so worried!

It will also work if there is more than one section matching, in which case SkinStudio will iterate through the sections when you press the "Find Next" button consecutively.

The feature will be introduced in SkinStudio 5 Beta, soon to be made available on Object Desktop.

Little I knew that I will be involved in it, when I was posting a while ago on Neowin and WinMatrix about the cool Warcraft skins available on Wincustomize. Blizzard is offering a World of Warcraft suite now for download on their  US and European pages pages and upon their request we needed to swiftly modify the Apocalypse's great World_of_Warcraft skin to meet Blizzard's request to match the game GUI more closely. I was assigned to the task so I went swiftly to the local store with the perfect excuse to get myself a new toy!

- Honey, but I need it for work...
- Sure you do!
- but really, darling... look...

... so I started hacking the game files to get some artwork out of it. As it appears there's a lot of people looting the game resources than one could expect... a bi-product of it you can find in my previous article here.

But to the point....

Out of the game files I got some cool graphics, now I'm not really good with with design but equipped with some original artwork I can be pretty dangerous. So I got some artwork out of the game and started cutting and pasting this auction window:

as you can notice the frame drops a nice shadow and I wanted to reflect that in the skin. To make the long story short I ended up with  this design:

you may have noticed that I have made the right panel translucent as well, hey! if WindowBlinds can do it, why not?

Now it came the time to cut the images into their respective sections. After the process common to all XP enabled styles, the only difference so far is that I used TGAs (PNGs actually and then SkinStudio did the conversion to TGA for me automatically) in the images instead of the usual bitmaps. Let's try it now...

OK, not quite what we hoped for, right? This is because WindowBlinds didn't realize we have used translucent images and simply painted them as if they were binary transparent. so now for every element of the panel we need to enable translucency. This is done by clicking on each of the elements in the preview and selecting the "Translucency" check box in the lower right corner of the SkinStudio area like this:

OK so it's still not completely right. This is still the transparency we could have get from the beginning since WindowBlinds started supporting Windows XP. If you check the following screen-shot you will notice that the shadow in the bottom and left of the panel is solid gray instead of the nice shadow in my Photoshop screen-shot.

There is a nice shadow on the right, but it's the regular Windows shadow. In World of Warcraft the light is dropped from the top/right corner co the shadow drops to the bottom.left and that's the effect we're trying to have. Also the right panel is not translucent, so that's unacceptable. And Actually this is the point when WindowBlinds magic really begins. Let's tell WindowBlinds that we REALLY, REALLY want the start panel to be translucent. You can do this by setting the "Start Panel Effects" Attribute to "normal per pixel alpha" for every element of the start panel:

• Section: "Start Panel"->"User Pane"->   Attribute: "Start panel effects"
• Section: "Start Panel"->"Programs List"->   Attribute: "Start panel effects"
• Section: "Start Panel"->"More Programs Panel"->"Background"->   Attribute: "Start panel effects"
• Section: "Start Panel"->"Places List"->   Attribute: "Start panel effects"
• Section: "Start Panel"->"Bottom Bar"->   Attribute: "Start panel effects"

So we're set now right?

WRONG! Due to how WindowBlinds actually processes the Start Panel translucency windows added a shadow on the right of the panel, check out the image once again, there is a shadow on the right of the start panel, some 10 pixels right of it. Once you'll notice it's it's quite annoying! Let's get rid of it...that's a pretty simple task. All you need to do is set the following attribute to "Enabled":

• Section: "Start Panel"->"Bottom Bar"->   Attribute: "Start panel effects"

And here's the new Start Panel in it's full glory:

http://www.skinstudio.net/blog_bin/startpanel_trans/blog_startpanel_trans_6.jpg

Now, could you make some more, please? ;)

[Updated 11 May 2005] Read at the end of the article.

I've been on a quest to improve a skin today and to do so I needed to extract a big archive in a proprietary and not widely supported format and get the images out of it and into the skin. Turned out the first part was not as bad as I expected as I've found some tools on the net to do this and Kris helped with the tool to convert the images in the proprietary format into TGA's. Now here's where the pain begun.

I needed to have my alpha channel kept in the files but I also wanted to process the files before making them into the skin.

Turns out Adobe still haven't got their TGA support fixed (which was why I added the quasi-PNG-support to SkinStudio in the first place). If you're not familiar with the problem, Ive wrote an article about it  before and it's available here. As you can read here Adobe actually considers the current one a proper behaviour and the one that we enjoyed in Photoshop 7.0 is considered an "incompatibility with some existing workflows". I've tried a number of other apps including IrfanView, xnView and SageThumbs but they just couldn't chew it. So before I've lost what was left of my nails, I've decided to write a little Applet that turns 32-bit images (be those TGA-s or BMP-s) to PNG-s so that I can actually do something with them before making them into a skin.

the applet is available here

But because a lot of skinners have troubles going the other way, and it was only like a few lines of code, I've also made one for the other format. This one takes any 32-bit BMP or PNG and turns it into a TGA.

and you can get it here.

[Updated 11 May 2005] It could get confusing for others just like it got for me, so I've integrated the 2 apps and added saving to 32-bit bitmaps. I have also added the option to include or ignore images that are not 32-bit.

Now this updated applet is available here.

Have fun, and make the cool skin coming!

Browsing the WindowBlinds skins on Wincustomize and applying them is a source of a lot of joy, but there's also a drop of frustration. There are some common problems with the skins that skinners notoriously forget to check for. Perhaps my working environment is not typical but since you've went all the way to create a skin it's relatively easy to make it a perfect skin for everyone. So here are the 10 things I find most common to be wrong with a lot of skins:

1. Vertical taskbars. this one is a source of a lot of grief for me. I use 2 monitors, which results in a very wide desktop area, so it's logical for me to use the vertical taskbar. And I do use it. I must say that it's the most common for Both WindowBlinds and MSStyles not to include a customized Vertical Taskbar and leaving it in Luna Blue instead.
2. Make sure your horizontal taskbar does not have problems when it's located on top of the screen or when user resizes it to more than one row of task buttons. If I use the horizontal taskbar (for example when a skin does not provide a vertical one) I always have it resized to at least 4 rows of tasks. Being the developer I tend to have a teen up to 30 windows open at once for testing various aspects, browsing sites with code and helpful tips and what not. 1 row of tasks in NOT enough.
3. Making dark skins is tricky on Windows. A lot of apps are not ready at all for dark skins they hard-code colors or use the classic ones for a lot of things: Internet Explorer for example always uses only the classic color for text on buttons. No. it is not sufficient that your dark skin looks good outside Internet Explore, if it makes IE forms unusable it's not going to be used by the majority of users. IE uses the color defined in Section: "Miscellaneous"->"Colors" in Attribute: "3D Controls"->"Text - System Button". If you make the skin have dark buttons, make sure this color is readable on Web forms or you'll run into this:
   
   
   
4. Make sure you fix the colors on the Desktop context menu, the "New" item sub menu and you won't have problems with custom drawn menus. On this menu Microsoft pretty much violated it's own guidelines of how menus should be implemented (which a lot of other apps do as well - including one menu in SkinStudio). If you do not make sure the following hint worked in your skin, this menu is liable to look bad.
   
   
   
   The text should be black on the olive green, but instead it has the light outline. the colors responsible for the outlines in your skin are:
   
• Section: "Miscellaneous"->"Colors" Attribute: "Window"->"Background - Window" for the regular non highlighted menu items. (this is what makes the menu in this very skin look bad). Update! I have just recentlydiscovered that this color is overriden by the: Section: "Miscellaneous"->"Colors"->   Attribute: "Menus"->"Background - Menu" which is much better choice as it is liable to interfere with much less places in windows.
  
• Section: "Miscellaneous"->"Colors" Attribute: "Selections"->"Background - Highlighted" for highlighted text outline (which in this skin is not visible since it's defined as orange - which is very good)
  
5. Some people use task grouping. It's the first thing people on large screens tend to turn off. I'm sure I don't use it and the graphic designers tend to have big screens as well, but people on notebooks with small screens may indeed find it useful. So make sure you turn on the attribute grouing on for a while before uploading your skin. Launch a few Explorer windows with Win+E to make sure you have something grouped and check out the fonts and colors on the arrow and the grouped menu. We tend to see some real problems with a lot of skins on the menu. As I understand people simply do not use this feature and forget about it.
   
6. Make sure yous skin looks good with re-sizable and not re-sizable taskbar. this error is not nearly as common as the previous ones built it just like the one with taskbar using more than one row of buttons draws from the assumption that people will use your skin the same way you do. They don't.
   
7. If you use the classic widget fonts referenced from section "Miscellaneous"->"Fonts for classic widgets" and defined as subsections to the section, make sure you specify the font sizes in negative values. Should you fail to do this, all kind of bad things may happen. Firefox will look bad. Outlook 2003 will most probably have problems and applications are liable to have some of their fonts blown out of the proportion.
   
8. If you use non typical fonts, you have a mechanism for WindowBlinds to temporally install those fonts for you. Section: "Miscellaneous"->"Fonts to Install" is the place where you can specify the fonts you want to have installed. If you do not reference them from there, Window will try to substitute the fonts with something it has in stock which is mostly not what you intended.
   
9. A lot of users use Firefox or Mozilla these days. Since Firefox GUI toolbox (XUL) look and feel is defined with CSS, it's only aware of the classic colors. Just like IE, you need to make sure they all play nicely together. You cannot make sure it will look nicely with all Firefox skins but you should at least try the "Default" one.
   
10. Minimized Window caption and its buttons defined as subsections to "Minimized Window Caption" are often omitted by skinners since they do not see the appliance for them, but they actually are used. The Restore, close and Maximize are quite obvious as they are used by all MDI apps (like SkinStudio - when you minimize the Skin document from the menu bar) on minimized windows. But applications from Adobe and a few other vendors are actually using them for custom painted buttons. Photoshop for instance uses the minimize button for all of its palette windows.

this my no means exhausts the list of skin bugs, but those the things I find most commonly wrong with the WindowBlinds skins. To be honest most of the tips also concern the MSStyles I tend to convert a lot. Of course they do not have their menus skinnable and do not have a way to auto install fonts and SkinStudio auto converts classic fonts to negative values during conversion but it does not really make the things much better better, if anything - more limited.

If you find any of the problems in your skins the fix are in most cases at the reach of your hand. Should you find none of the problems in them, your nick is probably treetog, MikeB314, danilloOc or VoodooFreak ;)

Stardock IconDeveloper is a free icon creation tool available from Stardock Net,Inc. You can download it from here. Stardock also offers an advanced version allowing you to create icons of any sizeand other really cool things like recoloring icons or even whole icons packs as well as skinning them. But as long as you do not need the advanced features available in the Professional version, you're more than welcome to use the free edition of IconDeveloper.

There was a real storm of posts on the IconDeveloper newsgroups recently asking about how to create icons from files in formats that does not suport transparency or generated by applications that does not support that feature in formats like PNG or TGA. I have decided to write a complete tutorial on how to create icons from images in IconDeveloper.

Easter is closing. So i decided I'll lookup the WEB for something suitable. A few moments spent with Google releaved something quite appealing:

So I save the file as a bitmap and... well... bitmaps does nto support transparency, at least valid bitmaps that can be generated by generic image editing apps.So I have this gray background around the image I want to turn into the icon. That's pretty unacceptable.

But I have two sollutions:

1. open the image in an image editong program and remove all the gray pixels, which can be tedious or even impossible with some image editors (like MS Paint for example)
2. open it in IconDeveloper and mark the gray as transparent and let IconDeveloper do all the hard work for you.

Number one is pretty aparent to those who know how to do this and it's not a subject of this article, now the latter can be a real time saver for you.

So this is how I go about creating the icon from the image? I have just saved as a bitmap on my Desktop, now to turn it into the icon I just right click it and select the highlighted option from the menu:

Right after that Icondeveloper will open the image and offer you a dialog to create the icon from the image

The buttons in the middle allow you to select icon formats you want to create. The formats on the left are standard icon formats available for you to use instantly. The formats in the list on the right are the formats you have already decided to add to the icon you are creating. The buttons "add" and "remove" allow you to shift formats from one list to the other. You can add some odd or non typical formats (even non square ones) by clicking on the "Add custom" button.

On the screenshot above you see a "Select transparent color" button pointed at by the hand cursor. This button will ony be there if your image does not contain alpha channel in it in which case IconDeveloper can inherit the alpha from the original image. Otherwise it makes it possible for you to create a simple binary alpha channel by clicking on that button. Let's do it:

as shown on the above picture you are shown a small swatch showing you details of the color that you hover over and a small zoom window showing a small part of the image you move your mouse over - magnified. Clicking in any place on the screen will make the color you clicked, thecolor that will be treated as transparent. Now the effect is as follows:

Ok, but what the other settings do. The "Constraint proportions of the original image" causes IconDeveloper to keep the image's aspect ratio, meaning that the shape of the image will not be affected while it's being stretched. This is there not to cause e.g. circles to become some weird ellipses or turning squared into odd nn squared rectangles and so on. Otherwise if your source image would not be perfectly square you would experience something like you do watching a widescreen movie or a regular TV set after the movie has been stretched to the TV's full height. This can be funny at times, but must not always be intended.

Now as to the "Resample image". If you turn it off or select the "Nearest Neighbor" entry from the combo box, The iameg can become choppy, just like you would be watching the bare pixels enlarged. The various settings in the combo are similar to what you can find in an analogous Combo while you resize your image in Photoshop. Those are Various techniques to make your image log good when resized. As Seen on the screenshots I prefer this setting to be set to "Laczos3" as it generally gives me the best results, but you may choose to experiment which one you find workins gest for you. Various images may look better with various settings in the combo, but Lanczos3 generally produces a reasonably good results.

The third option below the left list is only meaningfull for 256 colors, 16 colors and monochromatic formats. Dithering is a technique used in computer graphics to create the illusion of color depth in images with a limited color palette (quantization). Checkout Wikipedia for more details.

SkinStudio also offers you a various algorithms to check which looks best on your images. As shown on the images:

In most cases however, if I ever need formats of 256 colros or lower, I find "Floyd Strinberg" method to work the best for me. You could have already noticed the images in the list on the left being dithered. Otherwise experiment to see which settings works best for you. Dithering is meaningless for the "Windows XP" and "16,7M colors" formats.

Pressing the OK button now will give you a nice icon that you may then save to a file.

Now this is turned out quite nice, didn't it?

Last week it has been brought to my attention that Blog Navigator can no longer post web articles. Alas, this was only a symptom of a much worse disease, but first things first...

This month in a noble effort of making the Windows platform more secure for us and our (perhaps future) kids ;) Microsoft rolled out a new set of updates, among which is this one innocently called MS05-013 and located in Microsoft Knowledge Base under a mysterious KB891781.

You will find more about the update and the horror it caused among the programmers using the control affected by the update on usenet, posts as this and this are only small sample of the damage. It seems that MS broke quite a few programs while making us more safe.

The effect, saying it bluntly is: IDHTMLEdit has been made useless and Blog Navigator fallen prey to that change.

Since IDHTMLEdit is simply a wrapper around MSHTML editor, I've examined quite a few approaches and some existing libraries, to fix the issue as fast and with as little modifications to the existing code as possible. After a day of hunting around and testing the existing approaches I've decided that if I want to retain the control over my code and keep it at a reasonable size, I need to do it myself.

Below is my simplistic (and working) approach to migrating from DHTML Editing Component to MSHTML editor (for Delphi programmers).

1. I use a TEmbeddedWB as the web browser control wrapper as it offers quite a bit additional functionality. I'm assuming you use that instead of the TWebbrowser as well. If you're not, it'a not a big problem to extract the functionalty you will need here.
2. In the DhtmlEdit you operate on the DOM structure and that's the interface the control does not allow you to access any loger and the change thaat makes it useless. The TWebBrowser offers a Document IDispatch which you can cast on IHTMLDocument2. This is exactly the structure you were working on before.
3. Now the browser control itself does not offer the ExecCommand(...) functionality. but not all is lost. when you get to the IHTMLDocument2 interface as described before, you can pretty much do anythng you were doing before by calling its execCommand.
4. You can also pull ann the formatting data from it by querrying it with its: queryCommandEnabled, execCommand, queryCommandIndeterm, queryCommandState, queryCommandSupported, queryCommandText and queryCommandValue methods.
5. Now the problem is that IDHTMLEdit used numeric values while the Document requires you to use strings. The simplest method is to use a translating table which is what I did:

type
  TMSHtmlCommandTranslation = array [DECMD_BOLD .. DECMD_PROPERTIES] of WideString;

const
  MSHtmlCommandTranslation : TMSHtmlCommandTranslation = (
  'Bold',               //DECMD_BOLD = $00001388;
  '',                   //
  'Copy',               //DECMD_COPY = $0000138A;
  'Cut',                //DECMD_CUT = $0000138B;
  'Delete',             //DDECMD_DELETE = $0000138C;
  '',                   //DDECMD_DELETECELLS = $0000138D;
  '',                   //DDECMD_DELETECOLS = $0000138E;
  '',                   //DDECMD_DELETEROWS = $0000138F;
  'Find',               //DDECMD_FINDTEXT = $00001390;
  'FontName',           //DDECMD_FONT = $00001391;
  '',                   //DDECMD_GETBACKCOLOR = $00001392;
  '',                   //DDECMD_GETBLOCKFMT = $00001393;
  '',                   //DDECMD_GETBLOCKFMTNAMES = $00001394;
  '',                   //DDECMD_GETFONTNAME = $00001395;
  'FontSize',           //DDECMD_GETFONTSIZE = $00001396;
  '',                   //DDECMD_GETFORECOLOR = $00001397;
  'CreateLink',         //DDECMD_HYPERLINK = $00001398;
  'InsertImage',        //DDECMD_IMAGE = $00001399;
  'Indent',             //DDECMD_INDENT = $0000139A;
  '',                   //DDECMD_INSERTCELL = $0000139B;
  '',                   //DDECMD_INSERTCOL = $0000139C;
  '',                   //DDECMD_INSERTROW = $0000139D;
  '',                   //DDECMD_INSERTTABLE = $0000139E;
  'Italic',             //DDECMD_ITALIC = $0000139F;
  'JustifyCenter',      //DDECMD_JUSTIFYCENTER = $000013A0;
  'JustifyLeft',        //DDECMD_JUSTIFYLEFT = $000013A1;
  'JustifyRight',       //DDECMD_JUSTIFYRIGHT = $000013A2;
  '',                   //DDECMD_LOCK_ELEMENT = $000013A3;
  '',                   //DDECMD_MAKE_ABSOLUTE = $000013A4;
  '',                   //DDECMD_MERGECELLS = $000013A5;
  'InsertOrderedList',  //DDECMD_ORDERLIST = $000013A6;
  'Outdent',            //DDECMD_OUTDENT = $000013A7;
  'Paste',              //DDECMD_PASTE = $000013A8;
  'Redo',               //DDECMD_REDO = $000013A9;
  '',                   //DDECMD_REMOVEFORMAT = $000013AA;
  'SelectAll',          //DDECMD_SELECTALL = $000013AB;
  '',                   //DDECMD_SEND_BACKWARD = $000013AC;
  '',                   //DDECMD_BRING_FORWARD = $000013AD;
  '',                   //DDECMD_SEND_BELOW_TEXT = $000013AE;
  '',                   //DDECMD_BRING_ABOVE_TEXT = $000013AF;
  '',                   //DDECMD_SEND_TO_BACK = $000013B0;
  '',                   //DDECMD_BRING_TO_FRONT = $000013B1;
  '',                   //DDECMD_SETBACKCOLOR = $000013B2;
  '',                   //DDECMD_SETBLOCKFMT = $000013B3;
  'FontName',           //DDECMD_SETFONTNAME = $000013B4;
  'FontSize',           //DDECMD_SETFONTSIZE = $000013B5;
  'ForeColor',          //DDECMD_SETFORECOLOR = $000013B6;
  '',                   //DDECMD_SPLITCELL = $000013B7;
  'Underline',          //DDECMD_UNDERLINE = $000013B8;
  'Undo',               //DDECMD_UNDO = $000013B9;
  'Unlink',             //DDECMD_UNLINK = $000013BA;
  'InsertUnorderedList',//DDECMD_UNORDERLIST = $000013BB;
  '');                  //DECMD_PROPERTIES = $000013BC;

I store the command values as the controls Tags so now instead of calling:

DHTMLEdit.ExecCommand(TControl(Sender).Tag,OLECMDEXECOPT_DODEFAULT);

I simply call:

FDocument.execCommand(MSHtmlCommandTranslation[TControl(Sender).Tag],True,variant)

where the FDocument is the IHTMLDocument2 DOM document I extracted from the TWebBrowser for the sake of not having to cast it each time I use it. and instead of:

DHTMLEdit.QueryStatus(TControl(Sender).Tag);

I can now use:

 FDocument.queryCommandValue(MSHtmlCommandTranslation[TControl(Sender).Tag]);
 FDocument.queryCommandEnabled(MSHtmlCommandTranslation[TControl(Sender).Tag]);

this allowed me to migrate away from DHTML Editing Component within one day after shunning all other options).

One thing that was pretty indispensible for DHTML Editing Component was that it called me back evary time a blok formatting was changed, it had this useful OnDisplayChanged event which was summoned every time the UI needed updating. That's where TEmbeddedWB comes handy it implements a

function UpdateUI: HRESULT; stdcall;

which than triggers the OnUpdateUI event, which for our needs does exactly the save what the OnDisplayChanged event did. so you can simply call your previous OnDisplayChanged event with the numerical querries remapped to strings and... with minimal effort you have your control fully migrated to the MSHTML editor.

So... this post is the first post made with the updated Blog Navigator with its poat editong brought back to normal functionality.