Archive for category Techie Talk

As a Web Developer, I’ve realised it’s always good to know the meaning behind colours when choosing them for your website and branding.

Here is a list of the most common associations.

It’s nice to see that Powwownow is enforcing its bid for the environment through its green, white and blue logo!

Powwownow is available in so many countries that we offer comprehensive lists of dial-in numbers in PDF form.  There are a great many combinations of services and languages and we are adding new access numbers all the time so these PDFs are generated automatically by computer.  I was updating these last week and, as part of that, it came to my attention that the rounded corners weren’t working.  We had been using four little images in the background with the corners drawn on by hand.  Sadly, when customers printed the PDF, background images often weren’t shown.  That wasn’t a big problem, as long as you don’t mind the marketing department sawing off your head with a rusty spoon.

It immediately occurred to me that drawing the corners on with vector lines would make the most sense; there’s no way they wouldn’t be printed.  Unfortunately the PDF generator we use (FPDF) only draws straight lines, not circles, so I needed to figure out a way to achieve the same result using only straight lines.  I needed trigonometry.  It was just like being back in maths class in school!  I flicked ink at the boy next to me, blew spit balls at the office manager when his back was turned and stared at the clock.  Then I did some trigonometry.

I started out, above, trying to figure out a formula for moving from one point on the cricle to another but then realised that even if I succeeded, it would just leave me with a hollow circle, not a solid one. So I changed tack and realised it was blindingly simple.

If you start from the centre point, the co-ordinates of any one point on a circle can be expressed as x=radius*sin(angle), y=radius*cos(angle).  Both sin() and cos() are available within PHP so my plan was to start from the corner I wanted to “round off” and draw a series of white lines inwards to the border of an imaginary circle.  If there were enough lines they would cover up a sort of curved rectangle shape and make the corner look rounded.

PHP works in radians, which are like degrees except there are 2*pi radians in a full circle instead of 360.  Each corner has a range of 0.5*pi radians and zero is at the 3 o’clock position in the FPDF plugin .  To the right is a table showing the ranges each corner needs to use.   Because I’m lazy to a fault, I wrote a little loop to create an array of the boundaries marking the limits of each range.

Once that was ready, all I had to do was define which corner I wanted, from 1 to 4, and I’d be able to pull two adjacent numbers from the array to find the start and end of any quadrant I liked.  Once I had these boundaries, I could start at the lower end and draw a line, then add 0.1 and draw another line.. and so on until I reached the upper limit.  And you know what?  It worked!  In this image, you can see the original sharp corner on the far left and then the first attempt at drawing the lines in next to it.

Not bad, eh?  The next step was to change the line colour from red to white (obviously) and reduce the size of the step to make the lines so dense that it looked like a solid shape.  Rather than simply reduce the interval between lines from 0.1 to 0.01 I set the interval to 1/radius so it would get smaller as the corner got bigger.  That way, if anyone decided to make a bigger corner in the future, instead of gaps showing, it would simply draw more and more lines to make sure the shape was always solid white.

You can see in the middle of the imagea above what that looked like – pretty good, no?  The next step was to do the other three corners. Obviously, to get the appropriate curve, the imaginary circle should be inside the main coloured area, offset by a distance of one radius in both the x and y directions. However, that was a bit of a challenge – think about how you have to move in a different direction at each corner:

The sharp eyed among you will have noticed that the X offsets are the same in the middle and the Y offsets are in groups of two. So I wrote some cunning one-line logic statements to calculate the X and Y offset on-the-fly before adding (or subtracting) from the co-ordinates of the corner to produce my origin point.  Then I had the combination of an appropriately offset circle centre and the correct range of angles from before.

One other problem you may have noticed was a slightly ragged edge where the straight ends of the lines themselves were clearly visible at the ends of my overlay shape. So I subtracted from the offset value to put the circle just a tad outside where it should have been which keeps those rough ends away from the coloured area.  The far right above shows the final result and very satisfactory it is too.

Well, that’s job done in my book.   But of course I’m forgetting the most important stage: mess around with the settings to produce beautiful moire patterns all over the international dial-in PDF!

A vast improvement, I’m sure you’ll agree. Interested art gallery owners can reach me at the usual address…!

The finished function:

function corner ($pdf, $cnr, $x, $y, $r) {
	/*
	$pdf = fpdf object
	$cnr = corner number, 1 to 4
	$x and $y = coordinates of corner point
	$r = radius of corner curve
	*/

	// white to match document background
	$pdf->SetDrawColor(255,255,255);

	// define four sector ranges in radians
	for ($i=0;$i<=2;$i+=0.5) {
		$lim[] = $i*pi();
	}

	// find x and y of virtual circle's origin by adding a small offset
	$d = $r-0.1; // offset only needs to be tiny
	$ox = $x + ($cnr>1&&$cnr<4 ? $d : -$d); // 2 and 3 vs 1 and 4
	$oy = $y + ($cnr>2 ? +$d : -$d); // 1 and 2 vs 3 and 4

	$step = 1/($r*10);// more lines if it's larger
	for ($a=$lim[$cnr-1];$a<=$lim[$cnr]+$step;$a+=$step) {
		$yy = $r*sin($a);
		$xx = $r*cos($a);
		$pdf->Line($x,$y,$ox+$xx,$oy+$yy);
	}

}

They say you shouldn’t take your work home but, if you’re lucky, sometimes your curiosity is piqued by something that you just have to investigate on your own time.  No, I’m not talking about cyber stalking the office babes on their Facebook pages, quiet down at the back.  This week, I’ve been putting the finishing touches to our new conference call scheduler application and, while implementing a Google maps tool for calculating time zone differences, I started thinking about their zoom levels.  I can’t tell you how many times I’ve tried to print off directions and found that the route was too small to be clear, then zoomed in and found the route didn’t quite fit all on one screen.  It seems like a big leap at those times, yet when you’re looking at the whole world, or zoom all the way in to one street, the contrast between stages isn’t nearly so obvious.  So what is the change in scale each time you click the plus or minus?

The application Google supply contains a suite of useful procedures, including one which tells you the longitude and latitude of the four corners of the visible area at any one time.  So I wrote a small script that would subtract the latitude difference between the top and bottom of the map view whenever I clicked a button, giving me the real distance that was represented by the height of the map area.  Then all I had to do was click, zoom in, click.. and so on.

Zoom levels in Google are represented by numbers which you can see if you use the ‘link’ button on the normal maps site.
http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=TW9+1SE&sll=57.704147,0&sspn=1.655398,5.822754&ie=UTF8&t=h&z=16&iwloc=A

The most zoomed out level is 0 and the most zoomed in is 17 (it used to be 15 but as better quality aerial photography and streetview came along it was extended).  Here are the relevant distances for a few zoom levels, in degrees.

(As an aside, to convert longitude difference to miles, divide the Earth’s circumference in miles (24,901.463) by 360.  Amusingly, because I am 12 years old inside my head, this comes out at about 69)

Anyway, the numbers look pretty arbitrary, right?  I pasted the results into Excel and created a third column with a formula which divided each number in the list by the one after it.  Here’s what I got:

Ho ho! Looks like that third column is pretty much constant, except at the top end.  That’s probably down to inaccuracies in the projection.  All flat maps have errors when you try to show a spherical shape on a flat map and they’re always worse near the poles.  But otherwise, case closed!  Every click on the Google map zoom doubles or halves the size of what you can see.  Which is why it seems like such a big difference when I’m trying to print those directions.

Only one question remains: how can I use this knowledge to impress the girls in the office?