bkase/fileView.js

## fileView.js
// Basically a combination of the answers from here: http://stackoverflow.com/questions/7414984/how-could-i-display-x-y-coordinates-on-image-in-real-time-to-the-user-when-the
$(function() {

  var tooltip = $( '<div id="coords" style="position: absolute; background-color: white;">' ).appendTo( 'body' )[0];
  var imgPos = [];

  $( '#the_image' ).
      each(function () {
          imgPos = [
              $(this).offset().left,
              $(this).offset().top,
              $(this).offset().left + $(this).outerWidth(),
              $(this).offset().top + $(this).outerHeight()
          ];

          var pos = $( this ).position(),
              top = pos.top,
              left = pos.left,
              width = $( this ).width(),
              height = $( this ).height();

          $( this ).
              mousemove(function ( e ) {
                  var x, y;

                  x = (e.pageX-imgPos[0]);
                  y = (e.pageY-imgPos[1]);

                  console.log(x, y, e.clientX - 30, e.clientY - 30);

                  $( tooltip ).text( x + ', ' + y ).css({
                      left: e.clientX - 30,
                      top: e.clientY - 30
                  }).show();
              }).
              mouseleave(function () {
                  $( tooltip ).hide();
              });
      });
});

## imshow
#!/bin/bash

F=file://`realpath $1`
OUT=/tmp/.view.html

echo "<html>" > $OUT
echo "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>" >> $OUT
echo "<script src=\"/Users/bkase/bin/fileView.js\"></script>" >> $OUT
echo "<body>" >> $OUT
echo "<img id='the_image' src=\"$F\" />" >> $OUT
echo "</body>" >> $OUT
echo "</html>" >> $OUT

open $OUT
	// Basically a combination of the answers from here: http://stackoverflow.com/questions/7414984/how-could-i-display-x-y-coordinates-on-image-in-real-time-to-the-user-when-the
	$(function() {

	var tooltip = $( '<div id="coords" style="position: absolute; background-color: white;">' ).appendTo( 'body' )[0];
	var imgPos = [];

	$( '#the_image' ).
	each(function () {
	imgPos = [
	$(this).offset().left,
	$(this).offset().top,
	$(this).offset().left + $(this).outerWidth(),
	$(this).offset().top + $(this).outerHeight()
	];

	var pos = $( this ).position(),
	top = pos.top,
	left = pos.left,
	width = $( this ).width(),
	height = $( this ).height();

	$( this ).
	mousemove(function ( e ) {
	var x, y;

	x = (e.pageX-imgPos[0]);
	y = (e.pageY-imgPos[1]);

	console.log(x, y, e.clientX - 30, e.clientY - 30);

	$( tooltip ).text( x + ', ' + y ).css({
	left: e.clientX - 30,
	top: e.clientY - 30
	}).show();
	}).
	mouseleave(function () {
	$( tooltip ).hide();
	});
	});
	});
	#!/bin/bash

	F=file://`realpath $1`
	OUT=/tmp/.view.html

	echo "<html>" > $OUT
	echo "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>" >> $OUT
	echo "<script src=\"/Users/bkase/bin/fileView.js\"></script>" >> $OUT
	echo "<body>" >> $OUT
	echo "<img id='the_image' src=\"$F\" />" >> $OUT
	echo "</body>" >> $OUT
	echo "</html>" >> $OUT

	open $OUT