Quick Tweaks » script

Creating a multiuser interactive Google Map gadget for Google Wave with JQuery – Part I

ashokgelal — Mon, 16 Nov 2009 00:01:15 +0000

We just released the beta version of tweat.org – a site which maps the best meals in your town. We (by we mean me and the awesome Trent Cutler) decided that we also need a Tweat extension for Google Wave. It might be very useful for users to find out the best restaurant to go for their next lunch – from right within Google Wave! I’m already started working on it, and you should hear about an awesome Google Wave extension pretty soon

After using Google Wave for about 10 days, I’ve absolutely fallen in love with it. It’s not only fun, but is a very useful collaboration tool. I honestly believe that it will change the way we communicate. One of the most powerful features of Google Wave is its support for extensions. In this post I will show how to create a simple multi-user interactive map gadget. Read on if you are interesting in developing a Google Wave gadget. If you only jumped in to this site looking for a Google Wave invitation, this might help you out to get one. If you have a Google Wave account and want to try this gadget, here is the link to the gadget: http://wave.tweat.org/gwave/tut/tut.xml

What really are we going to create?

A Google map which contains a marker showing the current location. Any one of the participants can change the current location of the map. The ‘change’ will be reflected on the map of all the participants. There is already a full featured Google Wave gadget called Mappy, and you can even read its source code. This post is just a beginner’s guide and also the full featured Mappy is advance and pretty hard to understand.
This is just the first part of a long series of tutorials on Goolge Wave gadget. In other parts we will try to integrate geo-location and other features similar to the one we have in tweat.org. If you want to see any other features, let me know in the comments.

Though developing a gadget is very easy and intuitive, it is not so easy to test the gadget from within your local server. Unless you have access to Google Wave Sandbox, which I unfortunately don’t have, it is going to be a bit difficult. Nevertheless, it is very fun and I would say very good investment to invest some time and efforts in learning how to develop a Google Wave gadget. Before you open up your text editor and start acting like a code monkey, there are few things you need:

Obviously, a Google Wave account. If you have someone else that can be with you while you are testing, that would be very convenient! For those of you who don’t have any Google Wave account or if you need another one – this might help you out.
Get a Google AJAX Libraries api key: http://code.google.com/apis/maps/signup.html. We will be using Google Map, and JQuery hosted at Google CDN.
After you are ready to test your gadget, you need to host your files in a publicly accessible place. If you don’t have one and don’t mind sharing your gadget making it an open-source, you can try Google’s own Gadgets API Developer Tools http://code.google.com/apis/gadgets/docs/tools.html#Host which allows you to host your gadget for free!

That’s all we need for now.

Getting Started:

Fireup your favorite text editor and start with the following:

<body>
        <div id="map_canvas" style="height: 350px; width:500px"></div>
        <input type="text" name="address" />
        <input type="submit" name="submit" value="submit" />
</body>

We just created a 350×500px div to hold our map. We also created an input box to type in the address, and a submit button to geocode the address and show on the map. Let’s move into the main part, the javascript part. Add the following codes just before the

<head>
     <script src="http://www.google.com/jsapi?key=<PUT YOUR JS API HERE>" type="text/javascript"></script>
     <script>
       google.load("maps", "2");
       google.load("jquery", "1.3");
     </script>
</head>

What are we doing here? Not much except than just loading Google Maps (v2) and Jquery (v1.3) library from Google CDN.

Now the fun part, add the following lines just before the closing tag. Don’t worry if you don’t understand even a single line, we will go through each line and will see what’s going on.

<script type="text/javascript">
 var map;
 var geocoder;
 var marker;
 $(function(){
      map = new GMap2(document.getElementById("map_canvas"));
      map.setUIToDefault();
      geocoder = new GClientGeocoder();
      map.getInfoWindow();

      marker = new GMarker(new GLatLng(0,0));
      map.addOverlay(marker);
      map.setCenter(marker.getLatLng(),13);

      $('input[name=submit]').bind('click', function(){
           address = $('input[name=address]').val();
           wave.getState().submitDelta({
                'address':address
           });
           return false;
      });
 });

 function reload(){
      address = wave.getState().get('address');
      geocoder.getLatLng(address, function(latlng){
           if(!latlng){
               alert("Cannot determine the address");
           }else{
              marker.setLatLng(latlng);
              map.setCenter(latlng, 13);
           }
     })
 }

 function init() {
      if (wave && wave.isInWaveContainer()) {
           wave.setStateCallback(reload);
      }
 }

 gadgets.util.registerOnLoadHandler(init);

Details:

Let's talk about the function init and the last line:

gadgets.util.registerOnLoadHandler(init)

The line says that whenever the gadget is loaded, call the init method. The name of the function can be anything, it doesn’t have to be init. init just makes it clear, and intuitive that this function will be called when the gadget will be initialized. Now, inside the init function, we check that the wave has been defined and the wave is in the wave container (which is the job of Google Wave to create and initialize wave object you don’t have to worry about this). If it is then whenever there is a change in wave’s state, it calls the global function reload. If you are smart enough, you might have already guessed that the reload will be the main function handling all of our user interactions.

On the top, we started by declaring three global variables:
map -> for holding reference to the map that we are going to add
geocoder -> to convert the given address into latitude/longitude value
marker -> for holding reference to the marker which will represent the given address on the map

Now, we want to add map to the div ONLY after dom is ready for which we will use the wonderful JQuery:

$(function(){

Now, we will create our map, attach the map to our div, set the map UI to default. We will create a geocoder object, and a marker:

      map = new GMap2(document.getElementById("map_canvas"));
      map.setUIToDefault();
      geocoder = new GClientGeocoder();
      map.getInfoWindow();
      marker = new GMarker(new GLatLng(0,0));
      map.addOverlay(marker);
      map.setCenter(marker.getLatLng(),13);

Please notice that the the marker’s initial position is at 0,0 and also the initial zoom is 13

Now, we will bind the click action on the submit button…

$('input[name=submit]').bind('click', function(){

…and get the current address from the input box:

address = $('input[name=address]').val();

Now, it is time to make our map react with the submit button’s click action. For this we will pass a key/value pair (called map in JavaScript) to wave which will notify our reload function (we will come to this function in a few seconds):

wave.getState().submitDelta({
'address':address
});
return false;

These two lines are really important. We are passing the value from the input box held in address variable to wave’s current state.

Now, we will write a global function reload which will be called every time one of the participants clicks on the submit button to set a new address.
We will first grab the value of address from the map that we passed in line 17-18:

address = wave.getState().get('address');

We will now use Google’s geocoding service to get the equivalent latitude/longitude value for this address:

      geocoder.getLatLng(address, function(latlng){
           if(!latlng){
               alert("Cannot determine the address");
           }else{
              marker.setLatLng(latlng);
              map.setCenter(latlng, 13);
           }
     })

If the geocoder returns a latlng value we will set the marker, and center our map to that latlng otherwise we will alert the participants that the address cannot be determined.

That’s all for our application part. Now, it is time to wrap up our code in a format recognized by Google Wave. Include following lines on top of the file (before ):

<Module>
     <ModulePrefs title="My first Google Wave Gadget" height="450">
          <Require feature="wave"/>
     </ModulePrefs>
     <Content type="html">
         <![CDATA[

ModulePrefs is the place where you can set all the settings for your gadget such as height, width, title, icon, thumbnail etc. Among other, height is important and you might have to do a little bit of hit-and-trial to get to the height which won't cover a part of your gadget inside a wave. For more information about available settings, please visit official Google Wave documentation.

Finally, finish off the code by closing the xml tags. At the end of your file, right after tag, include:

          ]]>
     </Content>
</Module>

Download the source:

Download the source file from here to see, and be sure that it matches everything with yours.

What next?

As I’ve already talked about this earlier, this is just the first part, I will definitely come up with other parts to make this gadget more useful. I do hope that you guys will also share your knowledge, and experience with me, and other readers. I would definitely welcome any feedback and constructive criticism. Keep coming back as the next extension we will be developing, after we finish this gadget, will be a Google Wave Robot!!! For now start a new wave with one of your friends so that you can test out your first ever Google Wave gadget. If you don’t find anyone, ‘buzz’ me at ashokgelal[at]googlewave[dot]com. If I’m online and not busy, I will definitely help you out. In the mean time, don’t forget to follow me at Twitter @ashokgelal and also tweatorg @tweatorg.

Happy Waving!

Google Wave Invitations Giveaway I’ve got few Google Wave invitations for those who need...

Related posts brought to you by Yet Another Related Posts Plugin.

Fun with Linux Commands-III – Being productive

ashokgelal — Sat, 01 Nov 2008 07:06:44 +0000

Happy Linux commanding!

Who says Linux commands are just for geek people? And who says it is just a fun toy? Linux is simple yet productive, the only limitation is your imagination. Those who argue me with me for Linux being simple, here is a popular saying:

*NIX is basically a simple operating system, but you have to be a genius to understand the simplicity

In this post, we will talk about few commands and write a couple of scripts (don’t worry, it will be damn simple). Some guys might blame that these commands/ scripts have no use and might shout “why the hell do we need that.” Remember, these are just the tools. It’s upto you how well you use these tools for your tasks. Also remember, one who discovers the alternative uses of a tool is often called a Genious. Let’s get started:

1. Make Linux speak that he loves himself.

espeak "I Love Linux"

Now you should be asking why the hell I need that? Well, what about you have a document, or a story and someone in your family is blind, or can’t see nicely. You don’t have enough time reading the document for him/ her. Ask him to sit in front of a computer and run this: espeak < documentName

We have more to do with espeak, you can even output the file to a .wav file or a .ogg file so that you can record them in a CD and mail to someone you care!

Still not impressed? What about making it to read your email, or run it in the background so that it alerts you whenever a new mail arrives in your Inbox and then reads the sender’s name, and subject. Also, if you are little ambitious, you can even make it say the weather, if the weather changes drastically. I won’t discuss how to make it read your mails, or weather; I’m just talking about possibility. When I get some time, I’m thinking to write a script which reads my Gmails. Just keep coming back!

2. Making your own commands.

You have heard Linux is highly customizable. How about writing your own simple command. We will write a small script which allows you a convenient way to change the directories, actually to go back several levels up. Let’s suppose you are inside /home/yourhome/a/b/c/d/e/f/g/h/i/j directory. You want to change the directory (cd) to several levels up. You can easily do this with somthing like cd ../../../../.. But what about something as similar as up 3 which will take you 3 levels up

Fireup your favorite text editor and type the following (don’t be intimated by thinking that you are programming something, I will explain this script line by line, don’w worry!):

#!/bin/bash LEVEL=$1 for ((i = 1; i <= LEVEL; i++)) do CDIR=../$CDIR done cd $CDIR echo "You are in: "$PWD exec /bin/bash

Save the file as up and issue following two commands:

$ chmod 755 ./up

$ sudo cp up /usr/bin

Now, from your home directory try using this command:
$ up 2

Where are you at? At root directory! See how easy it was? Let’s see how our little script chef made pizza for us:

#! /bin/bash -> you are using bash script

LEVEL=$1 -> $1 is the first parameter passed to this script assigned to LEVEL

for ((i = 1; i <= LEVEL; i++)) -> for some times (upto LEVEL)…
do -> …we will go round…
CDIR=../$CDIR -> …creating our path and assigning it to CDIR and…
done -> …when we are done…
cd $CDIR -> …we will change our directory to the path we have created above and…
echo "You are in: "$PWD -> …we will let you know where you are and finally…
exec /bin/bash -> …we are done so let’s get a new shell

That’s was not to easy but wasn’t too hard either. It is not too hard to ease your repetitive tasks with a single file and increase your productivity.

Let’s make another little script…

3. What do you usually do changing a directory? List it contents right? How about this little script?

#!/bin/bash

cd $1

exec /bin/bash

That’s it! Save it as cdls or something like that and then issue this command:
$ chmod 755 & sudo cp cdls /usr/bin

For Ubuntu users, if you want a script that keeps track of all your “apt-get” activities by posting them to your Twitter account, try this little handy script.

4. One more thing about cd. Which is the fastest and easiest cd command that take you to your home directory? cd /home/yourhome ? cd ~ ? cd itself!

$ cd

It takes you to your home directory

5. Tired of typing clear to clear your screen? Press ctrl + l

That’s it for today. Happy Halloween!

10 Linux commands for fun Here are few Linux commands you can play with for...

Related posts brought to you by Yet Another Related Posts Plugin.

Mozilla released Firefox 3.1 Beta1. Try it now!

ashokgelal — Tue, 14 Oct 2008 20:52:12 +0000

Mozilla just released Beta1 of Firefox 3.1 browser. They haven’t yet made the official announcement though.

The noticeable features include Ctrl+Tab 3D navigation browser, faster JavaScript performance, and Open a New Tab button just like Internet Explorer 7.

Ctrl+Tab 3D navigation browser is a welcome feature

If you want to give a try, here is how to install it in Linux:

wget ftp://ftp.mozilla.org/pub/mozilla.org/firefox/releases/3.1b1/linux-i686/en-US/firefox-3.1b1.tar.bz2Update: From the official What’s New page:

Web standards improvements in the Gecko layout engine

Added support for CSS 2.1 and CSS 3 properties

A new tab-switching shortcut that shows previews of the tab you’re switching to

Improved control over the Smart Location Bar using special characters to restrict your search

Support for new web technologies such as the and elements, the W3C Geolocation API, JavaScript query selectors, web worker threads, SVG transforms and offline applications.

Don’t forget to backup your profile so that you can restore if something goes wrong.

Open a new tab button

$ tar -xvf firefox-3.1b1.tar.bz2

$ cd firefox

$ ./firefox

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Run your virtual OS directly from GDM in Ubuntu

ashokgelal — Tue, 14 Oct 2008 16:12:46 +0000

If you regularly run a couple of OS from your VirtualBox and want to login to those OS directly from GDM session, here is a quick way to do it. For this to work you should have already set up your VirtualBox. Here we won’t be talking about how to setup VirtualBox but only how to login to a virtual OS from GDM session.

: Windows XP GDM

1. Create a bash script with the following contents

#!/bin/bash VirtualBox -startvm NameOfYourVirtualOS

Replace yourSUPassword with your password, and NameOfYourVirtualOS with the name that you have given to your virtual OS in VirtualBox.

2. Name it something like windowsXPGDM (if you want to run Windows XP), make it executable, and then copy it to /usr/bin.

$ chmod 755 windowsXPGDM
$ sudo cp windowsXPGDM /usr/bin

2. Go to /usr/share/xsessions and create a new file with the following contents:

[Desktop Entry] Encoding=UTF-8 Name=WindowsXP Comment=My Virtual WindowsXP Exec=/usr/bin/windowsXPGDM Icon= Type=Application

3. Save it with a name something like windowsXP.desktop.

4. Log out and you will see a new entry WindowsXP in your GDM session. You can now directly open VirtualBox session without even logging in to your Ubuntu machine.

10 Linux commands for fun Here are few Linux commands you can play with for...
Kick ass guide for installing Oracle on Ubuntu Four steps for installing Oracle on Ubuntu. Steps by steps...

Related posts brought to you by Yet Another Related Posts Plugin.

Tweet your ‘apt-get’! Let Twitter keep track of whatever you install in Ubuntu

ashokgelal — Sun, 05 Oct 2008 19:28:37 +0000

If you are like me who often likes to test one of the thousand applications available for Ubuntu and like to keep track of whatever you install or remove, here is a script for you. This script, tapt, tweets whatever you install, remove or perform other operations with ‘apt-get’ in Ubuntu to your Tweeter account.
Click here for more details on this script

Kick ass guide for installing Oracle on Ubuntu Four steps for installing Oracle on Ubuntu. Steps by steps...

Related posts brought to you by Yet Another Related Posts Plugin.