From c01e5c96c815c53695b7d80923a51cd235edd841 Mon Sep 17 00:00:00 2001 From: Trygve Laugstøl Date: Wed, 19 Aug 2015 19:06:56 +0200 Subject: wip --- .gitignore | 2 + gpx-gallery.js | 57 ++++++++++++++++++++++-- pictures/index.php | 128 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 184 insertions(+), 3 deletions(-) create mode 100644 pictures/index.php 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: '© OpenStreetMap contributors' + + var osmLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap contributors' + '| Font Awesome' }); 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("
", 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 @@ + "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'); +} +?> -- cgit v1.2.3