A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 11KB

2 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>More on geo-tagging photos with a time element (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://rachelbythebay.com/w/2022/06/20/exif/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>More on geo-tagging photos with a time element</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://rachelbythebay.com/w/2022/06/20/exif/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>
  71. Some readers have written in with questions about my
  72. <a href="https://rachelbythebay.com/w/2022/06/15/places/">photo geotagging post</a>
  73. from last week. One common question is whether the place name has ended
  74. up in the file's metadata somehow. The answer is: I don't think so. I
  75. did an "export as original" on the photo in question and ran it through
  76. a bunch of exif dumper tools and didn't find anything that suggested a
  77. name like that.
  78. </p>
  79. <p>
  80. The EXIF data looks like this:
  81. </p>
  82. <p>
  83. </p>
  84. <pre>
  85. Create Date : 2014:06:16 13:02:15.202
  86. Date/Time Original : 2014:06:16 13:02:15.202
  87. GPS Altitude : 5.2 m Above Sea Level
  88. GPS Latitude : 37 deg 29' 6.13" N
  89. GPS Longitude : 122 deg 8' 53.30" W
  90. Circle Of Confusion : 0.004 mm
  91. Field Of View : 57.2 deg
  92. Focal Length : 4.1 mm (35 mm equivalent: 33.0 mm)
  93. GPS Position : 37 deg 29' 6.13" N, 122 deg 8' 53.30" W
  94. Hyperfocal Distance : 1.89 m
  95. Light Value : 15.4
  96. Lens ID : iPhone 5 back camera 4.12mm f/2.4
  97. </pre>
  98. <p>
  99. (Side note: that's
  100. <a href="https://en.wikipedia.org/wiki/Circle_of_confusion">an interesting term</a>,
  101. huh? Today I learned.)
  102. </p>
  103. <p>
  104. Anyway, it's just a bunch of numbers, as you would expect. Something in
  105. the actual Photos app on the Mac and the equivalent thing on my phone is
  106. translating it to a name.
  107. </p>
  108. <p>
  109. What's kind of nutty is that the same picture still shows "Facebook -
  110. Headquarters" when viewed on my phone. Really. Check it out:
  111. </p>
  112. <p>
  113. <a href="phone.png"><img src="phone.png" alt="iOS 15.something or other view" align="middle"></a>
  114. </p>
  115. <p>
  116. So, not only is there some mapping going on, but the phone and the
  117. computers (both of them) are looking at two different sources of data.
  118. I have to assume the phone has it cached, while the Macs must have
  119. flushed it and picked up the new value in recent times.
  120. </p>
  121. <p>
  122. Or, who knows, maybe Apple is running multiple backends with disjoint
  123. geographical data sources. It wouldn't be the first time they had
  124. <a href="https://rachelbythebay.com/w/2013/02/04/maps/">terrible</a>
  125. <a href="https://rachelbythebay.com/w/2013/04/02/maps/">map</a>
  126. <a href="https://rachelbythebay.com/w/2013/06/18/hospital/">data,</a>
  127. right?
  128. </p>
  129. <p>
  130. So here's another fun problem: how do you do a "fourth dimensional"
  131. geo-tag (that is, adding a time system) without revealing all of the
  132. places a person's been and when they were there? In other words, how do
  133. you do that without compromising privacy?
  134. </p>
  135. <p>
  136. The best I can figure so far is that you'd send back a list of ALL of
  137. the place names for a given area and let the device figure out which
  138. times apply to which photos, and just discard the rest. Also, it should
  139. probably be "zoomed out" pretty far, such that only very coarse bounds
  140. are given to the server. Just return all of the mappings for all of the
  141. polygons or whatever inside some giant swath of space, and do all of the
  142. nitty gritty stuff on their device.
  143. </p>
  144. <p>
  145. Otherwise, hey, it becomes pretty easy to track people after the fact.
  146. </p>
  147. </article>
  148. <hr>
  149. <footer>
  150. <p>
  151. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  152. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  153. </svg> Accueil</a> •
  154. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  155. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  156. </svg> Suivre</a> •
  157. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  158. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  159. </svg> Pro</a> •
  160. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  161. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  162. </svg> Email</a> •
  163. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  164. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  165. </svg> Légal</abbr>
  166. </p>
  167. <template id="theme-selector">
  168. <form>
  169. <fieldset>
  170. <legend><svg class="icon icon-brightness-contrast">
  171. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  172. </svg> Thème</legend>
  173. <label>
  174. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  175. </label>
  176. <label>
  177. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  178. </label>
  179. <label>
  180. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  181. </label>
  182. </fieldset>
  183. </form>
  184. </template>
  185. </footer>
  186. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  187. <script>
  188. function loadThemeForm(templateName) {
  189. const themeSelectorTemplate = document.querySelector(templateName)
  190. const form = themeSelectorTemplate.content.firstElementChild
  191. themeSelectorTemplate.replaceWith(form)
  192. form.addEventListener('change', (e) => {
  193. const chosenColorScheme = e.target.value
  194. localStorage.setItem('theme', chosenColorScheme)
  195. toggleTheme(chosenColorScheme)
  196. })
  197. const selectedTheme = localStorage.getItem('theme')
  198. if (selectedTheme && selectedTheme !== 'undefined') {
  199. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  200. }
  201. }
  202. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  203. window.addEventListener('load', () => {
  204. let hasDarkRules = false
  205. for (const styleSheet of Array.from(document.styleSheets)) {
  206. let mediaRules = []
  207. for (const cssRule of styleSheet.cssRules) {
  208. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  209. continue
  210. }
  211. // WARNING: Safari does not have/supports `conditionText`.
  212. if (cssRule.conditionText) {
  213. if (cssRule.conditionText !== prefersColorSchemeDark) {
  214. continue
  215. }
  216. } else {
  217. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  218. continue
  219. }
  220. }
  221. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  222. }
  223. // WARNING: do not try to insert a Rule to a styleSheet you are
  224. // currently iterating on, otherwise the browser will be stuck
  225. // in a infinite loop…
  226. for (const mediaRule of mediaRules) {
  227. styleSheet.insertRule(mediaRule.cssText)
  228. hasDarkRules = true
  229. }
  230. }
  231. if (hasDarkRules) {
  232. loadThemeForm('#theme-selector')
  233. }
  234. })
  235. </script>
  236. </body>
  237. </html>