Flickr Puzzle Mashup - Conclusion (Page 6 of 6 ) To wrap things up, here's all our code pulled together with a little additional HTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<title>Flickr Puzzle</title>
<?php
/* fetch the url of the latest image uploaded to Flickr */
$feed = simplexml_load_file(
"http://www.flickr.com/services/feeds/photos_public.gne");
$feed = simplexml_load_string("<content>" . $feed->entry[0]->
content[0] . "</content>");
$url = $feed->p[1]->a[0]->img[0]["src"];
/* modify the filename if the user wants the original image */
if (isset($_GET["orig"]) && strtolower($_GET["orig"])
== "true")
$url = str_replace("_m.", "_o.", $url);
/* load the image into memory */
$image = imagecreatefromstring(file_get_contents($url));
/* determine the number of puzzle pieces */
$numX = (isset($_GET["x"]) && ctype_digit($_GET["x"]) &&
$_GET["x"] > 0) ? $_GET["x"] : 4;
$numY = (isset($_GET["y"]) && ctype_digit($_GET["y"]) &&
$_GET["y"] > 0) ? $_GET["y"] : 3;
$numPieces = $numX * $numY;
/* calculate the width and height each piece will have */
$pieceWidth = floor(imagesx($image) / $numX);
$pieceHeight = floor(imagesy($image) / $numY);
/* TODO: if users are over zealous and we've got zero-sized
pieces, give them the default (reset $numX, $numY and
$numPieces and recalculate $pieceWidth and $pieceHeight) */
?>
<!-- "import" the required dependency files -->
<script type="text/javascript" src="yui/yahoo.js"></script>
<script type="text/javascript" src="yui/dom.js"></script>
<script type="text/javascript" src="yui/event.js"></script>
<script type="text/javascript" src="yui/dragdrop.js"></script>
<script type="text/javascript">
/* code here will execute once the page has loaded */
window.onload = function() {
<?php for ($x = 0; $x < $numPieces; $x++) { ?>
new YAHOO.util.DD("piece<?php echo $x; ?>");
<?php } ?>
/* link the randomize function to the click event */
document.getElementById("randomizeBtn").click = randomize;
}
/* move pieces to random locations */
function randomize() {
<?php for ($x = 0; $x < $numPieces; $x++) { ?>
YAHOO.util.Dom.setX("piece<?php echo $x; ?>", Math.floor(
Math.random() * YAHOO.util.Dom.getViewportWidth()));
YAHOO.util.Dom.setY("piece<?php echo $x; ?>", Math.floor(
Math.random() * YAHOO.util.Dom.getViewportHeight()));
<?php } ?>
}
</script>
<style type="text/css">
#puzzle {
text-align: center;
}
#guideline {
border: 3px solid #000;
width: <?php echo imagesx($image); ?>px;
height: <?php echo imagesy($image); ?>px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>Flickr Puzzle</h1>
<p>Piece together a puzzle generated from the latest picture
uploaded to flickr!</p>
<div id="puzzle">
<input type="button" id="randomizeBtn" value="Randomize" />
<div id="guideline">
<?php
/* use the gathered information to slice the image into pieces */
for ($y = 0; $y < $numY; $y++) {
for ($x = 0; $x < $numX; $x++) {
$img = imagecreatetruecolor($pieceWidth, $pieceHeight);
imagecopy($img, $image, 0, 0, $pieceWidth * $x, $pieceHeight
* $y, $pieceWidth, $pieceHeight);
/* store the picture in the temporary directory with a
unique hash name. */
$seqId = $y * $numX + $x;
$tmpName = md5($url . $seqId);
imagejpeg($img, "tmp/$tmpName", 100);
imagedestroy($img);
/* link to temp image through fetch.php */
echo "<img src=\"fetch.php?piece=$tmpName\"
id=\"piece$seqId\" alt=\"\"/>";
}
}
?>
</div>
</div>
</body>
</html> |
We're good to go; load it up and have some fun! While you're entertaining yourself putting the puzzle together, think about the different ways you could improve the project. Maybe allow the pieces to snap into place or have something exciting happen when the puzzle is solved... or better yet, think about your own creative and exciting mashup to write! About The AuthorTimothy Boronczyk lives in Syracuse, NY, where he works as an E-Services Coordinator for a local credit union. He has a background in elementary education, over 5 years experience in web design and has written tutorials on web design, PHP, Ruby, XML and various other topics. His hobbies include photography and composing music. | DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
