Phil Wright : Component Factory

Tuesday, September 20, 2005

microISV, New blogging location...

I have now managed to get the blogging portion of the website up and running. So from now on all posts will be added to the web site and not here via blogger. if you have book marked the blogger site then please update your bookmark to...

http://www.componentfactory.com/blog.php

If you are using the feedburner rss feed then you do not have to do anything as I have updated the feedburner setting to point at the new rss feed on the website. Alternatively you can always subscribe directly using...


http://www.componentfactory.com/blog/rss.php?number=30


Many thanks!

Monday, September 12, 2005

microISV, Rent a coder

Product Logos

As outlined previously, the Krypton Toolkit and Krypton Navigator product logos are a bit mediocre. We obviously want to ensure that all the visuals used on the website and in the products are excellent and not just mediocre.

So as usual, we are going to pay a designer to come up with something much better. In the past we have used Guru.com for the main company logo and DesignOutpost.com for the website template.

Both of these websites have produced some great results although you have to be willing to push the designers quite hard in the right direction.

Rent-A-Coder

This time we are going to try another side called RentACoder.com. Despite the name they have plenty of designers that are happy to work on logos.

I have started a project on the site and asked for bidders to come forward to take part in the project. The ceiling price I have established is just $150, which is pretty skinny for creating a couple of professional logos. Still, if you live in the middle of Tibet and want this as extra income outside the main day job then maybe that is quite tempting.

After a couple of days I have had over 30 bidders come forward, bidding anything from $30 up to $100 for doing the project. Many of these are obviously automated answers because the replies have not taken into account the project requirements that I requested. Never mind, that leaves plenty of others to choose from.

microISV, Touchdown

The Eagle Has Landed

My new Dell machine has arrived at last. After spending half the weekend getting everything installed I am now ready to rock and roll. If you have ever thought about getting a two screen system then I certainly recommend it. And not just because it makes your study look like the Star Trek Enterprise!

Your productibity will improve more from buying the extra screen than it will from spending the same amount on the extra .4Ghz processor speed. Just as useful is a RAID-0 config for your drives. This baby just flys!

Doing The Splits

With the release of VS.NET 2005 just around the corner I need to get on with actually producing the free Krypton Toolkit for release at around the same time. Currently I am working on the split container control that has the same functionality as the Windows.Forms version but with our own rendering framework.

So...back to the grind stone.

Thursday, September 01, 2005

microISV, Good Bad @ Ugly

The Good...

Some good news at last. The web hosting has been transferred over much faster than I expected and now I have a Linux machine hosting my web space space. The domain names are correctly pointing to it and email is still working just fine. It was a painful process with several calls to Network Solutions, but we got their in the end.

In fact you can visit the site right now and see the newly designed website up and running. Well, actually there is only a single page with example non-sense content but it gives the look and feel.

www.componentfactory.com

The observant among you will have noticed that one of the navigation buttons is called Blog. I am getting the web designer to setup a blog system that works within the website so there is no need to have it externally hosted as with Blogger.

Once that is working I will copy across all existing posts from here and let you know the appropriate new feed. But I expect this to take a little while yet.


...the Bad...

It seems that my order for a new PC with Dell is going to take another two weeks. When I placed the order the delivery time estimated seemed a reasonable 10 days. But once they have received payment it suddenly jumps by another 14 days. Not that I am cynical of course...


...and the Ugly...

As part of the website design I need a couple of small logos that are used to represent the two products. Have a look and see what you think.





The Toolkit will be the free set of components that will help market the company name and drive interest in the other products. Navigator will be the first actual paid for product.

As the products created will be related to each other it makes sense to have a name for the range they all belong to. Obviously you have now worked out that I have decided on the name Krypton. Hence the green colouring and not the blue you might expect for it to match the website.

What do you think of the name? Do you think the above logos are good enough?

Tuesday, August 30, 2005

microISV, Slow Slow ...

Slow Slow, Quick Quick Slow

Things have been moving very slowing recently.

At the moment I am still in the middle of transferring my hosting package from a Windows machine to a Unix machine. As a result my domain names are not working and so the images on the blog are still not showing. The images are in a directory on the server and referenced from the blog. Fortunately my email is not effected.

Website Design Progress

I have an initial cut of the website design. It looks great and once the hosting is sorted out I will put it online so you can see how it looks. Might be a few days before that is possible.

This might sound odd but sometimes it is really hard to pay people. The designer that came up with the design has done a good job. So on receiving the design I immediately requested how to pay him in order to reward his hard work. Three days later and another email and still no response. Sometimes it is hard to give money away!

Visual Studio Problems

Another problem I am having is with my development machine. Because it has XP Home Edition installed it means I cannot install the latest CTP builds of Visual Studio .NET 2005.

This is a pain as it means I am developing against a version that might have since changed. I don't expect many changes to have occurred but I would feel more comfortable making sure I am not writing code now that will definitely have to be replaced.

Another issue is the inability to see my controls at design time. No matter how I try to install Visual Studio .NET 2005 it seems to be screwed up, and refuses to work at design time. So I can only work on the features I can use at run time.

14 Days and counting

Luckily the end of all my problems is in sight. Two weeks from now I expect to have my new PC with XP Professional installed. I will also be able to use Virtual PC in order to install and develop against each new Visual Studio .NET 2005 release in an isolated way. With the domain hosting sorted out by then I will be back on the development fast track.

Still, in the meantime I am beavering away as best I can on the basics of the Navigator control and also a SplitContainer for the free Toolkit package.

Please bear with me as I get these issues sorted out and back to full coding and blogging speed.

Tuesday, August 23, 2005

microISV, Turbo Charged Coder

Go faster strips

I've decided that my 3.5year old PC no long cuts it when it comes to professional software development. It's like trying to use a mule when you need a thorough breed race horse. So I've ordered a new machine that will in itself motivate me for weeks to come. Two 19' flat panel screens, a 512MB graphics card (so I will be Vista ready and a couple of large RAID 0 hard drives. Nice!


Webhosting Disruption

As part of the plan for the website I have decided to switch from a Windows hosted site to a Unix box. It might sound like treachery when I am Windows developer but to be honest, it just makes sense.

The designer I am now working with on the site wants to use PHP scripts and a MySQL backend in order to have the blog integrated into the website. On Unix this is a doddle. Trying to do this on a Windows machine is a major headache. No, I believe in using the best tool for the job and in this case it is quicker and therefore cheaper to use Unix. Plus I can easily pick up knowledge of PHP in order to modify and maintain the site myself in the future.

As part of the this process of changing over hosting packages the people at Network Solutions screwed things up. So it will be a few days or even a week before my domain names are working again. So images on this blog will be unavailable for a while.

Oh well, back to the 1.5GHz AMD processor for a few more days...

Friday, August 19, 2005

microISV, They think its all over...

Another Contender Enters the Ring

Just when I thought the concept work for the website was done and dusted another contender throws their hat in the ring. Normally I would not want the extra distraction in looking at another design but as the initial concept looks so good I have to follow it through.

Have a look for yourself by using this link...

Another Concept

It needs a little work but has real potential. I will keep you posted.

Tuesday, August 16, 2005

microISV, Web site live!

The Eagle has landed!

I've taken the template as provided by the winning web design and used it to generate the five main pages of the website. These have been uploaded to the server so now I actually have a website. Try it out...

Live Website!

Half an Eagle has landed

Actually you will have quickly noticed there is no content on the site. But Rome was not built in a day and my website certainly will not be either. The next step over the coming week or so is to actually fill in some of the pages with details.

Sunday, August 14, 2005

microISV, Web Design #3

Another Contender

Just when I thought I was only going to get a single designer submit an idea another has entered the contest with a design. This is quite different but also a good effort and certainly worth considering with some changes.

You can see the design using this list.

Second Contender

I instructed the designer to remove the extra design elements like the stop button on the top of the page. It does look a little like a WinAmp design at the moment but by removing those it does have potential.

Saturday, August 13, 2005

microISV, Web Design #2

Removing the arty bits

Feedback from readers indicating that the first design had a couple of arty farty style elements that could be removed to improve the look. I requested this from the designer along with a need to improve the header area. Here are the two designs that resulted.

Variation 1
Variation 2

Although an improvement I think both designs are not quite right and so I asked for the header to be worked on again in order to make the logo feel more integrated with the header area.

The Finale

The end result of the cycle is the following final design that I want to run with.

Variation 2

I think this creates a professional feel with a little design flair mixed in. Remember that our controls are going to be at the premium end of the market and so a good professional site is essential. But not just a standard plain site because the components biggest selling point is how great they make your applications look. So we need to show some flair and creativity in the website itself.

Next Step

At this point the design is just a high resolution picture. The next step is to turn the picture into an actual HTML template that can be used to generate pages as needed.

If you're a web programmer and feel up to the task then let me know, I am willing to pay a sensible amount for a professional to do that work.

Friday, August 05, 2005

microISV, Web Design #1

First Up

After almost a week we only have one design concept submitted so far on the Design Outpost website. But I did have a few others say they were interested in putting together an idea so I hope there will be others to look at soon.

Here is a reduced size version of the design...



Ok, so you cannot see much from there. Use the following link to see the full sized image.

Click Here!

Feedback

Personally I really like the design and with a couple of tweaks think it would be perfectly fine as the actual site template. But do you have other ideas? Does it look too arty and not commercial enough?

Tuesday, August 02, 2005

microISV, Let the contest begin

Time for a Website

I think the time is right to get an initial website up and working. Although I do not have anything in the way of interesting content as yet, once I have a beta version of the free controls ready then I need the website ready to go.

Initially I can place a few screenshots of the work in progress and provide subscription to a notification email list. I intend to give away the basic toolkit of controls for free and so the email list can be used to notify people each time a new release is available.

At the moment I am only building the free controls so all the stuff you are seeing get created will be available for free at some point in the future. Once it reaches a point where there is enough to make a small library, I will package it up and add some documentation.

Design Outpost

When I had the company logo created I used the Guru.com website. This worked out well and I had some feedback from readers that another good design site is Design Outpost. So this time around I will give them a chance and see how it works out.

I posted the project on the templates forum last night so you can see and follow the design contest directly if you like. Alternatively you can wait and read the results on this blog as events transpire.

Looking at the design process on the site it does seem quite a slow process so it might be a week before we have any initial designs to start evaluating. Another potential weakness of the site is that you might only get a single designer offer an initial sketch. Really I would prefer to have a handful of different ideas and then I can pull the best bits from them all in order to create something appropriate.

Only time will tell.

Monday, August 01, 2005

microISV, Header Group

Delayed

I have been a bit delayed in my development efforts over the last week. Last week was very busy in the day job and so by the time I got home I was too tired out to get much done. Luckily I managed to pull myself together at the weekend and spent most of Sunday getting back into the flow of things.

HeaderGroup Control

At the end of my last coding update I mentioned the next chunk of work was creating a HeaderGroup control. This is a combination of the existing Group and Header controls that having already been bagged.

I managed to get this 90% complete and so here is a look at the control with the usual Office Professional appearance.



As you can see the control consists of two Header instances that default to showing at the top and bottom of the control. You can of course alter the position of these headers to be on the left or right or even have both on the same edge if required.

If you imagine placing your own content in the center then you can quickly make use of this to organize the sections of your application. You might place a tree control or list box inside to achieve a similar arrangement to that of Microsoft Office.

Overlay

In order to make the control more flexible in the different appearances that can be achieved, I have added the ability to specify if the headers appear under or over the border area.

The controls below have been setup in exactly the same way except the left control has the Overlay property set at false and the right control set to true.



Personally I prefer the one of the left but you can imagine making use of both options to achieve nice looking group setups.

Padding

Another useful capability is being able to alter the padding space around each of the header instances. Instead of having the headers always flush against the edges of the control area you can indent them.

Here is an example I quickly created by using gradient color effects combined with pushing the headers inside a little. This creates a little whitespace between the header and the main control border. Altering the font as well gives quite a different feel to the examples above but all achieved by changing just a few simple properties.



Next Step

The only work left to do on this control is correctly providing the rectangle of the client area in the middle of the control. This is needed so that when the user drops a child control onto the group it will position itself neatly in the appropriate location.

Fingers crossed I will find a little more time in the evenings to get this sorted out soon.

Thursday, July 21, 2005

microISV, Coding Evolution

Nothing duplicated

I am a strong believer in reusing code and thereby minimizing the amount of code I need to write. Every time I write some new functionality I double check to make sure I have not already done something very similar already. There are two very good reasons for this.

First of all I want to get maximum benefit from each hour spent in front of the compiler. Working on this project only in my spare time means I don't have the luxury of doing anything not crucial.

Second, and even more important, is the principle of object orientated programming. If I'm writing code that is the same, or very similar, to something elsewhere in the project then something has gone wrong. It's a clear indication that something is going amiss with my design.

That being the case I need to investigate the problem and fix the architecture. The fix should negate the need for the duplicated code.

From small steps...

A result of this approach is that a new project should feel like evolution on a small scale. You start off by writing the simple elements of the project. As you then build upwards you create more complex structures that reuse many of the existing components. You're constantly moving up the evolutionary ladder.

Each step upwards only involves adding a small and reasonable set of features and feels quite manageable in itself. But after a few weeks have passed you look back and notice that all the small steps have evolved your design into an elegant and sophisticated structure. Well, that's the hope anyway!

If you've been following my coding updates then you should have been able to see this taking place. Let's quickly follow how the project has evolved so far.

In the beginning...

The first control created was about as simple and boring as can be imagined. We created a simple Panel component that is mostly going to be used to fill the client area of a window and give it the appropriate appearance.

Below you can see the control in use and it has the Microsoft Office 2003 look and feel. This is the only rendering class I have coded at the moment and so all the example pictures have this look and feel.



Let there be light...

Actually a more appropriate phrase would be Let there be a border... because out second control is the Group component. This consists of adding a border drawing ability with the existing background capability.

This was quick and easy to create because all of the infrastructure from the existing Panel was reused and extended. Although not obvious from this picture the components are much more flexible than they appear. You can use alpha blending, rounded corners, tiled images and so forth.



The Holy Trinity

Component number three took a little longer to construct because it involves drawing and positioning text. This is the Header control and it reuses the background and border functionality from the previous controls and then extends it.

This is an important landmark because the Header represents completion of the holy trinity of rendering. Almost all controls use a combination of background, border and content for display. If this sounds hard to believe then check out the next section which shows a good example of this in practice.



Add another dimension

What is the difference between a Button control and our previously completed Header component? Not a lot. In fact the only difference is that a Header has only a single palette and a Button has several.

Let's define what I mean by a palette. A palette is the triple combination of background, border and content settings. And by settings I mean the colors, font and other drawing styles you can specify.

So when the button is drawn normally we use one palette. When the user moves the mouse over the button area we switch to drawing with a different palette. On pressing the mouse down on the button we use yet another palette.

So the button really is the same as the header but instead of having one palette we have several, one for each of the states it can be in. Now you can see how we are reusing the existing infrastructure to get maximum benefit for adding a minimum of new code.

Our final picture below has two button instances, the left in the hovering over state and the right in the normal state.



To Infinity and beyond...

So what is our next step up the evolutionary ladder? The next control is going to be called the HeaderGroup and, as the name implies, it will combine the Group and Header capabilities into a useful little control. This might not sound like much of an advance, but trust me, it will turn out to be quite a handy little control.

So the next time you're coding...just think how much you owe to Darwin.

Tuesday, July 19, 2005

.NET2, ColorMatrix Reloaded

The Matrix Connection

Despite the headline this blog entry has absolutely nothing to do with the Matrix set of films. In fact it is about using the ColorMatrix capability of the ImageAttributes class for drawing images.

Not only does that description not fit into the title but there is no chance you would have read the entry without the Reloaded part of the name. A marketing guy would call this technique a Teaser. The rest of us call this very sneaky.

If I was selling fish fingers, or any other food, then this would be called a breach of the trade descriptions act and the local council would be onto me. In fact they would already have closed me down. Luckily no one cares about accurate descriptions in the software industry and so we will continue without fear.

Drawing a Disabled Image

I am in the closing stages of writing a Button control and want to make it look good when it was disabled. There are two ways to handle this issue. The easiest solution for me is to get the developer to provide two images, one for when the control is disabled and another for when it is enabled.

Not only is this lazy but it demands extra work from the developer to use my control. The whole point of our library is to make the developers application look good with a minimum of effort from the developer himself. So the alternative solution, and the one I am taking, is to take the enabled image and then draw it in a disabled appearance.

In the past I have used the ControlPaint.DrawImageDisabled method provided by the framework but I am no longer happy with that solution. I want to provide more flexibility in the appearance and so let the developer choose a variety of different ways the image could be manipulated.

Enter The ColorMatrix

This is where the ColorMatrix comes into play because it can be used to modify the colors of the image when it is being drawn. So now my button control allows the developer to specify an enumeration of different ColorMatrix settings to be applied.

Here is a picture with three buttons. The name of the enumeration value is used as the button text and the image is drawn in the named style.



The first is called normal and has no color modification applied. In the second the matrix is used to convert from color to a black and white scale. Last of all the disabled appearance is achieved by using a gray scale but also making the colors 10% brighter than normal. This gives a more subtle look and feel.

GrayScale Matrix Code

new ColorMatrix(new float[][]{

new float[]{0.3f,0.3f,0.3f,0,0},
new float[]{0.59f,0.59f,0.59f,0,0},
new float[]{0.11f,0.11f,0.11f,0,0},
new float[]{0,0,0,1,0},
new float[]{0,0,0,0,1}

});

The first three lines of the matrix are used to convert the Red, Green and Blue colors of the pixel in that order. The fourth line is used to convert the alpha channel and the fifth line for adding/subtracting values.

So in this example the fourth and fifth lines use a value of 1 to show they are leaving the alpha channel alone and not applying any addition/subtraction.

The values in column 0, 1 and 2 of the first three lines are the same because in order to convert to a grayscale we need to ensure that the RGB values are the same for the R, G and B. Notice that the 0.3, 0.59 and 0.11 values add up to exactly 1.

These three relative factors are used because the eye has better acuity in the green range than in the red and the red is better than the blue. Hence we want to take more account of the green (0.59) than the red (0.3) than the blue (0.11).

Color Intensity

There is no limit to the color manipulation you can achieve and so I also added some extra enumeration values for making the image lighter or darker in appearance. These might prove useful in many different situations. Here they are in operation.



Breaking Point

As an experiment I tried converting just two of the colors to grayscale and leaving the third alone. In the example below you can see GrayScale R where the blue and green have been gray scaled but the red left alone. Below that are the other two versions for blue and green variations.



The reason they are not coming out perfectly is that the three circles are not filled with pure red, pure green and pure blue. Hence the conversion is not achieving the exact effect I was intending. I have decided to leave these enumeration options in the code although they will not be used very often.

Pain Points

By providing these different effects out of the box the developer has more options in presenting the button image. They might decide to have the button appear gray scaled normally but become full color when the mouse tracks over it. Alternatively they might want to use a darker version of the image normally and only use the normal image on hot tracking.

The important point is the developer provides just a single image and can then apply different effects without needing to create them using a separate package, such as Paint Shop Pro. To use a really stupid management style phrase, we are removing a Pain Point for the developer.