I finally got around to packaging up an HTML version of Rooler, which if you are not familiar with it is a tool to automatically find the bounds and dimensions of graphics. It’s a utility that I’ve been using regularly for quite a while now but finally decided this weekend to polish it just a bit and package it up. I mostly find it useful for following comps and validating UI nits.
Rooler does:
- Distance which displays the distance between items. I use this quite often when following mockups to quickly validate that my margins and paddings all add up to the specified distance.
- Bounds which measures the bounds of an item. Useful for checking the dimensions of something such as an icon. Once you have the object selected then a screenshot can be saved off with the camera button.
- Magnifier which zooms up the screen and displays the pixel color under the mouse. It also displays the current mouse position which can be re-zero’d by pressing <space> and tweaked with the arrow keys. Makes it much easier to measure tough details.
I’m really happy about how the demo pages turned out- try it out!
Basic details about the app:
Rooler itself is a Chrome application (needed to get a screenshot of the webpage). It works by taking a screenshot then analyzing the pixels to get the boundaries. The extension may prompt for access to ‘all data on all sites’ or something to that regard, but this is simply because of the screenshot functionality- the app itself runs completely localized in your browser and doesn’t send any information back.
Known issues:
- Sometimes the image being used for edge detection gets outdated, try resizing your browser just a touch to update it. I think this is a Chrome bug?
- Does not work well with pages containing WebGL.
