code-diesel » visualization

Infinite Wall of images using Mootools

sameer — Sun, 17 Jul 2011 12:33:12 +0000

JavaScript Photo galleries are dime-a-dozen, with a large number of variations in size and features. But this particular one developed using Mootools is a breath of fresh air. Most galleries are spatially bounded, i.e. they have a limit how how much you can scroll in any direction.

The Wall – is a Photo Gallery which can cover your entire screen with images. It provides a spatially infinite plane to display images, video or other media. Imagine a infinite grid, in the cells of which you can put images. You can scroll the photos in any direction – vertical, horizontal, diagonal and reverse too. You can insert any number of images in the grid, which are repeated over the entire plane to give a illusion of an infinite wall.

Also, it’s not just for images, it also can hold videos and text and it can be used as an endless grid or also as the popular Coda Slider.

The plugin also provides many interesting variations on the basic theme as shown below.

Demos : http://wall.plasm.it/examples/
URL : http://wall.plasm.it/

Generating a color palette from a image in php

sameer — Mon, 20 Jun 2011 06:57:50 +0000

In the previous post we saw how we can generate a screenshot from a url. In this post we will see how we can create a color palette of the screenshot (or any other image for that matter) using PHP and GD. This can be useful if you need to quickly get the color scheme of a website or a image. Below are a few example images and their palettes generated using the program.

Images: Flickr

Creating a palette

The palette script requires the GD library to be installed on your system. These days the GD library is installed on most PHP systems; but if it is disabled you need to enable it in your php.ini. Make sure that the following line is set in your php.ini.

extension=php_gd2.dll

Next download the palette class from below, which includes a test picture and a test php script. The original palette class from which the examples are created can be found at github, but the below download includes all the necessary files to create a palette.

Download Source
Downloads : 992 / File size : 18.9 kB

The php script creates a palette of the most common colors found in the image. Try using various grid sizes to see how the palette looks. Hovering on each color cell will display the corresponding color value.

The code

The skeleton of the example code is shown below:


 
include_once("colors.inc.php");
 
$image_to_read = "tomato.jpg";
 
$pal = new GetMostCommonColors();
$pal->image = $image_to_read;
$colors = $pal->Get_Color();
?>

The $colors variable now holds an array of colors, the most common colors being at the top. We can now iterate through the array and display the colors using various methods. In the example code included in the download, I’ve used a html table to display the palette.

    Array
    (
        [f0f0f0] => 3598
        [e0e0e0] => 1803
        [f0f0e0] => 326
        [e0e0c0] => 141
        [c0c0c0] => 110
        [404040] => 67
        .
        .

The complete example code is shown below.

"; for($j=0;$j<$inc;$j++){$out.="";}$out.="";echo$out;}?>table> body> html>


 
include_once("colors.inc.php");
 
/* The image from which the palette will be generated */
$image_to_read = "tomato.jpg";
 
 
/* Make sure that this number is a perfect square - 9,16,25,36 etc;
   this will enable you to create a square palette grid.
 
   The following for example will create a 5x5 grid.
 */
 
$colors_to_show = 25;
 
$pal = new GetMostCommonColors();
$pal->image = $image_to_read;
$colors = $pal->Get_Color();
$colors_key = array_keys($colors);
 
?>
<html>
<head>
<style type="text/css">
/* Change the width and height of the palette squares */
td { width: 25px; height: 25px; }
style>
head>
<body>
 
<table border="1">
 

 
$inc = sqrt($colors_to_show);
 
for ($i = 0; $i < $colors_to_show; $i += $inc) {
	$out = "

\"#".$colors_key[$i + $j]."\" bgcolor=\"".$colors_key[$i + $j]."\">

The above example is included in the download.

Auto website wireframes

sameer — Sun, 09 Jan 2011 09:50:43 +0000

Creating wireframes is one of the essential tasks of any web designer or information architect, and with a plethora of tools available it has become an easy task. Wireframes give you a birds eye view of the site before you actually commit to a design. It is also instructional to see the designs of other site, but then you have go to the drawing board and create one yourself. Wirify makes the job easier for you.

Wirify is a small bookmarklet that lets you quickly see the wire-frame of any website with a single click. For example below is a wireframe of the current site.

Wirify constructs the wireframe using CSS techniques and images. Only if it could export the design to formats understandable by page creation softwares.

But why would anyone want to do that?

According to the author:

1. The wireframe allows you to step back and see the big picture. By tuning out the detail it lets you study the building blocks of the page and their relationships.

2. The wireframe is a great learning and teaching tool. Many of the design concepts that underpin page layouts become easier to identify and analyse in a wireframe. Think visual hierarchy, whitespace, symmetry, chunking, grid systems, golden ratio, rule of thirds, etc. etc.

3. The wireframe is a useful redesign tool that stops you getting bogged down in detail in the very early stage of a website redesign project.

Visualizing application structure with nWire

sameer — Wed, 14 Oct 2009 11:17:10 +0000

nWire is a plugin for Eclipse that helps you understand the various components and their relationships in your application. Due to various complex PHP applications being developed – like Magento, Joomla and a wide variety of frameworks, developers finds it hard to understand the underlying architecture and relationships between various components within the application.

nWire lets you bring order to that complexity. Just as a map lets you visualize the relationships between various geographical elements : cities, rivers, roads etc. nWire lets you understand the structure and relationships between various components of the given application. nWire is currently available for Zend Studio 7.0 and Eclipse 3.5 with PDT 2.1.

Currently the software includes three tools:
a. Visualizer : Helps to browse components and associations using one simple unified view.
b. Navigator : Interactive visual representation of all code associations.
c. Search : Incremental search for any type of component, including classes and methods.

Visualizer

The visualizer presents the application components and associations in a graphical representation. Each component of the application appears as a node and associations appear as edges, with the association name given on the edges. When there are many associations of a given type, the associations are grouped into a sub-node. The graph can be traversed: expanding nodes to reveal associated components while the layout automatically adjusts.

The following is a visualization of the Amazon API class I had posted about earlier.

Another visualization of WordPress 2.8, centered on index.php.
(Click image to view a larger version)

Navigator

The navigator presents the components and associations of the application which were discovered by the analyzer. It starts from a given selected component and shows all associated components. This includes inbound and outbound associations. The following figure shows the navigator with the WordPress ‘wp_meta()’ function selected.

Search

The search feature lets you search for components by name or a partial name using wild cards.

Price

nWire is not OpenSource, but a 30-day trial is available. Single user license will cost you $59. If you are dealing with plethora of heavy applications, than the price is worth it.

PHP built in functions map

sameer — Fri, 16 Jan 2009 07:52:44 +0000

Wordle is a online Java Applet for generating word clouds. The application is simple. You enter a bunch of text and Wordle does the rest. The applet provides options to change color, font and layout. Just for fun I created a Wordle cloud to display php’s built in functions. Two samples are shown below. The size of the font in the cloud is proportional to the number of functions starting with the particular name.

Download PDF versions.

The word list to generate the cloud was obtained by the following code:

$functions_list = get_defined_functions();
 
foreach($functions_list['internal'] as $function_name) {
    echo($function_name) . "\n";
}

To see how many functions start with a particular name the following code was used:

$functions_list = get_defined_functions();
$keys = array();
 
foreach($functions_list['internal'] as $function_name) {
    $pieces = explode("_", $function_name);
    array_key_exists($pieces[0], $keys) ? $keys[$pieces[0]]++ : $keys[$pieces[0]] = 1;
}
 
arsort($keys);
print_r($keys);

“why software projects fail” Poster

sameer — Wed, 15 Oct 2008 08:37:21 +0000

Software projects fail – that is a fact no developer is immune from; and the reasons for the same are quite simple and well understood. Still we encounter projects that have gone astray because developers or companies do not learn from their mistakes or are unwilling to follow best practices. For many of us, its always the “next project” that is going to be well designed.

On my book shelf I’ve a health chart. I had created it after I kept losing track of my daily exercise schedules. There is a quirk in the chart though. Rather than listing what exercise routines I should be doing or what food I should be eating, it lists all the negative aspects of living an unhealthy lifestyle. This spurs me towards action more than if I has just listed the positive aspects of health. Now once on the shelf it acts as a daily reminder and helps me keep my health in check.

The chart below lists some of the reasons that most software projects fail. I’ve created it so that anyone can print and post it near their workplace, as a constant reminder to the perils of poor development practices. Designing is not my forte, so extend me some latitude if you don’t like the design.

Download chart as :
1. Medium resolution Gif
2. PDF

Adding HeatMaps to your website

sameer — Tue, 13 May 2008 15:57:39 +0000

ClickHeat is a wonderful PHP software that lets you add Heatmaps for your webpages. Heatmaps are visual representation of clicks on a HTML page, showing hot and cold click zones. It can be useful to see at a glance which webpage areas are getting the most clicks as this areas get redder in color while the areas receiving less clicks are white. The software has many options to tweak, and the heatmaps can be added on a per page basis.

A sample heatmap image is shown below. You can also use the clickheat class in your own PHP applications. The software doesn’t require any database, only GD graphics library must be enabled on the server, which in most cases already is.

You can view a heatmap for the index page for this site here. I’ve presently only added click log for the index page, so try clicking on the index page links to update the heatmap.

username : visitor
password: visitor

If you don’t see any changes in the heatmap, click on the “log my clicks” link in the right corner or try logging out and then logging in again.