master

分支 (1)

管理

管理

master

dimensions
/
index.html

<!doctype html>
<meta charset="utf-8">
<title>Dimensions Browser Extension</title>
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/baocaagndhipibgklemoalmkljaimfdj">

<header>
  <h1><img src="extension/images/icon48.png" srcset="extension/images/icon128.png 2x" width="48" height="48"><span class="h1">Dimensions</span></h1>
  <h2><span class="h2">Chrome Browser Extension</span></h2>
  <a href="https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj" class="button invisible"><img src="img/chrome-icon.png" srcset="img/chrome-icon@2x.png" width="20" height="20"> Install from Chrome Webstore</a>
</header>

<div class="main container">
  <div class="columns">
    <div class="column">
      <img src="img/search.svg">
      <h2>Images &amp; HTML Elements</h2>
      <p>Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.</p>
    </div>
    <div class="column">
      <img src="img/files.svg">
      <h2>Mockups</h2>
      <p>Your designer handed you mockups as PNGs or JPEGs? Just drop them into Chrome, activate Dimensions and start measuring.</p>
    </div>
    <div class="column">
      <img src="img/keyboard-shortcut.svg">
      <h2>Keyboard Shortcut</h2>
      <p>For the best experience set a keyboard shortcut in the chrome setting at the end of the extensions list to quickly enable and disable Dimensions.</p>
    </div>
    <div class="column">
      <img src="img/area.svg">
      <h2>Area Boundaries</h2>
      <p>Wanna get the radius of a circle? Is text standing in your way? Press <kbd>Alt</kbd> to measure the dimensions of a connected area. Try it out!</p>
    </div>
    <div class="column">
      <img src="img/open-source.svg">
      <h2>Open Source</h2>
      <p>Dimensions is Open Source and hosted on Github. Want to port it to Firefox? Go ahead and fork it. Pull requests are welcomed!</p>
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <div>
      Made in Berlin in 2014-2016 by Felix Niklas <a href="http://www.twitter.com/mrflix" target="_blank">@mrflix</a>
    </div>
    <ul>
      <li><a href="https://github.com/mrflix/dimensions">Github Project</a>
      <li><a href="https://github.com/mrflix/dimensions/issues">Issues</a>
      <li><a href="https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj">Chrome Webstore</a>
    </ul>
  </div>
</footer>

<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://felixniklas.de/piwik/";
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "1"]);
    var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
    g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);
  })();
</script>

<script>

var favicon = document.querySelector('link[rel="shortcut icon"]');
var holder = document.querySelector('header');
var threshold = 6;
var data, width, height;
var is_firefox = /firefox/i.test(navigator.userAgent);
var virgin = true;
var worker;
var isTouch = 'ontouchstart' in window;
var canvas, ctx;
var inputX, inputY;
var altKeyWasPressed = false;

if(isTouch)
  holder.classList.add('touch');

var images = [];
var loadedImages;

// prefetch header images for the Dimensions canvas

function render(){
  loadedImages = 0;
  var sources = ['img/header.svg'];
  var imgs = holder.querySelectorAll('img:not(.invisible)');

  for(var i=0; i<imgs.length; i++)
    sources.push(imgs[i].src);

  sources.forEach(function(src, i){
    var image = new Image();
    image.onload = function(){
      images[i] = this;

      if(++loadedImages == sources.length)
        drawCanvas();
    };
    image.src = src;
  });
}

function storeInputPos(event){
  event.preventDefault();

  if(virgin){
    virgin = false;
    favicon.href = 'favicon_active.ico';
  }

  if(event.touches){
    inputX = event.touches[0].pageX;
    inputY = event.touches[0].pageY;
  } else {
    inputX = event.pageX;
    inputY = event.pageY;
  }

  sendToWorker(event);
}

function sendToWorker(event){
  worker.postMessage({
    type: event.altKey ? 'area' : 'position',
    x: inputX,
    y: inputY
  });
}

function removeDimensions(){
  var dimensions = holder.querySelector('.dimensions');
  dimensions && holder.removeChild(dimensions);
}

//
// showDistances
// =============
//
// renders the visualisation of the measured distances
//

function showDistances(distances){
  removeDimensions();

  if(!distances)
    return;

  var measureWidth = distances.left + distances.right;
  var measureHeight = distances.top + distances.bottom;
  var textWidth = 6 + 7 * measureWidth.toString().length;
  var textHeight = 20;
  var xTextStart = 14;
  var yTextStart = 9;

  var dimensions = document.createElement('div');
  dimensions.className = 'dimensions';
  dimensions.style.left = distances.x + "px";
  dimensions.style.top = distances.y + "px";

  var xAxis = document.createElement('div');
  xAxis.className = 'x axis';
  xAxis.style.left = -distances.left + "px";
  xAxis.style.width = (distances.left + distances.right) + "px";
  dimensions.appendChild(xAxis);

  var yAxis = document.createElement('div');
  yAxis.className = 'y axis';
  yAxis.style.top = -distances.top + "px";
  yAxis.style.height = (distances.top + distances.bottom) + "px";
  dimensions.appendChild(yAxis);

  var tooltip = document.createElement('div');
  tooltip.className = 'tooltip';
  // tooltip.style.width = textWidth + "px";
  tooltip.textContent = (measureWidth+1) +" x "+ (measureHeight+1);
  dimensions.appendChild(tooltip);

  var tooltipY = document.createElement('div');
  tooltipY.className = 'tooltip y';
  tooltipY.textContent = measureHeight;

  holder.appendChild(dimensions);
}


//
// drawCanvas
// ----------
//
// responsible to draw the objects onto the canvas
//

function drawCanvas(){
  canvas = document.createElement('canvas');
  ctx = canvas.getContext('2d');

  // adjust the canvas size to the image size
  width = canvas.width = holder.clientWidth;
  height = canvas.height = holder.clientHeight;

  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, width, height);

  // draw the background
  var background = images.shift();
  var sx = Math.round((background.width - width)/2);
  var sy = Math.round((background.height - height)/2);
  ctx.drawImage(background, sx, sy, width, height, 0, 0, width, height);

  // draw images
  for(var index in images){
    var src = images[index].src.slice( images[index].src.lastIndexOf('/') + 1, images[index].src.lastIndexOf('.') );
    var el = holder.querySelector('img[src*='+ src +']');
    var pos = el.getBoundingClientRect();
    ctx.drawImage(images[index], pos.left, scrollY+pos.top, el.clientWidth, el.clientHeight);
  }

  // draw install button
  var installBtn = holder.querySelector('.button');
  var btnPos = installBtn.getBoundingClientRect();
  ctx.fillStyle = '#444';

  roundedRect(ctx, btnPos.left, scrollY+btnPos.top, installBtn.offsetWidth, installBtn.offsetHeight, 3);


  // place the headlines
  ['.h1', '.h2'].forEach(function(selector){
    var el = holder.querySelector(selector);
    var pos = el.getBoundingClientRect();
    var style = getComputedStyle(el);
    ctx.font = style.fontWeight +" "+ style.fontSize +" "+ style.fontFamily;
    ctx.textBaseline = 'top';
    ctx.fillStyle = style.color;
    var top = scrollY + pos.top;

    if(is_firefox)
      top += 0.4*parseInt(style.fontSize);

    ctx.fillText(el.textContent, pos.left, top);
  });

  // read out the image data from the canvas
  var imgData = ctx.getImageData(0, 0, width, height).data;

  worker = new Worker("js/worker.js");
  worker.onmessage = receiveMessage;
  worker.postMessage({
    type: 'imgData',
    imgData: imgData.buffer,
    width: width,
    height: height,
    threshold: threshold
  }, [imgData.buffer]);

  holder.onmousemove = storeInputPos;
  holder.ontouchmove = storeInputPos;
  window.addEventListener('keydown', detectAltKeyPress);
  window.addEventListener('keyup', detectAltKeyRelease);

  holder.onmouseleave = removeDimensions;

  // worker.postMessage({ type: 'debug' });

  worker.postMessage({
    type: 'position',
    x: holder.clientWidth/2 - 210,
    y: holder.clientHeight/2 - 150
  });
}

function detectAltKeyPress(event){
  if(event.altKey){
    altKeyWasPressed = true;
    sendToWorker(event);
  }
}

function detectAltKeyRelease(event){
  if(altKeyWasPressed){
    altKeyWasPressed = false;
    sendToWorker(event);
  }
}

function receiveMessage(event){
  switch(event.data.type){
    case "distances":
      showDistances(event.data.distances);
      break;
    case "debug":
      debugCanvas(event.data.data);
      break;
  }
}

function debugCanvas(binaries){
  var imgData = ctx.createImageData(width, height);

  for(var i=0, x=0, l=imgData.data.length; i<l; i+=4, x++){
    var gray = binaries[x];
    imgData.data[i]   = gray;
    imgData.data[i+1] = gray;
    imgData.data[i+2] = gray;
    imgData.data[i+3] = 255;
  }

  ctx.putImageData(imgData, 0, 0);

  holder.appendChild(canvas);
}

// by visionmedia (TJ Holowaychuk)
// https://github.com/component/rounded-rect/blob/master/index.js

function roundedRect(ctx, x, y, w, h, r) {
  if (w < 2 * r) r = w / 2;
  if (h < 2 * r) r = h / 2;
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.arcTo(x + w, y, x + w, y + h, r);
  ctx.arcTo(x + w, y + h, x, y + h, r);
  ctx.arcTo(x, y + h, x, y, r);
  ctx.arcTo(x, y, x + w, y, r);
  ctx.fill();
};

render();
window.onresize = render;
</script>