Raphaël lifecycle node tree

I recently wrote a script to display product life cycle states in a chart. This chart has to be dynamic. The life-cycle state definition is dynamic and can be different from case to case. So the states and there relationship with each other is represented using a JSON file. Following is a part of what I have used with my script. ( The complete JSON is included with the sample given at the end of this post ).

{
    "state": [
        {
            "id":"Development",
            "type":"initial" ,
            "transition": [

                {
                    "target":"Deprecated",
                    "event":"Demote"
                }
            ]
        },

         {
            "id":"Deprecated",
            "type":"end" ,
            "transition": []
        },
        {
            "id":"Deprecated2",
            "type":"end" ,
            "transition": []
        }
   ]
}

Following is what comes out from the script.

Each nodes clicked event is listened and handled. Also the tree is animated. It looks bit lame but can be modified a bit to look cool :) Sadly this is not used in any real life product since the one which was going to use has died. If any one want's this in there world you are free to do anything with this. Right now this only woks with FF :( .... You will have to debug this for Chrome by yourself.

Download

Comments

Using javascript to Include a html file inside another html file

When there is no server side functionality needed we create the whole site in plain html. Usually these sites have left/right side menu, top header, footer etc.. If the site grows in to 20, 30 pages, it will be a headache to do a simple change like changing footer text. We will have to change each page. If we were using a server side technology like PHP, JSP, etc.., we will have the chance to keep the common areas in the site in different pages and include these parts in each page using a “include” statements. We can do the same thing with the plain old html and javascript. But how? First you need to create the site main layout using divs and give them unique ids. <html> <title>HTML Includes</title> <script language="javascript" src="js/main.js"></script> <script src="js/prototype.js" type="text/javascript"></script> <script language="javascript" xml:space="preserve"> // <...

New Lost Season Rocks !!!!!

New Lost season started on ABC network last Tuesday. In last two seasons they introduced time travel. Now it seems they are talking about parallel universe theory. They say this is going to be there last season of the long running amazing TV show. "The aftermath from the detonation of the hydrogen bomb is revealed."

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'...

My Notes

Search This Blog