Skip to main content

Projecting HTML Elements on a circle using Javascript

Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted.









My solution has 5 files


  1. prototype.js

    This is a handy javascript framework. You can download the latest version from there website (www.prototypejs.org/download). I am using this to simply handle the onload event in the page.

  2. circle.html

  3. script.js

  4. node-main-left.gif

  5. node-sub-left.gif


The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”.

This is how the html file looks(circle.html). 

<html>

<head>

<script src="prototype.js" type="text/javascript"></script>

<script src="script.js" type="text/javascript"></script>

<script language="javascript" xml:space="preserve">

   // <![CDATA[

   Event.observe(window, 'load', showTree);

   // ]]>

</script>

<style type="text/css">

   .asso-content {

       margin-left: 10px;

       height: 200px;

       overflow: auto;

   }



   .node-main div, .node-sub div {

       float: left;

   }



   .node-content {

       line-height: 29px;

       text-indent: 5px;

       border: solid 1px #cccccc;

       border-left: none;

       background-color: #ffffff;

       padding-right: 3px;

   }



   .node-sub {

       position: absolute;

   }

</style>



<title>Association Tree</title>

</head>

<body>

<div id="assoContent" class="asso-content">

</div>

</body>

</html>


The script.js file contain the logic to create the nodes in circle. The whole logic is base on the following principle.



This is the script.js file 

function showTree() {

  var assoContent = document.getElementById('assoContent');

  //Define the center of the circle (cs,cy)

  var cx = 100;

  var cy = 100;



  //Place the main node on the center of the circle (cx,cy)

  var main_node = "
\"\"
/foo/bar
";

  assoContent.innerHTML = main_node;



  //This has to be get from the server side

  var n = 6;                                //Number of child nodes

  var r = 100;                              //The radious of the circle



  //Calculate n if the number of child nodes are grater than 10

  if (n > 10) r = r + r * n;

  var cone = 2 * (22 / 7) / n;



  //Finding the cordinates of the points and show them

  var x,y,new_node;

  for (var i = 0; i < x =" cx" y =" cy" x =" Math.round(x);" y =" Math.round(y);" new_node =" document.createElement('DIV');" csstext = "margin-left:" classname = "node-sub" innerhtml =" ">\"\"
/foo/bar
"

      assoContent.appendChild(new_node);

  }



}

Please read the in-line comments in the script.js file.


The two images (node-main-left.gif, node-sub-left.gif) are here respectively.




Download code from
http://sites.google.com/site/chanaka3d/Home/code.zip?attredirects=0
Labels:

Comments

David Pahl said…
Seems the code-box is breaking the circle.js

Do you have a demo link?
September 29, 2008 at 8:06 AM
chanaka said…
Sorry.I haven't got a demo for this. But you can download the code from the following url.

http://download42.mediafire.com/fyytzetn3gsg/m3m5nmmynza/code.zip

And one more thing..

The lines connecting each element is not implemented on this code.
October 1, 2008 at 12:27 AM
rajika said…
Nice post machang!
October 1, 2008 at 6:53 PM
Wayde Gilliam said…
Couple of questions:

1. So how do you display the lines relating ea. child to the parent?

2. Does the code allow for variable sized nodes?

Thanks - wg
November 7, 2008 at 1:33 PM
Unknown said…
Nice information,ankara escort
many thanks to the author.Ankara escort
It is incomprehensible to me nowAnkara escort
, but in general,Escort ankara ilan
the usefulness and significance is overwhelming.Ankara escort
Thanks again and good luck!
Antalya escort bayan
became the first designer in Wimbledon's 133-year history to create official uniforms for the tournamentescort ankara
As part of this year's event, which starts next week.
will introduces the first ...Escort ankara
determinationEscort ankara
to maintain and enhance the values for which our two brands are famous throughout the world.Eskort ankara
The rugby ralph lauren brand brings to Wimbledon the look of timeless elegance,Escort ankara
drawing on our rich history and traditionsEscort ankara
expert and i like your blog and the information you have
mentioned in this post about the Google tools is really great!
escort bayan
escort
escort istanbul
Bayan Escort
escort bayan ankara
escort bayan ankara
escort ankara ilan
Escort bayan antalya
Ankara escort bayan
Escort Bayan Ankara
Ankara Escort,
antalya escort

Thanks for sharing. Very impressive
December 18, 2011 at 4:54 AM
Kev Zettler said…
Hey this is a great post How do you calculate the cone? whats the details on that
January 29, 2012 at 12:21 PM
London Crumpet said…
London escorts directory London Crumpet is created to expose Independent escorts and escort agencies in London. Everybody can post their advert on this directory for FREE.
July 14, 2012 at 5:39 AM
Post a Comment

Popular posts from this blog

Making of my Fist Game ( Angry Wives )

My Fist Game !!! Finally I was able to finish it. It's been two and half years since I start investing my extra time on this. It all started with a joke. My current working place is a real fun place to work. We usually hangout on teatime and through out any thing we got on each other. We use to sit on a circle and pick a subject and laugh the guts out. Ones we were talking about a particular slow server, we thought about letting the users play a game while it loads. Game like Angry Birds. Then an idea came to modify the Angry Birds game to something like Angry Babes. So instead of this birds there are hot hot girls flying and killing dudes inside building blocks. Then I started wondering, " What if this can be done for real? " "How practical is this?" "Can a single person do this?" I think I have done a research on mobile game purchase statistics, it turns out to be IOS users have more trend over buying stuff than Android users. So IOS wa
Post a Comment
Read more

APIM 3.0 - populate multiple apis - bash script

Created a bash script to create, tag and publish multiple APIs. This is useful to populate data for the landing page. #!/bin/bash # get the URL consumer key clientId=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientId') clientSecret=$(curl -k -X POST -H "Authorization: Basic YWRtaW46YWRtaW4=" -H "Content-Type: application/json" -d @payload.json https://localhost:9443/client-registration/v0.14/register | jq -r '.clientSecret') echo $clientId echo $clientSecret encoded=$(echo -ne $clientId:$clientSecret | base64) echo $encoded # get access token accessToken=$(curl -k -d "grant_type=password&username=admin&password=admin&scope=apim:api_view,apim:api_create" -H "Authorization: Basic $encoded" https://localhost:9443/oauth2/token | jq -r '.access_token'
Post a Comment
Read more

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases. 1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type. To create a new asset type you need to login to the carbon console (username:admin, password:admin) https:// :9443/carbon/ Navigate to Extensions > Configure > Artifacts Click "Add new Artifact" link at the bottom of the page. By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type. Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets Create a folder with name "applications"    Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults   Since we are overriding the details page we need to
Post a Comment
Read more