Monday, February 22, 2010

Windows-based On Screen Ruler Reviews: Pixel Ruler and Window Ruler

When you're trying to size elements for a template-based CMS, third party hosted web-app, or any system that wraps or otherwise controls your layout (like Blogger), having an on-screen ruler is invaluable.

Mioplanet Pixel Ruler v4.0

Note: Jan 24, 2014 The mioplanet website is no more. Just Google/Bing to find pixel ruler. Lots of reputable software repeater sites carry their products including CNET

I have used Pixel Ruler from mioplanet for a few years now. As you mouse around a white box pops up with the position of your cursor in relation to the ruler ("49" in the image above.) A simple control on the left allows you to toggle between horizontal and vertical ruler position. Pixel Ruler does the job, but lacks nice-to-haves like snapping to on-screen objects, transparency and even marking positions on the ruler itself.

Pixel Ruler is free, but as of v4.0, a nag will appear at the 50th use to contribute $5.

Hexagora Window Ruler v1.1 r9

A few months ago, I rebuilt my laptop with Windows 7 and started reloading all of my tools. Since Pixel Ruler was several years old and essentially unchanged, I Binged around the internet in hopes that someone filled the feature vacuum left by Mioplanet. Enter Hexagora. The Hexagora "Window Ruler" is a quantum leap ahead of Pixel Ruler.

Window Ruler shows horizontal and vertical measurements simultaneously. While it does not show current mouse position, it allows quick resizing by dragging the ruler ends.
Fig 1. The upper left hand corner is left open for easy alignment of partially covered objects.

In a clever move, the join between horizontal and vertical rulers not squared (Fig 1). The missing right triangle coupled with the transparency make it very easy to line the ruler up with objects that are partially covered. White dashes complete the bottom and right legs of the rectangle. Window Ruler also has a handy snap feature. If you drag the red ball inside a window, the ruler will snap into position, automatically aligned with the window's edges.

A tray icon allows for quick activation/deactivation of the ruler with a left click. Right clicking opens up a menu of preset ruler sizes and quite possible the coolest feature - a screen shot. Window Ruler can screen capture the region immediately inside the ruler.

As with any application, there is room for improvement. The Pixel Ruler style mouse markers along the ruler would allow for quick mouse-point measurements. As it is, we have to resize the ruler to measure an object precisely. The measurement values inexplicably show decimal values to the hundredths when measuring pixels. Also, the tiny black numbers tend to disappear in the lower right hand corner. An option to move the numbers to the top of the horizontal ruler would be nice. Come to think of it, a few display options for the dashed lines and measurement values would be nice. 1) Turn off the dashed line and values, 2) show dashed line and values, 3) draw intersecting lines from each corner of the rectangle, and put the measurement values to the right of the intersection (see Fig 2). Finally, the screen capture feature grabs the dashed lines and the measurement values. I should be able to turn this off and capture image beneath the ruler only.


Fig 2. My concept of an alternate height x width display for Window Ruler

As it is, Window Ruler is a fantastic product. If you need quick on-screen measurements, it is a ridiculously convenient tool.

I am in no way affiliated with either Mioplanet, Hexagora or any other business with an interest in these companies or these products. In fact, I am not compensated in any way for my blog. 

Thursday, February 18, 2010

Cut and Paste Photos into Blogger (and others) with PicturePaste

The Joy of Disseminating Knowledge
I really enjoy writing tutorials. There is no better way to cement a new skill than by presenting it to others. Outlook has been a fantastic tool for composing these tutorials because I could insert and position screen shots as I went along; but it fails horribly as a means of distribution. You have to send to a specific audience and hope that the recipients read, retain and refer to it later.

I started this blog almost two years ago because I wanted my tech tutorials to reach a broader audience. I was very disappointed to see how difficult it was to add screen shots to a post! The entry on July 16, 2008 regarding database duplication took HOURS to compose even though I was building that blog entry from an Outlook email that I had written.

The Pain of Uploading Images
I had to copy, reformat, and save the images, then upload them to my site and code the images into the blog. If you visit the post, you’ll see that the images are cut off on the right side because they are slightly larger than 400px.

I was instantly disillusioned and abandoned the blog after a few more posts.

Still Can't Paste Images From the Clipboard
It is now February and I see that Blogger's image upload still does not present a way to paste an image from the clipboard into the editor. Surely others are as frustrated by this as I am! I'm going to Bing around to see if I can find a solution.

I truly hope that this is my answer. I just downloaded the trial version of PicturePaste. My first attempt to use it follows:

This is a screen capture of the PicturePaste website made with TechSmith Snagit. (I love the torn page edges ;)
It works! Now I am curious to know how they are doing this. I am familiar with the nifty FireFox trick that allows you to paste base64 images directly into the body of an HTML page, but this is not supported in IE... I have seen a solution for IE, but it involves PHP, so I'm sure that is not in play with PicturePaste.

At first blush, PicturePaste is ridiculously easy to use. If this is a cross-browser solution, I'll be bouncing off the walls! If not, I'll post a quick wrap-up and will keep looking.

---- UPDATE #1 ----

Awesome! The images work with every browser! When you copy an image to your clipboard, it appears in the PicturePaste window.
As soon as you click the [Convert] button, it uploads the image to a spot in the Amazon cloud. Then just drag the red rectangle to your post and there it is!

Your PicturePaste is assigned a unique user ID that serves as the folder name, and the image is given a unique name.

The trial version is free, so definitely give this a try! The trial expires after 50 images, which is more than enough to see how cool PicturePaste really is. At the time of this writing, the cost is US$29.95. Paypal is accepted.

According to the PicturePaste FAQ, the drag and drop feature does not work in Opera. There is also a bug with FireFox 3.5 and Yahoo! mail that makes PicturePaste behave unpredictably. Mac browsers do not support the drag and drop capability, so this is for Windows only.

Since rah-rah posts like this whip internet cynics into a frenzy, I can truthfully say that I am not connected to PicturePaste in any way. In fact, I hadn't even heard of the product until a Bing search brought it into view after I was several paragraphs into this post.

---- UPDATE #2 ----
I found a pretty cool feature. I noticed a 'maximum size' option in the screen shot above. I forgot that Blogger needs images 400px wide or smaller. The max is set to 500px by default so my first screen shot was cut off on the right. A quick change to 400 and the image automatically shrunk to the right size. Drag, drop, done. This thing is so cool!

---- UPDATE #3 ----
I wasn't expecting this... Look at this screen shot of Word below. I highlighted and copied the text so I could paste it into Blogger, and look what happened inside the PicturePaste window! My text is in there!

I did a few tests and sure enough, it preserves font size and style integrity. I am really blown away by this little app!