First a confession, this isn't really a sidebar post. I posted it here because it's mostly interesting for the people here and because the other forums aren't read that much.
Then a second conffestion: this isn't fully my idea, I first saw one posted by Fred Foobar, but it might even be somebody else's. But when I saw it I thought, that's cool, but what if I could point it myself?

 So, without further ado, here is another thing that wasted 3 hours of my life: the WTF meter:

 

I've placed my own copy on http://tdwtf.dtechnology.nl/WTFmeter.php. Source is located at http://tdwtf.dtechnology.nl/WTFmeter.phps

It can be invoked as WTFmeter.php?WTF=X or WTFmeter.php?WTF=X&width=Y. Here is X the WTF level (shown on the meter) and Y the width (2-600 by default), aspect ratio is 12:7 (350x175 by default, 600x350 max)

With a .htaccess (see below) you can also use these:
WTFmeter.png?WTF=X or WTFmeter.png?WTF=X&width=Y
WTFmeter_X.png
WTFmeter_X_Y.png

RewriteEngine on
RewriteRule ^WTFmeter.png(.*) WTFmeter.php$1 [L]
RewriteRule ^WTFmeter_([0-9]+).png$ WTFmeter.php?WTF=$1 [L]
RewriteRule ^WTFmeter_([0-9]+)_([0-9]+).png$ WTFmeter.php?WTF=$1&width=$2 [L]

 It uses caching to lower server-load and load-time a bit.

So, now everyone can rate a WTF, hurray.

File size is about 50 KB for 300x175 (default) and 150 KB for 600x350 (max)

My rating of this post/tool:

The original meter was my work... I took the VU meter off of wikipedia, found the right font for the text using a non-WTF WTF, then edited out the needle and shopped it back in in the relevant position. (The fact that it was originally a VU meter explains the odd scaling - thanks for fixing that!)

My original inspiration was the Give-a-fuck-o-meter (which also appears to have started life as a VU meter). I originally wanted to fix the number scaling, then change the PEAK light to read FRONT PAGE, but I went and deleted the original Gimp source file, so I'm stuck with what I've got.

Good job here though...  taking it to the next level!

If anyone's interested, larger versions of the original animated gifs are available in my photobucket album.

Next step is to animate this one... Does your web host let you call arbitrary programs? Because if they do, gifsicle might be the way to go for generating the images.

while (numDrinks < 3) {
    haveADrink();
}
gotoWork();
while (numDrinks < 6) {
    haveADrink();
}
wasteMyTimeAndOthersOnTDWTF();

 Thank You. bookmarked.

Looks nice but the needle could do with a bit of antialiasing.  And it seems like the original meter used a lower center of rotation.  Note how the needle isn't quite along the same line as the 0 hash mark when the meter is reading 0.  And how the needle ends below the line at the far low and high of the scale but is well above the line in the middle.

 

Fred Foobar:

ound the right font for the text using a non-WTF WTF

Do you by chance still have it? (name or even better: .ttf or something) I didn't find a really good look-alike

Fred Foobar:

I originally wanted to fix the number scaling, then change the PEAK light to read FRONT PAGE, but I went and deleted the original Gimp source file, so I'm stuck with what I've got.

 

The Front-page light might be a good idea indeed. If anyone feels compelled:  the Paint.NET source files are here for the meter and here for the peak meter

 

Fred Foobar:

Next step is to animate this one... Does your web host let you call arbitrary programs? Because if they do, gifsicle might be the way to go for generating the images.

I've got a VPS, so I can pretty much do whatever I want. The link is dead though. I might look into APNG. For agif I'll look into gifslice, but this looks also promising.

jnz:

Looks nice but the needle could do with a bit of antialiasing. 

 

I didn't use it because it doesn't support thickness. The best way to do it is with a polygon, but I had trouble enough with generating an acceptable line-dial.

 

jnz:

Note how the needle isn't quite along the same line as the 0 hash mark when the meter is reading 0.  And how the needle ends below the line at the far low and high of the scale but is well above the line in the middle.

I'm aware of that. The problem is that I use a cirkle for dial calculations while the meter is an ellipse. I'm going to fix that in version 1.1 though.

jnz:

Looks nice but the needle could do with a bit of antialiasing.  And it seems like the original meter used a lower center of rotation.  Note how the needle isn't quite along the same line as the 0 hash mark when the meter is reading 0.  And how the needle ends below the line at the far low and high of the scale but is well above the line in the middle.

With some simple triangulation with Gimp, I'd say that the correct center of rotation for the needle is at the middle of the bottom of the image.

I also think that the WTF label looks a bit half-assed and the numbers are too clearly copypasted.  So I took it upon myself to improve them.  While at it, I replaced the manufacturer name and serial number with something more appropriate.  Behold the revised WTF-meter, with all texts digitally remastered:

There is a Gimp .xcf file available at http://www.tdb.fi/~tdb/wtf_meter.xcf in case someone wants to take this further.

Edit: Oh, and dtech, I'd be honored if you used this image with your script ;) 

 Here's what I plan to add/adjust, about in order of when I'm going to do them (based on how hard it is and how important it is). If anyone has other ideas I'll gladly accept hem

- Custom output type (e.g. gif, jpeg)
- More accurate dial with good length
- Switch between "peak" and "front page" for the Peak light (v1.1)
- Custom text below peak light
- Custom scale on meter
- Custom text on meter (v1.2)
- Custom dial starting point
- Custom scale division
- Custom calibration
- Custom meter / more different meters (v2.0)

tdb:

I also think that the WTF label looks a bit half-assed and the numbers are too clearly copypasted.  So I took it upon myself to improve them.  While at it, I replaced the manufacturer name and serial number with something more appropriate.  Behold the revised WTF-meter, with all texts digitally remastered:

 

I fully agree. I don't really have photoshopping (or Gimping) skills so I just tried my best.

It would only be nice if I could see them :) (it just doesn't load)

Also, what font did you use? I want to use that for custom-text etc.

tdb:

Edit: Oh, and dtech, I'd be honored if you used this image with your script ;) 

 If it looks good/better I will, but I'll need to see it then ;)

dtech:

tdb:

I also think that the WTF label looks a bit half-assed and the numbers are too clearly copypasted.  So I took it upon myself to improve them.  While at it, I replaced the manufacturer name and serial number with something more appropriate.  Behold the revised WTF-meter, with all texts digitally remastered:

 

I fully agree. I don't really have photoshopping (or Gimping) skills so I just tried my best.

It would only be nice if I could see them :) (it just doesn't load)

Also, what font did you use? I want to use that for custom-text etc.

tdb:

Edit: Oh, and dtech, I'd be honored if you used this image with your script ;) 

 If it looks good/better I will, but I'll need to see it then ;)

Strange, it works fine for me.  Here's a link to the image on my server in case it's a cross-site image problem: http://www.tdb.fi/~tdb/wtf_meter.png

As for the font, I used DejaVu Sans, stretched horizontally by various amounts (around 50% for the middle label, 25% for most other things).  It matches pretty well to the original font, although not exactly.  Then there's a bunch of steps I did to make the text appear "flaky":

1. Create original text in double size
2. Stretch by desired amount
   
3. Apply 1px gaussian blur
4. Add layer mask
5. Fill the mask with noise
6. Apply 5px gaussian blur to the mask
7. Adjust levels to make it look good (input 95-115, output 0-255 worked well in most cases)
8. Scale to the final size
   

Hats off to you, gentlemen, for this idea.

Damn, I wish I had that kind of time on my hands. Kudos!

This is awesome, dtech. Also, tdb, the image works for me. Not sure if something has changed since it didn't work for dtech, or if the problem is on dtechs end. I vote for the tdb background. It looks yummy.

 One small suggestion:  move the "File not found" and TDWTF up just a tad so they are easier to see.  Just my opinion though.  Great job and I look forward to using the finished product!@!!

negativeview:

Also, tdb, the image works for me. Not sure if something has changed since it didn't work for dtech, or if the problem is on dtechs end.

Just to validate this statement, earlier today I tried viewing the image but it wouldn't load completely, wget seemed to work fine (oddly enough)

dtech:

If anyone has other ideas I'll gladly accept hem

The original graphic used a logarithmic scale and numbers, yours only replaced the numbers but the scale remained the same.

Rotate the numbers so that they are inline with the curve. If they are not inline people will not read this properly, I hilite this because viewing text properly is very important.

menta:

Rotate the numbers so that they are inline with the curve. If they are not inline people will not read this properly, I hilite this because viewing text properly is very important.

 

I suggest someone take away this man's satchel of weed.

It's not a satchel. Are you watching me? You cant do that.

header("Content-type: " . $output['header']); 

$write_function = "image".$output['type']; 
if(!function_exists($write_function)) 
{ 
    // this installation doesn't support this type of image! 
    die("Unsupported write image type"); 
}

You might want to move that header() under the write function testing.

SlyEcho:

dtech:

If anyone has other ideas I'll gladly accept hem

The original graphic used a logarithmic scale and numbers, yours only replaced the numbers but the scale remained the same.

You are correct.  This is a gross oversight which can no longer be tolerated.  To this end, I have remastered the scale as well.  It is still not perfectly linear, but much more close to it.  Both the png and xcf versions have been updated.

amischiefr:

 One small suggestion:  move the "File not found" and TDWTF up just a tad so they are easier to see.  Just my opinion though.  Great job and I look forward to using the finished product!@!!

I don't know, I kinda like them where they are.  Their positioning was copied from the original VU-meter image.  Feel free to grab the xcf version and experiment with it yourself though, all the texts are on separate layers for easy relocation.

dtech, thanks for all the work you put into this. IT's an awesome idea and one of the coolest things I've seen in here on the sidebar for the past 2 years, aside from SS of course. I'm sure a few people here would like to put some time into working on this, perhaps we could start a small sourceforge project? 

I agree. Text positioning is key when making a product. You should do what the public want when it comes to public applications.

Awesome work on the WTF meter, everyone.  And I'd like to add that "What The Font?" is my new favorite WTF expansion (sorry, "What The Failure?"; you had a nice run, though).

Thanks for all the positive comments, I really hadn't expected them.

Version 1.1 is now up, here is the changelog:

/***********
 * Changelog
 * v1.0 -	Initial release
 * v1.1 - 	PHP5 now required
 *	-	Now uses GD's internal image flags for better flexibility
 *	-	Dial color can now be configured
 *	-	Now uses more headers for better user-experience and caching
 *	-	Dial is now calculated through an ellipse instead of a cirkel, this means the dial now is properly drawed
 ***********/

 Origional sources can be found on http://tdwtf.dtechnology.nl/WTFmeter-v1.0.phps. Current version sources on http://tdwtf.dtechnology.nl/WTFmeter-v1.1.phps. Latest sources can always be found on http://tdwtf.dtechnology.nl/WTFmeter.phps.

 Next stops:
- The better meter by tdb (note: It still lacks a "peak" light image)
- Find a suitable font which can be used in GD, stretching is a bit of PIA in GD. (the blurring is not that card though)
- Errors will also draw an image (provided GD is available) so you won't get a red X in your browser on error.

A sourceforge project might be a bit overkill. I'll first complete this until its acceptable. Then I'll maybe make one for a more general meter (LOL, give-a-damn-o-meter you name it)

 edit: note that while the dial now always has the correct length, it's innacurate between about 10 and 40, probably because of the logaritmic scale. It'll be fixed in the next version

 It worked fine with me about an hour after I posted that I couldn't see it. I had the same problem: the image would be loading forever.

dtech:

Lingerance:

negativeview:

Also, tdb, the image works for me. Not sure if something has changed since it didn't work for dtech, or if the problem is on dtechs end.

Just to validate this statement, earlier today I tried viewing the image but it wouldn't load completely, wget seemed to work fine (oddly enough)

 

 It worked fine with me about an hour after I posted that I couldn't see it. I had the same problem: the image would be loading forever.

 

I forgot the quote

dtech:

* - Dial is now calculated through an ellipse instead of a cirkel, this means the dial now is properly drawed

I don't think that you need an ellipse here.  Note how the needle at the 0 reading doesn't form a straight line with the 0 hash mark.  It seems to me that you want a circle but with a center that's lower than the bottom edge of the face of the meter.  You wouldn't want to draw the entire radius, just the part that's not hidden behind the frame of the meter.  Look at the Wikipedia image to see what I'm talking about.  See how the needle doesn't originate from the same point that you're using.

Also, although it is not easy to see in that image, I believe the needle on these meters usually extends almost up to the top of the hash marks and doesn't stop at the curved line.

jnz:

dtech:

* - Dial is now calculated through an ellipse instead of a cirkel, this means the dial now is properly drawed

I don't think that you need an ellipse here.  Note how the needle at the 0 reading doesn't form a straight line with the 0 hash mark.  It seems to me that you want a circle but with a center that's lower than the bottom edge of the face of the meter.  You wouldn't want to draw the entire radius, just the part that's not hidden behind the frame of the meter.  Look at the Wikipedia image to see what I'm talking about.  See how the needle doesn't originate from the same point that you're using.

Also, although it is not easy to see in that image, I believe the needle on these meters usually extends almost up to the top of the hash marks and doesn't stop at the curved line.

 

I agree; I used this solution because it was easier to implement however. With the origional needle I would need to make a line between the end point and the intersection of the line from starting point to end point and the line thats on top of the frame. Possible but a bit of coding, I'll add it later.
I still would need to use a ellipse though, the scale is definitly not an cirkel.

 And version 1.2 is off. Main feature is the now much better dial, that origionates from the origional point. It's still a bit innacurate for 10-40 (which you especially notice if you specify a WTF level of 30 of 50 and the dial isn't on the correct mark). I can live with it though.
And ofcourse tdb's much-better meter.

Changelog:

 * v1.2 -	Errors are now outputted as an PNG image (provided GD is installed). This also hold true for PHP's internal errors
*	-	Added optional "type" parameter to specify output type. Currently only gif, jpeg, png, wbmp and xpm are supported
*	-	Now using new and improved image by tdb
*	-	Adjusted max_width to 728 according to tdb's image
*	-	Needle is now drawn on peak image rather then pre-rendered in order to obtain equivalent looks
*	-	Needle is more accurate thanks to origin point on bottom of frame. Dial now starts from intersections between origional line and the line y=some integer

 Use of this .htaccess to make it support the new image types.

next stop: antialiasing that damn needle.

* v1.3	-	The line is now drawn as an anti-aliased polygon. It look a little bit better, but far from optimal
*	-	The image_error didn't work correctly yet, wasn't enabled for PHP errors. It can also now cope with multiline errors

This is probably a retarded idea, but what about overlaying anyther png for the line, instead of drawing it with gd?

 Yeah. The main issue now is everything else looks great, so the needle sticks out by comparison.

This is the kind of thing that makes me wanna hit myself for not thinking of it first. Oh, well.

How about a special case with a half-exploded dial for the cases whose WTFness is so awesome, it's right off the scale?

 keep going, it's a tool we readers were not knowing that we were desperatly wating for it.

We had this long ago.  They were called The Mug and The Sticker.  It was an amusing, homegrown meme that permitted us to rate WTFs but we were asked to stop using it as it quickly derails the threads.  Besides a mug being cooler than a meter, I'm not sure we need a device to aid forum members in being less verbally expressive; things are looking rather grim around here as it is.

dtech:

I still would need to use a ellipse though, the scale is definitly not an cirkel.

This made me curious.  How could a physical meter move the tip of the needle along an ellipse?  It seems it would need some rather unusual mechanism.

I remembered I had an old VU meter in the attic and went to get it to see how it works.  On mine the needle actually sweeps out a circle.  This means that when the needle is at the far low or high end of the scale it extends up to a bit below the top of the hash marks but when it is in the middle of the scale it extends up much farther, even above the top of the numbers.

So if you want to go for more realism you could put the top of the needle back on a circle.  Although perhaps it is more aesthetically pleasing if it follows the same curve as the scale.  I've had luck approximating this either as an ellipse (as you've done) or just a very large circle (which may be simpler).

morbiuswilters:

We had this long ago.  They were called The Mug and The Sticker.  It was an amusing, homegrown meme that permitted us to rate WTFs but we were asked to stop using it as it quickly derails the threads.  Besides a mug being cooler than a meter

 

I know of the mug (and the half-mug, and the quarter-mug). Never saw the sticker though.But those only allowed for bad/non-wtf (of worse for the half-mug) and, i guess, a real wtf for the sticker. You couldn't really say: "Well, let's see... this is absolutely 78.3492 WTF" ;)

Also, I see an increasing  level of "this is not a wtf" posts. 

jnz:

This made me curious.  How could a physical meter move the tip of the needle along an ellipse?  It seems it would need some rather unusual mechanism.

jnz:

So if you want to go for more realism you could put the top of the needle back on a circle.  Although perhaps it is more aesthetically pleasing if it follows the same curve as the scale.  I've had luck approximating this either as an ellipse (as you've done) or just a very large circle (which may be simpler).

 

That makes sense. However, with all of the abilities a digital-analoguemeter allows us I thinks it looks better if we moved it allong the ellipse.

I did think of one or two methods a needle could move alongside an ellipse, but then: "gloves"

kaamoss:

This is probably a retarded idea, but what about overlaying anyther png for the line, instead of drawing it with gd?

 

It's not really a retared idea. It just won't work. The problem is that GD draws the line very jagged. It won't matter if the line gets drawn on the actual image or in another image (then overlayed, making it a layer); it still will be drawed jagged.

I've thought of it though. On the internets there are several possibilities that can provide slightly bettter AA with GD:

- Interplotating the size of the image to 2/4 times it's actual size and then resizing back. Drawback is that it "AA's" everything and that it's a little resource-intensive (since I use caching that doesn't really matter though)
-(Guassian) blurrinng with a small amount. Drawbacks are evident: it blurs everything a little

I think I'll go with a semi-combination of all adbove, since it won't be as resource-intensive and might have good results:
1. Make an image 16x (4x width 4x height) the size of the "real" needle
2. Draw the large needle on that image
3. Blur it a little
4. Copy it back resized on the real image

dtech:

I've placed my own copy on http://tdwtf.dtechnology.nl/WTFmeter.php. Source is located at http://tdwtf.dtechnology.nl/WTFmeter.phps

It can be invoked as WTFmeter.php?WTF=X or WTFmeter.php?WTF=X&width=Y. Here is X the WTF level (shown on the meter) and Y the width (2-600 by default), aspect ratio is 12:7 (350x175 by default, 600x350 max)

With a .htaccess (see below) you can also use these:
WTFmeter.png?WTF=X or WTFmeter.png?WTF=X&width=Y
WTFmeter_X.png
WTFmeter_X_Y.png

RewriteEngine on
RewriteRule ^WTFmeter.png(.*) WTFmeter.php$1 [L]
RewriteRule ^WTFmeter_([0-9]+).png$ WTFmeter.php?WTF=$1 [L]
RewriteRule ^WTFmeter_([0-9]+)_([0-9]+).png$ WTFmeter.php?WTF=$1&width=$2 [L]

 

 Hi, your rewrite rules don't work for negative values. Sorry to tell you  ;-)

morbiuswilters:

We had this long ago.  They were called The Mug and The Sticker.  It was an amusing, homegrown meme that permitted us to rate WTFs but we were asked to stop using it as it quickly derails the threads.  Besides a mug being cooler than a meter, I'm not sure we need a device to aid forum members in being less verbally expressive; things are looking rather grim around here as it is.

hallo.amt:

 Hi, your rewrite rules don't work for negative values. Sorry to tell you  ;-)

 

That was probably the most easy fix of my life

RewriteEngine on

RewriteRule ^WTFmeter.png?(.*) WTFmeter.php?type=png&$1 [L]
RewriteRule ^WTFmeter_((-)?[0-9]+).png$ WTFmeter.php?type=png&WTF=$1 [L]
RewriteRule ^WTFmeter_((-)?[0-9]+)_([0-9]+).png$ WTFmeter.php?type=png&WTF=$1&width=$2 [L]

RewriteRule ^WTFmeter.gif?(.*) WTFmeter.php?type=gif&$1 [L]
RewriteRule ^WTFmeter_((-)?[0-9]+).gif$ WTFmeter.php?type=gif&WTF=$1 [L]
RewriteRule ^WTFmeter_((-)?[0-9]+)_([0-9]+).gif$ WTFmeter.php?type=gif&WTF=$1&width=$2 [L]

RewriteRule ^WTFmeter.jpeg?(.*) WTFmeter.php?type=jpeg&$1 [L]
RewriteRule ^WTFmeter_((-)?[0-9]+).jpeg$ WTFmeter.php?type=jpeg&WTF=$1 [L]
RewriteRule ^WTFmeter_((-)?[0-9]+)_([0-9]+).jpeg$ WTFmeter.php?type=jpeg&WTF=$1&width=$2 [L]

edit: and I managed to screw it up. Fixed now 

m0ffx:

 

Carefull with that. A future version will probably only leave a melted mess if it measures something over 9000 ;)

* v1.4 - It turned out the line was greatly jagged when the image was resized. The line is now drawn on the final sized image. Furthermore to enable antialias a few lines are drawed next to each other (as many as line thickness) Results are now quite acceptable and as good as they are going to get I think

next stop: animated gifs

 Sourceforge project pending:

https://sourceforge.net/projects/wtfmeter

The footer text needs to be moved up, there is absolutely no need to make it covered like this.

 Version 1.5 is now up. Main feature: animated gif support!

 Example: WTFmeter.php?WTF=0|1|4|5|4|6|3|1&width=300&type=gif&delay=10

 

* v1.5 -	Do NOT use this meter with values over 9000
*	-	Now supports animated gifs trough gifsicle
*	-	Adjusted required parameter "WTF". Now with support for frames like this: 0|5|10|5|0
*		Number of frames is limited to 25
*	-	New requirement: temp directory for animated gifs
*	-	Changed directory structure for more overviewability
*	-	Creating of image is now in seperate function for more flexibility and creating of animated gif's
*	-	Added extra parameter to stored files and in .htaccess to allow for delay

 Oops, the "trough gifsicle" can go out of the changelog. It's with a native PHP class.

Also a bit more explanation on animated gifs:

multiple frames can be passed through through the WTF parameter, pipe (|) delimeted. In example a meter that goes from 130 through 140 in 3 steps would be like this:
WTFmeter.php?type=gif&WTF=130|135|140

Note that the image starts over. A more smooth appearance can be achieved by reversing the frames:
WTFmeter.php?type=gif&WTF=125|130|135|140|135|130

You can also set the speed between frames (in ms):
WTFmeter.php?type=gif&WTF=125|130|135|140|135|130&delay=100

If you want to keep an specific frame on longer you can achieve it by putting it mutliple times:
WTFmeter.php?type=gif&WTF=125|130|135|140|140|140|140|140|135|130&delay=20

Note that the maximum number of frames defaults to 25.

Happy WTF-metering!