Use it now!

Store the bookmarklet from this page and load OverlayMe on top of any web page!

If you just want download the compiled, minified archive: overlay_me.min.js (CSS embedded!)

note: overlay_me.js and overlay_me.css are both generated unminified archives, original source code is in javascripts/ and stylesheets/ folders

Screenshot

Screenshot

Features

  • overlay images over a web page saving their position/opacity locally (using HTML5 localStorage)
    • images can be loaded from a project local directory (see Project base use)
    • an image can be added on the fly with its absolute url
  • bring back your HTML on top of the overlays
    • control the opacity of the page content
    • keep on playing with the CSS while having with a visual overlay
  • addon layout_resizer, to switch between pre-recorded devices format

Why

The purpose of this tool is to help the developer to meet designers requirements by overlaying images on the page.

We were struggling to see the gap between designers photoshop files and our HTML/CSS implementation, the best way to figure it out was to load their rendered work in the page and play with opacity to see the differences, that's what this tool facilitate.

Todo

  • allow local image uploading (hosting on amazon s3 ?), makiapp.com does it!
  • overlays
    • make a cycling system, by click or keypress, to iterate through overlays one by one
    • images sub-sets (sub-directories) should appear as nestable blocks
  • write some tests !!!

Usage

  • You can use this tool on the go, over any site, via the bookmarket

  • If you want to include it in a non-Ruby project, use the precompiled/minified script (overlay_me.min.js)

  • And if you're using Ruby, install the gem :)

if using bundler:

#Gemfile

gem "overlay_me"

Load the script at the end of your body tag

under a rails app:

= javascript_include_tag 'overlay_me/overlay_me.min.js'

or in a simpler project, (we are using middleman)

%script{ :src => '/javascripts/overlay_me/overlay_me.min.js', :type => 'text/javascript', :charset => 'utf-8' }

Extended use - share overlay images to your work team, keep images sets per project

By default the script will try to load the list of images from /overlay_images

List your images in JSON, simply:

[
  "/images/overlays/Home_1024r_1.png",
  "/images/overlays/Home_1100r_1.jpg",
  "/images/overlays/Home_1300r_1.png",
  "/images/overlays/Home_320r_1.jpg",
  "/images/overlays/Home_480r_1.png",
  "/images/overlays/Home_720r_1.png",
  "/images/overlays/Home_768r_1.png"
]

If you're using the gem, I made a simple Rack app to build that JSON list for you

Here is how to initialise the path and the feed route

using rails

#config/initializers/overlay_me.rb

if defined?(OverlayMe)
  OverlayMe.root_dir = Dir[Rails.root.join("public")].to_s
  OverlayMe.overlays_directory = 'images/overlays' 
end

#config/routes.rb

if ["development", "test"].include? Rails.env
  match "/overlay_images" => OverlayMe::App
end

using middleman

#config.rb:

OverlayMe.root_dir = Dir.pwd + '/source'
OverlayMe.overlays_directory = 'images/overlays'

map "/overlay_images" do
  run OverlayMe::App
end

Plug on!

You can add some app specific menu for specific project.. Have a look at layout_resizer.coffee addon to have a quick view of how to use OverlayMe.Menu and OverlayMe.MenuItem

= javascript_include_tag 'overlay_me/addons/layout_resizer.js'

Known problems

  • you can't find the panel? it's probably hidden aside (previous bigger screen location) or hidden (press 'h')
  • you see the overlay but can't drag it? the 'Content on Top' option is probably on (press 'c')

Author

  • Joseph Boiteau - FrontFoot Media Solutions

Contributors

  • Rufus Post - former workmate at the origin of the ovelaying concept
  • Lachlan Sylvester - Ruby advisor - Frontfoot Media Solutions
  • Dan Smith - User Experience Strategist and Califloridian - FrontFoot Media Solutions