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.

I finished the code ages ago but held off sharing this app for a while. Since I haven’t touched it for eons it seems like a good time to finally do so. Being my first Javascript app in a long time the code is quite crufty but I suppose it’s functional.

I’m not much of an artist but feel to browse the gallery and maybe add something of your own.

Pete

Unfortunately my old blog was based on an abandoned Blogger format, so I decided to clean house and start fresh again. Stay tuned.