HB Blogside

Web Calipers – Part 2 – How To

Gery Teague Web Developer
Gery Teague Web Developer

This is the second post in a three part series. Part 1 went over the history of the purpose of Calipers. Part 3 goes over the techniques and technologies that went into creating Web Calipers.

Use But Don’t Install

With most things you use on your computer, you have to install it to use it. But not the Web Calipers. You don’t install them, you simply bookmark them. Here’s how in two quick steps.

Step 1: Go To The Bookmarking Page

Open your browser and go to: 
http://goo.gl/BcIP87

Step 2: Bookmark the Web Calipers

Now drag the link to your bookmarks bar. Done! Now on any page you want to visit you can click the bookmark you just made and Web Calipers are ready to go!

Additional Steps For More Functionality

Step 0: Sharing Across Browsers

If you would like to have the Web Calipers shared across your browsers wherever you are, you’ll need to add a “step 0” that occurs before the other steps. You’ll need to log in to your browser. Once logged into your browser, you can follow steps 1 and 2 above and now you’ll have it on this browser on every computer you log into. Below are instructions for how to do this in Chrome.

  1. In the top-right corner of the browser window, click the button with your name or email address.
  2. Click Sign in to Chrome.
  3. Sign in with your Google Account.
  4. You’ll see a welcome note with your name. Click Settings to customize your sync settings. This lets you choose what information will be shared across other devices where you’re signed into Chrome.

More information can be found here: https://support.google.com/chrome/answer/185277?hl=en

Step 3: Using On Your Mobile Device

You will need to follow steps zero through two above. Once this is done, you can use Web Calipers in your mobile device’s browser by doing the following:

  • On your desktop rename the “hb design – web calipers” to something original like “CALIPERS”
  • On your mobile device go to a page you want to use the Web Calipers on
  • In your address bar begin typing “CALIPERS”. You will see the bookmark appear before you even finish typing it.
  • Tap on “CALIPERS”. This will open the Web Calipers up on the mobile page you are viewing.

Keyboard Shortcuts

Rotate : R

The Web Calipers will begin in landscape mode.

web-calipers-initial

 

To rotate the Web Calipers into portrait mode click the “R” button or click the “R” key.

web-calipers-vertical

 

Color : C and Shift + C

The Web Calipers originally show in HB Design’s colors. To change the colors you can press the “C” key and it will change the left arm’s colors.

web-calipers-color1

To change the color on the right arm press the “Shift” + “C” keys.

web-calipers-color2

Opacity : O and Shift + O

The Web Calipers show in 100% opacity to begin with. Sometimes it’s helpful to see through the calipers in order to be more precise. To do this you can press the “Shift” + “O” keys to move the opacity down until you reach 10% and the “O” key to move the opacity back up to 100%.

web-calipers-opacity

 

Movement : Drag or ← or → or ↑ or ↓

The Web Calipers can be drug either with your mouse on your desktop browser or with your finger on touch enabled screens such as mobile devices. This is a very fast way to move the Web Calipers around. For more precision you can use the arrow keys. Each time you press the arrow keys they move the Web Calipers as a whole around the screen by one pixel allowing for very precise positioning.

Measuring : Drag or “Shift” + ← or → or ↑ or ↓

The Web Calipers can be used to measure by dragging with the mouse or touch via the right arm. Drag away from the left arm to increase the measurement and drag towards the left arm to decrease. This is very fast but for more precision use “Shift” + the arrow keys. This will allow you to move the right arm by one pixel each press, giving very precise measurements.

Close : X

To close the Web Calipers, simply click on the “X” button.

We hope you’ve found these instructions helpful. If you have any feedback or bugs you’d like to report please let us know. To see the history of calipers and why we use them, please visit our first post in the series here. If you would like to see some of the techniques and technology that went into creating the Web Calipers please visit the third post in the series here.

Thanks,
Gery

This entry was posted in HB Design, Technology, Uncategorized, Web Design and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published.




1 × four =