keystone_image

Description

The Keystone Image jQuery plugin overlays a semi-transparent wireframe/design image over everything in the web browser viewport. Handy when converting a PSD from a graphic designer into a webpage to ensure pixel perfect layouts.

The keystone image persists in localStorage (one image per domain). No need to re-add the image after closing the tab/browser.

Installation

Add this line to your application's Gemfile:

gem 'keystone_image'

Add this line to your application.html.erb to load up the relevant javascripts:

<% if Rails.env == 'development' %>
  <%= keystone_image %>
<% end %>

The keystone_image view helper takes options to override the default settings listed at the top of jquery.keystone-image.js:

<%= keystone_image 'toogle_overlay_keycode' => 49, 'overlay_opacity' => 0.2 %>

Usage

• in the webpage, press 'alt/option + 2' to toggle the dropbox - drag and drop any image into it
• press 'alt/option + 1' to toggle keystone image on/off
• to move the keystone image, hold alt + one of 3/4/5/6 keys - hold shift to move faster
• alt + 7 re-centers the keystone image

Limitations

Do not access your webpage via the file:// protocol or you might not be able to drag/drop images due to cross domain issues.

Compatibility

Because of the usage of HTML5 Local Storage, native drag/drop, and File API, only modern browsers are supported. Known working with:

• jQuery 1.6.2
• Firefox 6.0
• Chrome 13.0.782.112
• Safari 6.0.2 (8536.26.17)
• IE10

Similar in-browser plugins

• Pixel Perfect Firefox Extension (http://www.pixelperfectplugin.com/)
• WebDeveloper Image Overlay for Chrome (https://chrome.google.com/webstore/detail/olfihdjffmgfmmcdodcgciejhnhibalg)