Mercurial > repos > other > exif-graphr
annotate 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 |
rev | line source |
---|---|
0
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
2 <html xmlns="http://www.w3.org/1999/xhtml"> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
3 <head> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
4 <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" /> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
5 <title>Exif Graphr for Flickr</title> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
6 <script type="text/javascript" src="./d3.js"></script> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
7 <!-- Uncomment the following line for "production" use --> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
8 <!--<script type="text/javascript" src="./d3.min.js"></script>--> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
9 <script type="text/javascript" src="./d3.tip.js"></script> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
10 <style type="text/css"> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
11 .axis path, |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
12 .axis line { |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
13 fill: none; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
14 stroke: black; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
15 shape-rendering: crispEdges; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
16 } |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
17 |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
18 .axis text { |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
19 font-family: sans-serif; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
20 font-size: 11px; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
21 } |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
22 |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
23 .d3-tip { |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
24 background-color: rgba(51, 51, 51, 0.9); |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
25 border-radius: 5px; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
26 border: 1px solid #000; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
27 color: #f0f0f0; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
28 font-size: 80%; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
29 padding: 0.5em; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
30 max-width: 25em; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
31 } |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
32 .d3-tip:after { |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
33 display: block; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
34 content: " "; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
35 position: absolute; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
36 top: 100%; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
37 left: 50%; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
38 margin-left: -5px; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
39 border: 5px solid transparent; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
40 border-width: 10px 5px 0 5px; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
41 border-top-color: #000; |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
42 } |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
43 table { border-collapse: collapse; width: 100% } |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
44 td, th { border: 1px solid #aaa } |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
45 th { background-color: #ddd } |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
46 </style> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
47 </head> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
48 <body> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
49 <h1>Exif Graphr</h1> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
50 <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> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
51 <p>In the graph:</p> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
52 <ul><li>Horizontal position is shutter speed (left = quick shutter, right = slow shutter)</li> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
53 <li>Vertical position is focal length (bottom = short focal length/low zoom or wide-angle, top = long focal length/high zoom or telephoto)</li> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
54 <li>Size is aperture (the lower the number, the larger the aperture and the larger the dot)</li> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
55 <li>Colour is based on the camera model (all photos from the same camera model are the same hue)</li> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
56 <li>Colour saturation is based on ISO (higher ISO is more sensitive, so the colour is brighter)</li> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
57 </ul> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
58 <form action=""> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
59 <input type="text" id="username" value="ibboard" onkeypress="if (event.keyCode==13) { visualise(); return false; }" /> <input type="button" value="Visualise" onclick="visualise()" /> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
60 </form> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
61 <div id="graph"></div> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
62 <div id="legend"></div> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
63 <table> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
64 <thead> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
65 <tr> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
66 <th width="100">Photo</th> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
67 <th>Camera</th> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
68 <th width="10%">Shutter Speed</th> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
69 <th width="10%">Focal Length</th> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
70 <th width="10%">Aperture</th> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
71 <th width="10%">ISO</th> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
72 </tr> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
73 </thead> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
74 <tbody id="photoTable"> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
75 </tbody> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
76 </table> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
77 <script type="text/javascript" src="./exif-graphr.js"></script> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
78 <div class="footer"> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
79 <p>This product uses the Flickr API but is not endorsed or certified by Flickr.</p> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
80 <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> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
81 </div> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
82 </body> |
42c058ce5b7c
Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff
changeset
|
83 </html> |