SEARCH
pChart and jQuery image map hover
Posted in: Blog, PHP by Craig Davis on June 19, 2010 | No Comments
I have used pChart as a graphing and charting package in several projects. It produces clean graphs, but its native tooltip support has always disappointed me.
I set about to update this with new functionality and to replace the existing javascript with something new from jQuery. I’ve chosen to use qTip to handle the tooltip production, and have extended pChart with new functions for both pChart_Map::SaveImageMap() and pChart_Map::GetImageMap(). These functions now produce an image map rather than the pChart data format.
Demo
You can see a working demo in my project sandbox.
Download
How it works
- The page has a new jQuery plugin called pChart() for each of the pChart images.
- The browser calls the pChart image producer with a unique ID for the image
- As the pChart image is created, pChart writes an image map file for this ID to a tmp directory
- The jQuery load() event catches when pChart has loaded the image
- jQuery loads the newly created image map file from disk via pChart
- jQuery attaches the image map to the image, and then applies qTip to the chart for this image map
Notes
- Make sure that the image tag has an id that matches the MapID on the get request for the chart.
Geolocation services with jQuery and IPInfoDB
Posted in: Blog, JavaScript, PHP by Craig Davis on March 18, 2010 | No Comments
I’m releasing a simple script that uses jQuery and a small proxy script to deliver location services via jQuery. You can see a simple example.
Requirements
Code and explanations
By placing this at the jQuery level it prevents any page blocking that may occur during loading, and the proxy script prevents any cross site scripting problems.
First, the javascript variables , with a small bit of PHP:
var ip = "<?php print $_SERVER['REMOTE_ADDR'];?>";
var geolocation = "./ip_proxy.php";
var cookiename = 'geo_location';
var cookieoptions = { path: '/', expires: 10 };
These variables setup the path to the proxy script, place the users IP address into a javascript variable, and establish our cookie parameters. Next, we setup our page initialization function:
$(function(){
fetchlocation();
});
displaylocation = function(location) {
if (location.Status == 'OK') {
$('.city').text(location.City);
$('.zip').text(location.ZipPostalCode);
if(location.State != '--') {
$('.state').text(location.State);
} else {
$('.state').text(location.RegionName);
}
}
}
fetchlocation = function() {
// look in the cookie for the location data
cookiedata = $.cookie(cookiename);
if ('' != cookiedata) {
locationinfo = $.evalJSON(cookiedata);
if ((locationinfo != null) && (locationinfo.IP == ip)) {
displaylocation(locationinfo);
$.cookie(cookiename, cookiedata, cookieoptions);
return;
}
}
// it's not in the cookie, so fetch from the server
$.getJSON(
geolocation, {
'timezone' : 'false', // set this to false to save the service 2 queries
'ip' : ip
},
function(data) {
data.IP = ip;
displaylocation(data);
cookiedata = $.toJSON(data);
$.cookie(cookiename, cookiedata, cookieoptions);
}
);
}
PHP code
The PHP code is well documented within the ip_proxy.php file. It acts as an intermediary between the jQuery script, and the IP producer. Note that the file can restrict based on hosts, and adds an extra State abbreviation variable to the data returned by the IPInfoDB API
jQuery Animated Borders
Posted in: Blog, JavaScript by Craig Davis on February 21, 2010 | No Comments
This is a small plugin that I’ve put together to allow an animated border on any block level element. This is an initial release, and it still have some quirks. It still needs a page resize event handler.
You can see the sample at here at There4, and you can see the project page and submit issues at http://plugins.jquery.com/project/animatedborder.
Commit integration from bitbucket.org to Campfire chat
Posted in: Blog, PHP by Craig Davis on November 25, 2009 | No Comments
My full time employer recently began to host our projects with Bitbucket.org. I’ve been very impressed so far, and have been enjoying the ease of browsing past revisions and merges. We also use the 37 Signals collection of applications. Bitbucket has some rudimentary Basecamp integration, but we spend time collaborating in Campfire, and I wanted to be alerted when commits were made via chat.
I found a php class called Icecube that integrates with the Campfire API. The documentation for the Bitbucket post data can be found in their help docs for the post payload. I combined this class with a code found at 61924.nl, The script from 61924 can receive the payload from Bitbucket, and process it correctly. I’ve modified the script to present the commit messages with improved formatting, and have added some config options.
Download the scripts
Download Icecube at 61924.nl
Download Bitbucket and Campfire script
Setup the scripts
Place both of the scripts into a web accessible directory, and open bitbucket.php and edit the config section of the file.
Next, open your bitbucket.org repo, choose admin, services, and then add a new post type. Then specify the url to bitbucketchat.php.
Using the script
Join the chat with another account, and make a post!
Questions or suggestions? Leave a comment!
Heft – Is there a corollary in UX?
Posted in: Blog, UX by Craig Davis on November 23, 2009 | No Comments
There has been some really good discussion lately about the ways that we as consumers judge a product. I do believe that quality is fractal. The quality of a product can be felt almost immediately – we can all tell the difference in leather and vinyl, if not immediately by sight, certainly by touch. What elements in an user interface are like this? What can we change in a UX that gives an application a better feel?
I believe that one of the things that affects the way that we feel about a product is it’s heft – the apparent density of a product. Some small electronics devices have extra weight added to them. We’ve all purchased something that looked great, but felt flimsy once it was in our hands. That added heft in this case is not entirely fake – without the added heft it wouldn’t sit on a table correctly, the cables running into it could hold it aloft or twist it around. But beyond that, it’s psychological.
So, with that in mind, what in UX is might be the corollary to heft?
Does your web application have…
Posted in: Blog, Twitter by Craig Davis on November 14, 2009 | No Comments
Does your web application have a visceral quality that you can feel, or a reflective quality that you must realize?
AJAX interaction indications and timers
Posted in: Blog, JavaScript, UX by Craig Davis on | No Comments
I believe that AJAX interactions are still new enough that customers can have a difficult time knowing what to expect from them. I recently completed an interface where we were using jQuery to create and manage lists. In this list interface, we ran into some interesting assumptions that people were making about the way that the application worked based on the interface.
When the user added a new item to the list, the app displayed a spinner, and then faded in the new item from the input box to the list. On the development machines, it was moderately fast. But once it was on the production machines, the ajax was extremely fast – it returned in less than a tenth of a second. This meant that the spinner was displayed for such a short period of time that the users simply didn’t see it. It was never visible to the user.
Because of this, the users didn’t seem to be understanding that the item had become permanent – testing showed that they were actually looking for a “save” button after they had added their items to the app. After some discussion, it became apparent that the speed was confusing them. They believed that web applications have to process for a moment and communicate with a server. Because the process was so snappy, they believed that there was no way it could have been saved on the server, and so they were looking for a submit button to save their items. Because of the speed of the interface, they thought that the changes were only happening locally.
The solution? We added a timer to the application so that the spinner would never show less than three tenths of a second. It was long enough that they felt that the new item had been saved.
Inconsistent Menu Extras
Posted in: Blog, UX by Craig Davis on November 13, 2009 | No Comments
I am surprised that the Google Notifiers for OSX are inconsistent with the system icons in the menu extras. Here’s a screenshot:
Inconsistent colors in the menu extras
I’m usually very impressed with the consistency that Google presents with their UI design, and this bothers me every time that I look at this. I would hate for the icon designers to begin to ignore the simplicity that the monochrome icons present in the menu extras. I believe that the extras icons should only use color for an application that is in an alert state, such as a low battery.
A collection of tools
Posted in: Blog, JavaScript by Craig Davis on October 20, 2009 | No Comments
jQuery slideRemove()
Posted in: Blog, JavaScript by Craig Davis on October 3, 2009 | No Comments
I’ve often run into times that I have wanted to use jquery to fade an element, and slide up the open space, and then remove the element from the page. I’ve written a small jQuery function to handle this.
jQuery.fn.slideRemove = function(callback) {
$(this).blur().fadeTo('medium', 0, function() { // fade
$(this).slideUp('medium', function() { // slide up
$(this).remove(); // remove from DOM
if (callback) { callback(); }
});
});
return this;
};