Today, I installed and uninstalled the Silverlight Tool many times. It was because I couldn’t open Silverlight Project after updating all the patches. The Visual Studio always show this message “The project type is not supported by this installation?”. But finally, I found that I can actually use the Visual Web Developer 2008 to create Silverlight Application.
Does it mean that I can’t use Visual Studio anymore? I am not sure. Since I can continue my Silverlight development, I don’t care anymore.
By the way, the sample below is my first Silverlight 2 application. The logic is a little bit advanced, hope you will like it.
Lastly, I got a good news for all of you. I am going to update all the sample in my blog. Hopefully, all the samples should be ready be the end of this month.
Comparison
Flash implementation: 35 minutes
Silverlight implementation: 80 minutes (Implemented First)
What’s the difference?
- HSL to RGB [AS3] vs [C#]
Source codes
Color Picker [Flash 9, AS3] (11.1 KiB, 1,229 hits)
- Color Picker [Silverlight 2, C#] (20.6 KiB, 2,101 hits)
Flash
Silverlight
HSL to RGB [AS3] vs [C#]
If you are going to implement drawing application, then you would probably need to handle HSL and RGB value. Below is a function that convert HSL to RGB. If you want to convert RGB to HSL, download and read the sample code above.
// AS3
// Convert HSL to RGB
public function hslToRgb(H : Number, S : Number, L : Number) : Array {
var p1:Number;
var p2 : Number;
var rgb : Array = new Array(3);
if (L<=0.5) p2 = L*(1+S);
else p2 = L+S-(L*S);
p1 = 2*L-p2;
if (S == 0) {
rgb[0] = L;
rgb[1] = L;
rgb[2] = L;
} else {
rgb[0] = toRgb(p1, p2, H+120);
rgb[1] = toRgb(p1, p2, H);
rgb[2] = toRgb(p1, p2, H-120);
}
rgb[0] *= 255;
rgb[1] *= 255;
rgb[2] *= 255;
return rgb;
}
// Calculate the RGB Value
public function toRgb(q1 : Number, q2 : Number, hue : Number) : Number {
if (hue>360) hue = hue-360;
if (hue<0) hue = hue+360;
if (hue<60) return (q1+(q2-q1)*hue/60);
else if (hue<180) return (q2);
else if (hue<240) return (q1+(q2-q1)*(240-hue)/60);
return (q1);
}
Mathematical Syntax in C# is very similar to AS3. Most of the code can be reused by directly copy and paste.
// C#
// Convert HSL to RGB
private double [] hslToRgb(double H, double S, double L) {
double [] rgb = new double [3];
double p1 = 0;
double p2 = 0;
if (L<=0.5) p2 = L*(1+S);
else p2 = L+S-(L*S);
p1 = 2*L-p2;
if (S == 0) {
rgb[0] = L;
rgb[1] = L;
rgb[2] = L;
} else {
rgb[0] = toRgb(p1, p2, H+120);
rgb[1] = toRgb(p1, p2, H);
rgb[2] = toRgb(p1, p2, H - 120);
}
rgb[0] *= 255;
rgb[1] *= 255;
rgb[2] *= 255;
return rgb;
}
// Calculate the RGB Value
private double toRgb(double q1, double q2, double hue) {
if (hue>360) hue = hue-360;
if (hue<0) hue = hue+360;
if (hue<60) return (q1+(q2-q1)*hue/60);
else if (hue<180) return (q2);
else if (hue<240) return (q1+(q2-q1)*(240-hue)/60);
return (q1);
}
October 16th, 2008 at 8:23 pm
Weird, I tho i had the plugin for silverlight but this app doesn’t show and ask me to install it again.
October 16th, 2008 at 8:31 pm
Alright, got it. I had the latest beta which wasn’t the release candidate. Working now.
October 16th, 2008 at 9:03 pm
I’m not sure what was going wrong with your VS2008 Tools update. Mine worked fine when I updated from RC0 to the RTM. Maybe you didn’t install the sdk?
October 17th, 2008 at 3:02 am
10x.. ^_^
your comparisons really shine us out in a few issues ..
You are most welcome to try our new Silverlight add on
http://www.headup.com just launched
contact me for invitation…
I would love to hear your opinion.
Eran
October 17th, 2008 at 4:12 am
I got Silverlight Plug-in 2.0.31005.0 installed for Firefox 3.0.3 and the silverlight version does not work. On the other hand, I got Flash 10 installed and works fine. That’s why Flash should be bigger. ;-)
October 17th, 2008 at 4:14 am
Oh, I take that back. It works fine on Firefox. But I still like Flash version. ;-P
October 17th, 2008 at 11:44 pm
Just read ScottGu’s blog:
“If you do not have VS 2008, you can alternatively install the free Visual Web Developer 2008 Express SP1 Edition. ”
and there’s a detailed instruction how to upgrade from beta2 to final.
“If you have the Beta2 or RC versions of the VS Tools for Silverlight, or …..”
http://weblogs.asp.net/scottgu/archive/2008/10/14/silverlight-2-released.aspx
Cheers,
Chris
October 18th, 2008 at 2:41 am
Chris, thanks for the suggestion.
Since my VS is Chinese version, may be it has some compatability problem with the SDK.
Actually, Visual Web Developer 2008 works for me. However, if the application throw an error, the IE and Visual Web Developer will crash immediately. It’s really a painful expereince for me.
October 18th, 2008 at 3:34 pm
I am using Visual Web Developer 2008, too.
And Firefox as browser.
No Problems yet.
Cheers,
Chris
October 20th, 2008 at 2:34 pm
[...] First Silverlight 2 Application: Color Picker [...]
October 21st, 2008 at 4:34 pm
[...] Terence Tsang’s great First Silverlight 2 Application: Color Picker [...]
December 9th, 2008 at 3:14 am
Silver light is better
December 16th, 2008 at 12:57 pm
牛东西啊….
December 16th, 2008 at 12:59 pm
我用vs2005,怎么用这个东西呀。.
December 16th, 2008 at 2:25 pm
You may only use VS 2008 to open it.
December 16th, 2008 at 10:26 pm
First,thanks for the samples.
Second,i need a simple english name,who can help me,thank you .
I am Chinese,too.
I like the silverlight and I will write my First Silverlight Application in the coming days.
foreach(string word in mywritings)
{
if(there are mistakes)
{
I am sorry.
I tryed my best to avoid the mistakes.
}
}
Last I find the link of this page on the offical Microsoft Silverlight Sit. silverlight.net/showcase
I will come back to see if someone can offer me a nice simple English names.
December 17th, 2008 at 2:07 pm
English Name is a bit personal. You may pick up a dictionary and choose the one you like.
May be you can call yourself Silverlight.
December 20th, 2008 at 8:14 pm
I need a professional name,Not a English word.
It can be 6 characters or less.
Thank you for your advice.
February 10th, 2009 at 9:54 pm
You need to be more correct with your comparison, I Think you should increas the FPS for the Flash-Application to make the comparision more correct, the problem now is that Silver Light throws graphic out as fast as the computer allows, but Flash dosent render more frames than you desired it do. and it looks like the Flash application in this example is set to 24, witch makes it look bad in the comparison.
February 19th, 2009 at 2:48 pm
[...] try the reverse order. I attempt to move my ColorPicker Sample into the Eclipse Workspace. A new Eclipse Silverlight Project is created successfully. [...]
February 19th, 2009 at 8:28 pm
“If you want to convert RGB to HSL, download and read the sample code above”
Sorry - I cannot find it…
February 19th, 2009 at 9:50 pm
source code is provided. The links are on top of the Flash Application.
February 19th, 2009 at 10:24 pm
But I cannot find function to convert RGB to HSL in that source code…
February 20th, 2009 at 12:55 pm
oh, yes. I am sorry. I didn’t write that part.
February 21st, 2009 at 5:49 am
http://en.wikipedia.org/wiki/HSL_and_HSV
private double[] rgbToHsl(Color color)
{
double R, G, B;
R = color.R / 255.0;
G = color.G / 255.0;
B = color.B / 255.0;
return rgbToHsl(R, G, B);
}
private double[] rgbToHsl(double R, double G, double B)
{
double h, s, l;
double[] hsl = new double[3];
double max = Math.Max(Math.Max(R, G), B);
double min = Math.Min(Math.Min(R, G), B);
if (min == max)
{
h = 0;
s = 0;
l = min;
}
else
{
if (max == R)
{
h = 60.0 * (G - B) / (max - min);
}
else
{
if (max == G)
{
h = 60.0 * (B - R) / (max - min) + 120.0;
}
else // max == B
{
h = 60.0 * (R - G) / (max - min) + 240.0;
}
}
while (h = 360.0) h -= 360.0;
l = (min + max) / 2.0;
if (l < 0.5)
{
s = (max - min) / (2.0 * l);
}
else
{
s = (max - min) / (2.0 - 2.0 * l);
}
}
hsl[0] = h;
hsl[0] = s;
hsl[0] = l;
return hsl;
}
February 21st, 2009 at 5:50 am
Sorry…
hsl[0] = h;
hsl[1] = s;
hsl[2] = l;
June 24th, 2009 at 2:44 am
i dont see the point in this
September 28th, 2009 at 7:30 am
[...] A HSV style color picker created by Terence Tsang. [...]
December 27th, 2009 at 12:54 pm
Да, таких интересных блогов я еще не видел! Этот блог даст фору многим сайтам ( по содержанию и не только)! Десять баллов!
January 15th, 2010 at 5:06 pm
Увлекательно! Хотелось бы побольше точно таких же заниматльных постов
July 13th, 2010 at 9:27 am
[...] Flash Silverlight Download [...]