Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Initial commit
  • Loading branch information
LeaVerou committed Jun 10, 2013
0 parents commit fd08208
Show file tree
Hide file tree
Showing 13 changed files with 1,185 additions and 0 deletions.
1 change: 1 addition & 0 deletions CNAME
@@ -0,0 +1 @@
dpi.lv
149 changes: 149 additions & 0 deletions dpi.js
@@ -0,0 +1,149 @@
var hashRegex = /^#(\d+)[x×](\d+)(@(\d*\.?\d+)["″])?|(\d*\.?\d+)["″]$/;

width.value = screen.width;
height.value = screen.height;

var output = $('output');

function update() {
var w = width.value,
h = height.value;

d = Math.sqrt(w*w + h*h);

var dpi = dimension.value == 'd'? d : dimension.value == 'w'? w : h;

dpi /= physical.value;

result.textContent = Math.round(dpi);

// Size the output to have the same aspect ratio as the screen
var ratio = w/h;

output.style.minWidth = result.parentNode.offsetWidth;

if (ratio > 1) {
output.style.width = '';
}
else {
output.style.width = '10em';
}

output.style.height = output.offsetWidth / ratio + 'px';
}

dimension.onchange = update;

$$('fieldset input').forEach(function(element) {
(element.oninput = function () {
this.style.width = this.value.length + 'ch';
update();
}).call(element);
});

$$('#resolutions a, #diagonals a').forEach(function(a) {
a.href = '#' + a.textContent;
});

$u.xhr({
url: 'screens.json',
callback: function (xhr) {
window.Devices = JSON.parse(xhr.responseText);

var fragment = document.createDocumentFragment();

Devices.forEach(function (device) {
deviceRow(device, fragment);
});

var tbody = $('table tbody', devices);

tbody.innerHTML = '';

tbody.appendChild(fragment);
}
});

function deviceRow(device, fragment) {
return $u.element.create('tr', {
contents: [
{
tag: 'th',
contents: {
tag: 'a',
properties: {
href: '#' + device.w + '×' + device.h + '@' + device.d + '″'
},
contents: device.name
}
}, {
tag: 'td',
contents: device.d + '″'
}, {
tag: 'td',
contents: device.w + '×' + device.h
}, {
tag: 'td',
contents: device.ppi
}
],
inside: fragment
});
}


(window.onhashchange = function() {
if (hashRegex.test(location.hash)) {
var matches = location.hash.match(hashRegex);

if (matches[1]) {
width.value = matches[1]
width.oninput();
}

if (matches[2]) {
height.value = matches[2];
height.oninput();
}

if (matches[3] || matches[5]) {
if (matches[3]) {
physical.value = matches[4];
}

if (matches[5]) {
physical.value = matches[5];
}

dimension.value = 'd';
physical.oninput();
}
}
})();

search.oninput = function() {
if (!window.Devices) {
return;
}

var term = this.value;

var fragment = document.createDocumentFragment(),
results = 0;

Devices.forEach(function (device) {
for (var i in device) {
if ((device[i] + '').toLowerCase().indexOf(term.toLowerCase()) > -1) {
deviceRow(device, fragment);
results++;
return;
}
}
});

var tbody = $('table tbody', devices);

tbody.innerHTML = results? '' : '<tr><td colspan="4">No results</td></tr>';

tbody.appendChild(fragment);
};
Binary file added fonts/open-sans-bold.woff
Binary file not shown.
Binary file added fonts/open-sans-light.woff
Binary file not shown.
Binary file added fonts/open-sans-regular.woff
Binary file not shown.
92 changes: 92 additions & 0 deletions img/logo.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/noise.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions img/search.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
111 changes: 111 additions & 0 deletions index.html
@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>DPI.lv ♥ Easily find the DPI/PPI of any screen</title>
<link rel="stylesheet" href="style.css" />
<script src="prefixfree.min.js"></script>

</head>
<body>

<header>
<h1>
<img src="img/logo.svg" />
<strong>dpi</strong>love
</h1>
</header>

<fieldset>
Resolution:
<input id="width" pattern="\d+" />
×
<input id="height" pattern="\d+" />

<p id="resolutions">Common:
<a href="#" tabindex="-1">1920×1080</a>
<a href="#" tabindex="-1">1680×1050</a>
<a href="#" tabindex="-1">1440×900</a>
<a href="#" tabindex="-1">1366×768</a>
<a href="#" tabindex="-1">1280×800</a>
<a href="#" tabindex="-1">1386×768</a>
<a href="#" tabindex="-1">1024×768</a>
<a href="#" tabindex="-1">800×600</a>
</p>
</fieldset>

<fieldset>
<select id="dimension" title="Physical dimension (in inches)">
<option selected value="d">Diagonal</option>
<option value="w">Width</option>
<option value="h">Height</option>
</select>:
<input id="physical" value="13.3" pattern="\d*\.?\d+" />″

<p id="diagonals">Common diagonals:
<a href="#" tabindex="-1">7″</a>
<a href="#" tabindex="-1">11.6″</a>
<a href="#" tabindex="-1">13.3″</a>
<a href="#" tabindex="-1">14″</a>
<a href="#" tabindex="-1">15.6″</a>
<a href="#" tabindex="-1">17.3″</a>
<a href="#" tabindex="-1">21″</a>
<a href="#" tabindex="-1">27″</a>
</p>
</fieldset>

<output>
<div>
<strong id="result"></strong>
pixels per inch
</div>
</output>

<section id="devices">
<h1>Known screens</h1>

<input type="search" placeholder="Search…" id="search" />

<div id="screens">
<table>
<thead>
<tr>
<th>Name</th>
<th>Diagonal</th>
<th>Resolution</th>
<th>DPI</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Loading…</td>
</tr>
</tbody>
</table>
</div>
</section>

<footer>Handmade by <a href="http://lea.verou.me">Lea Verou</a> with love</footer>

<script src="utopia.js"></script>
<script src="dpi.js"></script>

<!-- AdPacks.com Ad Code -->
<script src="http://s3.buysellads.com/ac/bsa.js" async></script>
<!-- End AdPacks.com Ad Code -->
<!-- AdPacks.com Zone Code -->
<div id="bsap_1261373" class="bsarocks bsap_67e1f7efa5300630944c625f7975b9b3"></div>
<a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a>
<!-- End AdPacks.com Zone Code -->

<a href="http://github.com/LeaVerou/dpilove"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="LeaVerou" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<script>var _gaq = [['_setAccount', 'UA-25106441-4'],['_trackPageview']];</script>
<script src="http://www.google-analytics.com/ga.js" async></script>

</body>
</html>
5 changes: 5 additions & 0 deletions prefixfree.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit fd08208

Please sign in to comment.