Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Initial commit
- Loading branch information
0 parents
commit fd08208
Showing
13 changed files
with
1,185 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
dpi.lv |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 not shown.
Binary file not shown.
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Oops, something went wrong.