Using GDI+ to create an LED

Blake81

Well-known member
Joined
Feb 23, 2006
Messages
304
Location
Georgia, USA
Programming Experience
1-3
I'm really new to GDI+, in fact I just started looking into it today. I want to create a custom control (LED) to use on my forms. I found an example of using the gradient brush, and I think that would probably work to give me the lighting effect I want on the LED. I just don't know how to use it properly. Basically, I want to draw a circle and use the gradient brush on it with the colors red and white. If at all possible, I'd like it also to have a beveled edge around the circle, like the picture below (I know it won't look that good). Could someone also give me a quick pointer about where to put the code to redraw the LED with a different color depending on it it is "lit" or "unlit"? Thanks. I really appreciate any help.

red.jpg
 
I've accidentally discovered something here that looks promising. I was playing with one of the examples that Kulrom posted awhile back, and I've created a circle on a form that uses the gradient brush. I know this isn't in a Windows control project yet, but I'm still experimenting. I'm trying to get it to load that image as lime green when the form loads and then change it to green when I click a button to see if it looks like a lit and unlit LED. Right now, it's not showing it at all on load and then changing to lime green on button click. Here's what I have.
VB.NET:
[SIZE=2][COLOR=#0000ff]Public[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Class[/COLOR][/SIZE][SIZE=2] Form1
[/SIZE][SIZE=2][COLOR=#0000ff]Private[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Sub[/COLOR][/SIZE][SIZE=2] Button1_Click([/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] sender [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.Object, [/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] e [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.EventArgs) [/SIZE][SIZE=2][COLOR=#0000ff]Handles[/COLOR][/SIZE][SIZE=2] Button1.Click
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] color2 [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] Color
color2 = Color.Lime
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] G [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] Graphics
G = [/SIZE][SIZE=2][COLOR=#0000ff]Me[/COLOR][/SIZE][SIZE=2].CreateGraphics
G.Clear([/SIZE][SIZE=2][COLOR=#0000ff]Me[/COLOR][/SIZE][SIZE=2].BackColor)
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] path [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] System.Drawing.Drawing2D.GraphicsPath
path.AddEllipse([/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] Rectangle(0, 0, 295, 295))
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] lBrush [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] System.Drawing.Drawing2D.LinearGradientBrush([/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] RectangleF(0, 0, 295, 295), Color.White, Color.Lime, System.Drawing.Drawing2D.LinearGradientMode.Vertical)
G.FillPath(lBrush, path)
[/SIZE][SIZE=2][COLOR=#0000ff]End[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Sub
[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Private[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Sub[/COLOR][/SIZE][SIZE=2] Form1_Load([/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] sender [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.Object, [/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] e [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.EventArgs) [/SIZE][SIZE=2][COLOR=#0000ff]Handles[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]MyBase[/COLOR][/SIZE][SIZE=2].Load
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] color2 [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] Color
color2 = Color.Green
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] G [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] Graphics
G = [/SIZE][SIZE=2][COLOR=#0000ff]Me[/COLOR][/SIZE][SIZE=2].CreateGraphics
G.Clear([/SIZE][SIZE=2][COLOR=#0000ff]Me[/COLOR][/SIZE][SIZE=2].BackColor)
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] path [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] System.Drawing.Drawing2D.GraphicsPath
path.AddEllipse([/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] Rectangle(0, 0, 295, 295))
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] lBrush [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] System.Drawing.Drawing2D.LinearGradientBrush([/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] RectangleF(0, 0, 295, 295), Color.White, Color.Green, System.Drawing.Drawing2D.LinearGradientMode.Vertical)
G.FillPath(lBrush, path)
[/SIZE][SIZE=2][COLOR=#0000ff]End[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Sub
End[/COLOR][/SIZE][SIZE=2][COLOR=#0000ff]Class[/COLOR][/SIZE]

EDIT:

I have changed it, and it shows dark green when I click the button once, and when I click it again, it goes to lime. I wanted it to load as something too, and also wanted it to keep switching from lime to dark green every time I hit the button. Here's the new code.
VB.NET:
[SIZE=2][COLOR=#0000ff]Public[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]Class[/COLOR][/SIZE][SIZE=2] Form1
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] color2 [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] Color
[/SIZE][SIZE=2][COLOR=#0000ff]Private[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]Sub[/COLOR][/SIZE][SIZE=2] Button1_Click([/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] sender [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.Object, [/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] e [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.EventArgs) [/SIZE][SIZE=2][COLOR=#0000ff]Handles[/COLOR][/SIZE][SIZE=2] Button1.Click
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] G [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] Graphics
G = [/SIZE][SIZE=2][COLOR=#0000ff]Me[/COLOR][/SIZE][SIZE=2].CreateGraphics
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] path [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] System.Drawing.Drawing2D.GraphicsPath
path.AddEllipse([/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] Rectangle(0, 0, 295, 295))
[/SIZE][SIZE=2][COLOR=#0000ff]If[/COLOR][/SIZE][SIZE=2] color2 = Color.Green [/SIZE][SIZE=2][COLOR=#0000ff]Then
[/COLOR][/SIZE][SIZE=2][/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] lBrush [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] System.Drawing.Drawing2D.LinearGradientBrush([/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] RectangleF(0, 0, 295, 295), Color.White, Color.Lime, System.Drawing.Drawing2D.LinearGradientMode.Vertical)
G.FillPath(lBrush, path)
color2 = Color.Lime
[/SIZE][SIZE=2][COLOR=#0000ff]Else
[/COLOR][/SIZE][SIZE=2][/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] lBrush [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] System.Drawing.Drawing2D.LinearGradientBrush([/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] RectangleF(0, 0, 295, 295), Color.White, Color.Green, System.Drawing.Drawing2D.LinearGradientMode.Vertical)
G.FillPath(lBrush, path)
color2 = Color.DarkGreen
[/SIZE][SIZE=2][COLOR=#0000ff]End[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]If
[/COLOR][/SIZE][SIZE=2][/SIZE][SIZE=2][COLOR=#0000ff]End[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]Sub
[/COLOR][/SIZE][SIZE=2][/SIZE][SIZE=2][COLOR=#0000ff]Private[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]Sub[/COLOR][/SIZE][SIZE=2] Form1_Load([/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] sender [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.Object, [/SIZE][SIZE=2][COLOR=#0000ff]ByVal[/COLOR][/SIZE][SIZE=2] e [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] System.EventArgs) [/SIZE][SIZE=2][COLOR=#0000ff]Handles[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]MyBase[/COLOR][/SIZE][SIZE=2].Load
color2 = Color.Green
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] G [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] Graphics
G = [/SIZE][SIZE=2][COLOR=#0000ff]Me[/COLOR][/SIZE][SIZE=2].CreateGraphics
G.Clear([/SIZE][SIZE=2][COLOR=#0000ff]Me[/COLOR][/SIZE][SIZE=2].BackColor)
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] path [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] System.Drawing.Drawing2D.GraphicsPath
path.AddEllipse([/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] Rectangle(0, 0, 295, 295))
[/SIZE][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][SIZE=2] lBrush [/SIZE][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] System.Drawing.Drawing2D.LinearGradientBrush([/SIZE][SIZE=2][COLOR=#0000ff]New[/COLOR][/SIZE][SIZE=2] RectangleF(0, 0, 295, 295), Color.White, Color.Green, System.Drawing.Drawing2D.LinearGradientMode.Vertical)
G.FillPath(lBrush, path)
[/SIZE][SIZE=2][COLOR=#0000ff]End[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]Sub
End[/COLOR][/SIZE][SIZE=2] [/SIZE][SIZE=2][COLOR=#0000ff]Class[/COLOR][/SIZE]
[SIZE=2][COLOR=#0000ff]
[/COLOR]
[/SIZE]
 
The most important part of using GDI+ is knowing where to place the code. The Paint Event Handler is the best location for said code for many reasons.
You may also want to look into using a Drawing2D.PathGradientBrush as an alternative. There's an example in this post: Othello Board
 
Thanks. I got it to show up on a form now. I have two problems with it though. In Design View, it only shows up when I first drop it there. If I deselect the object or move the VB window, it disappears, although it does show up when I run the app. My second question is can I change the default size of the object? I'll need to go back into the control project and change it so that it paints the LED at 0,0 too, but I'd also like the box around the object to be smaller when I drop it on a form. Here's a picture to show how it looks now.
LEDtool.jpg

My final question is how do I handle the "lit" and "unlit" thing? for those two states, I'll just change the color between dark green and lime, but would I have a method in the DLL do that? How would that work if I set LED1.Lit = True? Can I actually call a function like that, or would it have to be LED1(True)? Thanks.
 
Since you give no information on how you accomplished the screen shot, I'll have to assume a great deal.
Since you mention dll I'll assume the control pictured is a userControl contained in a Class library. To change the default size simply change the size of the userControl.

For the lit/unlit functionality you'll need to use Properties. Properties are one of the fundamentals of classes so you'll need to understand how to use them (I've read other posts from you and it seems that you haven't grasped how they work). There are many good tutorials on the basics of Object Oriented programming out there, Google.com is a great resource to find them.

As far as why the paintings show up only when you first place them on the form; did you understand my post regarding the Paint Event? The link I posted shows a complete class that shows some of the functions you are after. How about taking some time to read the suggested link, then we'll talk. ;)
 
I accomplished the screenshot by debugging the form and hitting Print Screen. The LED is being made in a Windows Control Library project, and yes, I did mostly understand what you were saying before about painting. I just don't see why it was being glitchy with disappearing when I moved the LED or the VB window. It was also sometimes showing only half of the LED. I will look into it more and try to figure it out on my own.
 
Blake81, I've done extensive work with GDI+ i understand that you'd like to accomplish this on your own but if you like i'll do you a demo. But for now i'll give you a couple of pointers...

The image you have posted consists of 4 layers, all using different levels of transparancy.
As Paszt has said all the painting should be done in the overriden paint event of your control.
Do not inherit from 'usercontrol' instead inherit from the base class 'Control'
Do not use .. Dim g as graphics = me.creategraphics - the usage for this is specific and not ment to be used to extensive painting.
Use the argument passed into the sub which in usually 'e'

As for the lit and unlit thing, it's as easy as defining a public property in your control and a private variable to hold the value..

VB.NET:
Private LState as LEDState
Public Enum LEDState
Lit
Unlit
end enum
 
Public Property State as LEDState
Get
Return me.Lstate
End Get
Set(byval value as LEDState)
me.LState = value
me.invalidate
End Set
End Property

Then in the paint event query the value of the enum and set a local color varaible to the desired color. With me?
 
Thanks for your help. I think I get the general idea of what you're saying. I'm just really new to this and haven't done it before. I'd appreciate any help, since the LED I came up with was very simple, and didn't look too realistic.
 
Hi Blake81 here's that demo i promised. The Control has a new property called state, in the appearance category of the properties window, and can be set at design time, and it will also operate on a click event at runtime. I've left the painting fairly basic so that you can play around with it as much as you like. Hope this helps...
 

Attachments

  • LEDTest.zip
    20.1 KB · Views: 73
Thanks. That looks really good. I want to make it so that it's red and lit and then red and unlit, but that's a good start. I'll look at the code and experiment with it. Thanks for taking the time to make the demo for me.
 
I changed the colors on the LED as a test, and it works the way I want it to. I don't have any ideas right now for where to use it yet, but I figured I'd want it to change from green lit to green unlit, not green to red. I just changed the colors from Lime to DarkGreen, and got the effect I wanted. Here's a screenshot of lit and unlit.
leds2.jpg
 
Thanks again. I've created LEDS in red, blue, and green to add to my toolbox. My only problem right now is that I'm only happy with the way the green one looks lit, compared to unlit. The red one doesn't seem (in my opinion) to be much of a change when it's lit, and I don't like my choice for the color of the blue one when lit. I guess that's just a matter of experimentation. I wish I didn't have to build the project and then include it on a windows form to see how it looks though. Here are screenshots of the three colors, lit and unlit.
LEDS-unlit.jpg
LEDS-lit.jpg
 
Back
Top