Creating Add-on, Hands-on the fun way ! at Chennai Workshop

What makes Firefox the best browser ? Open Source ? nah ! HTML 5 ? No… you gotta be better than that. Look, I’m an average user just wanting to have the best browsing experience. I don’t really care if you got HTML 5 or 4 or 6 in it.  Well, Its not just me. Its about how Firefox has maintained a significant user base. Obviously, it all comes down to the greatest collection of Addons that the browser has got !

We’ve all enjoyed using addons with Firefox. It’s even more fun to develop one right ? We just wanted to share it to a greater crowd there and thus happened the Add On Development Workshop at Madras Institute of Technology, Chennai on 25th March 2012.

The speaker for the event was Soumya Deb a.k.a Debloper. He got along really well with the audience and was very interactive. Assisting him were Dwaraka – (myself), Harvish and Naresh.

We had the session split up into 2 parts, covering, the need to have Addons- an introduction, setting the developer environment in 1st part and developing addons using online builder in the 2nd part.

All the participants had developed a sample add-on that provided a right click menu option to see all the ‘About:<--->’ pages using a simple javascript code.

Internet connection was slow but, we were able to manage though. Thanks to the MIT hospitality team ! You were amazing :) On the whole, the session was very productive and enjoyable !

Click to view the Slides and Notes of the Workshop.

Phonetic Typing…? Yes, you can do that in Linux !

Typing always makes us shit crazy ! English typing is a you-have-to-do-it situation. But, most of them using Internet, are non-Englsh speakers. How about typing in that language ? Not many would’ve learnt typing in that language keyboard layout. Phonetic typing might be an answer. But, do we have the right stuff to get it working ?

Yes, we got tools for that. Consider using Google Transliteration. It works, yes. But, native support for Phonetic typing is always preferable, if you want it to work in a cross-application platform scenario – not just the web. Unfortunately, Google has released its Input Method Editor (IME as how it is shortened) only for Mac and Windows operating systems. Poor old, Linux is left back :(

We’ll now see a workaround to this. iBus (Intelligent Input Bus) to the rescue. Let’s see how to get it working in Linux, in our case a Fedora 16 x64 operating sytem.

Steps

 

1. You first need to install the iBus tools. Do it command line, by typing,

         su –c ‘yum install ibus’

  2.  Once, the install is complete, you may run it by executing,

         ibus-daemon from the run dialog window (Alt+F2)

  3.  You’ll now see a ‘keyboard icon’ getting displayed in your window

4. Right click the window, click preferences and choose the language you want;

5. Always choose a phonetic language;

6. Now, you’ll see an option to choose between the Input Methods as below.

7. Voila ! You’re typing your language ! (Tamil language screenshot has been given below)

The Dual Power Phone Adapter… Finally ;)

Everything has a story behind it. Do you agree ? Once again, I’m going to stick to the same old style of why and how the Dual Power Phone Adapter came into being.

Okay. Down South in Chennai is where I live. We have the worst power shortages here. Nobody knows when the power may go and come back. Real Worse. So, one problem that usually irritates me is when I talk over my cordless phone and power goes down all of a sudden. Line gets lost. Well, after all it’s just 9 volt DC supply that’s powering the base station from the adapter. Why not, use it with a battery cum AC voltage ? So, you know, we could have it set it up like, whenever the power goes, we can use the battery for alternate supply. Cool, right ? I soon decided to make one.

Okay, that was the story behind and now we go on to the schematics of the circuit.

 

Circuit

Essentially, you’ll need

• A 230v, 5A AC supply –> 9v DC supply transformer
• 4 nos. of 1N4001 Diodes or something similar
• Electromagnetic Relay – Something like RSM822 (Data sheet here : http://www.ges.cz/sheets/r/rsm822.pdf )
• A 9v DC Battery
• Connecting Wires
• Phone Adapter Pins

 

In India, the standard power supply is 230v, 5A. Choose the transformer appropriate for you to step down the input voltage to 9v or required power supply that your phone needs. Check with the product manual.

 

1. First step, its obvious. You’ll need to step down, your input power to 9v DC supply.
2. So, connect, your input to transformer and output secondary winding to a bridge rectifier. So okay. Bridge rectifier is one with which you make your input AC into a DC voltage. Essentially DC voltage is a single polarity voltage. It doesn’t have a positive and negative voltage concept at all. So, we’re going to clip the negative side of the AC voltage to get a single polarity. But, that alone is just not enough. It is still a pulse. –> pulsed voltage. To make it tend to much more DC characteristic, we may use a capacitor. Although, we didn’t use capacitor in the circuit given, you may use it for best results as in a full wave rectifier.
   
3. To switch back and forth between the AC and DC supplies, we’re going to use a Relay coil. It is basically a 2-input, 1-output switch, controlled by electromagnetic coil. Whenever the coil gets powered, output from 1 terminal and when the power goes down, output comes from another terminal. We’re going to power the coil in switch with the rectified power from Bridge rectifier and use it send AC input to phone. Whenever, there isn’t AC supply, DC shall take over.
4. Find more about Relays here : http://www.kpsec.freeuk.com/components/relay.htm
5. Connect the negatives of both the AC and DC together and use the Relay switch to control the adapter.
6. Use appropriate adapter pins to connect the supply to your phone.
7. This might not be the ‘perfect’ solution to the problem. But, suffices, one may say.

 

Find my adapter here :

 

Find more @ Dwarak'sBlog.

Below is the Cadsoft Eagle Schematic. Free to share and edit

http://ubuntuone.com/4kS5MKZGSQJlQPbQe2m2wv

Kanaku – The Simple Calculator for Windows Phone 7

For sometime now, I’ve been intrigued on developing apps for Mobile devices and platforms. Sure enough, most of the devices right now, run either Android or iOS. Windows Phone 7 platform is slowly gaining momentum, with big break coming from Nokia’s Deal with Microsoft to produce Win 7 phones from now on.

The following is a simple calculator with text boxes and buttons that runs on Win 7 Phone Platform. Designed exclusively for those running v7.1 and above and supports Metro UI.

Source Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace calculator
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            int x = Convert.ToInt32(tb1.Text);
            int y = Convert.ToInt32(tb2.Text);
            int z = x + y;
            tb3.Text = Convert.ToString(z);
        }
       
        private void button2_Click(object sender, RoutedEventArgs e)
        {
             int x = Convert.ToInt32(tb1.Text);
            int y = Convert.ToInt32(tb2.Text);
            int z = x - y;
            tb3.Text = Convert.ToString(z);
        }

        private void button3_Click(object sender, RoutedEventArgs e)
        {
             int x = Convert.ToInt32(tb1.Text);
            int y = Convert.ToInt32(tb2.Text);
            int z = x * y;
            tb3.Text = Convert.ToString(z);
        }

        private void button4_Click(object sender, RoutedEventArgs e)
        {
            int x = Convert.ToInt32(tb1.Text);
            int y = Convert.ToInt32(tb2.Text);
            int z = x / y;
            tb3.Text = Convert.ToString(z);
        }
    }

}

Download

The project is hosted at codeplex.com and can be found at http://kanaku.codeplex.com.

Let Linux breathe some ‘Air’

Oye ! We’re not talking about, atmosphere. Rather about, the Adobe’s Cross platform application runtime environment – the ‘Air’. Yes, just like any other Adobe product, Air is very dynamic, interactive and easy to deploy.

Adobe Air is a means to create Rich Internet Applications – RIA as how Adobe wishes to call it. If the term Cross-platform application runtime environment is a little confusing, take it to be, Adobe Air is a means to create application that utilize all the best components of both Web-based and Desktop computing to bring rich interaction and utility to the app for the user. Of late, a lot of applications are being built in Web based environment. Some of them over Flash, while some with Flex. Deploying these applications across all other platforms, Desktop (Windows, Linux and Mac ) and Mobile ( iOS, Android, Blackberry and Windows Phone 7 ) has always been an issue to be addressed. With so many platforms and application environments, it is not easy at all, to create a run-time architecture that works in sync with all. Adobe Air is meant to eliminate that.

Many Corporate Giants have started shifting towards Adobe Air now. Adobe themselves are using it for employee directory. NASDAQ, Salesforce.com, Model Metrics are some of them using it currently. eBay also uses Air to deploy its Online Auction Application in Desktop environment.

With Air seeing development at such a fast pace, it is so disheartening to see that, Adobe has stopped development for Air in Linux. Why ? ‘Our priorities are currently towards developing the Mobile platform and the action isn’t currently in Linux.’, says adobe’s blog post. It has been over five months, since this happened. But, it was only recently that I noticed it. I wanted to install Tweetdeck, the One-for-all desktop Social Networking App, that uses Air in my 64 bit Fedora 16 Desktop. Though, Open Source Applications are great, there can never be a match to this freeware Tweetdeck. It’s convenient, easy to setup and you got so many tweaks and options to customize. But, there wasn’t any installation package or repository to do it. I desperately wanted to install Adobe Air over my Linux desktop and had finally done it.

Here’s how to do it.

Installing Adobe Air in Linux

For 32 bit

 

• Go to, Adobe Air download page, you’ll be prompted to choose the old repository. Download the Adobe air v2.6 binary file (.bin)
• Open your terminal.
• Navigate to the location where you’ve your binary file.
• Make it executable by running the following command

     chmod +x <name-of-your-adobe-air-installtion-file>.bin

• Run the file with the command

           ./<name-of-your-adobe-air-installtion-file>.bin

You’re done. You’ll have installed your application. But, would not receive any more updates. If in future, some application requires a new version of Air to run that, you wouldn’t be able to run it for sure.

For 64 bit

 

• Running Air in 64 bit computers is one heck of a job. You’ll need 32 bit libraries to do that.
• So, first, we install 32 bit libraries first. We’ll see the case of Fedora Linux.
• Open the terminal.
• Import the keys first.

 sudo rpm --import http://commondatastorage.googleapis.com/xenodecdn/RPM-GPG-KEY-rpmfusion-free-fedora-15

sudo rpm --import http://commondatastorage.googleapis.com/xenodecdn/RPM-GPG-KEY-rpmfusion-nonfree-fedora-15

• Install RPM Fusion

su -c 'yum localinstall --nogpgcheck http://download1.rpmfusion.org/free/fedora/rpmfusion-free-release-stable.noarch.rpm http://download1.rpmfusion.org/nonfree/fedora/rpmfusion-nonfree-release-stable.noarch.rpm'

• Install Adobe Air Dependencies

su -c 'yum -y install ld-linux.so.2 gtk2-devel.i686 libdbus-glib-1.so.2 libhal.so.1 rpm-devel.i686 libXt.so.6 gnome-keyring-devel.i686 libDCOP.so.4 libxml2-devel.i686 nss-devel.i686 libxslt.i686 xterm rpm-build'

• If suppose, you get errors like, Adobe AIR could not be installed. Install either Gnome Keyring or KDE KWallet before installing Adobe AIR,

Run the following command

yum install libgnome-keyring.i686

• Make it executable by running the following command

  chmod +x <name-of-your-adobe-air-installtion-file>.bin

• Run the file with the command

  ./<name-of-your-adobe-air-installtion-file>.bin

Done. Great. You’ll run your Air applications now in Linux. Download your air applications and now, you’ll be able to run it with just a click !

Dude, what’s this html5 everyone keep talking about ? *-)

Lately, its been all about html5 all around. In internet, magazines and news reports. What and why does it matter to all of us ? Well, for the absolute beginners of the Web, this is how it goes.

The Roadmap of HTML

HTML is called the Hypertext markup language. During the early 90’s when the Web was still in large development, it was nothing short of an online photocopy of the books and documents in paper. Suppose, say you need to access a book in the web, you’ll get it as a full page, sometimes with nearly 20,000 lines of absolute text. No, images, graphics, nothing. Reading a book seemed much easier compared to reading it online. Whopping 20,000 lines, scrolling and navigating through the lines, proved very boring and un-interesting. Well, that was way back, like two decades ago.

The scenario changed step by step. The inventors of the web (mainly the people at CERN), realized, What if we could bring out each page in the book as separate web pages and provide a way to move to the next page ? So, now, you could access a single page at a time, navigation wouldn’t be a problem, a little content each page would make scrolling and reading much much easier than earlier. Idea was great ! and thus came the concept of Hypertext ! Hypertext is the way to link webpages. Plan was to provide a link to subsequent pages for navigation. And shortly, they introduced means to format the textual content in the webpages. So, now, you could differentiate between text sizes, underlines, bold words, paragraphs and things like that. Wow, web was improving greatly.

As time passed, “Why not introduce graphics and images ?”, the developers asked themselves. “Oh sure. Why not ?”. And yes, images made their way towards Web development. Slowly, it was images all over the place. And, one by one, new technologies came popping over. Notably among them, is the usage of Video in Webpages. Having videos in webpages is so cool. It brings so much life into things, a better interaction with the reader and provides greater understandability to the issue you try to address.

Tags

So, ok. Web pages have all the content. Now, how will the Web browser or the device you use to access the web content, understand where to have the video, paragraph alignment, the image placement etc. A way was needed to tell the browser that this content must be place here. That content need to placed there and like, the content that follows now, is a video and it must be centered. Each element of the webpage need to be identified separately. That’s how tags came into place in a HTML. Tagging of content in a HTML is exactly the reason why HTML is called the “Markup Language”.

Consider, you prepare for your exam. You have large numbers of pages to read. You don’t read them blindly. Do you? Wherever and whenever you come across some notes or points that are important and need to be emphasized while writing, you try to highlight them with your maker, underline them. In a way, you are marking things that are important, you mark up things that are heading or sub-headings. You differentiate among the content available.

The same idea is being used in the webpages. You are marking up the various elements in the webpage for the browser to differentiate between. This marking up, just as how we highlight in books, is achieved in the Web through the use of tags. Tags specify the content that follows, if it’s a paragraph, if that is an embedded audio or video object, if that is an external content etc.

What is the html5 trying to bring ?

 

A lot of features that the web of today uses, like Video and Audio, uses third-party applications and codecs (short for COder and DECoder) for playback. This restricts content distribution across various platforms. Like, some browsers like Mozilla Firefox support only ogg vorbis (an open Audio format ) and theora (open video format) formats. Mac’s Safari supports only .mp3 file formats . Opera again, support .wav file playback. These formats that the browsers support by themselves are called their native formats. What format will I choose to go with now ? Confusion !

This is completely eliminated with the arrival of html5. All browsers shall support a standard video element that could be embedded as a separate tag. Which standard video format could be used is being still debated on. Initially Ogg Vorbis Theora was considered. And amid concerns from Apple Inc., this was later changed to MP4, but is still in very much confusion as to which video format, the browser must support.

Another notable feature that would be introduced with the html5 would be a native support to a standard audio format. It is expected to be something among, Ogg Vorbis, MP3 or Wav formats.

SVG (Scalable Vector Graphics) and MathML would become inline from now on. Meaning, they would also be available as tags to be embedded into. Scalable Vector Graphics is a XML specification for drawing Dynamic Graphics and Images with lots of features for compression and scripting ability. MathML would enable us to write Mathematical equations with much ease. Mathematical equation representation in Web pages has always been a problem from the very beginning. In most cases, it was done by the use of images for equation. This problem is also expected to go with the introduction of html5.

HTML5 allows offline application running and storage. Many other features that come with the html5 are, Timed media playback, document editing, Drag and drop, Geolocation.

With already a number of sites, starting to use the html5, this is bound to rock !

Yes, Virginia, We need Email Encryption !

Email encryption has been gaining a lot of attention lately. With growing numbering of security attacks, often in public places like coffee shops, airports and cyber cafes, it is not hard to imagine your confidential data being hacked. There are so many loop holes that a bad guy can use to reach you and sniff your data. Let alone the public places. How about your email security ? What if you lost your Email password ? Now-a-days there are many security features like Recovery Email, SMS Alerts/One Time Password, a 2 stage password mechanism and the like. But still, a little insight about you and your passwords can get the hacker right into your inbox. Though you might know it later, there would be nothing you could’ve done, because, the details that the person had wanted would’ve already been stolen !

May be it could seem like a very complicated case, but sure enough not be taken lightly. Email is more like a personal diary. People might have so many things in their Mail history. Theft of their Email password or mail account is no less than losing their identity.

We now present a way of encrypting your email safely and securely so only you could read it – PGP Encryption !

---

What is PGP ?

PGP stands for Pretty Good Privacy. It is data encryption cum decryption standard generally used for transmission of confidential data like Email and files. It was written by Phil Zimmermann in 1991 to answer email security issues.

Some patent problems with the PGP led to Corporates forming their own version of PGP standards, thus making it unavailable for the larger public. So, by July 1997, Open PGP was formed by the IETF. Under this regard, the Free Software Foundation has its own version of the PGP Software – GnuPG, expanded as GNU Privacy Guard.

How it works ?

Open PGP standard that we are currently about to use, works through public key cryptography or in other terms, asymmetric cryptography. In layman’s terms, we encrypt the data using a key and decrypt it with an other key. So, in the end-to-end transmission data we need two keys to work with.

What we do is, we generate two keys. One public key and the other private key. The names are actually arbitrary. Any key can be used as public or private key. Its just that encrypting data with one key can be opened with only the other key.

After generating the public/private keys, we send the public key to the person who wants to send us email/data securely. We can send the public keys through email or can upload it to public key server so anyone wanting to reach us can do so in a secure manner. Anyone trying to read the data in between can get away with only gibberish.

The data they send can be viewed only us, as only we have the private key. This is very important. Never lose your private key or send it to anyone by any means. Better have a backup.

 

---

Setting up Email Encryption

Before we start this, things you’ll need to set up the email encryption are, GnuPG – if you plan to go open source or the PGP Desktop, an email client – Thunderbird preferable or if you insist, you might also try having Postbox or Outlook and in case if you’re using Postbox or Thunderbird, you also might have to install Enigmail. The links for all the necessary softwares have been provided at the bottom of the article.

First install your email client, in my case Thunderbird and setup your email accounts. Not to worry much here. Thunderbird has a very easy to setup email account wizard that will guide you. Install the Enigmail addon. Same goes with Postbox.

 

The next thing you need to do is to install a PGP Software. The Enigmail extension that you’ve installed in Thunderbird works only if you’ve got a PGP Engine. I personally would recommend using Gpg4win. It is so easy to use and comfortable to work with. There are two options you can go with – either the full version(38 MB) or just the engine (15MB). The second option is fine.

Once you’ve done all the above, open Thunderbird Client and choose Key Management from the OpenPGP option in the menu bar. Choose key management and you’ll get a screen similar to the one below.

 

Now, choose Generate option to create your new key pair – remember the public and private keys we talked about ? That’s exactly what we’re going to create now.

Type in your account details, choose a passphrase – to verify your authenticity and to revoke your private and public keys. Choose your key validity and you are good to go.

Click on Generate key option and it’ll be a few seconds before you have a valid key. Gpg4win might prompt you to type in your password again to store the generated keys in its local database.

That’s it! You’re done.

Now, send your public keys to the person you want to have secure communication with or upload your public keys to any of the public key servers. Anybody wanting to communicate with you shall use it from there.

When you want to compose an encrypted message, type in your message and choose Encrypt Message from the OpenPGP option in your compose window. Remember, you need to have the public key of the person whom you want to send the encrypted message to.

Once you’ve chosen that option, you could see the message turn gibberish. Perfect Encryption ! Take a look at an example of what you would be sending the message as…

 

 

As for the receiver, he would be prompted for the password on first use to view the encrypted message that he has received and would see the decrypted version of it.

 

See, its that simple ! But remember to backup your keys before you send it to anybody, especially your private keys.

To view the decrypted message in browser, I didn’t find any convincing solution, except for FireGPG that works with Mozilla Firefox, although it didn’t work for me.

---

Download Links

Mozilla Thunderbird - http://www.mozilla.org/en-US/thunderbird/download

Postbox - http://www.postbox-inc.com/

GnuPG - http://www.gnupg.org/download/

GPG4win - http://www.gpg4win.org/download.html

PGP Desktop - http://www.symantec.com/business/theme.jsp?themeid=pgp

Enigmail - https://addons.mozilla.org/en-US/thunderbird/addon/enigmail/

FireGPG - https://addons.mozilla.org/en-US/firefox/addon/fire_gpg/