Friday, November 18, 2016

flickr API, geo-tag, javascript and Github.


Some examples:

y compris mon petit code javascript de manipulation des URL flickr et affichage d'un album en défilement:
http://jsdo.it/ex-ample.blogspot/Giep


voir aussi:
http://stephane-mottin.blogspot.fr/2016/11/interoperabilite-des-story-maps-et.html
et les post avec tag 'flickr" "javascript"...

Lunch

  • Get Flickr-photosets
  • Make Photo list
  • Draw Google maps
  • Set Marker on Photo's geo-tag
  • Set Info-window with Photo's description

https://github.com/sigwyg/Lunch
http://lunch.archiva.jp/
Rem: gestion clic marqueur avec affichage photo sur google map (2011)

Generates a gallery from a photoset on Flickr with links referring to the originals.

https://github.com/jetsettingpair/photoset_gallery

voir aussi
https://blueimp.github.io/Gallery/
https://github.com/blueimp/Gallery/blob/master/README.md
blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types.

A flickr photoset with a gallery module (2013). 

https://github.com/donotknow/miniature-octo-tribble
https://donotknow.github.io/miniature-octo-tribble/
The gallery has dot indicators on the bottom to show where which image in the photoset is in the view currently. The dots are clickable to jump to the requested image. There are right and left arrows on the sides of the gallery. There is keyboard navigation (right and left arrow keys). The arrows and keyboard will change the current image to the next and previous images, respectively.

There are no external JavaScript libraries, like JQuery or Angular. I did, however, include the standard node event-emitter module, save time in this exercise. Furthermore, there are no CSS frameworks, like Foundation or Bootstrap. I am including normalize.css to limit differences between browser user-agent stylesheets.

This is intended for use in a modern browser with ECMAScript 5 compatibility. It was tested in the newest versions of Chrome and Safari on Mac OS X Yosemite, iOS 8 on iPhone 6, and iOS 8 on iPad mini.

I wanted to explore simple build system with this experiment.

Keeping the build process fast was the most important consideration I had. Since gulp uses streams and is concurrent by default it seemed like a good fit for fast build times. Sass is the natural choice for a CSS preprocessor since it’s popularity, feature set, and with libsass it’s speed. I didn’t use Compass, because the features didn’t seem necessary and I didn’t want to slow down the build with ruby. At this point, I don’t want to write anything other than a CommonJS module, so browserify is my compiler of choice. I added in watchify for adding speed to subsequent builds while watching. BrowserSync is in the mix to reload the browser whenever a watched build is complete. Fresh builds take less than 2s to start up gulp and complete, subsequent watch builds take less than 200ms (on the long side for JS).

Feel free to test it out! Clone this repo, npm install, and (if you don’t have gulp installed via NPM globally) ./node_modules/gulp/bin/gulp.js.

This was my first time using Travis for continuous integration, and it was simple to setup and configure npm test to lint the JavaScript and to create a small bash script to auto deploy the build to the gh-pages branch.

Federated Dashboard flickr-widget

https://github.com/alexcodreanu86/federated-dashboard-flickr-widget
https://searchcode.com/codesearch/view/94932442/

some codes

https://github.com/DataUSA/datausa-api/blob/master/scripts/flickr/flickr.py
https://docs.omniref.com/js/npm/kingtides-api/0.0.3/files/data/flickr/methods/flickr.photos.geo.getLocation.json

tutorial

a good introduction for  flickr.photosets.getPhotos
http://kylerush.net/blog/tutorial-flickr-api-javascript-jquery-ajax-json-build-detailed-photo-wall/

Direct and simple approach small "javascript": jsdo.it

API flickr.photosets.getPhotos :

https://www.flickr.com/services/api/explore/flickr.photosets.getPhotos
un javascript sous jsdo.it
http://jsdo.it/ex-ample.blogspot/uLfn/edit
(j'ai corrigé des erreurs de http://jsdo.it/andrew.cudzilo/zFW5).
Ca permet de lire les URL d'origine des photos d'un album et voir défiler les photos d'un album au format 500 pixels.

L'API photosets.getPhotos a besoin de deux entrées, ici en rouge:
var flickr_photoset_url="http://api.flickr.com/services/rest/method= flickr.photosets.getPhotos&api_key=7e0f11256b494a54caf961dbea2efaec&photoset_id=72157676574548795&format=json&nojsoncallback=1";

cette api donne:
{ "photoset": { "id": "72157676525638806", "primary": "25373090639", "owner": "144398584@N07", "ownername": "stef42530", 
    "photo": [
      { "id": "25373090639", "secret": "4a33c061fe", "server": "5344", "farm": 6, "title": "yssingeaux", 
"isprimary": 1, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "22808772578", "secret": "cd9e90f585", "server": "5815", "farm": 6, "title": "fontaine", 
"isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "30973507366", "secret": "df5c1fb408", "server": "5347", "farm": 6, "title": "statue Marie", 
"isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "30707294970", "secret": "2637e7a812", "server": "5653", "farm": 6, "title": "la croix de mission", 
"isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "30870710272", "secret": "4e119e1fd8", "server": "5498", "farm": 6, "title": "communauté pays des
 sucs", "isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "30973523796", "secret": "16bb7388a5", "server": "5483", "farm": 6, "title": "eglise de champclause-
nonReduit", "isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 }
    ], "page": 1, "per_page": "500", "perpage": "500", "pages": 1, "total": 6, "title": "velay-test1" }, "stat": "ok" }

Si on veut la liste des photos pour une données Lat,Long avec une précision modulable:
World level is 1, Country is ~3, Region ~6, City ~11, Street ~16. 

Pour les données EXIF complètes hélas d’une seule photo, on peut utiliser:


Pour les URL de Flickr:
Flickr provides a URL shortening service for uploaded photos (and videos). Short URLs can be useful in a variety of contexts including: email, on business cards, IM, text messages, or short status updates.
Chaque photo sur Flickr possède une URL courte, calculée mathématiquement, sous la forme:
https://flic.kr/p/{base58-photo-id}

var flickr_photoset_url="http://api.flickr.com/services/rest/method= flickr.photosets.getPhotos&api_key=7e0f11256b494a54caf961dbea2efaec&photoset_id=72157676574548795&format=json&nojsoncallback=1";

cette api donne:
{ "photoset": { "id": "72157676525638806", "primary": "25373090639", "owner": "144398584@N07", "ownername": "stef42530", 
    "photo": [
      { "id": "25373090639", "secret": "4a33c061fe", "server": "5344", "farm": 6, "title": "yssingeaux", 
"isprimary": 1, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "22808772578", "secret": "cd9e90f585", "server": "5815", "farm": 6, "title": "fontaine", 
"isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "30973507366", "secret": "df5c1fb408", "server": "5347", "farm": 6, "title": "statue Marie", 
"isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "30707294970", "secret": "2637e7a812", "server": "5653", "farm": 6, "title": "la croix de mission", 
"isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "30870710272", "secret": "4e119e1fd8", "server": "5498", "farm": 6, "title": "communauté pays des
 sucs", "isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 },
      { "id": "30973523796", "secret": "16bb7388a5", "server": "5483", "farm": 6, "title": "eglise de champclause-
nonReduit", "isprimary": 0, "ispublic": 1, "isfriend": 0, "isfamily": 0 }
    ], "page": 1, "per_page": "500", "perpage": "500", "pages": 1, "total": 6, "title": "velay-test1" }, "stat": "ok" }


url: 'http://farm' + p.farm + '.staticflickr.com/' + p.server + '/' + p.id + '_' + p.secret + '_m.jpg'

http://farm6.staticflickr.com/5653/30707294970_2637e7a812.jpg
donne bien l'affichage de la bonne photo mais en 375 × 500 pixels (si on ne précise rien après le p.secret c'est la taille par défaut cette longueur) et sans EXIF.
http://farm6.staticflickr.com/5653/30707294970_2637e7a812_m.jpg
donne en affichage 180 × 240 pixels et sans EXIF.
et avec _h en 1200x1600pixels.


URL source des photos et URL web
Pour établir l'url source d'une photo, vous devez connaître son ID, l'ID du serveur, l'ID farm et le secret, tels que renvoyés par la plupart des méthodes API.

L'URL source (et thumbails) a le format suivant :
https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
 or
https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}_[mstzb].jpg
 or
https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{o-secret}_o.(jpg|gif|png)
Ref: https://www.flickr.com/services/api/misc.urls.html

mstzb:
m "petit", côté le plus long de 240pix
h      le plus grand avec côté le plus long de=1600pix

https://www.flickr.com/services/api/explore/flickr.photos.getSizes
avec photo_id= 30707294970

donne les liens entre image et les URL web:

<size label="Large 1600" width="1200" height="1600" 
source="https://farm6.staticflickr.com/5653/30707294970_15285412af_h.jpg" 
url="https://www.flickr.com/photos/144398584@N07/30707294970/sizes/h/" media="photo" />

<size label="Large 2048" width="1536" height="2048" 
source="https://farm6.staticflickr.com/5653/30707294970_642c134228_k.jpg" 
url="https://www.flickr.com/photos/144398584@N07/30707294970/sizes/k/" media="photo" />
<size label="Original" width="1920" height="2560" 
source="https://farm6.staticflickr.com/5653/30707294970_94025dfdff_o.jpg" 
url="https://www.flickr.com/photos/144398584@N07/30707294970/sizes/o/" media="photo" />

l'img https://farm6.staticflickr.com/5653/30707294970_94025dfdff_o.jpg
contient les données EXIF.


Pour l'API Flickr, toutes les données doivent être codées en UTF-8.
https://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=7e0f11256b494a54caf961dbea2efaec&photoset_id=72157676574548795&format=json&nojsoncallback=1

donne dans la fenêtre du navigateur (ici pour un album avec 2 photos):
{"photoset":{"id":"72157676574548795","primary":"22808772578","owner":"144398584@N07",
"ownername":"stef42530","photo":[{"id":"22808772578","secret":"cd9e90f585","server":"5815","farm":6,"title":"fontaine","isprimary":"1","ispublic":1,"isfriend":0,"isfamily":0},{"id":"30870710272","secret":"4e119e1fd8","server":"5498","farm":6,"title":"communaute\u0301 pays des sucs","isprimary":"0","ispublic":1,"isfriend":0,"isfamily":0}],
"page":1,"per_page":500,"perpage":500,"pages":1,"total":"2","title":"velay-reduit"},"stat":"ok"}


Sinon pour une manipulation des URL flickr et affichage d'un album en défilement, voir mon petit code javascript:
http://jsdo.it/ex-ample.blogspot/uLfn/edit


On peut aussi voir cet exemple d'affichage en mosaique :
http://api.jquery.com/jquery.getjson/

pour les (Longitude-Latitude)



------------------

un lien vers quelqu'un qui a eu aussi du développé du code pour gérer ses photos et cartoDB:

http://clhenrick.github.io/data/web-scraping/node/js/web-mapping/flickr-api/cartodb/2015/05/29/scraping-photo-metadata/

While each photo was taken with geo location tracking enabled, there was some poor management of the photographs collected by various teams. Granted the photos were logically grouped by census tract in folders on Google Drive, yet no unified naming convention was used to name the photographs.





No comments:

Post a Comment