exuber.net

A bit of Open Flash Chart

admin — Wed, 21 May 2008 11:00:32 +0000

There are several chart framework that are open source or at least free out there. Some time a go I have a chance to use Open Flash Chart. This article will give some introduction on how to use Open Flash Chart.

A chart should show some data. Andy budd from clear left once said on his blog:

It’s important not to specialise at the expense of your other skills. Clients and agencies like well rounded people with a wide set of interests. Your skills should resemble an inverted T. Generally very broad but with one (or preferably more) areas of deep knowledge.

So just for fun I then have an idea to create an inverted T skill chart.

Step.1 Requirements
Open flash chart. Please download the package before proceeding.

Step.2 Setup
Once you have download the package, extract it. You will see some folder. For this tutorial we will use PHP so we only concern about the “php-ofc-library” folder (I will get into python in another post). We need to copy this folder to our application folder. My setup looks like this:

Step.3 Code
To get the chart running we basically need to do 2 things.
1. generate a set of data
2. invoke the flash object and supply it with correct parameter

So, first thing first, let us create the data, save this code into data.php


include_once 'php-ofc-library/open-flash-chart.php';
 
$skill_score = array( 1, 7, 7, 7, 9, 7, 6, 6, 1 );
$skill_name  = array( 'Ruby', 'HTML', 'Python', 'PHP', 'C/C++', 'CSS', 'XML', 'MySQL', 'PostgreSQL');
 
// create bar chart with 50% opacity, and set color to #0066CC
$bar = new bar( 50, '#0066CC' ); 
// set our data to skill score
$bar->data = $skill_score;
 
// create the graph
$g = new graph();
// set graph title and set some style
$g->title( 'Skill Chart', '{font-size: 12px;}' );
 
// set our graph data to $bar
$g->data_sets[] = $bar;
 
// set x legend title, size and color
$g->set_x_legend( 'Skills', 12, '#C11B01');
// set label style size, text color, orientation, label step,
$g->set_x_label_style( 10, '#000000', 0, 1 );
// set x labels to list of our skill name
$g->set_x_labels( $skill_name );
 
$g->set_y_min( 0 );
$g->set_y_max( 10 );
$g->y_label_steps( 10 );
 
// set y legend title, size and color
$g->set_y_legend( 'Score', 12, '#C11B01');
 
// generate the data
echo $g->render();
?>

That is it for the first part. If you open this file through browser, you will have something like:

&title=Skill+Chart,{font-size: 12px;}&
&x_legend=Skills,12,#C11B01&
&x_label_style=10,#000000,0,1&
&x_axis_steps=1&
&y_legend=Score,12,#C11B01&
&y_ticks=5,10,10&
&x_labels=Ruby,HTML,Python,PHP,C%2FC%2B%2B,CSS,XML,MySQL,PostgreSQL&
&y_min=0&
&y_max=10&
&bar=50,#0066CC&
&values=1,7,7,7,9,7,6,6,1&

You can see how the chart look like by opening directing your browser to: http://localhost/[your_folder]/open-flash-chart.swf?data=http://localhost/[your_folder]/data.php
You should have something like:

Now we need to create a way to feed the data into the flash. Edit the index.php and write:


include_once 'php-ofc-library/open_flash_chart_object.php';
// create the flash object
open_flash_chart_object( 500, // width of the flash object
                         500, // height of the flash object
                         'http://'. $_SERVER['SERVER_NAME'] .'/skill/data.php',  // point to data url
                         false, // do not use javascript
                         'http://'. $_SERVER['SERVER_NAME'] .'/skill' // base url
);
?>

You should notice that I do not use Javascript. I tried but whenever I set the Javascript parameter to true it won’t work.

And that is it we are done. Go to your browser and point to the index.php. You should have something like the previous picture except it does not take up the whole screen.

ExtJs and Open Flash Chart
For one of my projects, I need to embedd the chart into a ExtJs form. So I tought I might share how to do that as well.

Step 1. Requirement
Other than above requirement, you will of course need extjs. Download the library and extract it in the ‘\js’ directory.We also need a plugin. ExtJs community has come out with a flash plugin. I got the plugin from ExtJs forum. I can’t seem to find it anymore, and the plugin has no indication of the author. You can get my local copy here. Copy this file into ‘\js’ folder. So your ‘\js’ folder should have ‘extjs’ folder, ‘flashplugin.js’ file and our actual code ’skill.js’ file. Of course we haven’t type anything into the ’skill.js’ file.

Step 2. The code
Open the ’skill.js’ anf fill it with this code:

Ext.namespace('exuber');
 
exuber.skill = function(){
    var site_url = 'http://localhost/skill/'; // base url
 
    //public
    return {
        init : function() {
            // create chart panel
            skillChart = new Ext.Panel( {
                layout: 'fit',
                height: 300,
                width: 720,
                swf: site_url + 'open-flash-chart.swf',
                flashvars: {data: site_url+'data.php', height: 295, width: 650 }, // flash variable, data and dimensions
                plugins: new Ext.ux.FlashPlugin(), // use the plugin
                region:'north' });
 
            contact = new Ext.Panel({
                layout: 'fit',
                width: 720,
                region:'center',
                buttons: [{
                    text:'Like what you see ? Hire Me',
                    handler: function(){
                        Ext.MessageBox.alert('Thank you', 'Thank you for your interest.This is just an example though.');
                        }}]});
 
            //create window
            scoreWindow = new Ext.Window( { 
                draggable: false,
                width:728,
                layout: 'fit',
                title:'My Skill',
                closable:false,
                collapsible: false,
                resizable: false,
                plain:true
            });
 
            scoreWindow.add( skillChart );  
            scoreWindow.add( contact );  
            scoreWindow.show();			
        }
    }
}();

Also edit the ‘index.html’ with this code:




    My skill

Done!! You should have something like:

With a bit of work you can make a better looking chart, for different kinds of data.
Here is what I made some time a go.

Of course there a lot more good-looking chart out there. Open Flash Chart is a good place to start.

Admiring Alex Buga site

admin — Mon, 19 May 2008 11:15:35 +0000

I stumble upon this website sometime a go and can’t stop admiring it.
Nice background texture. Some hand drawn image as header and footer. Nice semi transparent boxes.
You can move the lamp left and right. Very interesting. It uses mootools. A very neat effect.
Overall cooool site.

You should go visit the the site.

Some screen shot:

CakePHP, Captcha and User Registration

admin — Tue, 06 May 2008 15:22:41 +0000

User registration is a common thing in web development. To ensure that only human registered as a user, it is common to use Completely Automated Public Turing test to tell Computers and Humans Apart (CAPTCHA).

There are several CAPTCHA library available. This article will show how you can integrate 2 such library to provide CAPTCHA verification for user registration.

The library I used are kCAPTCHAand reCAPTCHA. Let’s start with reCAPTCHA.

reCAPTCHA is recommended as the official CAPTCHA implementation by the original CAPTCHA creators. Here is how you do it, step-by-step:

1. Download the library.

2. Sign up for the API key. reCAPTCHA is a web service so you need to sign up for API key to be able to use it. Notice on signing up , you will be asked to fill in a domain name. As far as I know you can put anything, I tried putting my domain and localhost, both accepted. After signing up you will have two keys one public key (for the user) and the other a private key (for communication between our server with reCAPTCHA server).

3. Extract and put the result at your vendors folder ( [web]/app/vendors/ ).

4. Create a component file


class RecaptchaComponent extends Object
{
    var $publickey = "..."; // use your public key here
    var $privatekey = "..."; // user your private key here
 
    function startup(&$controller)
    {
        $this->controller = $controller;
    }
 
    function render()
    {
        vendor('recaptcha/recaptchalib');
 
        $error = null;
 
        echo recaptcha_get_html($this->publickey, $error);
    }
 
    function verify()
    {
        vendor('recaptcha/recaptchalib');
 
        $resp = recaptcha_check_answer ($this->privatekey,
                                  $_SERVER["REMOTE_ADDR"],
                                  $_POST["recaptcha_challenge_field"],
                                  $_POST["recaptcha_response_field"]);
 
        if ($resp->is_valid) {
            return true;
        } else {
            return false;
        }
    }
}
?>

store this at [web]/app/controllers/components/recaptcha.php

5. Create User Model and User Controller

Model:


class User extends AppModel
{
    var $name = 'User';
 
    /**
     * validation rules
     */
    var $validate = array (
		'user_login' => array(	
			'exists' => array(
					'rule' => array( 'checkUnique', 'user_login' ),  
					'message' => 'The Username you entered has been taken.'
			),
			'minLength' => array(
					'rule' => array('minLength', 3),  
					'message' => 'Username must at least be 3 character long.'
			)
		),
		'user_pass' => array(
			'mingLength' => array(
				'rule' => array('minLength', '6'),
				'message' => 'Mimimum 6 characters long'
			)
		),
		'user_name' => array(
			'minLength' => array(
					'rule' => array('minLength', 3),  
					'message' => 'Username must at least be 3 character long.'
			)
		),
		'user_email' => array (
			'email' => array( 
				'rule' => 'email',
				'message' => 'Please supply a valid email address.'
			),
			'exists' => array(
				 'rule' => array( 'checkUnique', 'user_email' ),  
				 'message' => 'The email you entered has been registered.'
			)
		)
	);
 
	/** 
	* Validate if the data is unique.
	*
	* @param $data         The data to be compared.
	* @param $fieldName    The field name to check.
	* @return true         If the field name unique. False otherwise.
	*/
	function checkUnique( $data, $fieldName ) {
	        $valid = false;
		if(isset($fieldName) && $this->hasField($fieldName)) {
			$valid = $this->isUnique(array($fieldName => $data));
		}
		return $valid;
	}
}
?>

store this as [web]/app/models/users.php.

Controller:


class UsersController extends AppController
{
    var $name = 'Users';
    var $components = array('Auth', 'Recaptcha'); 
 
    function beforeFilter() {
        $this->Auth->fields = array('username' => 'user_login', 'password' => 'user_pass');
        $this->Auth->allow('register', 'recaptcha');
    }
 
 
    /**
     * This method handle the user registration process.
     * It will first of all, get the user basic information.
     * After user submit the information, a hash key will be generated and 
     * stored in the database. An email will then send to user and pending
     * for user activation
     */
    function register()
    {
        if ( !empty( $this->data ) ){
           if ( $this->data['User']['user_pass'] 
                    == $this->Auth->password( $this->data['User']['user_pass_confirm'])) {
                    if (  $this->Recaptcha->verify() ){
                        $temp = array( 
                                'user_registered'=> date('Y-m-d'), 
                                'user_activation_key'=>sha1( time() ), 
                                'user_status' => 0 );
                        $this->data['User'] = array_merge( $this->data['User'], $temp );
                        unset( $this->data['User']['captcha']);
 
                        $this->User->create();
                        if ( $this->User->save($this->data) ){
                            // do other stuff here like send activation email to user
                            // or/and redirect to other page
                        }
                    } else {
                        $this->Session->setFlash('captcha verification failed');
                    }
            } else {
                $this->Session->setFlash('password mismatch');
            }
        } 
    }
 
    function recaptcha()
    {
        $this->Recaptcha->render();
    }
}
?>

store this as [web]/app/controllers/users_controller.php.

6. Create the view


echo $form->create( 'User', array('action' => 'register' ) );
echo $form->input('user_login', array( 'label' => 'User Name :' ) );
echo $form->input('user_name', array( 'label' => 'Full name :' ) );
echo $form->input('user_email', array( 'label' => 'Email :') );
echo $form->input('user_pass', array( 'label' => 'Password :', 'type' => 'password') );
echo $form->input('user_pass_confirm', array( 'label' => 'Retype Password :', 'type' => 'password' ) );
$this->requestAction('users/recaptcha');
echo $form->submit();
echo $form->end();
?>

store this as [web]/app/views/register.ctp.

7. voila!, We are done!!

Now, let’s move on to kCAPTCHA. It is pretty much the same. Unlike reCAPTCHA, kCAPTCHA is not a web service. So you need not sign up for anything.

1. Download the library.

2. Extract and put the result at your vendors folder ( [web]/app/vendors/ ).

3. Create component.


class KCaptchaComponent extends Object
{
    function startup(&$controller)
    {
        $this->controller = $controller;
    }
 
    function render()
    {
        vendor('kcaptcha/kcaptcha');
        $kcaptcha = new KCAPTCHA();
        $this->controller->Session->write('captcha', $kcaptcha->getKeyString());
    }
}
?>

store this as [web]/app/controllers/components/kcaptcha.php

4. The Users model is the same as above.

5. The User controller is pretty much the same, but I will rewrite the whole code anyway.


class UsersController extends AppController
{
    var $name = 'Users';
    var $components = array('Auth', 'KCaptcha'); 
 
    function beforeFilter() {
        $this->Auth->fields = array('username' => 'user_login', 'password' => 'user_pass');
        $this->Auth->allow('register','kcaptcha' );
    }
 
 
    /**
     * This method handle the user registration process.
     * It will first of all, get the user basic information.
     * After user submit the information, a hash key will be generated and 
     * stored in the database. An email will then send to user and pending
     * for user activation
     */
    function register()
    {
        if ( !empty( $this->data ) ){
           if ( $this->data['User']['user_pass'] 
                    == $this->Auth->password( $this->data['User']['user_pass_confirm'])) {
                   if ( strtolower($this->data['User']['captcha']) == strtolower( $this->Session->read('captcha')) ) {
                        $temp = array( 
                                'user_registered'=> date('Y-m-d'), 
                                'user_activation_key'=>sha1( time() ), 
                                'user_status' => 0 );
                        $this->data['User'] = array_merge( $this->data['User'], $temp );
                        unset( $this->data['User']['captcha']);
 
                        $this->User->create();
                        if ( $this->User->save($this->data) ){
                             // do other stuff here like send activation email to user
                            // or/and redirect to other page
                        }
                    } else {
                        $this->Session->setFlash('captcha verification failed');
                    }
            } else {
                $this->Session->setFlash('password mismatch');
            }
        } 
    }
 
    function kcaptcha()
    {
        $this->KCaptcha->render(); 
    }     
}
?>

store this as [web]/app/controllers/users_controller.php

6. The view


echo $form->create( 'User', array('action' => 'register' ) );
echo $form->input('user_login', array( 'label' => 'User Name :' ) );
echo $form->input('user_name', array( 'label' => 'Full name :' ) );
echo $form->input('user_email', array( 'label' => 'Email :') );
echo $form->input('user_pass', array( 'label' => 'Password :', 'type' => 'password') );
echo $form->input('user_pass_confirm', array( 'label' => 'Retype Password :', 'type' => 'password' ) );
echo $form->input('captcha', array( 'label' => 'Please type the text presented in the image : ',
                                    'before' => '. $html->url('/users/kcaptcha') . '"') ); 
echo $form->submit();
echo $form->end();
?>

store this as [web]/app/views/register.ctp.

7. voila!, We are done!!

Here is same screenshots showing CAPTCHA user registration in action.

Setting up the stack on Linux

admin — Wed, 30 Apr 2008 14:39:41 +0000

I am software and web developer. This occupation usually requires the use of a lot tools. On Windows I would typically install Microsoft Visual Studio, XAMPP, Python and many more. Linux has several programming tools ready after installation. For one you do not have to install Python. You do however need to install gcc, not included after installation.

Here is the list of tools I installed:

On Ubuntu just type :

sudo apt-get install gcc

You can also use:

sudo apt-get install build-essential

The later will install g++ and several other lib. In my case I use the later command.

Netbeans

I am used to program under IDE on Windows. I understand IDE is not particulary popular in Linux world. Most of them use Vim of Emacs. I am not familiar with both. Well I use Vim from time to time but only for simple editing. Emacs they say, have a steep learning curve, it takes time.
Okay, let’s see… there are several IDE for Linux i.e Eclipse, Netbeans, and Anjuta.
I have tried Netbeans on Windows and my response is positive. So I chose to install Netbeans.

Here is how you install Netbeans on Ubuntu Linux
1. Download the latest JDK from Sun.
2. Install fakeroot and java-package from universe to repackage the jdk as a .deb

sudo apt-get install fakeroot java-package

3. Once done create the .deb jdk package

fakeroot make-jpkg jdk-6uxxx-linux-i586.bin

4. Install the package sudo dpkg -i sun-j2sdkxxxx+updatexxx_i386.deb
5. Make sun java your java

sudo update-alternative –config java

6. Download the latest Netbeans from the official site.
7. Execute the file and follow the instructions.
8. You are done.

WingIDE

I like programming in Python. And I have been using WingIDE on Windows, so I thought I should install it on Linux as well. The version I use is the free WingIDE 101. You should download the application before proceeding. After that by simply double-click the “.deb” file the Wingide would be installed. However there won’t be a shortcut available on ‘Application’->’Programming’.
You can add the shortcut by doing:
1. Right-click on ‘Applications’ and choose ‘Edit Menus’.
2. Select ‘Programming’ from the left tree panel and click ‘New Item’ on the right panel.
3. Set type to ‘Application’.
4. Fill in the name, in my case I type in WingIDE.
5. For the command text-field, fill in ‘/usr/bin/wing-101-3.0′ (the installation directory).
6. Download WingIDE icon and put the icon on a directory, in my case ‘/usr/share’. Click the icon button on the left. Browse to ‘/usr/share’ directory click open. And choose the icon you put there earlier.

Simply type:

sudo apt-get install subversion

Glade

Simply type:

sudo aptitude install glade-3

That is it. You are now ready to start developing software in Linux.

Migrating to Linux

admin — Tue, 29 Apr 2008 05:30:38 +0000

I have always been a Microsoft product user. Well, simply because there was not many choices.
Most of the people I know uses Windows. In college it was consider cool to use Linux. But only several people went beyond installing them. Most of the time I install Linux in a dual-partition setup. I play with it once in a while but never completely liked it. Everything seems so difficult in Linux back then. The driver was scarce (if any). And all the software was weird. Editing is quite annoying back then. Cause I used to ctrl-x to cut and ctrl-p to paste. It did not work at the time (I forgot the editor I used). And software installation was weird at best. In windows you have installer, where with a click you can setup the software. In Linux many application needs to build from source. And then there RPM, supposedly it helps software deployment problem. But for me it just not as easy as in Windows. Later on when VM became well known, I always have a Linux installed as virtual machine. But never on a single dedicated computer. Always as a backup never as main operating system.

Over the years however I am beginning to like Linux very much. And decided I should have a single dedicated computer that uses Linux. So I bought an Acer 4512 and installed Linux on them. Ubuntu Linux that is. You can find the installation instruction here or a more elaborate one here. I find the first guide simple and it worked. The second guide gives you more detail and alternative if something went wrong.

And it was great. Some screen shot:

Right out of the box the OS just works. What about the application/software installation? Installing a new application on Ubuntu Linux is easy. You can add/remove program from the menu. or use the synaptic package manager from system menu. Or you can use the command line. The command line (which I used to think primitive, you need to type and remember all those commands ) turned out to be the most efficient
ways to carry out some task. And Linux has pipe, in which you can chain several command in a single command. Very efficient.

If you are new to Linux, here is several bundled software get you up and running:

gedit, a quite advanced editor, it has spell check and support a lot of syntax highlight mode.
OpenOffice, open source office application, with it you can create documents, spreadsheet, etc.
Pidgin, an instant messaging application, it supports multiple protocols.
Firefox, internet browser.
Evolution, Email suite.
GIMP, a photo editor application.
F-Spot, a photo management utility.

To increase your productivity, here is some shortcut:

1. ALT+ F1 : opens application menu.
2. ALT+ F2 : display run dialog.
3. CTRL + ALT+ D : minimizes all windows.
4. print screen : capture screen.
5. ALT+ print screen : capture active window.
6. CTRL + ALT+ left-arrow : switch to workspace left of the current workspace.
6. CTRL + ALT+ right-arrow : switch to workspace right of the current workspace.
6. CTRL + ALT+ up-arrow : switch to workspace above of the current workspace.
6. CTRL + ALT+ down-arrow : switch to workspace below of the current workspace.
7. ALT + TAB : switch to other window.
8. ALT + ESC : switch to other window in reverse order.

You can get the complete list here, or just ask Google.