abidibo@blogspot-abidiBlog:~$ posts

Mootools 1.3 DatePicker class

2011-03-22T18:39:00.001+01:00

I think that DatePicker mootools class by monkeyphysics is fantastic. It is fast, well written, it has a nice layout and some awesome options like the inputOutputFormat one. Recently I upgrade to mootools 1.3 without compatibility in a project of a php framework which uses this class.
So I need to make DatePicker class working with the new release of my favourite js framework.
During the upgrade work I found and fixed a bug in the date selection when selecting a day of the previous/next year in january/december months view.
Moreover I added the z-index management so that the calendar is always shown above all document elements.
Maybe more improvemets will come in the next future.
My project is a fork of the original one and hosted on my github repository.
From command line you may simply clone my project

git clone git://github.com/abidibo/mootools-datepicker.git

XDebugButton. Php XDebug with Vim.

2011-03-21T09:05:00.003+01:00

Vim is fucking awesome. Vim is fucking extensible.
You may find a lot of plugins transforming it in a perfect IDE for you programming language.
One of the best plugin for php programmers is xdebug, which runs a debug session right into vim.
On the web you may find many articles, explaining how-to install it and make it working (it involves some configurations in vim, php.ini), here is the one I read.
Once you have installed it and made it working, you'll know that to activate the connection between vim and the server you have to recharge the web page passing a get variable: XDEBUG_SESSION_START=1
Now here comes my work, very easy indeed, but was my first firefox addon developement.
I wrote a firefox extension that appends automatically the paramether at the url, checking for the right symbol to insert (& or ?).
You may find my addon source, with the instructions on how-to install it on my github account here.
From command line you may simply clone my project (install git first)

git clone git://github.com/abidibo/XDebug-Button---Firefox-Add-on.git

If you find errors or bugs please write to abidibo@gmail.com.

Add total time logged in infos to SMF message posters

2011-03-04T12:51:00.004+01:00

Well,
some hours ago I had the need to show the total time logged in info in the poster message area below the number of posts published by the member.
The forum platform is SMF, I 've just started working with it so I can't give a professional opinion about it.
Now what we have to do to achieve our goal is what follows.

Edit the /Sources/Load.php file.
goto line 838 (inside the loadMemberData method) and add to the fields selected by the query the one we want: mem.totalTimeLoggedIn
Well, now the information we want is selected from db.
Goto line 1006 (inside loadMemberContext method). Here the member context variable to be passed to the template is prepared. We have to add our informations to the array returned by this method, so add the following key=>value pair to the $memberContext[$user] array:
'total_time_logged_in' => array(
'days' => floor($profile['totalTimeLoggedIn'] / 86400),
'hours' => floor(($profile['totalTimeLoggedIn'] % 86400) / 3600),
'minutes' => floor(($profile['totalTimeLoggedIn'] % 3600) / 60)
)
Well done, now our information is present in the context member variable passed to the template we have to edit. Notice that we have divided the amount of time in days, hours and minutes.
Now we have to show this information in the right place, that is the right template, which is /Themes/default/Display.template.php, or the one corresponding to your used theme if present in the theme folder. Open the file and goto line 316. At this line are printed the informations about the number of posts written by the message poster, so below that we insert our code:
// Show how many posts they have made.
echo '
', $txt[26], ': ', $message['member']['posts'], '

';
// Show total time online.
if (!empty($message['member']['total_time_logged_in'])) {
echo '
', $txt['totalTimeLogged1'];

// If days is just zero, don't bother to show it.
if ($message['member']['total_time_logged_in']['days'] > 0)
echo $message['member']['total_time_logged_in']['days'], $txt['totalTimeLogged5'];

// Same with hours - only show it if it's above zero.
if ($message['member']['total_time_logged_in']['hours'] > 0)
echo $message['member']['total_time_logged_in']['hours'], $txt['totalTimeLogged6'];

// But, let's always show minutes - Time wasted here: 0 minutes ;).
echo $message['member']['total_time_logged_in']['minutes'], $txt['totalTimeLogged7'], '<br /><br />';
}
else echo '<br />';

Ok, only some considerations:
I displayed the count of time in this form;
xd xh xm
you can show it as
x days x hours and x minutes
or in the form you want, you only have to edit the language locate files of the languages you're interedsted in and set the text you prefer, you may define new strings and so on. Brutally you may also print the string you want directly into the template without using the locate system.
Hasta la proxima siempre.

HowTo randomly change fluxbox wallpaper every n minutes

2010-11-30T16:50:00.005+01:00

Some weeks ago' I've discovered this fantastic WM (Windows Manager), thanks to Gentoo/Sabayon + GNOME dbus sessions problems with my Imac. I desired so much to learn something about portage and the gentoo world that I accepted going on without gnome. Fortunatelly.
Fluxbox is a very light and high configurable WM for X server, super super fast and with all such things one need to work fine (alt-tab to move around opened windows, a nice bar showing opened applications and so on). It doesn't have icons by default, but has an amazing menu totally and easily configurable showing up when clicking on the desktop.
Here I want to show how is possible to set a cronjob task that changes randomly the desktop wallpaper every 5 minutes.
FIRST: install feh
feh is a fast, lightweight image viewer, supporting many image formats that we'll use to show the wallpaper. So

$sudo emerge feh

SECOND: try it out
Open the ~/.fulxbox/menu file and add some wallpaper voices, like

[submenu] (Wallpaper)
[exec] (tamars) {fbsetbg -f /home/abidibo/Wallpapers/sabayon_t.png}
[exec] (minus_tamars) {fbsetbg -f /home/abidibo/Wallpapers/sabayon.png}
[exec] (matrix) {fbsetbg -f /home/abidibo/Wallpapers/sabayon_matrix.jpg}
[exec] (winzoz) {fbsetbg -f /home/abidibo/Wallpapers/winzoz.jpg}
[exec] (toilet) {fbsetbg -f /home/abidibo/Wallpapers/toilet.jpg}
[exec] (linuxVSwin) {fbsetbg -f /home/abidibo/Wallpapers/linuxvswin.jpg}
[end]

fbsetbg is a wrapper that searches for a image viewer in order to set the fulxbox background (in our case it'll use feh, but other programs may be used).
Now clicking on the desktop and selecting a wallpaper voice from the menu should change our fluxbox wallpaper, if not maybe there were some problems during the installation of feh, try solving them and continue.
THIRD: make a script that changes the background randomly
So put all the desired images inside a folder and then copy this code in a file that we'll call chgWallpaper.sh

#!/bin/bash
export DISPLAY=:0.0
fbsetbg -f /home/abidibo/Wallpapers/$(ls ~/Wallpapers | sort -R | tail -1)

Why we export the DISPLAY variable? Well, we always have to remember that the processes started by cron have no (or almost no) normal environment setup, and our script require this variable. So from terminal as normal user run

echo $DISPLAY

take the result and put it in place of :0.0
The second line of the script launches fbsetbg passing it one (tail -1) file randomly (sort -R) taken from the ~/Wallpapers directory (ls).
FOURTH: schedule the script with crontab
Now we have to schedule this script. My system has vixie-cron, many others uses crond, it's the same. We want to schedule the script as normal user (abidibo in my case), so

$sudo crontab -u abidibo -e

This commands opens your favourite editor, now we have to insert the job:

*/5 * * * * /bin/bash /home/abidibo/Scripts/chgWallpaper.sh

This way the script is run every 5 minutes. Now we save the file and exit and the new crontab is installed. We wait 5 minutes and our desktop background should change, if not go on reading.
TROUBLESHOOTING
If this doesn't work may be it happens something like what happened to me.
Read your system log file, in my case

$sudo vim /var/log/messages

and search for cron messages.
If you notice somithing like

Nov 30 14:35:01 localhost cron[7500]: (abidibo) CMD (bash /home/abidibo/Scripts/chgWallpaper.sh)
Nov 30 13:35:01 localhost postfix/postdrop[7511]: warning: unable to look up public/pickup: No such file or directory

Then you're welcome. Here we have a postfix problem, the pickup FIFO (files used by different processes to communicate) file is not present in your system, we have to create it, run

$sudo mkfifo /var/spool/postfix/public/pickup
$sudo /etc/init.d/postfix restart

And that should be fix it.
Now if it still doesn't work and your system log says something like

Nov 30 14:44:00 localhost postfix/local[7846]: fatal: open database /etc/mail/aliases.db: No such file or directory

you're welcome! It means you don't have that file. So you need to create it running the command

$sudo newaliases
$sudo /etc/init.d/postfix restart

Now cron may comunicate with you and send you emails that you may read by

$vim /var/mail/USERNAME

In my case cron was happy to say me such thing

From abidibo@abidibo-sabayon.localdomain Tue Nov 30 15:29:01 2010
Return-Path: <abidibo@abidibo-sabayon.localdomain>
X-Original-To: abidibo
Delivered-To: abidibo@abidibo-sabayon.localdomain
Received: by abidibo-sabayon.localdomain (Postfix, from userid 1000)
id 999DDD9E654; Tue, 30 Nov 2010 15:29:01 +0100 (CET)
From: root@abidibo-sabayon.localdomain (Cron Daemon)
To: abidibo@abidibo-sabayon.localdomain
Subject: Cron <abidibo@abidibo-sabayon> /bin/bash /home/abidibo/Scripts/chgWallpaper.sh
X-Cron-Env: <SHELL=/bin/sh>
X-Cron-Env: <HOME=/home/abidibo>
X-Cron-Env: <PATH=/usr/bin:/bin>
X-Cron-Env: <LOGNAME=abidibo>
X-Cron-Env: <USER=abidibo>
Message-Id: <20101130142901.999DDD9E654@abidibo-sabayon.localdomain>
Date: Tue, 30 Nov 2010 15:29:01 +0100 (CET)

Error: Can't open display:

That led me to add the "export DISPLAY=:0.0" line in my script (thing that you've already done).
That's all. Hasta la proxima siempre!

Load local XML through AJAX request problems in IE

2010-10-28T17:12:00.001+02:00

Have you got a simple html-js-xml project (doesn't need a server) that works locally on firefox but not in IE? You're welcome!
Understanding the problem
Let's see my example... I had an html document which only charges an external javascript which has the due to load an xml file representing a flowchart and simulate a navigation through the tree, with conditional steps and forwards steps.
Even if I'm a mootools lover, for this project I used jQuery because the mootools core 1.2.x xml loader doesn't work for IE in any case.
So I used jQuery ajax method to load the xml this way:

var xml = $.ajax({
    async: false,
    type:"GET",
    context: this,
    url: chart_path,
    dataType:"xml"
}).responseXML;

Now, I thought at my xml variable as a DOM object over which use all the traversing methods implemented by jQuery. That was true... in some cases.
The scenario
- Application hosted on a server
works if visited with any browser and any OS
- Application hosted on my local server running on Ubuntu 9.04
works if visited with any browser and any OS
- Application hosted on a PC with Windows XP not under a server
works with firefox but not with IE
OH MY GOD
The answer
So at the end I gained the solution. The problem is that I was trying to get the responseXML from the ajax object, but without a server "telling" the browser that yes, that content is really an XML. Moreover (OH OH) IE is not so intelligent as to understand this things without help.
The solution
So what may we do? Simple. We get not the responseXML but the responseText and then load it using the loadXML method of the ActiveXObject. What follow is my example code

Now my xml variable is ready and contains the desired XML object.
Saludos

HowTo navigate through a tree without recursive methods (while loop instead)

2010-07-28T17:06:00.003+02:00

-Hi,
today I was simply writing a local template in order to render a menu following the MVC pattern.
Now my local template system does not use a meta-language, but loops, if statements and so on are written directly in php, because I don't have enough time to write an interpreter.
So really I can use all php functionalities in my templates including recursive functions. But it's not the way I want to follow, moreover maybe some day I'll find the time to write my interpreter and then will be very easy to "convert" if statements and cycles, not so easy if not impossible to convert recursive functions.
Well, so the problem was the following:
I have a n-dimensional menu tree, and have to generate the classical html code for such a menu, that is something like:

<ul id="nav">
    <li>Voice1</li>
    <li>Voice2
        <ul>
            <li>Voice21</li>
            <li>Voice22</li>
        </ul>
    </li>
    <li>Voice3</li>
</ul>

So let's see HOW TO get this without recursion. The code is well commented, here it goes:

<?php

/*
* Menu tree is represented by an n-dimensional array.
* Array keys are the labels and array values are either a link
* or a submenu (another array)
*/
$voices["Home"] = array("Home1" => array("Home11"=>"#"), "Home2"=>array("Home21"=>"#"));
$voices["News"] = array("News1" => "#", "News2"=>array("News21"=>"#"));
$voices[_("About")] = array("About1"=>array("About11"=>array("About111"=>"#", "About112"=>"#")), "About2"=>"#");
$voices[_("Services")] = '#';
$voices[_("Faq")] = '#';

/*
* INIT SOME VARIABLES
*/
// control the exit from the loop
$continue = true;
// this variables stores the branch currently analized
$parsed = $voices;
// stores all the branches parsered, because the tree is navigated following a branch
// until the foil. So when returning on top levels the navigation must continue on
// branches interrupted earlier.
$tree = array();
// stores the last key of the current branch array
$last = null;

echo "<ul id=\"nav\">\n";

/*
* THE MAIN LOOP
*/
while($continue === true) {
   // if the value of the current element parsered is an array than has a submenu
   if(is_array(current($parsed))) {
       // echo the current voice and open a new submenu (ul)
       echo "<li><a href=\"#\">".key($parsed)."</a>\n<ul>\n";
       // we're going to begin navigate the branch ->
       // we store the branch we're leaving in the tree array
       $tree[] = $parsed;
       // the branch to analyze is now the submenu
       $parsed = current($parsed);
       // get the last key of the new branch
       end($parsed);
       $last = key($parsed);
       // reset the array pointer
       reset($parsed);
   }
   // else if the value of the current element is not an array (but a link)
   // and not false (i.e. after calling next on the last element of an array)
   elseif(current($parsed)!==false) {
       // echo the current voice
       echo "<li><a href=\"".current($parsed)."\">".key($parsed)."</a></li>\n";

       // if the voice printed is the last of its branch
       // than close the submenu and get the last branch stored in the
       // varable tree (the parent branch) as the one to follow parsering
       if(key($parsed)==$last) {
           echo "</ul></li>\n";
           $parsed = array_pop($tree);
       }
       // move the pointer to the next element
       next($parsed);
   }
   // else the value of the current element is false -> we have already passed the last element
   // then we close the submenu and get the parent branch as the current one, passing to the next element
   else {
       echo "</ul></li>";
       $parsed = array_pop($tree);
       next($parsed);
   }

   // if we are navigating the first tree level and have passed through all them -> exit
   if(count($tree)==0 && current($parsed)==false) $continue = false;
}

echo "</ul>\n";
?>

Hasta la proxima!

Get MySQL table data structure with PHP

2010-07-09T15:06:00.004+02:00

Hi, today I'll show how to retrieve informations about a MySQL table through php in order for example to create a php class making editable a table in an automatic way (that is: stupid class, i give you a name of a table and YOU have to create its backend for me). This work is done very well by the python framework Django for example.
Now, there are several ways to do so, I'll use the interrogation of the information_schema db.
Well, let's see the code. I post here a simple function, clearly the informations that may be retrieved are more than these.

function getTableStructure($dbname, $table) {
    $structure = array();
    $fields = array();

    $query = "SELECT * FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA = '$dbname' AND TABLE_NAME = '$table'";
    $res = mysql_query($query);

    while($row = mysql_fetch_array($res)) {
        $fields[$row['COLUMN_NAME']] = array(
            "order"=>$row['ORDINAL_POSITION'],
            "default"=>$row['COLUMN_DEFAULT'],
            "null"=>$row['IS_NULLABLE'],
            "type"=>$row['DATA_TYPE'],
            "max_length"=>$row['CHARACTER_MAXIMUM_LENGTH'],
            "key"=>$row['COLUMN_KEY'],
            "extra"=>$row['EXTRA']
        );
        if($row['COLUMN_KEY']=='PRI') $structure['primary_key'] = $row['COLUMN_NAME'];
    }
    $structure['fields'] = $fields;

    return $structure;

}

The important informations to do an auto-generation-form class are:

default: the default value (we may insert it as a default value in the input field of the form)
null: we may use it to decide whether a field must be compulsory or not
type: the must important: which form element we'll use? It depends on data type and ...
max_length: the maximum number of characters acceopted for the field
key: we may want to check for uniques keys etc...
extra: i think it's useful to know if a field is auto_increment because we may not make it editable

That's all falks, hasta la proxima!

A mootools based horizontal scrollable list

2010-04-01T17:14:00.014+02:00

Hi,
today I write about a nice javascript class that creates a typical horizontal scrollable list starting from an html unordered list. The final result is like many others in the web. The LI elements of a list are used to create the items of this scrollable list. The number of items visible at a time is a paramether, and if is greater than the maximum possible one, is reduced in order to get the items to stay in their space. The controller are two arrow buttons on the left and right of the slide. They have three states: ON, OFF and OVER controlled through javascript and personalizable by css. The width of the entire object and of the single item are needed, the height of the single item is not necessary because is calculated by javascript (through an iteration along all items), but clearly for a good result all items would rather have the same height.
Let's see the details now.

Imagine we have an unordered list where the LI elements are images set as css background of a DIV, for example:

Now, we want to transform it in a classical scrollable horizontal list, like the one represented in the image (the same one).
Well, here comes my mootools based javascript class which coupled with some css realizes it. First the code, then the usage

/*
* hScrollingList class written by abidibo, 01/04/2010
*
* hScrollingList method: constructor
*   Syntax
*      var myInstance = new hScrollingList(list, vpItems, scrollableWidth, itemWidth, [options]);
*   Arguments
*      1. list - (string|Object) The UL element or its id attribute to be transformed
*      2. vpItems - (int) The number of element showed in a viewport (the viewport changes (scrolls) when clicking on the arrows)
*      3. scrollableWidth - (int) The width in px of the scrollable object
*      4. itemWidth - (int) The width in px of a list element
*   5. options - (object, optional) The options object.
*   Options
*   - id (string: default to null) The id of the object
*      ........ maybe many more options in the future.........
*
*/
var hScrollingList = new Class({

   Implements: [Options],
   options: {
       id: null
       // maybe more options in the future here
   },
       initialize: function(list, vpItems, scrollableWidth, itemWidth, options) {

       if($defined(options)) this.setOptions(options);

       this.list = $type(list)=='element'? list:$(list);
       this.listElements = this.list.getChildren('li');

       this.setWidths(scrollableWidth, itemWidth);
       this.vpItems = vpItems;

       this.setSlide();
       this.setStyles(); // vpItems property may change!
       this.setWrapper();

       this.vps = 1;
       this.tots = Math.ceil(this.listElements.length/this.vpItems);
       this.updateCtrl();
       this.tr = new Fx.Tween(this.slide, {
               'duration': 1000,
               'transition': 'quad:out',
               'onComplete' : function() {this.busy=false}.bind(this)
           });

   },
   setWidths: function(tw, iw) {
       this.width = tw;
       this.ctrlWidth = 24;
       this.cWidth = this.width - 2*this.ctrlWidth;
       this.iWidth = iw;
   },
   setSlide: function() {
       var clear = new Element('div', {'styles':{'clear':'both'}});
       this.slide = new Element('div', {
           'styles': {'position':'relative', 'width':'10000em', 'background-color':'#ccc'}
       });
       this.slide.inject(this.list, 'before');
       this.slide.grab(this.list);
       clear.inject(this.slide, 'bottom');
   },
   setWrapper: function() {
       this.wrapper = new Element('div', {
               'styles':{'width': this.width}
       });
       var ctrlHeight = this.listElements[0].getCoordinates().height;
       for(var i=1; i<this.listElements.length; i++)
           if(this.listElements[i].getCoordinates().height > ctrlHeight)
               ctrlHeight = this.listElements[i].getCoordinates().height;

       this.leftCtrl = new Element('div', {
           'styles': {'float': 'left', 'width': this.ctrlWidth+'px', 'height':ctrlHeight+'px'}
       })
       this.rightCtrl = new Element('div', {
           'styles': {'float': 'right', 'width': this.ctrlWidth+'px', 'height':ctrlHeight+'px'}
       })
       this.itemContainer = new Element('div', {
           'styles': {'float': 'left', 'width': this.cWidth+'px', 'overflow':'hidden'}
       })
       this.wrapper.adopt(this.leftCtrl, this.itemContainer, this.rightCtrl);
       this.wrapper.inject(this.slide, 'before');
       this.itemContainer.adopt(this.slide);
   },
   setStyles: function () {
       this.list.setStyles({'margin': '0', 'padding': '0', 'list-style-type':'none', 'list-style-position':'outside'});

       var esw = this.vpItems*this.iWidth;
       while(esw>this.cWidth) esw = --this.vpItems*this.iWidth;
       var margin = (this.cWidth - esw)/2;

       for(var i=0; i<this.listElements.length; i++) {
           var item = this.listElements[i];
           var r = i%this.vpItems;
           item.setStyles({
               'float':'left',
               'width': this.iWidth+'px',
               'margin-left': !i ? margin+'px' : r ? '0px' : 2*margin+'px'
           })
       }
   },
   scroll: function(d) {

       if(this.busy) return false;

       this.busy = true;
       if(d=='right')
           this.tr.start('left', '-'+(this.cWidth*this.vps++)+'px');
       else if(d=='left')
           this.tr.start('left', '-'+(this.cWidth*(--this.vps-1))+'px');

       this.updateCtrl();
   },
   updateCtrl: function() {

       var lclass = this.vps == 1 ? 'leftCtrlOff':'leftCtrl';
       var rclass = this.vps == this.tots ? 'rightCtrlOff':'rightCtrl';
       this.leftCtrl.setProperty('class', lclass);
       this.rightCtrl.setProperty('class', rclass);

       if(this.vps==1) {
           this.leftCtrl.removeEvents('mouseover');
           this.leftCtrl.removeEvents('mouseout');
           this.leftCtrl.removeEvents('click');
           this.le = false;
       }
       else if(!this.le) {
           this.leftCtrl.addEvent('mouseover', function() {this.setProperty('class', 'leftCtrlOver')});
           this.leftCtrl.addEvent('mouseout', function() {this.setProperty('class', 'leftCtrl')});
           this.leftCtrl.addEvent('click', this.scroll.bind(this, 'left'));
           this.le = true;
       }

       if(this.vps == this.tots) {
           this.rightCtrl.removeEvents('mouseover');
           this.rightCtrl.removeEvents('mouseout');
           this.rightCtrl.removeEvents('click');
           this.re = false;

       }
       else if(!this.re) {
           this.rightCtrl.addEvent('mouseover', function() {this.setProperty('class', 'rightCtrlOver')});
           this.rightCtrl.addEvent('mouseout', function() {this.setProperty('class', 'rightCtrl')});
           this.rightCtrl.addEvent('click', this.scroll.bind(this, 'right'));
           this.re = true;
       }

   }
});

Now the css styles used in my example (if you wanna try this code remember to make your own arrows images)

div.leftCtrl {
   background: #b8b7b7 url('../img/arrowSX.png') no-repeat center center;
   cursor:pointer;
}
div.rightCtrl {
   background: #b8b7b7 url('../img/arrowDX.png') no-repeat center center;
   cursor:pointer;
}
div.leftCtrlOver {
   background: #929191 url('../img/arrowSX.png') no-repeat center center;
   cursor:pointer;
}
div.rightCtrlOver {
   background: #929191 url('../img/arrowDX.png') no-repeat center center;
   cursor:pointer;
}

div.leftCtrlOff {
   background: #b8b7b7 url('../img/arrowSX.png') no-repeat center center;
   opacity: 0.8;
   filter: alpha(opacity = 80);

}
div.rightCtrlOff {
   background: #b8b7b7 url('../img/arrowDX.png') no-repeat center center;
   opacity: 0.8;
   filter: alpha(opacity = 80);
}

Basically these css styles contains the three states of the two buttons: button ON, button OFF, and button OVER.
Now let's see how to use this class, very simple:

So simply we instanciate the class hScrollingList, passing the paramethers:

'hlistVideo': the id of the unordered list (we may pass even the DOM Object)
5: the number of items 'for page', that is the number of elements in the viewport for each scrolling action
600: the total width of the object
150: the width of a single item (a LI element)

Observe that the class is able to auto-reduce the number of items 'for page', because it tries to put them in the space allowed, and if thay can't stay correctly in the space their number is reduced by one untill they will.
So you only have to take this code, personalize the arrows images, the three states of the buttons through css and obtain your own personalized horizontal scrollable list.
For info or problems write at abidibo@gmail.com
Bye!

An address to point (lat,lng) google maps converting class with mootools

2009-11-26T17:27:00.008+01:00

Hi,
today I'll post here the code of a class useful to obtain a conversion of a string address into geographical coordinates latitude and longitude.
Maybe sometimes you have to represent some points (i.e. hotels) on a map, dinamically, that is getting datas from a database. That means that you need to insert the hotel geographical coordinates in the database, as it's surely better to make the conversion before inserting data in the DB than on the fly when showing the map, that because the conversion can take a bit of time, or even fail.
So the situation I considered is the following one: we have a form with some fields like address, cap and city, and two fields hidden or readonly that contains the latitude and longitude values. The action of this form inserts this values in the DB, so these latitude and longitude are the same that will be used to generate the map in the public view (soon another post about that).
So the html part of the form could be something like

Now the goal was to write a javascript class that shows a map with a marker in the position associated to the address already inserted in the form (that is make the conversion), make the marker draggable and insert the latitude and longitude values into the 'lat' and 'lng' input fields, so that when submitting the form they could be written in the database.
So here goes my javascript class that clearly requires mootools, I omit here mootools inclusion.

/*
* Class AddressToPointConverter, requires mootools v>=1.2
* Written by abidibo, 26/11/2009
* Copyright: what fuck is copyright?!
*
* Converts an address in geographical coordinates (lat,lng) using
* the googlemaps geocoder, and inserts these values in form fields
* defined in the constructor
*
*/
var AddressToPointConverter = new Class({

   Implements: [Options],
   options: {
       canvasPosition: 'over', // over | inside
       canvasW: '400px',
       canvasH: '300px',
       zoom: '13',
       noResZoom: '5',
       dftLat: '45',
       dftLng: '7'
   },
   initialize: function(element, latField, lngField, address, options) {

       if($defined(options)) this.setOptions(options);
       this.checkOptions();

       this.element = $type(element)=='element'? element:$(element);
       this.latField = $type(latField)=='element'? latField:$(latField);
       this.lngField = $type(lngField)=='element'? lngField:$(lngField);
       this.address = address;

   },
   checkOptions: function() {
       if(this.options.canvasPosition == 'over') {
           var rexp = /[0-9]+px/;
           if(!rexp.test(this.options.canvasW)) this.options.canvasW = '400px';
           if(!rexp.test(this.options.canvasH)) this.options.canvasW = '300px';
       }
   },
   showMap: function() {
       this.renderContainer();
       this.renderCanvas();
       this.canvasContainer.setStyle('width', (this.canvas.getCoordinates().width)+'px');
       this.renderCtrl();
       this.renderMap();
   },
   renderContainer: function() {
       this.canvasContainer = new Element('div', {'id':'map_canvas_container'});
       this.canvasContainer.setStyles({
               'padding': '1px',
               'background-color': '#000',
               'border': '1px solid #000'
           })
       if(this.options.canvasPosition == 'inside') {
           this.canvasContainer.inject(this.element);
       }
       else { // over
           var elementCoord = this.element.getCoordinates();
           this.canvasContainer.setStyles({
               'position': 'absolute',
               'top': elementCoord.top+'px',
               'left':elementCoord.left+'px'
           })
           this.canvasContainer.inject(document.body);
       }
       document.body.addEvent('mousedown', this.checkDisposeContainer.bind(this));
   },
   renderCanvas: function() {
       this.canvas = new Element('div', {'id':'map_canvas'});
       this.canvas.setStyles({
           'width': this.options.canvasW,
           'height': this.options.canvasH
       })
       this.canvas.inject(this.canvasContainer, 'top');
   },
   renderCtrl: function() {
       var divCtrl = new Element('div').setStyles({'background-color': '#ccc', 'padding': '2px 0px', 'text-align': 'center'});
       var convertButton = new Element('input', {'type':'button', 'value':'convert'});
       convertButton.setStyles({'cursor': 'pointer', 'border': '1px solid #999', 'margin-top': '2px'});
       divCtrl.inject(this.canvasContainer, 'bottom');
       convertButton.inject(divCtrl, 'top');
       convertButton.addEvent('click', function() {
           this.latField.value = this.point.lat();
           this.lngField.value = this.point.lng();
           this.canvasContainer.dispose();
       }.bind(this));
   },
   checkDisposeContainer: function(evt) {
       if(evt.page.x<this.canvasContainer.getCoordinates().left ||
           evt.page.x>this.canvasContainer.getCoordinates().right ||
           evt.page.y<this.canvasContainer.getCoordinates().top ||
           evt.page.y>this.canvasContainer.getCoordinates().bottom) {
           this.canvasContainer.dispose();
           for(var prop in this) this[prop] = null;
           document.body.removeEvent('mousedown', this.checkDisposeContainer);
       }

   },
   renderMap: function() {
       var mapOptions = {
                 zoom: this.options.zoom.toInt(),
                 mapTypeId: google.maps.MapTypeId.ROADMAP
           };
       var map = new google.maps.Map(this.canvas, mapOptions);
       var point;
       var geocoder = new google.maps.Geocoder();
       geocoder.geocode({'address':this.address}, function(results, status) {
           if(status == google.maps.GeocoderStatus.OK) {
               this.point = results[0].geometry.location;
               this.insertMarker(map);
           }
           else {
               alert("Geocode was not successfull for the following reason: "+status);
               this.point = new google.maps.LatLng(this.options.dftLat, this.options.dftLng);
               map.setZoom(this.options.noResZoom.toInt());
               this.insertMarker(map);
           }
       }.bind(this))

   },
   insertMarker: function(map) {
       map.setCenter(this.point);
       var marker = new google.maps.Marker({
                     map: map,
                     position: this.point,
           draggable: true,
           title: this.point.lat()+' - '+this.point.lng()
             });
       google.maps.event.addListener(marker, 'mouseup', function() {this.point = marker.getPosition();}.bind(this))

   }
})

Some annotations:
HOW TO CONSTRUCT IT

var myConverter = new AddressToPointConverter(element, latField, lngField, address, options);

element: the DOM element or its id of the referer, the element from which we inject the map into the document, taking care of some options explained below.
latField: the DOM element or its id of the input field we want to write the latitude to
lngField: the DOM element or its id of the input field we want to write the longitude to
address: (string) the address to convert
options: some options in the form {'opt1':'val1', 'opt2':'val2'...}

OPTIONS

(string) canvasPosition : inside | over, default over. Is the position of the map object we create. inside: the map container is inserted into the element defined in the constructor. over: the map container is positioned absolutely, its top left corner in the same position as the top left corner of element
(string) canvasW: default '400px'. The style width of the map (i.e. 400px, 100%) . The % values are allowed only for canvasPosition='inside'.
(string) canvasH: default '300px'. The style height of the map.
(int) zoom: default '13'. The zoom value when a result is found
(int) noResZoom: default '7'. The zoom when no result is found (with the conversion)
(float) dftLat: default: '45'. The default latitude of the center of the map when no result is found
(float) dftLng: default '7'. The default longitude of the center of the map when no result is found

The conversion may give a result or not. If not the map is centered in a point defined by (dftLat, dftLng) and with zoom = noResZoom.
In this case but even if the conversion is not exactly what we expect, we may drag the marker in order to positioning it in the desired position. Than click on the button convert and the computed point will be the point represented by the marker new position.

That was the class code, let's we see now an example about its usage, always considering our form written above

<input type="text" name="address" id="address" />
<input type="text" name="city" id="city" />
<input type="text" name="cap" id="cap" />
<script type="text/javascript">
function convert() {
var addressConverter = new AddressToPointConverter('converter', 'lat', 'lng', $('address').value+','+$('cap').value+' '+$('city').value, {'canvasPosition':'over', 'canvasW':'600px', 'canvasH':'400px'});
addressConverter.showMap();
}
</script>
<input type="button" value="convert" onclick="Asset.javascript('http://maps.google.com/maps/api/js?sensor=true&callback=convert')">
<input type="text" name="lat" id="lat" readonly="readonly" />
<input type="text" name="lng" id="lng" readonly="readonly" />

The map is generated when clicking the "convert" button, first the google library is charged, passing a reference to our function as callback. In our function convert() the object is constructed and the method showMap is invocated. The map is shown. To dispose it it's enough to click outside the map object.
That's all for now, soon a class to show a map with many markers and info windows.

Tables using FPDF Library

2009-10-08T17:21:00.021+02:00

Hi!
This time we'll speak about the exportation of tables in pdf format. I needed a way to print some dockets regarding persons data. This dockets have to be printed using special paper, that is that paper which already have the dockets ready and cut. So the goal of my work was to found a way to generate a table with perfectly equal cells of a given width and height. These cells must contain some text, which is not fixed, but may contain different informations:
Surname - name, Company (optional), Address (may stay on 2 lines), CAP City.
Why didn't I use html and the javascript print function to make it work? Clear, because I was glad to study something new and because printing to a pdf file is a more professional way to solve this problem.
One difficulty was represented by the variability of the text, so I assumed that each cell could have a maximum of 5 lines:
- surname and name
- company (optional)
- address 1 line
- address 2 line (if needed)
- cap and city
So there can be dockets containing text between 3 an 5 lines.
I decided to use the fpdf library which is free of course. You may download it from here (I used the last version 1.6).
Now this library has many useful functions but I extended it in order to get my desired table.
So here is my class and below how to instanciate and use it. Good reading.

<?php
/*
* CLASS TblFPDF
* 08/09/2009
* written by abidibo <abidibo@gmail.com>
* Copyright: FUCK COPYRIGHT, NO LICENCE TAKE THIS CODE AND DO WHAT YOU WANT
*
* Description
*     This class allows to create a pdf table made by cells all of the same dimensions
*     (width and height) and containing some text. This text must follow some rules, as
*     this class was written in order to print some dockets, and dockets hava a fixed
*     structure. More informations later.
*
* Parameters of __construct function
*      (int) $nRows : number or rows for document page
*      (int) $nCols : number of columns
*      (float) $cellWidth : width of every single cell in mm
*      (float) $cellHeight : height of every single cell in mm
*      (mix) $cellBorder : cell border property
*               0 -> no border
*               1 -> border
*               string containing one ore more characters:
*               L -> left border
*               T -> top border
*               R -> right border
*               B -> bottom border
*
* Parameters of render function
*     (array) $textArray : an array where each element represent the string
*                          to insert in a cell. Break lines represented by \n
*     (int) $cellLines : the maximum number of lines inside a cell.
*
*     The $textArray[$i] text foreach $i has to stay inside the cell, that is has to have
*     a maximum of ($cellLines-1) break lines or less if the text between two
*     break lines is so long that can't stay in a single line of width $cellWidth.
*     That's a very important condition!
*
*/

// include fpdf library and set the constant it used to charge font folder
// font folder is given with the library
define('FPDF_FONTPATH',dirname(__FILE__).'/font/');
require('fpdf.php');

class TblFPDF extends FPDF {
    function __construct($nRows, $nCols, $cellWidth, $cellHeight, $cellBorder) {

        parent::__construct();
        $this->_nrows = $nRows;           // rows for page
        $this->_ncols = $nCols;           // columns
        $this->_cellw = $cellWidth;
        $this->_cellh = $cellHeight;
        $this->_cellb = $cellBorder;
    }

    public function render($textArray, $cellLines) {

        $count = 0;
        reset($textArray);
        $totCell = count($textArray);
        $totPages = ceil($totCell/($this->_nrows*$this->_ncols));

        for($p=0;$p<$totPages;$p++) {
            $this->AddPage();
            for($r=0;$r<$this->_nrows;$r++) {
                for($c=0;$c<$this->_ncols;$c++) {
                    if($count>=$totCell) break;       // all cells has been already printed
                    $this->setXY($c*$this->_cellw, $r*$this->_cellh);    // set x and y position of the top left corner of the new cell
                    $this->renderCell(current($textArray), $cellLines);
                    next($textArray);
                    $count++;
                }
            }
        }
    }

    private function renderCell($text, $cellLines) {

        $totLines = 0;
        $text_lines = explode("\n", $text);
        for($i=0;$i<count($text_lines);$i++) {
            $totLines++;
            if($this->getStringWidth($text_lines[$i])>=$this->_cellw-2.6) $totLines++;
        }
        if($totLines<$cellLines) $text .= "\n";
        for($i=0;$i<($cellLines-$totLines);$i++) $text .= "\n";

        $this->MultiCell($this->_cellw, ($this->_cellh/$cellLines), $text, $this->_cellb, "L");
    }
}
?>

So this was the class I used. It's well commented, but let's see how to use it

<?php

require_once(class.TblFPDF.php);

$textArray = array(
                          0=>"Name Surname\nCompany\nAddress\nCAP City",
                          1=>"Gino Pinotto\nTalisker spa\n5th 23/q\n10384 New York"
                      );
$pdfDoc = new TblFPDF(8,3,70,37,1);
$pdfDoc->render($textArray);
$pdfDoc->Output();
exit();

?>

In this example the output will be a pdf document with two dockets drawned starting from the point (0,0) of the page, containing the informations included in $textArray. If many text elements are given the full page will have 8 rows for 3 columns, each cell will have a width of 7 cm and an height of 3.7 cm, with a black border. The text inside the cell must occupy not more than 5 lines, that's the only recomendation.
Hope is useful.
Bye!
PS. Yesterday Italy's top court stripped Mr. Berlusconi of his legal immnuity (I gloat for this), hoping justice may be done I'll have a great party!

MoocanvasShadow reviewed - shadows for everyone

2009-09-10T12:30:00.025+02:00

Hi all,
well, this time I'd like to write about a nice class implemented using mootools libraries used to paint shadows around blocks. His name is mooCanvasShadow, written by Arian Stolwijk, and here the link to the project. This class uses the mooCanvas class of ibolmo's.
When I used this class for some projects I encountered some difficulties and some strange behavioures, so I tried to reniew this class which was shared under the MIT license. There was a problem when applying a shadow to a container div which was centered in the page when resizing the browser window. The problem was that while resizing the browser window the container centered is moved in order to keep the centered position, but the canvas area painted in order to get the shadow was static and positioned absolute relative to the body, so couldn't follow the container in motion. The solution is to paint the canvas area relative to the container we want to apply shadows to (changes made to the method createCanvasDiv). This way if it moves than the canvas follows it.
Another adjustment was made in a regular expression matching colors, it didn't consider not capital letters and so always put the default color if you write colors codes this way: #ffffff (like me).
Above the major things, now the code:

//AbiCanvasShadow, Mootools Canvas Dropshadow Abidibo extended
/*
Script: CanvasShadow.js
   Contains the Canvas class.
Dependencies:
   MooTools, <http: mootools.net="">
       Element, and its dependencies
       Element.Dimensions
   MooCanvas, <http: ibolmo.com="" moocanvas="" projects="">
       Canvas,
       Paths
Author:
   Arian Stolwijk, <http: www.aryweb.nl="">
Adjusted by
   Abidibo, <http: abidibo.otto.to.it="">
License:
   MIT License, <http: en.wikipedia.org="" mit_license="" wiki="">
*/

var AbiCanvasShadow = new Class({

   /**
   * This function creates a new canvas element of MooCanvas
   * The elements will be placed at the right position, so the
   * canvas element is right behind the to-shadow element
   *
   * @param {Object} shadowDiv this div will get a shadow
   * @param {Object} options the options:
   *        size: The size of the shadow
   *        radius: the radius of the shadow corners
   *        opacity: The opacity of the shadow
   *        color: The shadow color, this should be like #FF9900,
   *            or an array with the rgb colors [255,0,255]
   *        overwrite: if the canvas element already exists,
   *            it wil dispose that element and create a new one
   */
   initialize: function(shadowDiv,options){
       // Set shadow div
       this.shadowDiv = shadowDiv;
       // Get the coordinates of the element
       this.position = shadowDiv.getCoordinates();
       // Set some options
       this.size = options.size;
       var radius = options.radius;
       var opacity = options.opacity;

       if($(shadowDiv.get('id')) == false){
           this.giveId(shadowDiv);
       }

       // Dispose the already existing element, if needed
       if ($type(options.overwrite) == 'boolean' && options.overwrite == true) {
           if ($type($(shadowDiv.get('id') + '_mooShadow')) == 'element') {
               $(shadowDiv.get('id') + '_mooShadow').dispose();
           }
       }

       // Create a new Canvas object, of MooCanvas
       this.canvas = new Canvas({
           'width': this.position.width + (this.size * 2),
           'height': this.position.height + (this.size * 2),
           'id': shadowDiv.get('id')+'_mooShadow'
       });

       // Create a div and put the canvas element in it to set it at the right position
       this.createCanvasDiv();

       // Create the context
       var ctx = this.canvas.getContext("2d");

       // Create the shadow color
       if(options.color.test(/#[0-9A-Za-z]{6}|[0-9A-Za-z]{3}/)){
           options.color = options.color.hexToRgb(true);
       }
       if($type(options.color) == 'array' && $type(options.color[2]) != 'undefined'){
           var color = options.color[0]+','+options.color[1]+','+options.color[2];
       }else{
           var color = '0,0,0';
       }

       // Create the retangles/ the actual shadow
       for (var i = this.size; i >= 0; i--) {
           this.roundedRect(ctx,
               i,
               i,
               (this.position.width-(i*2)+2*this.size),
               (this.position.height-(2*i)+2*this.size),
               radius
           );
           ctx.fillStyle = "rgba("+color+", "+opacity/(this.size-i)+")";
           ctx.fill();
       }

   },

   /**
   * This function creates a div where the canvas element is in inserted
   * This element will position behind the to-shadow div
   */
   createCanvasDiv: function(){
       this.canvasDiv = new Element('div',{
           styles:{
               'width': this.position.width+(this.size*2),
               'height': this.position.height+(this.size*2),
               'z-index': -1,
               'position': 'absolute',
               'left': '-'+this.size+'px',
               'top': '-'+this.size+'px'
           }
       }).adopt(this.canvas).inject(this.shadowDiv);
   },

   /**
   * This method creates a rounded rectangle
   * @param {Object} ctx the canvas context
   * @param {Object} x the upper left x-axis position
   * @param {Object} y the upper left y-axis positoin
   * @param {Object} width the retangle width
   * @param {Object} height the retangle height
   * @param {Object} radius the corner radius
   */
   roundedRect: function (ctx,x,y,width,height,radius){

       ctx.beginPath();
       ctx.moveTo(x,y+radius);
       ctx.lineTo(x,y+height-radius);
       ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
       ctx.lineTo(x+width-radius,y+height);
       ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
       ctx.lineTo(x+width,y+radius);
       ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
       ctx.lineTo(x+radius,y);
       ctx.quadraticCurveTo(x,y,x,y+radius);
   },

   /**
   * This method set an random ID to an element
   * @param {Object} div
   */
   giveId: function(div){
       div.set('id',$rand()+'_mooShadow');
   }

});

/**
*
* @param {Object} options: the same options as the mooCanvasShadow() class
*/
Element.implement({
   AbiCanvasShadow: function (options){
       new AbiCanvasShadow(this,options);
       return this;
   }
});

and how to use it:

window.addEvent('domready',function(){
    // 'mainContainer' is the ID of the element
    $('mainContainer').AbiCanvasShadow({
        opacity: 0.2,
        size: 14,
        radius: 10,
        color: '#333333'
    });
}.delay(800));

The html structure must be this way:

<div id="mainContainer">
   <div id="container">
   your site, your content
   </div>
</div>

that because of... guess it? IE. Si señores, another self behaviour for IE7 and IE6 and I don't know if IE8 too. Whit these horrible browsers using only one container causes the below canvas area to affect the background of the element even if a color was setted. So some points:

Use two container and apply the effect to the outer
Very important: set the position property of mainContainer as relative, that because the canvas is positioned absolute relative to it
Set the width of 'mainContainer' equal to the width of 'container'
Set a background color for 'container'
Pay attention if using padding or margins, that is properties affecting the position of the element

Last thing. You may see that I've setted a delay of 800 ms to the function called at the event domready. This value may be 0 or higher, it depends. It is useful because with FF there's a different behaviour in applyng css styles when recharging a page or get it through a link. When recharging a page the css seems to be applied a bit later, that causes for example that an horizontal menu may be displayed for a while in his "<ul><li>" form (vertically), and after rendered in horizontal, saving space. But if the coordinates of the element are taken in the instant the menu is higher then the canvas is painted with these values. After the menu becomes horizontal, saves vertical space and then the dimension of the element and his shadows are different. Using this delay this problem is prevented. Another way could be to call the function not at the event 'domready' but at the event onload, that is:

window.onload = function ()...

but in this case the interval between the appearence of the element and its shadow is grater, especially if the element contains iframe or heavy elements.
That's all guys, hasta la proxima!

Ext.Window max height

2009-09-02T12:43:00.018+02:00

Ext is an amazing javascript library. It let you do things humans can never imagine. It's enough to have a look at the samples page to understand what I'm saying. Moreover ext provides a complete UI structure that let you have beautiful windows, forms, tables... with no work, that is, ext provides the css and images necessary to the UI.
I discovered ext not so early, that's why really I don't use it as my favourite library (which still is mootools) but only to do extraordinary things.
In my last works I come to a problem. I wanted to open windows (like normal desktop windows) when opening a product details in a catalogue. All works properly, but what happens if details content is extremly long? Clearly the height of the window follow it.
That's a problem I think, because ext.window class doesn't support any configuration paramether or method to set a max-height attribute! That is your window will follow the height of his content with no way to stop that.
Here clearly is helpful to find a way to pass by this lackage and set a max Height attribute, that is what I've done for my work and here I post my code.

Here is my class which extends Ext.Window

Ext.productWindow = Ext.extend(Ext.Window, {
        homefile: 'index.php', // not important for you
        maxHeight: 9999,
        open: function() {
             // not important for you, is an ajax call that makes an icon appear in the bottom bar of the application
            sendPost('index.php?pt[catalogue-viewedItems]', 'id='+this.prdID, 'viewedItems');
            this.show();
        },
        minimize: function(window) {
            this.hide();
        },
        listeners: {
            close: function(window)    {
                // not important for you, is an ajax call that make disappear the icon in the bottom bar
                sendPost('index.php?pt[catalogue-removeProduct]', 'id='+this.prdID, 'scriptPaper', '', true);
            }
        },
         // that's the method I use: if the height passed is greater than the maxHeight property
        // than the window is resized by the setHeight function.
        setMaxHeight: function(h) {
            if(h>this.maxHeight) this.setHeight(this.maxHeight);
        }

    })

That was the class implementation, now I use a function to construct a window object, here it is:

Finally to create a window:

prd_window = newWindow(homefile, id);

This way you have your maxHeight setable window. Only some more things:

* the product window is constructed and associated to an array element, that because you may have more windows open at once.
* for the same reason before creating a new window there is a check (that i've omitted here) to control if the window represented by its id already exists, if yes than only is showed, otherwise it's created.

The really first (I hope)

2009-09-02T10:50:00.000+02:00

Well, hi all!
Starting from now Abidiblog changes a lot his purposals, his language, and many other things...
All previous posts (all in italian language) may be founded here:
http://abidibo.otto.to.it
under the abidiblog section.
Now what happens? Simply I began studying more deeply some php concepts, some js libraries and so on, and I think time has come to share some informations to a larger public, and in a more professional way.
So I decided to re-start my blog, not using my site and CMS to save time in writing articles and to center the entire stuff on Informatic, excluding all other things like maps, personal informations, services, news, calendars and many other things you may always find at the previous address. For the same reason I decided to write in English, so my first posts and not only the firsts' will be full of errors because my english was a bit supressed by spanish, but that may be even a good way to refresh it properly.
Here all the explaination, from the next posts only usefull (I hope) stuff.