5 ms·

Tilt: Visualize your web page's DOM in 3D

260 points by mbrubeck 15y ago

justindz 15y ago
I'm keenly interested to see if this provides a visual indication of markup or layout clutter/complexity. That would be nice for sniffing out UI design smells, particularly in big enterprise portals. Sadly, when I launch the tool it seems to create an overlay that prevents input to the page but doesn't show anything. Not blank, just invisible. I can close the overlay and keep using the page. But, I can't see anything. Hopefully I can figure that out. I plan to use this for a side-by-side comparison of my product, Oracle web UIs (I'm scared), some nicely-designed and clean sites and some prominent web apps like Amazon or Backpack. Might be a useful tool for me on the "Marketecture" side of things.
- justindz 15y ago
  Got it working. Short answer, Intel igfx cards (aka, "work laptops") are garbage. Chrome WebGL worked, Firefox didn't. I got it working, albeit slowly, using OSMesa on Ubuntu. Marketing department power! Hope that helps someone.
  - justindz 15y ago
    And, I'll stop spamming after this, finally got it working with the same awful video card on FF on Windows. I upgraded my video card and that still didn't work, but I told it to force WebGL in the about:config. Apparently just that setting was enough. Again, hope that helps someone.
- ymir 15y ago
  I can't imagine better tool to help finding unclosed divs.
- pkteison 15y ago
  Firefox intentionally disables graphics card acceleration by default on certain video cards because they don't want to deal with the support headaches from bad drivers. https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drive... How to check your settings: http://superuser.com/questions/259502/why-is-firefox-4-not-hw-accelerated/259511#259511 http://superuser.com/questions/259502/why-is-firefox-4-not-h...
prpon 15y ago
The technology is pretty cool and all but I fail to understand why I need a 3D view of a 2D world.
- wvenable 15y ago
  The 3D dimension provides an additional data point: nesting level.
  - SystemOut 15y ago
    I have to agree. My first thought was going to be to disagree because I always just use something like view formatted source or something to look at my nesting levels within the dom but having it show nesting levels in place that has a trivial-to-digest visual effect is pretty nifty.
- rcfox 15y ago
  Putting it mathematically, non-linear problems (which are generally harder to solve) may become linear in a higher-dimensional space.
  - adw 15y ago
    Obligatory link: http://en.wikipedia.org/wiki/Kernel_trick http://en.wikipedia.org/wiki/Kernel_trick (aka: how do we make this linear classifier - typically a support-vector machine - nonlinear?)
azakai 15y ago
Wow, this is very cool, and very useful as well!
viggity 15y ago
This is actually very useful, Snoop is a utility for debugging the WPF visual tree and it has had this feature for several years now. I don't know if snoop was the first to have it or not though. http://snoopwpf.codeplex.com/documentation http://snoopwpf.codeplex.com/documentation (scroll to the bottom)
- bokchoi 15y ago
  Snoop is an amazing utility and I used it quite often when I was coding WPF.
  - spiralganglion 15y ago
    Their logo is.. quite something. I'm going to guess that it's developer humour/culture, and not just an exercise in poor taste. I mean, I really want to like it, because it's hilarious and audacious. But then I feel a bit base. Oh, petty conundrum. Then again, obsessing over logos is a significant part of our trade.
    - deleted 15y ago
      [deleted]
- nitrogen 15y ago
  I don't know if snoop was the first to have it or not though. I remember seeing a GIMP plugin a long time ago that would render a 3D stack of the layers in an image, but I can't remember the name of the plugin or think of appropriate search terms to find it. This isn't precisely the same thing, but the plugin, combined with the 3D filesystem view in fsv (as seen in Jurassic Park), influenced these visualization tools. Or, maybe they were all inspired by some much-earlier tool that nobody remembers.
bwm 15y ago
This is very cool. I really like the effort Mozilla has been putting into showing people what can be done with modern web technologies recently. They've got a whole bunch of other cool demos at demos.mozilla.org
jsavimbi 15y ago
This is an awesome tool. I can't even tell you how much debugging time this is going to save me. Said time won't be reflected in my estimates or in my billing rate, of course, but at least I'll have more time to work on my RSS feed.
systemizer 15y ago
huzzah! http://mcqueen.mit.edu/tilt.html http://mcqueen.mit.edu/tilt.html
deleted 15y ago
[deleted]

260 points by mbrubeck 15y ago

I'm keenly interested to see if this provides a visual indication of markup or layout clutter/complexity. That would be nice for sniffing out UI design smells, particularly in big enterprise portals. Sadly, when I launch the tool it seems to create an overlay that prevents input to the page but doesn't show anything. Not blank, just invisible. I can close the overlay and keep using the page. But, I can't see anything. Hopefully I can figure that out. I plan to use this for a side-by-side comparison of my product, Oracle web UIs (I'm scared), some nicely-designed and clean sites and some prominent web apps like Amazon or Backpack. Might be a useful tool for me on the "Marketecture" side of things.

justindz 15y ago
Got it working. Short answer, Intel igfx cards (aka, "work laptops") are garbage. Chrome WebGL worked, Firefox didn't. I got it working, albeit slowly, using OSMesa on Ubuntu. Marketing department power! Hope that helps someone.
- justindz 15y ago
  And, I'll stop spamming after this, finally got it working with the same awful video card on FF on Windows. I upgraded my video card and that still didn't work, but I told it to force WebGL in the about:config. Apparently just that setting was enough. Again, hope that helps someone.
ymir 15y ago
I can't imagine better tool to help finding unclosed divs.
pkteison 15y ago
Firefox intentionally disables graphics card acceleration by default on certain video cards because they don't want to deal with the support headaches from bad drivers. https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drive... How to check your settings: http://superuser.com/questions/259502/why-is-firefox-4-not-hw-accelerated/259511#259511 http://superuser.com/questions/259502/why-is-firefox-4-not-h...

prpon 15y ago

The technology is pretty cool and all but I fail to understand why I need a 3D view of a 2D world.

wvenable 15y ago
The 3D dimension provides an additional data point: nesting level.
- SystemOut 15y ago
  I have to agree. My first thought was going to be to disagree because I always just use something like view formatted source or something to look at my nesting levels within the dom but having it show nesting levels in place that has a trivial-to-digest visual effect is pretty nifty.
rcfox 15y ago
Putting it mathematically, non-linear problems (which are generally harder to solve) may become linear in a higher-dimensional space.
- adw 15y ago
  Obligatory link: http://en.wikipedia.org/wiki/Kernel_trick http://en.wikipedia.org/wiki/Kernel_trick (aka: how do we make this linear classifier - typically a support-vector machine - nonlinear?)

azakai 15y ago

Wow, this is very cool, and very useful as well!

viggity 15y ago

This is actually very useful, Snoop is a utility for debugging the WPF visual tree and it has had this feature for several years now. I don't know if snoop was the first to have it or not though. http://snoopwpf.codeplex.com/documentation http://snoopwpf.codeplex.com/documentation (scroll to the bottom)

bokchoi 15y ago
Snoop is an amazing utility and I used it quite often when I was coding WPF.
- spiralganglion 15y ago
  Their logo is.. quite something. I'm going to guess that it's developer humour/culture, and not just an exercise in poor taste. I mean, I really want to like it, because it's hilarious and audacious. But then I feel a bit base. Oh, petty conundrum. Then again, obsessing over logos is a significant part of our trade.
  - deleted 15y ago
    [deleted]
nitrogen 15y ago
I don't know if snoop was the first to have it or not though. I remember seeing a GIMP plugin a long time ago that would render a 3D stack of the layers in an image, but I can't remember the name of the plugin or think of appropriate search terms to find it. This isn't precisely the same thing, but the plugin, combined with the 3D filesystem view in fsv (as seen in Jurassic Park), influenced these visualization tools. Or, maybe they were all inspired by some much-earlier tool that nobody remembers.

bwm 15y ago

This is very cool. I really like the effort Mozilla has been putting into showing people what can be done with modern web technologies recently. They've got a whole bunch of other cool demos at demos.mozilla.org

jsavimbi 15y ago

This is an awesome tool. I can't even tell you how much debugging time this is going to save me. Said time won't be reflected in my estimates or in my billing rate, of course, but at least I'll have more time to work on my RSS feed.

systemizer 15y ago

huzzah! http://mcqueen.mit.edu/tilt.html http://mcqueen.mit.edu/tilt.html

deleted 15y ago

[deleted]