Today I took a little break from rewriting my older Windows Forms programs in WPF, because I was terribly bored of wading through code when I had no idea why I had once written it that way, and I started thinking about how to liven up my website a bit.
It occurred to me that I could make a colored bar and put it somewhere on every page. Programming the whole thing took me about 4 hours.
The first thing I did was think it through, and I came to the conclusion that it would be silly to generate a bar for each page separately, so I decided that all resolutions would share one colored bar.
Then I started programming. I began with the GeneralHelper class. The hardest part was programming the CalculatePercentOfColorBars method, which, once when the website starts, calculates the width in % for the individual colors based on the parameters you pass to it, and of course it also assigns a unique color to each div.
On my site the colors may look the same at first glance, but just put them under an eyedropper and you will find that even if they differ by as little as “1“, they are different. And of course there is also the colorsColorBar array, which contains as many colors as the maximum you pass as the second argument of the method.
Remember that each color can appear there only once!
GeneralHelper.cs
static string[] colorsColorBar = new string[] { "#3FB1F0",
...
};
/// <summary>
/// The key is the resolution it applies to, the value is an array of numbers expressing the % of the available width that each color takes up
/// </summary>
public static Dictionary<short, byte[]> percentOfCountBars = new Dictionary<short, byte[]>();
/// <summary>
/// The key is the resolution, the value is the colors for the array stored under the same key in the percentOfCountBars dictionary
/// </summary>
public static Dictionary<short, List=""></short,><string>> colorsOfBars = new Dictionary<short, List=""></short,><string>>();
public static void CalculatePercentOfColorBars(short width, int count)
{
List<string> finalColors = new List<string>(count);
List<string> colors = new List<string>(colorsColorBar);
byte percent = 100;
byte usedPercent = 0;
int lastIndex = count;
lastIndex--;
byte[] barWidths = new byte[count];
byte i = 1;
for (; i < 10; i++)
{
barWidths[i - 1] = i;
int colorIndex = RandomHelper.RandomInt2(0, colors.Count);
finalColors.Add(colors[colorIndex]);
colors.RemoveAt(colorIndex);
count--;
usedPercent += i;
percent -= i;
}
//
while (percent > 0 && count != 0)
{
if (percent == 2)
{
break;
}
byte randomPercent = RandomHelper.RandomByte2(1, percent > 9 ? 9 : percent);
if (randomPercent > percent)
{
continue;
}
barWidths[i - 1] = randomPercent;
int colorIndex = RandomHelper.RandomInt2(0, colors.Count);
finalColors.Add(colors[colorIndex]);
colors.RemoveAt(colorIndex);
count--;
usedPercent += randomPercent;
percent -= randomPercent;
if (percent < 0)
{
break;
}
i++;
if (percent < 10 && percent != 0)
{
for (int i2 = 1; i2 < percent + 1; i2++)
{
int index = i - 1;
if (index > lastIndex)
{
break;
}
barWidths[index] = 1;
colorIndex = RandomHelper.RandomInt2(0, colors.Count);
finalColors.Add(colors[colorIndex]);
colors.RemoveAt(colorIndex);
count--;
if (count == 0)
{
break;
}
usedPercent += 1;
percent -= 1;
if (percent < 0)
{
break;
}
i++;
}
}
}
//-Final correction
if (usedPercent < 100)
{
i++;
int remainder = 100 - usedPercent;
if (barWidths.Length == i + 1)
{
barWidths[i] = (byte)remainder;
int colorIndex = RandomHelper.RandomInt2(0, colors.Count);
finalColors.Add(colors[colorIndex]);
}
else
{
barWidths[0] += (byte)remainder;
}
}
int total = 0;
for (int i3 = 0; i3 < barWidths.Length; i3++)
{
total += barWidths[i3];
}
if (total > 100)
{
int remainder = total - 100;
barWidths[8] -= (byte)remainder;
}
byte[] trimmedValues = null;
int trimmedLength = finalColors.Count;
if (trimmedLength == barWidths.Length)
{
trimmedValues = barWidths;
}
else
{
trimmedValues = new byte[trimmedLength];
for (int y = 0; y < trimmedLength; y++)
{
trimmedValues[y] = barWidths[y];
}
}
trimmedValues = CA.JumbleUp<byte>(trimmedValues);
percentOfCountBars.Add(width, trimmedValues);
colorsOfBars.Add(width, finalColors);
}The second place where you need to add something is Global.asax. It is always in the root of your web project, and only there will it run correctly when your web application starts up.
Global.asax (the Application_Start method)
GeneralHelper.CalculatePercentOfColorBars(800, 25);
GeneralHelper.CalculatePercentOfColorBars(840, 30);
//-short.MaxValue will be used if I want to place the MultiColorLine across the full width of the page
GeneralHelper.CalculatePercentOfColorBars(short.MaxValue, 36);The next place where you need to program something is the MultiColorLine class. This class is responsible for generating the corresponding HTML content with the colored bar. I will not give you the HtmlGenerator class here; I am sure you can program the corresponding methods yourself:
MultiColorLine.cs
using System.Collections.Generic;
public class MultiColorLine
{
public static string GetHtml(short width)
{
byte[] widths = GeneralHelper.
percentOfCountBars[width];
List<string> colors = GeneralHelper.colorsOfBars[width];
HtmlGenerator htmlGenerator = new HtmlGenerator();
int bl = widths.Length - 1;
for (int i = 0; i < bl; i++)
{
htmlGenerator.WriteTagWith2Attrs("div", "class", "partColorBar", "style", "width:" + widths[i] + "%;background-color:" + colors[i]);
htmlGenerator.TerminateTag("div");
}
htmlGenerator.WriteTagWith2Attrs("div", "class", "partColorBar", "style", "width:" + widths[bl] + "%;background-color:" + colors[bl] + ";float:right;");
htmlGenerator.TerminateTag("div");
return htmlGenerator.ToString();
}
}The second-to-last place is the (Master)Page itself, from which you make the call. In the page, put this div in the appropriate spot and, if you like, style it however you see fit:
Something.Master
<div id="divBarevnaLista" runat="server"></div>Then in the code-behind add the following code (just adjust how wide you want the bar in the 1st argument), which creates the HTML code and inserts it as the inner content of the div.
Something.Master.cs
divBarevnaLista.InnerHtml = MultiColorLine.GetHtml(800);In the page, or in an external CSS file, you also need to have this CSS:
Something.css
.partColorBar {
height: 5px;
max-height: 5px;
min-height: 5px;
display: inline-block;
padding: 0;
margin: 0;
float: left;
}The last code I will give you here are the other methods I called, so that you do not have to guess how to implement them:
internal static T[] JumbleUp<T>(T[] items)
{
int bl = items.Length;
for (int i = 0; i < bl; ++i)
{
int index1 = (RandomHelper.RandomInt() % bl);
int index2 = (RandomHelper.RandomInt() % bl);
T temp = items[index1];
items[index1] = items[index2];
items[index2] = temp;
}
return items;
}
public static class RandomHelper
{
static Random random = new Random();
internal static int RandomInt2(int min, int max)
{
return random.Next(min, max);
}
internal static byte RandomByte2(int min, int max)
{
return (byte)random.Next(min, max);
}
}The result?
