SlideShare a Scribd company logo
1 of 19
Download to read offline
Franz Buchinger, fbuchinger@gmail.com

https://github.com/fbuchinger/pictagger.js
Why tagging matters (not only) for photos
●   photo collections usually live in a file/folder system with a
    one-dimensional index
Why tagging matters (not only) for photos
●   ... but a multi-dimensional index is needed for better
    retrieveability
●   keyword tags are the simplest and most portable approach
    to implement this (-> IPTC Keyword Tag)
Tagging Pitfalls
●   ignoring it (95% of all flickr images are probably untagged)
●   aspect inconsistency
●   term inconsistency/synonyms
Aspect Inconsistency
Aspect Inconsistency




(perspective, country, datecode) ↔ (continent)
Term Inconsistency
Term Inconsistency




 („mountains“) ↔ („mountain“)
Tagging conveniences
●   face detection (automatic, but only considers
    faces)
●   drag'n drop tag lists (consistent terms, still
    requires manual assignment)
●   --> wanted: automatic tagging system with
    aspect/term consistency
pictagger.js
●   Uses existing photo metadata as „seed“ for keyword
    generation
●   Frees the user from automatable tagging tasks
●   100% Javascript
●   Tag generation happens in configurable plugin scripts
    ("taggers")
●   works with local and (soon) flickr/picasa-hosted photos
taggers
●   request certain metadata/or image data, calculate tags and
    emit them
●   taggers only run if the required metadata can be retrieved
●   configurable: whole tagger or generation of individual tags
    can be turned on/off
DateTime tagger
{'Photo.Exif.DateTime': "2010:12:21 18:43:00"}




           DateTime Tagger



           [
               'year:2010',
                'season:winter',
                'calweek:50',
                'yearday:345',
                'month:december',
                'day:tuesday',
                'daytime:evening'
           ]
The hello world dayofmylife tagger
PicTagger.App.addTagger({
    namespace: 'doml',
    requires : ['Photo.Exif.Datetime', 'User.Profile.Birthdate'],
    desires : [],
    emits: [
       {predicate: "dayofmylife", label:"day of my life",
        description:"the day of your life the picture was taken",
        active: true}
    ],
    run: function (required, desired){
       var photo_taken = required[0].get('value');
       var user_birthdate = required[1].get('value');
       var ms2Day = 1000*3600*24;
       var doml = Math.ceil((photo_taken - user_birthdate)/ms2Day);
       this.setTag("doml.dayofmylife",doml);
    },
    isActive: true
});
… testing it
domlRequired = [
        new PicTagger.SourceTag({key: 'Photo.Exif.Datetime',
        value: new Date(2011, 1, 1, 13, 49)}),
        new PicTagger.SourceTag({key: 'User.Profile.Birthdate',
        value: new Date(1979, 6, 27)})
    ];
domlTagger.run(domlRequired);
var taggerResult = domlTagger.getTag("doml.dayofmylife").toString();
same(taggerResult, 'dayofmylife:11513');
Tagger Parade I – Time Based
Example Input               Tagger           Example Output
{Photo.Exif.DateTime':      Holiday          ['holiday:easter',
"2010:04:02 18:43:00"}                       'holiday:goodfriday']
{Photo.Exif.DateTime':      Day of my life   ['dayofmylife:11843']
"2010:04:02 18:43:00",
'User.Profile.Birthdate':
"1979:03:23" }
 {'Photo.Exif.DateTime':    DateTime         [
"2010:12:21 18:43:00"}                           'year:2010',
                                                 'season:winter',
                                                 'calweek:50',
                                                 'yearday:345',
                                                 'month:december',
                                                 'day:tuesday',
                                                 'daytime:evening'
                                             ]
Tagger Parade II – Location
Example Input               Tagger     Example Output
{'Photo.Exif.Location':     FromHome   ['kmfromhome:00150',
  {lon: 48.0191752,                     'homebearing:east']
   lat:16.2949365},
'User.Profile.Location':
  {lon: 48.3069400,
   lat: 14.2858300}}
}
{Photo.Exif.Location':      Geohash    ['geohash:u2e94v9egx1']
{lon: 48.0191752
lat:16.2949365}}
   {Photo.Exif.Location':   GeoCode    ['city:vienna',
{lon: 48.0191752                       'province: vienna',
lat:16.2949365}}                       'district:margarethen',
                                       'street:margarethenstra
                                       sse']
Tagger Parade III – Shooting Properties
Example Input                Tagger        Example Output
{'Photo.Exif.Make':          CamType       ['camtype:mobile',
'Apple',                                   'make':'apple','model':
'Photo.Exif.Model':                        'iphone3gs']
'iPhone 3GS'
}
{Photo.Exif.Orientation':    Orientation   ['orientation:portrait'
7}                                         ]
                             Exposure      ['exposure:long']
{Photo.Exif.ExposureTime':
0.4}
Innerds of pictagger.js
●   Javascript EXIF Parser (Seidelin 2008), enhanced for HTML 5
    File API
●   Backbone.js/underscore.js
●   jQuery
Outlook & Questions

More Related Content

Similar to Pictagger

OSCON 2005: Build Your Own Chandler Parcel
OSCON 2005: Build Your Own Chandler ParcelOSCON 2005: Build Your Own Chandler Parcel
OSCON 2005: Build Your Own Chandler Parcel
Ted Leung
 
MySQL User Conference 2009: Python and MySQL
MySQL User Conference 2009: Python and MySQLMySQL User Conference 2009: Python and MySQL
MySQL User Conference 2009: Python and MySQL
Ted Leung
 
Advanced Data Modeling with Apache Cassandra
Advanced Data Modeling with Apache CassandraAdvanced Data Modeling with Apache Cassandra
Advanced Data Modeling with Apache Cassandra
DataStax Academy
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
gerbille
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worlds
Ignacio Martín
 

Similar to Pictagger (20)

Integrating Angular js & three.js
Integrating Angular js & three.jsIntegrating Angular js & three.js
Integrating Angular js & three.js
 
ITK Tutorial Presentation Slides-945
ITK Tutorial Presentation Slides-945ITK Tutorial Presentation Slides-945
ITK Tutorial Presentation Slides-945
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
OSCON 2005: Build Your Own Chandler Parcel
OSCON 2005: Build Your Own Chandler ParcelOSCON 2005: Build Your Own Chandler Parcel
OSCON 2005: Build Your Own Chandler Parcel
 
MySQL User Conference 2009: Python and MySQL
MySQL User Conference 2009: Python and MySQLMySQL User Conference 2009: Python and MySQL
MySQL User Conference 2009: Python and MySQL
 
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
SenchaCon 2016: Want to Use Ext JS Components with Angular 2? Here’s How to I...
 
Advanced data modeling with apache cassandra
Advanced data modeling with apache cassandraAdvanced data modeling with apache cassandra
Advanced data modeling with apache cassandra
 
Marker-based Augmented Monuments on iPhone and iPad
Marker-based Augmented Monuments on iPhone and iPadMarker-based Augmented Monuments on iPhone and iPad
Marker-based Augmented Monuments on iPhone and iPad
 
Cocos2d 소개 - Korea Linux Forum 2014
Cocos2d 소개 - Korea Linux Forum 2014Cocos2d 소개 - Korea Linux Forum 2014
Cocos2d 소개 - Korea Linux Forum 2014
 
API Jones and the Wireframes of Doom
API Jones and the Wireframes of DoomAPI Jones and the Wireframes of Doom
API Jones and the Wireframes of Doom
 
Implement angular calendar component how to drag & create events
Implement angular calendar component how to drag & create eventsImplement angular calendar component how to drag & create events
Implement angular calendar component how to drag & create events
 
Advanced Data Modeling with Apache Cassandra
Advanced Data Modeling with Apache CassandraAdvanced Data Modeling with Apache Cassandra
Advanced Data Modeling with Apache Cassandra
 
Seti 09
Seti 09Seti 09
Seti 09
 
Synchronizing without internet - Multipeer Connectivity (iOS)
Synchronizing without internet - Multipeer Connectivity (iOS)Synchronizing without internet - Multipeer Connectivity (iOS)
Synchronizing without internet - Multipeer Connectivity (iOS)
 
Image Processing in R
Image Processing in R Image Processing in R
Image Processing in R
 
iOS 2D Gamedev @ CocoaHeads
iOS 2D Gamedev @ CocoaHeadsiOS 2D Gamedev @ CocoaHeads
iOS 2D Gamedev @ CocoaHeads
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
 
Tabledown
TabledownTabledown
Tabledown
 
Observational Science With Python and a Webcam
Observational Science With Python and a WebcamObservational Science With Python and a Webcam
Observational Science With Python and a Webcam
 
Symfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worldsSymfony & Javascript. Combining the best of two worlds
Symfony & Javascript. Combining the best of two worlds
 

Recently uploaded

FULL NIGHT — 9999894380 Call Girls In Mahipalpur | Delhi
FULL NIGHT — 9999894380 Call Girls In Mahipalpur | DelhiFULL NIGHT — 9999894380 Call Girls In Mahipalpur | Delhi
FULL NIGHT — 9999894380 Call Girls In Mahipalpur | Delhi
SaketCallGirlsCallUs
 
FULL NIGHT — 9999894380 Call Girls In Ashok Vihar | Delhi
FULL NIGHT — 9999894380 Call Girls In Ashok Vihar | DelhiFULL NIGHT — 9999894380 Call Girls In Ashok Vihar | Delhi
FULL NIGHT — 9999894380 Call Girls In Ashok Vihar | Delhi
SaketCallGirlsCallUs
 
FULL NIGHT — 9999894380 Call Girls In Kishangarh | Delhi
FULL NIGHT — 9999894380 Call Girls In Kishangarh | DelhiFULL NIGHT — 9999894380 Call Girls In Kishangarh | Delhi
FULL NIGHT — 9999894380 Call Girls In Kishangarh | Delhi
SaketCallGirlsCallUs
 
FULL NIGHT — 9999894380 Call Girls In Wazirabad | Delhi
FULL NIGHT — 9999894380 Call Girls In Wazirabad | DelhiFULL NIGHT — 9999894380 Call Girls In Wazirabad | Delhi
FULL NIGHT — 9999894380 Call Girls In Wazirabad | Delhi
SaketCallGirlsCallUs
 
Haridwar Call Girls 8617697112 Short 4000 Night 10000 Best call girls Service...
Haridwar Call Girls 8617697112 Short 4000 Night 10000 Best call girls Service...Haridwar Call Girls 8617697112 Short 4000 Night 10000 Best call girls Service...
Haridwar Call Girls 8617697112 Short 4000 Night 10000 Best call girls Service...
Nitya salvi
 
Call Girl In Chandigarh ☎ 08868886958✅ Just Genuine Call Call Girls Chandigar...
Call Girl In Chandigarh ☎ 08868886958✅ Just Genuine Call Call Girls Chandigar...Call Girl In Chandigarh ☎ 08868886958✅ Just Genuine Call Call Girls Chandigar...
Call Girl In Chandigarh ☎ 08868886958✅ Just Genuine Call Call Girls Chandigar...
Sheetaleventcompany
 
Museum of fine arts Lauren Simpson…………..
Museum of fine arts Lauren Simpson…………..Museum of fine arts Lauren Simpson…………..
Museum of fine arts Lauren Simpson…………..
mvxpw22gfc
 
Bobbie goods coloring book 81 pag_240127_163802.pdf
Bobbie goods coloring book 81 pag_240127_163802.pdfBobbie goods coloring book 81 pag_240127_163802.pdf
Bobbie goods coloring book 81 pag_240127_163802.pdf
MARIBEL442158
 
Powerful Love Spells in New York City, NY (310) 882-6330 Bring Back Lost Lover
Powerful Love Spells in New York City, NY (310) 882-6330 Bring Back Lost LoverPowerful Love Spells in New York City, NY (310) 882-6330 Bring Back Lost Lover
Powerful Love Spells in New York City, NY (310) 882-6330 Bring Back Lost Lover
PsychicRuben LoveSpells
 
❤️Call girls in Chandigarh ☎️8264406502☎️ Call Girl service in Chandigarh☎️ C...
❤️Call girls in Chandigarh ☎️8264406502☎️ Call Girl service in Chandigarh☎️ C...❤️Call girls in Chandigarh ☎️8264406502☎️ Call Girl service in Chandigarh☎️ C...
❤️Call girls in Chandigarh ☎️8264406502☎️ Call Girl service in Chandigarh☎️ C...
Sheetaleventcompany
 
FULL NIGHT — 9999894380 Call Girls In Paschim Vihar | Delhi
FULL NIGHT — 9999894380 Call Girls In  Paschim Vihar | DelhiFULL NIGHT — 9999894380 Call Girls In  Paschim Vihar | Delhi
FULL NIGHT — 9999894380 Call Girls In Paschim Vihar | Delhi
SaketCallGirlsCallUs
 
Van Gogh Powerpoint for art lesson today
Van Gogh Powerpoint for art lesson todayVan Gogh Powerpoint for art lesson today
Van Gogh Powerpoint for art lesson today
lucygibson17
 

Recently uploaded (20)

VIP Ramnagar Call Girls, Ramnagar escorts Girls 📞 8617697112
VIP Ramnagar Call Girls, Ramnagar escorts Girls 📞 8617697112VIP Ramnagar Call Girls, Ramnagar escorts Girls 📞 8617697112
VIP Ramnagar Call Girls, Ramnagar escorts Girls 📞 8617697112
 
FULL NIGHT — 9999894380 Call Girls In Mahipalpur | Delhi
FULL NIGHT — 9999894380 Call Girls In Mahipalpur | DelhiFULL NIGHT — 9999894380 Call Girls In Mahipalpur | Delhi
FULL NIGHT — 9999894380 Call Girls In Mahipalpur | Delhi
 
FULL NIGHT — 9999894380 Call Girls In Ashok Vihar | Delhi
FULL NIGHT — 9999894380 Call Girls In Ashok Vihar | DelhiFULL NIGHT — 9999894380 Call Girls In Ashok Vihar | Delhi
FULL NIGHT — 9999894380 Call Girls In Ashok Vihar | Delhi
 
FULL NIGHT — 9999894380 Call Girls In Kishangarh | Delhi
FULL NIGHT — 9999894380 Call Girls In Kishangarh | DelhiFULL NIGHT — 9999894380 Call Girls In Kishangarh | Delhi
FULL NIGHT — 9999894380 Call Girls In Kishangarh | Delhi
 
FULL NIGHT — 9999894380 Call Girls In Wazirabad | Delhi
FULL NIGHT — 9999894380 Call Girls In Wazirabad | DelhiFULL NIGHT — 9999894380 Call Girls In Wazirabad | Delhi
FULL NIGHT — 9999894380 Call Girls In Wazirabad | Delhi
 
Haridwar Call Girls 8617697112 Short 4000 Night 10000 Best call girls Service...
Haridwar Call Girls 8617697112 Short 4000 Night 10000 Best call girls Service...Haridwar Call Girls 8617697112 Short 4000 Night 10000 Best call girls Service...
Haridwar Call Girls 8617697112 Short 4000 Night 10000 Best call girls Service...
 
Call Girl In Chandigarh ☎ 08868886958✅ Just Genuine Call Call Girls Chandigar...
Call Girl In Chandigarh ☎ 08868886958✅ Just Genuine Call Call Girls Chandigar...Call Girl In Chandigarh ☎ 08868886958✅ Just Genuine Call Call Girls Chandigar...
Call Girl In Chandigarh ☎ 08868886958✅ Just Genuine Call Call Girls Chandigar...
 
Museum of fine arts Lauren Simpson…………..
Museum of fine arts Lauren Simpson…………..Museum of fine arts Lauren Simpson…………..
Museum of fine arts Lauren Simpson…………..
 
Bobbie goods coloring book 81 pag_240127_163802.pdf
Bobbie goods coloring book 81 pag_240127_163802.pdfBobbie goods coloring book 81 pag_240127_163802.pdf
Bobbie goods coloring book 81 pag_240127_163802.pdf
 
Powerful Love Spells in New York City, NY (310) 882-6330 Bring Back Lost Lover
Powerful Love Spells in New York City, NY (310) 882-6330 Bring Back Lost LoverPowerful Love Spells in New York City, NY (310) 882-6330 Bring Back Lost Lover
Powerful Love Spells in New York City, NY (310) 882-6330 Bring Back Lost Lover
 
❤️Call girls in Chandigarh ☎️8264406502☎️ Call Girl service in Chandigarh☎️ C...
❤️Call girls in Chandigarh ☎️8264406502☎️ Call Girl service in Chandigarh☎️ C...❤️Call girls in Chandigarh ☎️8264406502☎️ Call Girl service in Chandigarh☎️ C...
❤️Call girls in Chandigarh ☎️8264406502☎️ Call Girl service in Chandigarh☎️ C...
 
Agonda Beach ( Call Girls ) Goa ✔ 8617370543 ✅ By Goa Call Girls For Pick Up ...
Agonda Beach ( Call Girls ) Goa ✔ 8617370543 ✅ By Goa Call Girls For Pick Up ...Agonda Beach ( Call Girls ) Goa ✔ 8617370543 ✅ By Goa Call Girls For Pick Up ...
Agonda Beach ( Call Girls ) Goa ✔ 8617370543 ✅ By Goa Call Girls For Pick Up ...
 
FULL NIGHT — 9999894380 Call Girls In Paschim Vihar | Delhi
FULL NIGHT — 9999894380 Call Girls In  Paschim Vihar | DelhiFULL NIGHT — 9999894380 Call Girls In  Paschim Vihar | Delhi
FULL NIGHT — 9999894380 Call Girls In Paschim Vihar | Delhi
 
Completed Event Presentation for Huma 1305
Completed Event Presentation for Huma 1305Completed Event Presentation for Huma 1305
Completed Event Presentation for Huma 1305
 
GENUINE EscoRtS,Call Girls IN South Delhi Locanto TM''| +91-8377087607
GENUINE EscoRtS,Call Girls IN South Delhi Locanto TM''| +91-8377087607GENUINE EscoRtS,Call Girls IN South Delhi Locanto TM''| +91-8377087607
GENUINE EscoRtS,Call Girls IN South Delhi Locanto TM''| +91-8377087607
 
Barasat call girls 📞 8617697112 At Low Cost Cash Payment Booking
Barasat call girls 📞 8617697112 At Low Cost Cash Payment BookingBarasat call girls 📞 8617697112 At Low Cost Cash Payment Booking
Barasat call girls 📞 8617697112 At Low Cost Cash Payment Booking
 
❤Personal Whatsapp Srinagar Srinagar Call Girls 8617697112 💦✅.
❤Personal Whatsapp Srinagar Srinagar Call Girls 8617697112 💦✅.❤Personal Whatsapp Srinagar Srinagar Call Girls 8617697112 💦✅.
❤Personal Whatsapp Srinagar Srinagar Call Girls 8617697112 💦✅.
 
Storyboard short: Ferrarius Tries to Sing
Storyboard short: Ferrarius Tries to SingStoryboard short: Ferrarius Tries to Sing
Storyboard short: Ferrarius Tries to Sing
 
AaliyahBell_themist_v01.pdf .
AaliyahBell_themist_v01.pdf             .AaliyahBell_themist_v01.pdf             .
AaliyahBell_themist_v01.pdf .
 
Van Gogh Powerpoint for art lesson today
Van Gogh Powerpoint for art lesson todayVan Gogh Powerpoint for art lesson today
Van Gogh Powerpoint for art lesson today
 

Pictagger

  • 2. Why tagging matters (not only) for photos ● photo collections usually live in a file/folder system with a one-dimensional index
  • 3. Why tagging matters (not only) for photos ● ... but a multi-dimensional index is needed for better retrieveability ● keyword tags are the simplest and most portable approach to implement this (-> IPTC Keyword Tag)
  • 4. Tagging Pitfalls ● ignoring it (95% of all flickr images are probably untagged) ● aspect inconsistency ● term inconsistency/synonyms
  • 9. Tagging conveniences ● face detection (automatic, but only considers faces) ● drag'n drop tag lists (consistent terms, still requires manual assignment) ● --> wanted: automatic tagging system with aspect/term consistency
  • 10. pictagger.js ● Uses existing photo metadata as „seed“ for keyword generation ● Frees the user from automatable tagging tasks ● 100% Javascript ● Tag generation happens in configurable plugin scripts ("taggers") ● works with local and (soon) flickr/picasa-hosted photos
  • 11. taggers ● request certain metadata/or image data, calculate tags and emit them ● taggers only run if the required metadata can be retrieved ● configurable: whole tagger or generation of individual tags can be turned on/off
  • 12. DateTime tagger {'Photo.Exif.DateTime': "2010:12:21 18:43:00"} DateTime Tagger [ 'year:2010', 'season:winter', 'calweek:50', 'yearday:345', 'month:december', 'day:tuesday', 'daytime:evening' ]
  • 13. The hello world dayofmylife tagger PicTagger.App.addTagger({ namespace: 'doml', requires : ['Photo.Exif.Datetime', 'User.Profile.Birthdate'], desires : [], emits: [ {predicate: "dayofmylife", label:"day of my life", description:"the day of your life the picture was taken", active: true} ], run: function (required, desired){ var photo_taken = required[0].get('value'); var user_birthdate = required[1].get('value'); var ms2Day = 1000*3600*24; var doml = Math.ceil((photo_taken - user_birthdate)/ms2Day); this.setTag("doml.dayofmylife",doml); }, isActive: true });
  • 14. … testing it domlRequired = [ new PicTagger.SourceTag({key: 'Photo.Exif.Datetime', value: new Date(2011, 1, 1, 13, 49)}), new PicTagger.SourceTag({key: 'User.Profile.Birthdate', value: new Date(1979, 6, 27)}) ]; domlTagger.run(domlRequired); var taggerResult = domlTagger.getTag("doml.dayofmylife").toString(); same(taggerResult, 'dayofmylife:11513');
  • 15. Tagger Parade I – Time Based Example Input Tagger Example Output {Photo.Exif.DateTime': Holiday ['holiday:easter', "2010:04:02 18:43:00"} 'holiday:goodfriday'] {Photo.Exif.DateTime': Day of my life ['dayofmylife:11843'] "2010:04:02 18:43:00", 'User.Profile.Birthdate': "1979:03:23" } {'Photo.Exif.DateTime': DateTime [ "2010:12:21 18:43:00"} 'year:2010', 'season:winter', 'calweek:50', 'yearday:345', 'month:december', 'day:tuesday', 'daytime:evening' ]
  • 16. Tagger Parade II – Location Example Input Tagger Example Output {'Photo.Exif.Location': FromHome ['kmfromhome:00150', {lon: 48.0191752, 'homebearing:east'] lat:16.2949365}, 'User.Profile.Location': {lon: 48.3069400, lat: 14.2858300}} } {Photo.Exif.Location': Geohash ['geohash:u2e94v9egx1'] {lon: 48.0191752 lat:16.2949365}} {Photo.Exif.Location': GeoCode ['city:vienna', {lon: 48.0191752 'province: vienna', lat:16.2949365}} 'district:margarethen', 'street:margarethenstra sse']
  • 17. Tagger Parade III – Shooting Properties Example Input Tagger Example Output {'Photo.Exif.Make': CamType ['camtype:mobile', 'Apple', 'make':'apple','model': 'Photo.Exif.Model': 'iphone3gs'] 'iPhone 3GS' } {Photo.Exif.Orientation': Orientation ['orientation:portrait' 7} ] Exposure ['exposure:long'] {Photo.Exif.ExposureTime': 0.4}
  • 18. Innerds of pictagger.js ● Javascript EXIF Parser (Seidelin 2008), enhanced for HTML 5 File API ● Backbone.js/underscore.js ● jQuery