Introducing X360 Share!
This might come as a surprise to those who know me but I’ve finally completed one of my pet projects: X360 Share! X360 Share will automatically post a message to your Facebook wall and/or Twitter feed when you unlock an achievement on your Xbox 360.
X360 Share works by creating a link between your Facebook, Twitter, and Xbox Gamertag. I’ve implemented single sign on for Facebook and Twitter so creating an account is very quick and painless; simply sign in with your Facebook/Twitter account, enter your Gamertag and you’re done!
Services like this exist however I’ve always ended up turning off updates due to the high frequency of messages posted to my streams when unlocking multiple achievements in a short period of time. With X360 Share I’ve solved this problem by allowing the user to combine multiple unlocks into one message and furthermore allowing the user to choose the interval they would like their account to be checked for updates.
The user is also free to customize the messages that are sent to their streams. X360 Share provides a handful of tokens that can be used to create dynamic messages, some examples are: achievement name, point value, game name, and Gamertag.
Give it a shot and feel free to leave feedback or suggestions.
Jquery UI Sortable Tutorial
This tutorial will teach you how to implement Jquery’s UI sortable interaction to reorder a list representing a website menu. We’ll also discuss how to save the order so you can present the updated object order to the user.
Getting Started
First we’ll begin by writing the list we’d like to sort. Create a new PHP file with the following:
<html>
<head>
<style type="text/css">
.menu li {
list-style: none;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #000;
background-color: #C0C0C0;
width: 150px;
}
</style>
</head>
<body>
<ul class="menu" id="menu-pages">
<li id="page_1">Home</li>
<li id="page_2">Blog</li>
<li id="page_3">About</li>
<li id="page_4">Contact</li>
</ul>
</body>
</html>
Next we need to include Jquery and Jquery UI so include the following in the head of the page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"></script>
Making the List Sortable
Let’s add the Jquery will enable the list to be sorted, in the head add:
$(document).ready(function(){
$('#menu-pages').sortable();
});
This tells Jquery that any object with a parent object id of “menu-pages” will be sortable.
Try and resort the pages, everything seems to work great right? Not quite; once you refresh the page any changes you have made to the list are lost. We need a way to save the state of our list after for future page loads.Save the Sorted State
We’ll use PHP, MySQL, and the following sample database to save the updated list order (run the SQL to generate the required database/table/data for this tutorial):
CREATE DATABASE `sortable_tutorial`; USE `sortable_tutorial`; CREATE TABLE IF NOT EXISTS `menu` ( `id` mediumint(8) NOT NULL AUTO_INCREMENT, `order` mediumint(8) NOT NULL, `name` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ; INSERT INTO `menu` (`id`, `order`, `name`) VALUES (1, 0, 'Home'), (2, 0, 'About'), (3, 0, 'Blog'), (4, 0, 'Contact');
Essentially we’re adding an “order” column to our menu table and after every list sort we’ll make a quick update to this table.
Lets change the sortable() interaction to perform an ajax call to “ajax.php” and pass an updated order for our list:
$("#menu-pages").sortable({
update: function(event, ui) {
$.post("ajax.php", { pages: $('#menu-pages').sortable('serialize') } );
}
});
First we use the sortable “update” argument which is fired after an element is moved to a new location. Inside this function we’re making a simple ajax call to our PHP script to pass a serialized version of our list that contains the updated order. Here’s what the serialized data looks like:
page[]=1&page[]=2&page[]=3&page[]=4
Next create a PHP file called ajax.php and connect to your MySQL database. We’ll start with using parse_str to transform our serialized list data into a nice PHP object to work with:
parse_str($_POST['pages'], $pageOrder);
The $pageOrder array now contains the following (left column = order, right column = record id in database):
[page] => Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 )
It’s important to setup the ids for the items in the following manner:
id=”page_1″ (incrementing the number for additional pages) This allows parse_str to properly build an array and allows us to keep track of which page corresponds to which database entry. Next we need to update the menu table to reflect any changes. Using the array we constructed earlier, we now have a nice key value pair that can be used to update each database entry:foreach ($pageOrder['page'] as $key => $value) {
mysql_query("UPDATE menu SET `order` = '$key' WHERE `id` = '$value'") or die(mysql_error());
}
Display the Sorted List
Now we can use the database to display our list in order. Be sure to include your database connection code at the top of our original file and then update the list code to match the following:
<ul class="menu" id="menu-pages">
<?php
$result = mysql_query("SELECT id, name FROM menu ORDER BY `order` ASC") or die(mysql_error());
while($row = mysql_fetch_array($result)){
printf('<li id="page_%s">%s</li>', $row['id'], $row['name']);
}
?>
</ul>
First we pull all of the menu items out of the database sorted by their order.
Next you can see that we’re programmatically generating the page id’s to use the database row id, this allows us to easily add/remove menu items without changing the display code:
printf('<li id="page_%s">%s</li>', $row['id'], $row['name']);
That’s it! Now you can move the items around, refresh the page and your changes will still appear.
Keep in mind that “sortable” can be applied to any container object (such as div’s) and isn’t limited to only lists.
Helpful Links
Running of the Leopards 5k Results
Yesterday Jamie and I ran a 5k put on by a local high school. This was Jamie’s first 5k and my 3rd so we were pretty stoked to see how well we would do. The run was great and we did pretty good however I was disappointed that the race statistics didn’t have a break down by age group, instead there was one massive list containing everyone in the order they finished: http://www.utah.usatf.org/assoc/ut/lepresults10.htm
I enjoy looking at my age group to see how I rank when compared to others near my age so I decided to write a quick script to generate age groups for the race: http://www.xmech.net/Leopards5kAgeGroups.html
I did much better than my last 5k (4th out of 5th in my age group) and I hope to be in the top 10 next time.
8:36PM Photo Project
While browsing twitter I found a reference to something called the “8:36 project”. You can read about it here however the idea is to take a picture of what you’re doing (no matter how mundane) at exactly 8:36 PM every day.
Being able to look back at your collection of photos will allow you to build an idea of how your life unfolded through a given month, year, and beyond.
To start things off I snapped a picture Sunday night:
Jamie and I decided to try and make some Gnocchi for dinner (it’s always nice to spend some time together cooking) and it turned out great.
I’ll be posting my photos to my picasa album and hope to continue this indefinitely.
Botting Facebooks Zoo World
Over the past few weeks a certain someone I know has been playing a real-time game on Facebook called “Zoo World”. Users earn money by adding animals, buildings, etc to their zoo and then use this money to improve their zoo (think Roller Coaster Tycoon). Money is earned in real time which means that every tick (5 minutes) you receive a sum of money depending on how well your zoo is rated.
Zoo World also has a few mechanisms in place that prevent people from earning money while not at their computer, specifically a button appears when a period of inactivity has passed and the zoo day timer stops ticking until you press this button (there’s a handful of other buttons that can appear but this is the main culprit).
Recently I discovered java’s robot library (java.awt.robot) and this seemed like the perfect opportunity to use it and ZooBot is the result. ZooBot is a little application that will scan the screen every few minutes looking for these buttons and presses them if they’re found.
Now you can earn cash while sleeping! I wonder what other facebook games I could use method on…