Paper Ball Designs

Translucent Rectangle with Rounded Corners Using PHP

admin — Tue, 07 Feb 2012 21:52:36 +0000

So recently I worked on a project where I had to create a watermark for an image on the fly, using user-submitted text and then merge it with a background image. I hadn’t had much opportunity to play with the PHP GD library before now (only for graphs and whatnot), but it’s pretty awesome! I ran into a snag though, in that I needed my watermark to be translucent with opaque text and I needed a transparent background (for the rounded corners). I found an easy function for creating a rounded rectangle by merging two rectangles and four circles, but I couldn’t apply a translucent color directly to this or else the overlaps would have different opacities. I tried merging them, saving them as an image, and then changing that image’s opacity, but I could never get the combination of a translucent object with a clear background. So I decided to brush off the old trigonometry and make my own rounded rectangle (or at least pretty close) with the imagefilledpolygon function in PHP. I then just applied this and some text to an image, and voila! awesome watermark. So I just made a quick php function and thought I’d share it with you (I guessed on things like width and height of the characters, but I’m sure smarter people will have a good formula for calculating that stuff). Incidentally, I had to make another part of the logo as a trapezoid with rounded corners and wow, I underestimated how hard that would be! Here’s a page with an example using the function call

">

Accessible Slider

admin — Tue, 31 Jan 2012 19:57:31 +0000

So for a while there I was getting sort of pigeon-holed into making jQuery image sliders, and I was getting pretty good at them. Each client needed something slightly different so I had to put in a decent amount of thought for each one (much more interesting than plugging and praying). One client in particular of ours was a university incredibly dedicated to accessibility, so we were tasked to create a well-designed, easy to use by page creators (this was all in Dreamweaver), and highly accessible. The last aspect was the most difficult, as it ruled out a lot of things I took for granted (background images, toggling display, etc.) and had to degrade nicely when javascript and css was turned off. So after all my toiling, I thought I’d share the code that I came up with for the slider. It rotates on a timer, pauses when a user hovers over the slider or the controls gain focus, and seems to be compatible with screen readers. The basic premise is that the image scrolling works very much like other sliders (just holding them offscreen and sliding them in) while the text is just grabbed from the various (hidden) text boxes to repopulate the one visible text area (which has the aria-live property). A lot of the code is just styling so you can modify most of it, the most important things are the overflow, display, and position properties and obviously the javascript. Anyway, here’s a working version of it for you to mess with, I hope it helps!





    
        
     

    
        
    

    

    	
    		
            
            
            
            Read All Stories >
        


        
            
                
                	
                
                
                    Aug 1 2011
                    Hero 1
                    
                       This is the Text for Hero 1.
                    
                    Continue Reading >
                

            


            
                
                	
                
                
                    Aug 2 2011
                    Hero 2
                    
                       This is the Text for Hero 2.
                    
                    
                        Continue Reading >
                    
                

            


            
                
                	
                
                
                    Aug 3 2011
                    Hero 3
                    
                        This is the Text for Hero 3.
                    
                    
                        Continue Reading >
                    
                

            


            
                
                	
                
                
                    Aug 4 2011
                    Hero 4
                    
                        This is the Text for Hero 4.
                    
                    
                        Continue Reading >
                    
                

            


            
            	
            		
            	
                
                    Aug 5 2011
                    Hero 5
                    
                       This is the Text for Hero 5.
                    
                    
                        Continue Reading >

Mosaic PHP problem

admin — Fri, 09 Dec 2011 22:50:51 +0000

So I set a problem for myself, not thinking that it would be terribly hard. Turns out it’s quite a thinker and it was really enjoyable to work through, so I thought I’d share the problem and my solution…I’d love to see other solutions (I’m sure there are some super useful php functions of which I am unaware).

The idea was to create a random mosaic grid pattern, so various sizes of squares that fit perfectly inside a larger square (I was thinking it could be a cool image gallery tool, but who knows). Check out the final result (not styled or anything) here, I’ll paste the whole code first and then try to go through it piece by piece.

$colArray){
		$spaceCount = array_count_values($colArray);
		if($spaceCount[0]>=$size){
			$startCol=0;
			while($startCol <= (8-$size)){
				if($colArray[$startCol]==0){
					$col=$startCol;
					$freeX=0;
					while(($col<($startCol+$size)) && ($freeX<$size)){
						if($colArray[$col]==0){
							$freeX++;
						}
						else{
							$freeX=0;
							break;
						}
						$col++;
					}
					if($freeX==$size){
						$freeX=0;
						$possibleX[$row][]=$startCol;
					}
				}
				$startCol++;
			}
		}
		else{
			$tried++;
		}
		if($tried>(8-$size)){
			$limit=$size-1;
			break;
		}

	}

	$goodSpot==0;
	foreach($possibleX as $row=>$columns){
		foreach($columns as $column){
			$i=intval($row)+1;
			$freeY = 1;
			$spotX = -1;
			$spotY = -1;
			while(($i<(intval($row)+$size)) && ($freeY<$size)){
				if(isset($possibleX[$i]) && in_array($column, $possibleX[$i])){
					$freeY++;
				}
				else{
					$freeY = 1;
					break;
				}
				$i++;
			}
			if($freeY==$size){
				$goodSpot=1;
				$spotX=intval($column);
				$spotY=intval($row);
				break;
			}
		}
		if($goodSpot==1){
			break;
		}
	}
	if($goodSpot==1){
		$gridList[] = array('size'=>$size,
						'color'=>get_random_color(),
						'posX'=>$spotX,
						'posY'=>$spotY);
		$areaTaken = $areaTaken + pow($size, 2);
		$takeY=$spotY;
		while($takeY<($spotY+$size)){
			$takeX=$spotX;
			while($takeX<($spotX+$size)){
				$gridArray[$takeY][$takeX]=1;
				$takeX++;
			}
			$takeY++;
		}
		$goodSpot=0;
		/*
foreach($gridArray as $row=>$columns){
			echo'
Row: '.$row.': ';
			foreach($columns as $column){
				echo $column.' , ';
			}
		}
*/
	}

}

foreach($gridList as $div){
	echo '
		';
}

?>

Okay, so my reasoning was this: break up the parent div into an 8×8 grid, build an array of available spots out of this grid, make squares of random sizes (but whole numbers on the unit grid, just to make it look a little cleaner), check to see whether there was a spot for them, assign them that spot, and then mark those spaces as full.

The first piece in the php code is the get_random_color function which I found in the comments on some manual page on php.net, but after this it’s all my own stuff. First we set some parameters: the width and height of our parent div (just using 8 to make the grid easier), the area taken up by child divs (0 to start with), the maximum size a div can be (set to 6 units here), and then the $gridArray which lists all the possible spots in our 8×8 unit grid (I know I should probably use while loops to make this automated so I could change the size but you can figure that out).

Next we set up the overall while loop, to be repeated as long as there is empty space in the grid. Within this we create a random size for our child div, we set up an array of possible spots it could occupy(only taking into account its width at this point), and we create a variable to keep track of the number of rows in the grid that we have tried to find a spot wide enough to house our child div. For each row in the $gridArray we first check whether there are even enough empty spots (not necessarily adjacent) to hold the width of our div. If there aren’t enough, we skip the row and marked that we tried one of the rows with no luck. If this happens enough times we drop the size of the $limit variable so that we only create divs that can actually fit.

If there are enough spaces, we set up the $startCol variable which will keep track of the cell we start counting from (think of it as where the top left corner of the div would go) and, if this starting point is actually an empty spot, start checking the cells to the right of this. If it is zero (empty) we increment the $freeX variable to say that, starting from $startCol, there are $freeX empty spots in a row. If we hit an occupied spot before we get enough empty spots to house the width of our child div, we move on to the next starting point. If we do have enough spots, the starting point we began counting from is saved in an array as a possible location that the div could occupy in that row.

Now that we have a list of possible spots in each row based on width, we can check to see if there are enough adjacent rows with that same starting spot to hold the height of the div. We set up the $goodSpot variable to indicate whether we have a valid place to put the div, then we loop over the array. For each row, we have a list of possible x-values for the left side of our div, so for each of these values we set up the $i variable to keep track of which row we’re on, the $freeY variable keeps track of how many adjacent rows have this starting point listed as a possibility, and the $spotX and $spotY are set up just to hold the x and y coordinates in case we come up with a place to put our div. So as we loop through, if the next row contains the same x-coordinate as a possibility, we increment the $freeY variable. Otherwise we stop the loop and move on to the next possible x-coordinate listed. If we get through all the values in the first row with no luck, we move on to the next row and try again. If we find a suitable spot for the child div, we immediately break the loop and add the information to the $gridList array that we set up at the very beginning. We record the size, get a random color to make it look cool, and get the newly found x and y coordinates for its top left corner.

Then we add the area of our child div to the amount of area being taken up, and mark the spots it will take up as occupied in our $gridArray. To do this we start at the top left corner and, for each row that will be taken up, change the values of the newly occupied spots in the grid array to 1.

Finally for each of the rows in our $gridList we create an absolutely positioned div, give it a color and a size (multiplying by 12.5% to change from our easy units to a percentage of the parent div), and position it where we determined it would fit. There we go, just a puzzle to solve really, but it turned out kinda cool. How would you solve the problem?