Mercurial > repos > other > exif-graphr
diff index.html @ 0:42c058ce5b7c
Initial public commit of Exif-Graphr
| author | IBBoard <dev@ibboard.co.uk> |
|---|---|
| date | Sun, 14 Aug 2016 20:46:16 +0100 |
| parents | |
| children | 457823710044 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/index.html Sun Aug 14 20:46:16 2016 +0100 @@ -0,0 +1,83 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" /> +<title>Exif Graphr for Flickr</title> +<script type="text/javascript" src="./d3.js"></script> +<!-- Uncomment the following line for "production" use --> +<!--<script type="text/javascript" src="./d3.min.js"></script>--> +<script type="text/javascript" src="./d3.tip.js"></script> +<style type="text/css"> +.axis path, +.axis line { + fill: none; + stroke: black; + shape-rendering: crispEdges; +} + +.axis text { + font-family: sans-serif; + font-size: 11px; +} + +.d3-tip { + background-color: rgba(51, 51, 51, 0.9); + border-radius: 5px; + border: 1px solid #000; + color: #f0f0f0; + font-size: 80%; + padding: 0.5em; + max-width: 25em; +} +.d3-tip:after { + display: block; + content: " "; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border: 5px solid transparent; + border-width: 10px 5px 0 5px; + border-top-color: #000; +} +table { border-collapse: collapse; width: 100% } +td, th { border: 1px solid #aaa } +th { background-color: #ddd } +</style> +</head> +<body> +<h1>Exif Graphr</h1> +<p>This page will graph the EXIF data (details about the photo) from public Flickr accounts. Hover over a dot or look in the table for more details about a picture.</p> +<p>In the graph:</p> +<ul><li>Horizontal position is shutter speed (left = quick shutter, right = slow shutter)</li> +<li>Vertical position is focal length (bottom = short focal length/low zoom or wide-angle, top = long focal length/high zoom or telephoto)</li> +<li>Size is aperture (the lower the number, the larger the aperture and the larger the dot)</li> +<li>Colour is based on the camera model (all photos from the same camera model are the same hue)</li> +<li>Colour saturation is based on ISO (higher ISO is more sensitive, so the colour is brighter)</li> +</ul> +<form action=""> +<input type="text" id="username" value="ibboard" onkeypress="if (event.keyCode==13) { visualise(); return false; }" /> <input type="button" value="Visualise" onclick="visualise()" /> +</form> +<div id="graph"></div> +<div id="legend"></div> +<table> +<thead> +<tr> + <th width="100">Photo</th> + <th>Camera</th> + <th width="10%">Shutter Speed</th> + <th width="10%">Focal Length</th> + <th width="10%">Aperture</th> + <th width="10%">ISO</th> +</tr> +</thead> +<tbody id="photoTable"> +</tbody> +</table> +<script type="text/javascript" src="./exif-graphr.js"></script> +<div class="footer"> +<p>This product uses the Flickr API but is not endorsed or certified by Flickr.</p> +<p>All photo data is cached, but is only taken from public photos. No personal information is collected/stored/retained beyond normal web server logs.</p> +</div> +</body> +</html> \ No newline at end of file