Visualise Drupal site in 3d using Tilt

Last week I've stumbled upon a firefox extension called Tilt which is aiming to be a DOM inspector such firebug but in 3D using WebGL. You might know that I have been trying several styles/visualizations to make the Drupal structure more readable for my workshops (Visual Drupal, isometric grids in presentations, workflows,...) and actually been trying to visualize the Drupal site using the animations on hovers to lets say highlight the regions, blocks, etc... Didn't get much far with this, so when I saw the Tilt extension I immediately tried to adjust it to what I had in my mind for long time. After tweeting about it I've got some feedback, some people were saying it is cool, but what is the usage, so let me explain some of the ideas.

The video itself illustrates some of the things:

Once you install Tilt (currently just for firefox), you can start inspecting your website in 3D mode. It goes through the DOM elements and lets you click on them, see the structure and hierarchy of the DOM and inspect one by one. The box with the code appears in the bottom right corner. That is Tilt in a nutshell.

I added a few lines of code so the Tilt does work with the classes instead of elements and created a simple module which ads classes for each of the structural bit of Drupal. Eg. tilt-region class represents region, tilt-block represents block, and so on. Then Tilt recognizes these and renders them. Simple as that it can already give some value but the question is what is that for? What value? Learning - Teaching. How many times did your client or people new to the Drupal wanted to understand how the Drupal website is structured, what bits and pieces they should interact with or where to look for template files, functionality? Even I could use that when coming to a project that has been already started some time ago. So the same way as for example themer module works, we can do this in 3D with more interactivity and better visualization, we can even render all the suggestions in the right order + preprocess/process functions that are "hidden" from you visually.

Ideal solution would be to make the Tilt extension to allow presets (where specific configuration/instructions will be stored). So not just to use it for HTML, but any other systems can benefit from such visualization, not just Drupal, but any other. Not sure my extensions coding skills will allow me to proceed with this, but maybe someone else might pick this up? :) Your thoughts and ideas how this can be used are very welcome!

I'll put my experimental code up this weekend.




Get Drupal documentation for your clients under control

My latest project Inline Manual aims to sort all the problems around end-user documentation. Forget about the screenshots, PDFs, screencasting, etc... this will save you a lot of time and money!
Visit InlineManual.com.