Dynamically adding rounded corners to images can be a tricky process. Making sure those corners are transparent adds an additional level of complexity.

In the project that I am working on, we used to fake the rounded corners with ImageMagick. Since our site had a white background, applying white, pre-made corners over the image was a solution.

However, a newer version of the project allows the administrator to alter the default background color for the site. I do not claim to be an ImageMagick guru, but I had worked with it before. A search in Google led me to this list of possible solutions. After looking up the commands in the thread, I had learned more, but had yet to find a solution for dynamic images. The other tutorials that I was able to find were incomplete, hard to understand (without a depth of ImageMagick knowledge), or just poorly written.

So, for your coding pleasure, I am going to show you how to create transparent, rounded corners, and provide you with the source images to do so.

For ease of understanding, I will separate the commands into individual statements. I chose to use a .jpg image with less than great quality so you can see how well the corners are applied. The source images do not necessarily match the file names in the code. In addition, this example is for PHP (hence the exec statements). The image that we are going to use is this scene from The Princess Bride (princessbride1.jpg):

First we need to convert our image to a PNG:

$image_name = 'princess1.jpg';
exec ( "convert {$image_name} {$image_name}.png" );

This results in our .png image (princessbride2.png):

Now that our image is in a format which supports transparencies, we can go ahead and lay the colored corners upon the image. The colored corners are available for download at the end of this, but here’s an example of one of them on their own:

Here is the code that will correctly lay the corner on your image:

$image_path = '/images/';
exec( "composite -compose Over -quality 100 -gravity NorthWest $image_path/cornermask_upper_left.png {$image_name}.png {$image_name}nw " );

This will place our corner image over the top-left corner of the image. We want to go ahead and do this for the other corners as well making sure to use the image that was just created as the source. This will be our image name with nw appended to the end of it:

exec( "composite -compose Over -quality 100 -gravity SouthWest $image_path/cornermask_lower_left.png {$image_name}nw {$image_name}sw" );
exec( "composite -compose Over -quality 100 -gravity NorthEast $image_path/cornermask_upper_right.png {$image_name}sw {$image_name}ne" );
exec( "composite -compose Over -quality 100 -gravity SouthEast $image_path/cornermask_lower_right.png {$image_name}ne {$image_name}mask" );

This will result in our image with the new pink corners layed over the top. The reason that we are doing quality 100 is so that the colors don’t distort at all. This is important for the next step. Here’s our image so far (princessbride3.png):

We’re just about complete. Now we need to convert those corners to transparent. The color of the corners is the hex value #ff00f6. If you want to change the colors, simply recolor the corner images and insert your own hex value in the following statement:

exec( "convert {$image_name}mask -transparent \"#ff00f6\" {$image_name}.png" );

That leaves us with our final image with it’s nice, new rounded corners (princessbride4.png):

Make sure you clean up after yourself. We’ll assume you have a function called handleError() to do the error handling:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

if(!@unlink("{$image_name}nw")) {
    handleError();
}
if(!@unlink("{$image_name}ne")) {
    handleError();
}
if(!@unlink("{$image_name}sw")) {
    handleError();
}
if(!@unlink("{$image_name}")) {
    handleError();
}
if(!@unlink("{$image_name}mask")) {
    handleError();
}

And there you have it. I understand there are different methods for doing this and probably a cleaner one-line version for ImageMagick. But, I hope this helps to get you on your way.

As promised, here are the corner images:

            

Or you can grab them in this handy .zip file: cornerimages.zip.

I hope you enjoyed this article and found it helpful. If so: please consider subscribing to my RSS feed.

In Februay I wrote about a story involving Heather Gillman and Ponce de Leon high school. The student was suspended for standing up for gay rights within her school. As a result, the writer of this blog has received numerous threats in regards to the story. The ACLU was put into the mix and now, 3 months later, the courts have ordered the school to notify students, in writing, that standing up for gay rights is okay.

The principal, David Davis, suspended the student in question and was quoted as telling a person to “not be gay.”

Unfortunately, the principal has learned nothing from the experience. According to WJHG news, the principal:

“…would not go on camera. He did say he’s disappointed in the judges’ decision, but he will abide by that ruling.

According to the Miami Herald:

“Davis also testified that he believed rainbows were “sexually suggestive” and would make students unable to study because they’d be picturing gay sex acts in their mind. The principal went on to admit that while censoring rainbows and gay pride messages he allowed students to wear other symbols many find controversial, such as the Confederate flag.”

It is disgusting to think that the principal of a school would equate a gay rights symbol to a symbol associated with slavery and stupidity. However, it sheds light on where his ignorant beliefs may stem from.

I am glad that the school is being taught a lesson and I hope the people in the community of the school will stand together to remove this ignorant and terrible person from the Ponce de Leon school administration.

If your wireless is failing for no reason on your HP Pavilion DV6000 laptop, call HP before your warranty runs out. An HP tech admitted that 1 in 7 of them require motherboard replacement to fix the problem. Not a BIOS upgrade or drivers.

[UPDATE] – It has now been released that the problem was possibly due to faulty heat handling on the NVidia G84 and G86 parts. The BIOS update, listed in the extended warranty, simply changes how the fan operates. That should give your product about enough time to function before the warranty runs out.

You should call HP to get your laptop serviced if your laptop is exhibiting the following behavior

• Wireless device no longer recognized
• Wireless switch doesn’t work
• Wireless will not come back after shutting down or going into a sleep mode

The HP Pavilion DV6000 is a fairly popular laptop. Available at many retail outlets and online, it happens to be the one that I decided to purchase just under a year ago.

It’s a decent machine and the price was right. My particular model is a DV6436nr that I picked up at Best Buy. After removing Vista and installing Ubuntu, the laptop was running rather well. However, the wireless was spotty at best.

I assumed that it was due to the difficulties that can occur with wireless and Linux. I followed all of the guides and installed all the drivers. Yet for some reason, my wireless just seemed to be getting worse. Eventually, the device would only work when it felt like it. I decided to go ahead and install Windows XP and see if I could get it working in that OS. No dice. My laptop was still within warranty so I decided to start looking around to see if anyone else was having this problem.

It wasn’t long before I came across this lengthy thread at the HP site. In it, “Anna” from HP says that updating the BIOS will fix the problem:

“Hi, it’s Anna from HP Total Care,

I’m sorry some of you are having trouble with your wireless WLAN not detecting your wireless network and not displaying in your device manager. The issue appears to be affecting AMD based Dv6000, v6000 and Dv9000 notebooks running Microsoft Windows Vista.

We’ve got a BIOS update and some instructions on getting this resolved. If the BIOS update does not resolve the issue, please contact HP support and we will help facilitate a repair.

Please do not try replacing your wireless card or inserting a third party wireless modules as some have suggested here on this forum. This will not resolve the issue and is in violation of FCC regulations.

[...Instructions on how to install the BIOS update...]

I hope this is helpful. Please let me know if you have any further questions and we’ll work to respond personally or on the forum as best we can.

Anna”

This solution was garbage and yielded no results. The switch on the front was basically useless and the device simply was not being recognized any longer. Frustrated, I searched further and found that this is a much more prevalent problem than I originally thought. Even ZDNet posted an article about the failure.

I eventually called HP to get my laptop repaired. As indicated in other posts, the solution is a motherboard replacement.

Here’s the kicker: the customer service agent who helped me when I called HP said:

“Yea, there’s about 1 in 7 laptops that are affected. But, there’s no way to tell which ones they are and that’s not enough to do a recall.”

Wow. The worst part is: the problem is hard to diagnose due to the fact that the device only works half the time. Instead of it being a problem with the wireless, or the drivers, or the BIOS, it’s a problem with the motherboard.

I’ll admit: the repair process was painless. They sent me a box overnight with shipping labels and I had my laptop back in a week or so. But come on HP: if 1 in 7 devices are failing and it’s hard to detect, help the consumer out and let them know.

Until then however, you can call HP at 800-474-6836.