Version 0.82 released

Download: Tilt.xpi
August was a busy month. Tilt development was focused on finishing the user interface and adding an improved user experience. We also added more developer-oriented features and functionality.

The most interesting addition was the “minidom” — a tree view representation in the lower left, showing a minimalistic snapshot of the document object model of a webpage. Each node is assigned a color associated by tag name (blue for div, green for span etc.) and represented as a strip, along with visual markers for it’s id and/or class if available. Each one of these strips also has a width relative to the type, id and class name length for the respective element. The coloring for individual elements is easily changeable using a color picker.

Clicking a strip in the tree view (or directly a node on the 3D document visualization mesh) now also highlights the node with a colored quad. This behavior is a good way to relate with the Style Inspector, and a more unified interaction between them is planned in the future (along with other developer tools like Style Editor).

All of these additions make it easier to analyze the bounds of each node, along with the html, computed css and attributes (which are available in the popup panel editor).

A requested feature was the ability to export the visualization as a 3D mesh, to be used in games or other 3D editors. In version 0.82, Tilt adds the ability to export to .obj, along with a material .mtl file and a .png texture. The .obj open format ensures the fact that the mesh can be opened with almost any editor, from Blender to Maya. Here’s a ray-traced rendering of in Blender:

The exported .png can also be used to create full screenshots of webpages, as it saves the visible part of a document along with it’s “offscreen” elements.

The three months dedicated to developing Tilt in the Google Summer of Code timeframe have finished, but that doesn’t mean an ending for improving this extension. It’s worth mentioning that version 0.82 of Tilt is now waiting approval to be public in and a great thing to know that, already, even though Tilt isn’t public yet, there are already over 8,000 users.

Implementing more and more features is a sure thing in the near future. The nearest milestone (0.9) will add enhancements like: highlighting and scrolling a selected element in the “minidom”, making a selected strip center/zoom the node stack in the visualization, adding controls to move up/down the dom tree in the editor panel popup, and adding more functionality for the user interface. See all the TODOs and the planned features for more details. You can try some of these additions in the beta from the r90 branch on github.

The Conversation {10 comments}

  1. mb {Wednesday October 12, 2011 @ 11:28 pm}

    Nice application.
    I would not have bet on WebGL capabilities ;)…
    Tilt works well.

    A problem though: maybe you’ll have to discover how to disable “gesture” from other extensions (I have FireGestures) to prevent border effect when one uses the right mouse button to pan the model.

    Congratulations !

  2. Nikolas {Sunday October 30, 2011 @ 9:14 pm}

    is there another way to start it than CTRL+Shift+M? This command opens my cookie management extension. Would be great, if you could add a toolbar icon or right-click item.

  3. Victor Porof {Monday October 31, 2011 @ 9:29 am}

    Sure! Go to the Options menu from Tilt and you can change these settings there.

  4. Nikolas {Monday October 31, 2011 @ 8:31 pm}

    When I go to Tools->Add-ons I only see “Disable” and “Remove” next to Tilt. Also a click on “More” doesn’t reveal a “Preferences” button or something else.
    When I press CTRL+Shift+M I *only* get the context menu for my cookie extension. Tilt doesn’t open. WebGL is activated and should work.

  5. Nikolas {Monday October 31, 2011 @ 8:35 pm}

    Now it works. I changed the option in about:config

  6. Victor Porof {Monday October 31, 2011 @ 8:55 pm}

    Open Tilt. You’ll see a “Options” menu item in the top right, next to Exit. Click there, and you’ll see a window allowing you to change the hotkey.

  7. Nikolas {Monday October 31, 2011 @ 10:59 pm}

    It didn’t open at all until I changed the shortcut in about:config

  8. Victor Porof {Monday October 31, 2011 @ 11:55 pm}

    Firefox App Menu -> Web Developer -> Tilt (on Windows)
    Tools -> Web Developer -> Tilt (on OS X)

  9. H3g3m0n {Saturday November 5, 2011 @ 8:35 am}

    You know it would be an interesting idea to have a ‘depth’ parameter in HTML5/CSS3.

    It would allow 3D webpages on stereoscopic 3D monitors without requiring all of WebGL.

    Rendering a 3D webpage in a 3D environment such as a game (think of the menu system used in Deadspace).

    Could also be used for parallax scrolling or something similar (perhaps with headtracking).

  10. Robert Myers {Thursday February 2, 2012 @ 5:41 pm}

    I did install tilt but i do not see and icon for it or how to get in it
    can you show me how to get the 3D

Sorry, comments for this entry are closed at this time.