Click here to Skip to main content
Click here to Skip to main content

NeroBar

By , 12 Dec 2008
Rate this:
Please Sign up or sign in to vote.
Prize winner in Competition "Best VB.NET article of November 2008"
NeroBar1.3.jpg

Introduction

If you use Nero Burning Rom to burn CDs and DVDs, you will without a doubt have noticed the "progress" indicator at the bottom of the compilation window. It shows how much of the disc space is currently used, and it is green as long as the files fit the disc. Depending on the settings, it becomes yellow and then red when the compilation files become too large to fit the available disc space.

I needed a bar like that for my current application, but couldn't find any that possessed the features I required. I did, however, find an article called "Vista Style Progress Bar" - author unlisted - that showed me how to make a very nice looking progressbar. It doesn't look like Nero's space indicator at all, but I was only interested in the color functionality anyway, so it doesn't matter a bit that the bar itself is much nicer looking.

The above link is for a "normal" progressbar, and even though it features three different colors, only one of them can be used at a time. And its value span is hardcoded to a value between 0 and 100.

The Work I Did Initially

I used the code which was originally in C# to make a similar control in VB.NET 2005.

First of all, I fixed two bugs in the control (value out of range check was done incorrectly and the control crashed when value was set to 0).

Then I added a lot of stuff:

  • A maximum and minimum value
  • A 4th color: Yellow (the control can be expanded to support more colors if needed)
  • The possibility to choose the number of color segments (1-3, where 1 = Standard progressbar)
  • Properties for the colors and thresholds of the segments
  • A property for whether or not the thresholds should be shown in the bar (in Nero, they are)

New in Version 1.3

The one thing I was really not content with was the color handling. I adapted the code from the original progressbar control, but it is not optimized to say the least. Every time you want to add a color, you have to add a lot of code. I would rather that the user could choose the colors freely instead of having to depend on the colors that are defined in the control. The problem is that in order to paint a colored segment, the control uses FOUR different shades of that color. Let's say that the user chooses the color "Red" for Segment 1, then the control would have to calculate the three other shades of Red needed in order to be able to paint that segment.

I had absolutely no idea how to do that, but luckily I got a code sample from "Four13 Designs" in the message forum. It takes a given color and calculates a lighter or darker color using a correction factor on all three color components. Great, I thought - I can just use the colors that are already defined to find the correction factor for the three color shades I needed to calculate.

But it turned out that I couldn't do that. The original colors didn't have the same correction factors for the different shades, and they didn't even have the same correction factor between the three RGB components of the same color.

What was I to do? I wanted the "new and improved" control to look the same as the old one with the fixed color definitions. So I didn't want to dabble around with the correction factors myself and possibly create a control that looked different from the original.

I saw no solution to the problem, but I still wanted the user to be able to select the colors freely, so in the end I said "ah, what the f..." and using the old and beproved trial and error method, I came up with correction factors that worked for me, and - as far as I can see with the naked eye - produced colors very similar to the original colors.

My biggest problem was solved.

Please note: The Segment1Color, Segment2Color and Segment2Color properties have changed. They're no longer based on the color Enum, but are now true Color objects. That means that If you've already done a project with a previous version, you will probably have to edit the property types in your form designer file.

Some other major changes in the new version are:

In version 1.2 I introduced a progress percentage text property. I show the value of the NeroBar in percent in the bar. It dawned on me after I published the version that if you use the color segments to indicate a "too large" value like in Nero, then a percentage based on the entire width of the control would not be correct. Let's say you have the MinValue 0, the MaxValue 100, SegmentCount 2 and Segment2StartThreshold 90 in order to show that up to 90 is acceptable, but over 90 is too much, then the percentage should show 100% when the value of the bar is 90 and 111% when the bar value is at 100 (too much, remember?)

So in this version, I've introduced a new property PercentageBasedOn to solve that problem.

For the same application I made this control for, I needed some kind of count down indicator. I thought: Why not use the NeroBar for that too. I wanted the bar to start at max an then count down to 0. At a given point, I wanted the bar to change color to indicate that the countdown was almost over.

So I couldn't use the bar right off with different coilor segments. Instead I implemented a mode where the whole bar changes color when a threshold is passed (Property: ColorChangeMode). That worked fine, but it looked kinda odd I thought. The bar would go from right to left, and to make it an indication of time passing by, I would have preferred the animation to go from left to right. So I even implemented a RightToLeft property that reverses the bar functionality.

These new properties are demonstrated in the demo application as well. Just click the buttons at the bottom and check out the animation.

A Brief Description

There is really not much to explain: The properties are all shown in the demo application, but for giving information, I'll list the properties you will want to know about here:

  • Value (of course)
  • MinValue
  • MaxValue
  • SegmentCount
  • Segment2StartThreshold
  • Segment3StartThreshold
  • Segment1Color
  • Segment2Color
  • Segment3Color
  • DrawThresholds
  • ColorThresholds
  • GlowMode
  • GlowSpeed
  • GlowPause
  • GlowColor
  • PercentageShow (The percentage text color and font are controlled by the Nerobar's ForeColor, Font and TextAlign properties)
  • PercentageBasedOn
  • RightToLeft
  • ColorChangeMode

When you use the demo application, please note that there is no validation of the values, so it will be possible to set the properties to values that the NeroBar will not accept - thus generating an exception. It is merely provided to demonstrate the functionality of the control - not to be a 100% failsafe application.

Possible Improvements

I'm done now! I really have no more ideas how I can improve this control. If anybody can think of something, please let me know.

The only thing I could wish for is some kind of ruler or scale below or in the bar to help determining the progress. I'm going to have a look at that possibility, but rather than incorporating it into this control, I think I'm going to make it a control of it's own. We'll see.

History

  • Version 1.3 (December 12th, 2008)
    • Added:
      • Version history in NeroBar.vb
      • Enhancement: 100% user defined colors
      • Enhancement: When setting "Value" to a value higher than "MaxValue", the percentagetext will show "> 100%" (can be more than 100% as well depending on the PercentageBasedOn setting)
      • Enhancement: Added alpha channel transparency to user selected GlowColor to "smoothen" the glow
      • Enhancement: Progress percentage text can now be aligned using the TextAlign property
      • New Feature: Progress percentage calculation can be based on segments - not just the whole control width
      • New Feature: ColorChangeMode - you can now choose if the whole bar should change color when a threshold is passed - or only the segments as before
      • New Feature: RightToLeft mode
      • New properties: PercentageBasedOn, RightToLeft, ColorChangeMode, TextAlign
      • Custom Visual Studio toobox icon
      • Custom icon for demo application
    • Removed:
      • The six hardcoded colors
    • Bug Fix:
      • Control crashed when Value is between 0 and 0.5 (reported by "Hendrikbez")
    • Irrelevant inherited base properties hidden from designer property grid
    • Updated demo project
  • Version 1.2 (December 4th, 2008)
    • Added:
      • Animated glow (Code adapted from Xasthom's Article)
      • Percentage text
      • New properties: GlowMode, GlowSpeed, GlowPause, GlowColor, PercentageShow
    • Updated demo project
    • Code restructured with regions for better overview
  • Version 1.1 (November 26th, 2008)
    • Added:
      • Two new colors
      • A NeroBarToolStripMenuItem control
      • New property: ColorThresholds
    • Updated demo project
  • Version 1.0 (November 25th, 2008)
    • Initial release

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Johnny J.
Software Developer (Senior)
Sweden Sweden
Born in Copenhagen, Denmark
Have been living in Paris, France and L.A., The United States
Now live in Stockholm, Sweden
 
Started programming when I got my first VIC 20, and a few months later on Commodore 64. Those were the days!
 
Studied programming at the Copenhagen Engineering Academy
 
Professional console, winforms and webforms programming in Comal, x86 Assembler, Fortran, Pascal, Delphi, Visual Basic 3 through 6, Classic ASP, C# and VB.NET
 
I now work as Senior .NET developer building Airline Booking Systems, and have a number of projects in various states of progress to work on in the spare time...
 
PS: The cat on my profile is one of my three cats, Ramses. He's all white, odd-eyed, deaf and definitely the coolest cat there is!

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey22-Feb-12 21:42 
QuestionWhats new in V1.4? PinmemberMember 84433858-Jan-12 23:05 
AnswerRe: Whats new in V1.4? PinmemberJohnny J.11-Jan-12 4:01 
GeneralI don't particularly like Nero... PinsubeditorIndivara3-Dec-10 2:43 
GeneralExcellent work. My vote of 5 PinmemberHassan3D1-Aug-10 10:35 
GeneralMy vote of 5 PinmemberChewsHumans1-Jul-10 16:21 
QuestionMultiple segments? Pinmemberi0028-Sep-09 3:15 
Generalyou know what PinmemberXmen W.K.2-Apr-09 18:23 
GeneralOrientation Pinmembershiggin28-Jan-09 2:53 
GeneralWarning message on VS2008 Pinmemberjan212r23-Dec-08 2:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 12 Dec 2008
Article Copyright 2008 by Johnny J.
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid