iClone – Functionality and Screenshots

As I had presented in my previous post, iClone is a project that tries to minimize the distance between the internet users and force them to collaborate with each other to have better searching results and become more effective. It’s like having a network neighborhood where users interact, share and get advance of previous knowledge.

I have made a progress during past months with the transfer of the idea of iClone from a standalone app, running only on Windows, to an a extension which is applicable at the most well-known and used web application which is no else than Mozilla Firefox web browser.

Firefox is one of the greatest open source projects with an enormous number of people being evolved trying to make the best out of it. Fortunately, the stuff that’s available online is adequate for a beginner with extension development and the help provided from the guys at the irc chat is valuable.

The purpose of this post is to present the basic functionality of the extension and some screenshots of a session.

At first, a user has to register in order to use our service so a register page is provided:

Registration pane

Then we log in at our system with the credentials we provided at the previous step and we can see the main sidebar page which consists of a Radar panel, where the user’s radar and other info appear and the Share url panel where a user can share a link and see its previously shared.

Main Radar Panel

The radar widget is provided by rgraph.net and is developed in HTML5. My own addition is the ability to have info (a tooltip appears) when the mouse is over a certain slice (onhover event). The active user is always placed at the center of the radar (zero point, 0). The biggest the slice of a user is, more of his navigation history is the same with the active user.

Through the tooltip, we can see how much time has passed since a user’s last navigation and the slice’s color escalation from light green to red represents that visually.

Main radar’s tooltip

When a user clicks on a slice of the radar then a second radar appears below the first one with info about the selected user and his neighborhood.

Second radar with tooltip

You can see the neighbors of any user and their shared urls as well. This ability is provided when you right-click on the second radar and select the “Shared urls” option (last five results appear in a list). Clicking on a given url from the list opens in a new tab which is auto-focused. Selecting the “Radar only” option from the same menu the “Shared urls” list disappears.

Second radar’s menu

Clicking on a given url from the list opens in a new tab which is auto-focused. Selecting the “Radar only” option from the same menu the “Shared urls” list disappears.

Neighbor’s shared urls

As for the second pane, the user is provided with the ability to share new urls which can be tagged to be more informative. He can also retrieve the last five bookmarked urls (currently manually with the “Get shared!” button).

Share url panel

That’s all for now. Find me at irc.mozilla.org probably asking for questions or helping begginers.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s