wip

3 files changed, 184 insertions, 3 deletions

diff --git a/.gitignore b/.gitignore
index 73102b8..7c33b6e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 bower_components
+node_modules
 .idea
+*.JPG
diff --git a/gpx-gallery.js b/gpx-gallery.js
index 9956ccf..57b32fc 100644
--- a/gpx-gallery.js
+++ b/gpx-gallery.js
@@ -3,7 +3,8 @@
 
   function InsertMapDirective($compile, $templateCache) {
     function link($scope, elem) {
-      var segments = $scope.segments;
+      var segments = $scope.segments,
+          picturesData = (segments || {}).picturesData;
       var list = segments.list();
       var topLeft = $scope.topLeft,
         topRight = $scope.topRight,
@@ -102,12 +103,54 @@
         });
       });
 
-      var osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' +
+      var osmLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors' +
         '| <a href="http://fortawesome.github.io/Font-Awesome/license/">Font Awesome</a>'
       });
       osmLayer.addTo(map);
 
+      if (picturesData) {
+        var options = {
+          styleXX: function(feature) {
+            console.log('feature', feature);
+          }, onEachFeature: function(feature, layer) {
+            var popupOptions = {
+              maxWidth: 200,
+              minWidth: 100,
+              closeButton: false
+            };
+            var canvas = document.createElement('canvas');
+            canvas.setAttribute("height", 100);
+            canvas.setAttribute("width", 150);
+            var ctx = canvas.getContext("2d");
+            var img = document.createElement('img');
+            img.onload = function() {
+              var scale = 200 / img.width;
+              var aspect = img.width / img.height;
+              console.log('image loaded', img.width, img.height, scale, aspect);
+              // ctx.drawImage(img, img.width, img.height);
+              // ctx.drawImage(img, canvas.width/2-img.width/2, canvas.height/2-img.width/2);
+              ctx.drawImage(img, 0, 0, 200, img.height * scale);
+            }
+            img.src = 'pictures/' + feature.id;
+
+            // var div = document.createElement('div');
+            // div.appendChild(canvas);
+//            layer.bindPopup("<div><img src='pictures/" + feature.id + "' width='400px'/></div>", popupOptions);
+            layer.bindPopup(canvas, popupOptions);
+          }, filter: function(feature, layer) {
+//            console.log('feature', feature);
+            return true;
+          }
+        };
+
+        var picturesLayer = L.geoJson(undefined, options).addTo(map);
+        picturesData.then(function(json) {
+            console.log('geo json', json);
+            picturesLayer.addData(json);
+        });
+      }
+
       function createLegend(position, templateUrl) {
         console.log('Creating legend for ' + position + ' from ' + templateUrl);
         var legend = L.control({position: position});
@@ -158,6 +201,7 @@
       var self = this;
       var list = [];
       var failed = false;
+      self.picturesUrl = undefined,
 
       //self.colors = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'];
       //self.colors = ['#feebe2', '#fbb4b9', '#f768a1', '#c51b8a', '#7a0177'];
@@ -199,6 +243,12 @@
             }
           });
         });
+
+        if (self.picturesUrl) {
+          self.picturesData = $http.get(self.picturesUrl).then(function(res) {
+            return res.data;
+          });
+        }
       };
 
       this.list = function () {
@@ -252,6 +302,7 @@
       .add('gpx/I villreinens forspor, dag 2.gpx', 'Dag 2')
       .add('gpx/I villreinens forspor, dag 3.gpx', 'Dag 3')
       .add('gpx/I villreinens forspor, dag 4.gpx', 'Dag 4');
+    ctrl.segments.picturesUrl = '//trygvis.io/~trygvis/2015/08/i-villregnens-fotspor/pictures/index.php';
 
     ctrl.segments.init();
   }
diff --git a/pictures/index.php b/pictures/index.php
new file mode 100644
index 0000000..0bee830
--- /dev/null
+++ b/pictures/index.php
@@ -0,0 +1,128 @@
+<?php
+
+$hash = hash("md5", $_SERVER['PHP_SELF']);
+$basedir = sys_get_temp_dir() . "/$hash";
+
+if (!is_dir($basedir))
+  mkdir($basedir);
+
+try {
+  function isValidFileName($filename) {
+    return preg_match("/^[_a-zA-Z0-9]*\.JPG$/i", $filename) == 1;
+  }
+
+  function parseVal($s) {
+    $major = strstr($s, '/', true);
+    $minor = substr(strstr($s, '/'), 1);
+    return intval($major) / intval($minor);
+  }
+
+  function parseDeg($val) {
+    $deg = parseVal($val[0]);
+    $min = parseVal($val[1]);
+    $sec = parseVal($val[2]);
+    return $deg + $min/60 + $sec / 3600;
+  }
+
+  function processFile($filename) {
+    global $basedir;
+    $cacheFile = "$basedir/$filename.geojson";
+
+    if (!isValidFileName($filename)) {
+      throw new InvalidArgumentException("Invalid file name: $filename");
+    }
+
+    if (false && is_readable($cacheFile)) {
+      $s = file_get_contents($cacheFile);
+      if ($s !== false) {
+        return json_decode($s);
+      }
+    }
+
+    $exif = exif_read_data($filename, 0, true);
+    if (!$exif) {
+      throw new InvalidArgumentException("Could not open file: $filename");
+    }
+
+    $json = ["type" => "Feature", "id" => $filename];
+
+    foreach ($exif as $key => $section) {
+      foreach ($section as $name => $val) {
+        switch("$key.$name") {
+          case "FILE.FileSize": $filesize_bytes = $val; break;
+          case "COMPUTED.Height": $height = $val; break;
+          case "COMPUTED.Width": $width = $val; break;
+          case "GPS.GPSLongitude": $lon = parseDeg($val); break;
+          case "GPS.GPSLatitude": $lat = parseDeg($val); break;
+          case "IFD0.Orientation": $orientation = $val; break;
+          case "EXIF.MakerNote":
+          case "EXIF.ComponentsConfiguration":
+          case "GPS.GPSVersion":
+          case "GPS.GPSAltitudeRef":
+            break;
+          default:
+//            echo "$key.$name=$val\n";
+        }
+      }
+    }
+
+    if (isset($lon) && isset($lat)) {
+      $json["geometry"] = [
+        "type" => "Point",
+        "coordinates" => [$lon, $lat]
+      ];
+    }
+
+    $properties = [
+    ];
+    if (isset($filesize_bytes)) {
+      $properties["filesize_bytes"] = $filesize_bytes;
+    }
+    if (isset($height)) {
+      $properties["height_px"] = $height;
+    }
+    if (isset($width)) {
+      $properties["width_px"] = $width;
+    }
+    if (isset($orientation)) {
+      switch ($orientation) {
+        case 1:
+          $properties["orientation"] = 0;
+        case 3:
+          $properties["orientation"] = -180;
+        case 6:
+          $properties["orientation"] = 90;
+        case 8:
+          $properties["orientation"] = -90;
+      }
+    }
+    $json["properties"] = $properties;
+
+    $s = json_encode($json);
+    file_put_contents($cacheFile, $s);
+
+    return $json;
+  }
+
+  if (!isset($_GET["file"])) {
+    $d = dir(".");
+    $features = [];
+    while (false !== ($entry = $d->read())) {
+      if(!isValidFilename($entry)) {
+        continue;
+      }
+      array_push($features, processFile($entry));
+    }
+    $json = ["type" => "FeatureCollection", "features" => $features];
+  } else {
+    $filename = $_GET["file"];
+    $json = processFile($filename);
+  }
+
+  header('Content-Type: application/vnd.geo+json');
+  echo json_encode($json, JSON_PRETTY_PRINT);
+  echo "\n";
+} catch(InvalidArgumentException $e) {
+  header('HTTP/1.1 400 bad request');
+}
+?>