Monday, 10 December 2012

The Circle View 1.0 - inspired by Google Circles

This module
- creates a Circle view just like Google Circles on your website.
- users can add objects to the circles, view objects in each circle etc.
- has complete client side view and uses jQuery with Masonry and TweenLite plugin.

Download Pack     Live Demo    

How to use:

The download pack contains the complete source with the war file used in the demo.
The code lies in CircleView.html and CircleView.js files. Back end code with servlets will be added in the next post.

Javascript (Input Variables)

In the config section of the Javascript, initialize the objects on your board.

The variable objectDatabase is an array of javascript objects. Each object has three variables - title of your object (required), an image URL, a URL linking the object to a web page. These are the objects already existing on your board. You may simulate this as a database in your servlet OR wait for my next post.

Users may add new objects using the add button provided. These newly added objects are pushed into the objectDatabase array.

Adding Circles to your page

Three circles are already provided in the HTML code. You may add or remove circles as per your need.
Just remember to increment the Ids of the circles and containers as shown.

Let me know if you face any issues.


  1. That looks great!!...good job...I've seen the link for download..but I have a you have the code on github? or something like that?...

    1. not yet .. but do you hav some suggestions for the next version of it ?

  2. Very useful and nice example. Thanks :)

  3. This is a really nice feature you created. I love it. You said you are going to create a back-end for the app. Is this something you are still pursuing? I would be really interested to correlate some sensor information stored in an nimbits instance with a GUI interface using the Circle View. Great work!

  4. HI, very very nice..
    i am having issues when the circles are empty , they are getting stuck (before i add any code).
    is the an advice i can use?