GUI and Skins

Master Zero

Well-known member
Joined
Sep 10, 2005
Messages
51
Programming Experience
Beginner
How would I add the attached image to an app? I know I would have to set it as the background image, but how would I make it tell the right time? How could I edit the text at run time?

I was thinking that I might have to recreate the image every time to keep up with the current track time and track number, but that would probably make the program run slow.

Thanks for any help!
 

Attachments

  • step15.jpg
    step15.jpg
    7.4 KB · Views: 163
Can you get that image without the text already on it? Then you could just get that font, set the image as background and put a label on top with a transparent background colour, which is all you need to change, this wont run slow either.

If you can't get that image without the text on it, I'm rather good with Photoshop, I can recreate it for you. As for the font, here is a similar one:
http://www.searchfreefonts.com/font/lcd.htm
or this:
http://www.dafont.com/ds-digital.font

Anyway good luck, I'll check back soon.
 
Brilliant, simply brilliant!

Of course, I should have through of that. I can get the background image without the text on it since it came from a tutorial on how to create it. I was just showing the finished product. This tutorial can be found here. In step ten, the author added a second layer with lots of eights and the opacity set to 50 % percent to “mimic LCD burn-in”. I guess I can create this double layer effect the same way using a second label control. Time for some experimentation!

Thanks again!

* I just realized that the label control does not have the opacity property; I guess I can have the “burn-in” effect built into the background image.
 
Last edited:
Yeah pretty much haha, but if you just wanted to use a 2nd label control you could set the background colour to transparent and the foreground colour to a dark blue, although it'll look strange against the gradient background. Your best bet is to have the 88:88 built into the image itself like you said.
 
If you want to use a transparent label on top of the Picturebox you must also set the Label.Parent = Picturebox. (EDIT: doing so remember the Label location is now relative to the new parent Picturebox! before it's location was relative to the Form.)

This can also easily be done with GDI+ graphics drawing using the Graphics.DrawString method to draw the digits. There are several options:
- always draw to base image and display the resulting image in Picturebox,
- leave the base image displayed as Picturebox.Backgroundimage and draw foreground text to Bitmap to be displayed as Picturebox.Image
- display the base image in Picturebox, then use the Paint event to draw the string, use a timer to force Picturebox.Refresh at time intervals.
 
Last edited:
Thanks for the tips!

I have not played around much with GDI+, so I really don’t understand. Can you write some sample code demonstrating the usage of the DrawString method? If not then can you direct me to a closely related tutorial which demonstrates the three options you listed?

Thanks!
 
GDI+ tutorials are all over the web. Also much help in documentation (MSDN), with lots of examples and all.

I have composed and attached an example project that display all four techniques, the three different methods using GDI+ drawing are obviously very similar. Either way you choose is very easy, just a few lines of code necessary. I've just used a standard font Courier New, but you can set any font you like. Also I'm displaying time with seconds, because it is so boring to wait a minute to see the graphics change ;)

You have not set your Primary Platform for your account in User CP, you are hereby encouraged to do that. I'm using VB 2005 .Net 2.0, so this is also the version attached. If you are at .Net 1.1, you can look at the code in .vb files or download free VB 2005 Express http://msdn.microsoft.com/vstudio/express/vb/
 

Attachments

  • vbnet20-fontoverlays.zip
    32.1 KB · Views: 58
Last edited:
Back
Top