PHP for current/min/max thermometer image from clientraw.txt

Let's Chat
, , , , ,
1

I’ve seen a couple of sites with a nifty thermometer graphic to show the current temperature, so I decided to create a generalized one for my site too :slight_smile:

The thermometer.php (and associated thermometer-blank.png graphic) will create a 170x54 PNG graphic of the (rounded value) current, daily minimum and daily maximum temperature from the WD clientraw.txt or the VWS Weather Flash wflash.txt/wflash2.txt files.

Sample images (the PNGs are transparent background, shown in gray on the samples)

For instructions and download, please see Saratoga-Weather.org - Scripts - Widget

Best regards,
Ken

2

Nice.

3

Cool!

4

good work as always :smiley:

5

Very nice Ken !

For sure I have a place to put this cool thermometer. And maybe “tune up” the script to make a hg barometer :slight_smile:

6

Great script!

I implemented it on my site…however it seems that the background is not transparent (it is white). Any thoughts?

7

Because your style sheet says give it a white background

.left_content img{ float: left; color: #303030; border: 1px solid #f5f5f5; [color=red][b]background-color: #FFFFFF;[/b][/color] margin: 3px 10px 7px 0; }

Nice page BTW… with the exception of the big red box on the bottom (not sure what that is for)… nice layout, good clean code too.

8

Oh, ok. That fixed it!

Thanks for the comments! That big red box (someday) will be a small image of a radar (preferably GR2). I keep on trying to ask Mike kindly to add FTP uploading to it, but he hasn’t done it yet. Oh well. :lol:

9

I joined the bandwagon as well. :slight_smile:

Chuck

10

Absolutely top stuff as usual, added to my site and gives it a bit of colour! Cheers Ken for your never ending ideas and inspiration :smiley:

11

Hi Ken

Another great script from you. I have implemented it on my website in both the Danish and English version.

Thank you very much.

Best regards,

Henrik

12

Thanks for all the kind words! I’m pleased you’ve found the thermometer script useful for your websites … it does seem to add a bit of zing to the display of conditions, and is very low overhead (graphic is about 1.5kb).

Best regards,
Ken

13

I was asked by WeatherBeacon on the WXForum.net about how to AJAX the updates to the thermometer image… I’ve come up with this mode for ajaxWDwx.js.

I haven’t implemented it yet in the distribution files, but if you’d like to modify your copy of ajaxWDwx.js to have the thermometer image update when the temperature changes via AJAX update, here’s what you can do:

In ajaxWDwx.js:

Insert this line in the settings area of the script

var thermometer = './thermometer.php'; // script for dynamic thermometer PNG image

Set the thermometer to the relative URL address of your thermometer.php script.

In the ajaxLoader function, find

		set_ajax_obs("ajaxtemp", temp.toFixed(1) + uomTemp);
		set_ajax_obs("ajaxbigtemp",temp.toFixed(0) + uomTemp);

and replace it with

		set_ajax_obs("ajaxtemp", temp.toFixed(1) + uomTemp);
		set_ajax_obs("ajaxbigtemp",temp.toFixed(0) + uomTemp);
		set_ajax_obs("ajaxthermometer",
					 "<img src=\"" + thermometer + "?t=" + temp.toFixed(1) + "\" " +
				"width=\"54\" height=\"170\" alt=\"Current Temp is " + temp.toFixed(1) + uomTemp + "\" />" );

Then in the page where you have the <img src=“thermometer.php”… />, change it to be<

<span class="ajax" id="ajaxthermometer"><img src="thermometer.php" ... /></span>

The image should update when the temperature changes via AJAX.

Best regards,
Ken

Note: modified to put ?t=[temp] on AJAX URL to ensure that new image is fetched by browser. Also made the ‘how to use tags’ (hopefully ) more clear :slight_smile:

14

Ken,

What do you mean by surrounding it.

Chuck

15

He means surround the image link between the span tags…

[color=purple]<span class="ajax" id="ajaxthermometer"> [/color][color=red]<img src="thermometer.php"... />[/color] [color=purple]</span>[/color]

16

Kevin’s correct… I’ve updated the posting above to show it better, and changed the script slightly to make sure the browser will pull a fresh copy of the image generated by the thermometer.php script.

Best regards,
Ken

17

Hello Ken,
Useful script, thanks for your coding work!

A question: How to change the font-family and/or font-size on the image ?

Mario

18

Hi Mario,

The script currently uses the built-in font(s) for GD … font size=1 for the scale, font size=2 for the min/max and font size=3 for the top legend.

The metrics for the font are used in the script to place the text over the image.

GD does support using TrueType fonts (as does Anole’s Weather Graphic script), but the current thermometer.php only supports the built-in fonts at the present time.

Did you have a particular font in mind? Arial Narrow or Franklin Gothic Condensed are two fonts that could work (given their small dimensions), but it would take a major rewrite of the script to support TrueType fonts (have to change multiple function calls and some of the math for placement to accomplish). Maybe in a future version?

Best regards,
Ken

19

Ken,

Thanks for your reply.
I tough that font changing could be easily performed with some CSS coding, I don’t want to waste your time asking for major code rewriting, your script look pleasant as is.
My request was only for a little extra aesthetically touch.

Best greetings,

Mario

20

I embedded the “ajax update to the thermometer image” on my work in progress page.
Everything work fine except a problem with the “Current temp is xx.x” tooltip message that appear when you hover the mouse over the image.

It work on IE6 but it fail (no tooltip) using the latest Opera and FireFox release.

Anyone could verify if the same happen on your pages ?

Thanks :smiley: