http://www.perlmonks.org?node_id=998923


in reply to Challenge: Dumping trees.

Hello BrowserUK.

I know this is not terminal one but html output is handy for me. 

#!/usr/bin/perl
#HTML version
use strict;use warnings;
use ArrayRef2HTMLTree;
my $t=[
    [
         [[[[["a", "b"], "c"], ["d", "e"]], [[["f", "g"], "h"], [["i",
+ "j"], ["k", ["l", "m"]]]]],
                    ["n", [[["o", "p"], "q"], ["r", "s"]]]], ["t", ["u
+", "v"]]
                        ],
                            [["w", ["x", "y"]], "z"]
    ];

my $ht = ArrayRef2HTMLTree->new(font_size=>'8pt',line_height=>'10px');
print $ht->to_html($t);

[download]
And my package. 
#
package ArrayRef2HTMLTree;
use strict; use warnings;
our $HTML;
sub new{
    my $class=shift;
    my %args=@_;
                    
    $args{line_height}='10px' if(! exists $args{line_height});
    $args{font_size}='8pt' if(! exists $args{font_size});
    return bless \%args ,$class;
}
sub to_html{
    my $self=shift;
    my $t=shift;

    my $tree=join('', '<ul class="tree">' , "\n" , traverse($t,0) , "\
+n", '</ul>', "\n");
    my $html=$HTML;
    $html =~ s/#TREE#/$tree/s;
    $html =~ s/#LINE-HEIGHT#/$self->{line_height}/s;
    $html =~ s/#FONT-SIZE#/$self->{font_size}/s;

    return $html;
}
sub traverse {
    my ($t,$depth)=@_;
    my $tab="\t"x$depth;
    if (ref($t) eq 'ARRAY'){
        return 
            $tab , "<li>($depth)<ul>" , "\n" ,
            (map{ traverse($_,$depth+1) } @$t) ,
            $tab, "</ul></li>" , "\n";
    } else {
        return "$tab<li>$t</li>\n";
    }
}

$HTML=<<'HTML';
<html><head><style>
body{
    background-color: #FFFFFF; /*&#30333;*/
}
ul.tree, ul.tree ul{
    list-style-type: none;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEA
+AAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXB
    padding:0;
    margin:0;
}
ul.tree ul{
    margin-left: 10px;
    border: lightgreen 0px solid;
}
ul.tree li{
    margin:0px;
    padding: 0 10px;
    border: green 0px solid;
    line-height: #LINE-HEIGHT#;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgA
+AAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAA
    color: #696969;
    font-size: #FONT-SIZE#;
}
ul.tree li:last-child{
    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
+AAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2
}
</style></head>
<body>
#TREE#
</body>
</html>
HTML

1;

[download]
regards.

In Section Meditations