CODEWITHSUNDEEP
javascriptjqueryhtmldomtreenode
Wild_Fire126
Wild_Fire126

Reputation: 47

HTML Node Map Generator?

Alright, what I'm looking for is something that could generate a graphical tree-style map of a web pages nodes.

So essentially it could theoretically transform something like this:

<aside id="leftCol">
    <section class="container"> 
        <header class="child1">
            <hgroup>
                <h1 class="title">Demo Project</h1>
                <h3 class="subTitle">WEBSITE 2011</h3>
            </hgroup>
        </header>

        <div class="child2" id="thisDiv">
            <div class="subChild1">
                <div class="anotherChild1"></div>
                <div class="anotherChild2"></div>
                <div class="anotherChild3"></div>
            </div>

            <div class="subChild2">
                <p>Some Text</p>
            </div>   
        </div>

        <footer class="child3">                  
            <a href="#">Link to project here</a>
        </footer>
    </section>
</aside>

(This would of course be inside the HTML and BODY tags but for the sake of an example I'm going to use a snippet from my portfolio page with some generated text)

Into something like this:

Example http://www.deviantart.com/download/287437946/node_map_by_wild_fire126-d4r4sje.png

There's absolutely no design thought put into this so don't criticize it, purely for the example purpose. I made this image in photoshop quickly just to illustrate exactly what I'm talking about. All of this could be easily generated with CSS for the most part. It does not by any means have to be this graphical but for the sake of me being bored, it is.

I'm looking for a plugin or a piece of software that can do this for me. I would prefer that it would generate this map in HTML or as an image. I guess any map type would be okay as long as it would be easy to follow.

As a last resort if I can't find quite what I'm looking for I might end up just writing it myself, if that happens, I would be happy to be looking for some people to help with the coding of the plugin.

Upvotes: 3

Views: 3528

Answers (2)

Gottox
Gottox

Reputation: 710

Graphviz is a nice tool for doing such a thing.

You could use a piece of Javascript to generate a Graphviz file and generate a png with the tool.

The javascript should recursively visit all Elements and Generate unique IDs for every Element and write them out in the fairly easy to understand Graphviz format.

Here's a Bookmarklet to convert a page to the Graphviz format.

javascript:void((function() {var f = function(pid, e) { var id = "id" + Math.round(Math.random()*1000000), c = e.childNodes, r = id+'[label="'+(e.tagName ? e.tagName : e.nodeValue.replace(/[\n\r]+/g," "))+'"];\n'; for(var i = 0; i < c.length; i++) { r+=f(id, c[i]); }; if(pid) {r += pid + "->" + id + ";\n";}; return r;}; document.body.innerText = "digraph {\n" + f(false, document.getElementsByTagName("html")[0]) + "}"})())

Here's a quick workthrough to the format: http://www.orient-lodge.com/node/3408

Then generate a png file: (example works under Unix)

dot -Tpng < graph.dot > g.png

There's a Javascript Renderer for Graphviz, too. Canviz I haven't tried it yet, but looks promising.

Upvotes: 1

elclanrs
elclanrs

Reputation: 94121

You could retrieve all children of a certain element and return their tag, class, id and depth. Then you can get creative with css to create a visual tree. Something like this should work. Example at http://jsfiddle.net/elclanrs/UHbMa/.

jQuery plugin:

$.fn.buildTree = function() {
    var tree = {};
    this.find('*').andSelf().each(function(i, v) {
        var parents = $(this).parents().length - 1;
        for (var i = 0; i < parents; i++) {
            tree[v.tagName.toLowerCase()] = {
                id: v.id,
                className: v.className,
                depth: i
            }
        }
    });
    return tree;
};

And then you call it like:

var tree= $('aside').buildTree(),
    html = '';
for (tag in tree) {
    html += '<p><strong>Tag:</strong> ' + tag + 
            ' | <strong>Class:</strong> ' + tree[tag].className + 
            ' | <strong>Depth:</strong> ' + tree[tag].depth;
}
$('#tree').append(html);

Upvotes: 1

Related Questions