Hi-Res Weather Icons

[JohnWPB]

I have been using Konfabulator for a while now, and was always impressed with the HIGH quality weather Icons that it uses for "The Weather" widget.

With Electron & HarleyDude's help, I was able to find the files saved in a temp/cache directory. The icons were drawn on the fly in layers however. For instance if it was a cloudy day, the image of the clouds would be overlayed over the image of the sun.

I took all the images and pulled them into Phothshop. I then created the 48 standard weather icons from them. They are in PNG format. I tried saving them as .gif's but they lose a LOT of the quality, as well as the gradient transparancy.

When I try to use the new icons on my weather page, they show up with a pink background! I can't seem to figgure out how to make the background transparent. When the PNG's are viewed in PhotoShop, they are transparent. Do any of you graphics guru's out there know what I am doing wrong?

I have attached one of the images to this posting. It looks fine when posted here in the forum, so is there some sort of CSS tag, or something that I need to add to my page for them to display correctly????

 

[JohnWPB]

Here are what the icons look like when displayed in my page. I have no background table colors on, or anything of the likes. This has me stumped. Hopefully someone know what I am doing wrong!

I don't know if that the images are called up dynamically in an ASP page has anything to do with it or not..... Hmmmm.

 

[JohnWPB]

Ok, the plot thickens! I just threw 3 of the weather images into a page with DreamWeaver. When I preview in Netscape, the page looks the way it is supposed to, when I preview with IE, I get the pink background thing....

BUT When I view my custom weather page with Netscape , I get the pick background in Netscape as well! This is really strange!

Here is what the 3 images look like in IE & and in NS:

 

[Mike]

Been a long time since I played with graphics but do these help?:

http://www.macromedia.com/cfusion/knowledg...cfm?id=tn_14647

http://sdc.shockwave.com/support/fireworks...to_flash05.html

 

[TonyNo]

IE does not handle PNG transparency correctly. Use another browser until they fix this.

 

[JohnWPB]

I wondered if this was an IE issue, BUT when I bring up my HS page in NS, it also displays incorrectly.... There has to be one other thing I am missing here.

 

[Mike]

Another work around: Since it seems you don't truly need the transparency cover in your situation, you could always make the transparent color actually be black. Then you aren't using transparency at all, but it still fits your interface.

 

[JohnWPB]

Mike, Hmmmm thats another way to look at it.... I could make another (background) layer in PhotoShop and color it black, then export as a png.

It's a work around, but should work! Thanks for the idea.

 

[JohnWPB]

Well I just spent the past half hour creating a new Photoshop layer, sending it to the back, then painting it black, flattening it, and saving it back as a PNG, for ALL 48 images....

It works on the page now, but the icons would have to be changed if I ever wanted to use them on a different background.

Here is a cap of the completed weather screen... FIANLLY, I DO love these Hi-Res icons!

 

[Mike]

Thats great! Glad it worked out. It is a real nice setup you have there. I am looking forward to getting to that point with mine and if I do half as much as you I will be quite pleased (not even up to the computer tie in yet..)

 

[markthomas]

Well I just spent the past half hour creating a new Photoshop layer, sending it to the back, then painting it black, flattening it, and saving it back as a PNG, for ALL 48 images....

It works on the page now, but the icons would have to be changed if I ever wanted to use them on a different background.

Here is a cap of the completed weather screen... FIANLLY, I DO love these Hi-Res icons!

That's a very nice screen. Is it for a touchscreen? Do you have a link describing the broader project?

Incidentally, you may want to correct a few misspellings:

Alltime -> All-time
Visability (love that one! Something you can charge?) -> Visibility
dirrection -> direction
aprox -> approx

 

[JohnWPB]

MarkThomas, Thanks for the corrections, but so many people are used to my mispellings, that if I correct the message, they won't think that I posted it

I posted a stand alone weather page on the HomeSeer site some time ago. It is basically the ASP page that you see there. You can alter it and change it around anyway you like. Do a search on the HomeSeer board under the "Scripts Library". I know it is in there somewhere.....