Free Software – Are You In?

“We have managed to increase our lifespan in a world that is not fit to live in” (from “The Man from Earth”).

This is rather an absurd beginning to an article, but imagine if I were to be sued for quoting from a movie – how completely insane! It would be like being punished for sharing my class notes with a friend (or even worse).

But the state of the software world right now is much like this. Closed source software have managed to grab a popularity for which no reason seems to exist. Such software (non-free) restricts the freedom of the user, and is extremely annoying at times.

So I take this opportunity to encourage all my readers to adopt Free Software instead of non-free ones. For only free software can build a free computing society.

I shall be making a presentation on this topic in my college tomorrow, under the auspices of the Sun Academic Initiative. The presentation itself shall be available here tomorrow.

Until then, stay free.

PS: Coming up next – how to load remote javascripts at “runtime” from the server!


How to Make Amarok Work with MySQL

I promised earlier to show you how to make amarok work with MySQL. So here’s how.

  1. Install Amarok: This step is pretty simple. Just “sudo apt-get install amarok“. If you are using GNOME, then kde libraries will also be installed automatically. So it may take a bit longer.
  2. Install MySQL Server: This is easy too: “sudo apt-get install msyql-server“. During the installation, you will be asked for a “root password”. This is different from from your Ubuntu’s “root” account: this is a mysql user called root.
  3. Create a amarok user in Mysql:
    • Log into mysql as root: Type one the terminal “mysql -u root -p“. The “-u root” tells mysql that you want to log in as root, and “-p” says that you have a password that you want to supply. So you will be prompted with a password. Enter the one you supplied during mysql installation.
    • Create an amarok database: Once you have logged into mysql, you will have a mysql prompt (“mysql >”). To create the database, simply type “create database amarok;“. Yes, you need to terminate the command with a semi-colon. This creates a database named “amarok” (No prizes for guessing that).
    • Create amarok user: Now to create the user, type “grant all privileges to ‘amarok-user’@’localhost’ on amarok.* identified by ‘amarok-password’ with grant option;” This command will create a user in mysql with username “amarok-user” and password “amarok-password”.
  4. Tell Amarok how to talk to mysql: You can do this at two places –
    • In the First-Run wizard: Here, you will be asked to select the directories to include in “The Collection”, and how to store the collection. In the How, select “MySQL”. Fill out the “host” as ‘localhost’, port as ‘3306’ (this should be correct in 99.99% cases). Fill in database = amarok, username = amarok-user, and password = amarok-password. Note that these paramaters are the ones that you supplied in step 3.
    • Later on: Go to Settings > Configure Amarok > Collection tab. Set the folder(s) you want to monitor first. Then select the “database” as “MySQL”. In the configuration, enter host = localhost, port = 3306, database = amarok, username = amarok-user and password = amarok-password.

Ta-da! Its done!! Now Amarok will take some time to build your collection, and then you’ll be ready to rock and roll!

Stuff You’d Want on a New Ubuntu Install

I recently had to re-install on my computer following a RAM burn-out and major OS crashes. So I’ve made a list of things I always install on ubuntu before I consider it usable:

  1. Media Players:
    • Amarok – My favourite music player (apt-get install amarok). I use mysql to store my collections. Watch out for a tut on how to do this! Here’s how to do this!
    • totem-gstreamer – Somehow I’ve taken a dislike to gstreamer. I prefer xine instead. (apt-get remove totem-gstreamer)
    • totem-xine – the same totem, with a xine core
    • smplayer – SMplayer is a GUI for mplayer, one of the best media players around. (apt-get install smplayer)
    • vlc media player – I keep this just out of habit — just as good as smplayer, only not as good a GUI (apt-get install vlc)
  2. Utitlities:
    • nmap – nmap is a great network scanner. (apt-get install nmap)
    • Yakuake – Yakuake is what you call a “drop-down terminal”. It requires the use of kde libraries (so does amarok), but all that is taken care of by apt-get. (apt-get install yakuake)
    • wine – Wine helps me run some windoze apps (like counter strike!) on linux. (apt-get install wine)
    • Partition Editor – A great tool to examine and manipulate partitions on your hard drive. (apt-get install gparted)
    • Linux DC++ – A linux client for the DC++ protocol (apt-get install linuxdcpp)
  3. Dev tools:
    • G++ – the C++ development environment (apt-get install g++)
    • manpages-dev – Contains man pages describing the Linux programming interface including Linux system calls and library calls. (apt-get install manpages-dev)
    • Java – I don’t use java a lot, but I still install it. But I dont use the ubuntu package for this (sun-java5-jdk). Instead I download it directly from Sun’s website. This way I can prevent java from “getting into ubuntu’s heart” ๐Ÿ˜›
  4. Web server stuff:
    • Apache2 – the supreme web server of all earth, water and sky! (apt-get install apache2)
    • PHP5 – my favourite server scripting language. To get this working with apache, we need the php5 apache mod. (apt-get install php5 libapache2-mod-php5)
    • MySQL – The database server of my choice. I also install the mysql module for php to get database access from php. (apt-get install mysql-server-5.0 php5-mysql)
  5. Browsers:
    • Firefox 3 – already available
    • Firefox 2 – This is purely for testing web pages on FF2. I make a separate user (ff2) and install FF2 in a separate folder by downloading the setup from here.
    • Opera – for testing javascript and web pages on opera. Mostly all these browsers are for ensuring cross-browser operation of stuff I make. Download the latest version from here.
    • Konqueror – again for cross-browser stuff. (apt-get install konqueror)
    • ies4linux – This nifty software install the Windows IE 5, 5.5 and 6 on linux. This uses wine and cabextract, so wine must be installed first. (apt-get install wine cabextract). Now ies4linux must be downloaded and installed separately from here.

Well, this is what makes my ubuntu complete. What completes yours?

Javascript mousemove Event Brouhaha Resolved

Hey all! I’ve been playing with javascript for some time, and I have something very interesting for my JS brethren out there.

There has been long-standing confusion regarding this big question: “How to get mouse coordinates on a page with the mousemove event?”

My googling lead me to this page that says that its impossible to do this. But this did not satiate my itch, so I did some of my own digging (or scratching, if you please ๐Ÿ™‚ ).

I conclude that while this question has no all-pleasing answer, the task is quite doable (though in a useless scientific-theory kind of way).

This post addresses this question in detail. And I’ll take this step by step.

The mouseover event

This event is supposed to be generated whenever the mouse is moved in the “client area” – the white area where the page is rendered.
This event has 6 sets of properties (in all browser taken together):

  • clientX, clientY
  • layerX, layerY
  • offsetX, pageY
  • pageX, pageY
  • X, Y
  • screenX, screenY

Now, thats the easy part. The major PITA is that not all browsers support all these properties. And, if two browsers support the same property, they don’t implement them the same way!

The only exception to this confusion is the screenX/Y pair: they are available consistently across all browsers, and all do the same thing – get the coordinates with respect to the top left corner of you screen. But then, this value doesn’t really have much use, does it? ๐Ÿ˜

And here’s how the rest of the properties behave cross-browser:

1. Firefox – both 2 and 3

  • offsetX/Y and X/Y pair are undefined. So if you try to read them, you will get “undefined”. No, not even null. Plain undefined.
  • clientX/Y, pageX/Y and layerX/Y all get us the coordinates of the mouse with respect to the top-left corner of the client area, regardless of the padding of ‘body’.
    So whatever be the padding of your page’s body, you’ll always get the same values, no matter what.
    This is kind of standard across browsers too, except that different properties return this value.
  • Now then, there’s the quirk: FF2 does something strange with layerX/Y: it is not equal to pageX/Y and clientX/Y – instead they it is always (1+clientX)/(1+clientY) – God knows why! This is probably because it does not count the border of the client area. But again, defining the client area’s border is like fighting foo.

2. Konquerer 3.5

It is this browser’s implementation that has appealed to me the most.

  • All the properties are defined. clientX/Y, pageX/Y, layerX/Y and X/Y all mean the same thing – the coordinate w.r.t the top-left corner of the client area.
  • offsetX/Y gives the coordinate of the mouse inside the current element, where current element is the element over which your mouse is hovering.
  • A point to note is that offsetX/Yย  gives the coordinate from the outer edge of the border(in case of more-than-1px-wide border) of the element – so margin is not counted, and the padding is considered as part of the element.

3. Opera 9

  • Here, layerX/Y is undefined.
  • clientX/Y, pageX/Y and X/Y are the same as that in Firefox and Konqueror.
  • But offsetX/Y is a different story. It behaves like in Konqueror, but it returns the coordinate w.r.t the top-left corner where the padding ends!
  • Further, the padding region and border region are part of the “current element”, but when your mouse is in, like, the left padding region, the layerX is negative. Baaaad!
  • However, this behaviour is not repeated with the layerX/Y etc for the body – in the case of body, padding’s just as much a part of the client area as is the content.

4. Google Chrome

This browser, thankfully, adopts the konqueror standards. Perhaps that’s because the google guys liked that model too. (That says something about me, doesn’t it? :P)

But there still is one small difference — and I’ve saved that for the last! Noooo… don’t rush down to the end just now!

5. IE 7 and 6

  • Here, layerX/Y and pageX/Y are undefined.
  • clientX/Y and X/Y are the coordinates w.r.t the client area’s t-l corner (yeah, no padding).
  • But then, there’s a glitch (again). In IE, the mousemove event is generated very slowly – only when your mouse crosses an element’s boundary, or you are shaking the mouse rather too vigourously. Perhaps this was intended to be some kind of performance bonus, it is headache for us devs.
  • And, offsetX/Y behaves like in Konqueror, but the event is generated too slowly to really tell whether the padding is being included in the coordinates or not. IE’s weird as ever. Microsoft. Bleah!

I got the same result with IE 5.5 and IE 5, but the testing was not as thorough. Who cares, anyway.

BTW, I did my IE testing on both Windows machines, as well as my dear Ubuntu. I used ies4linux, of course.


In all, here are a few things to note:

  1. screenX/Y and clientX/Y work in all the above browsers.
  2. Firefox does not support offsetX/Y.
  3. All the rest support offsetX/Y, except that Opera pulls in all the padding shaggywag.
  4. IE has a very lousy “refresh-rate”. Hopeless, really.

Now for the final piece-o-cake:

Q: What happens when you drag your mouse out of the client area?
A: One would expect that mouse tracking should stop, and it does. But, Opera and Konqueror do one additional thing – they track the first point that lands outside the client area. This means that after tracking has stopped, one of the values in the clientX/Y pair (or X/Y or pageX/Y etc) may be negative! So watch out! But again, google chrome does not do this stunt – it does not track any point outside the client area. Nor do Firefox and IE.

Whew! What a marathon! I wonder if all this is any real use at all. Given that you know all this, you still have to do a browser detect to write any “portable” javascript.

I firmly believe that browser detection is bad for javascript – it is bad for the minority of users who use obscure browsers that implement a well-known-browser-compatible standard.

So I guess this info is for just alpha geeks who want such info just for the sake of it. But it satisfies my itch quite perfectly.

So then, Thank you. ยกHasta luego! (bows and exits) ๐Ÿ˜€