Sunday, August 15, 2010

Display Picasa photos

See:
  • how to get data from an URL
  • parse XML documents
  • build a GUI to display photos with Polymorph
  • how to prototype quickly with debugger and inspector

Download screencast (800x600): .mpeg 16.7 MB, .mov 40.4 MB

Voice recorded by Christoph Budzinski.

View mobile version.




Picasa API documentation


Load XMLSupport:
Gofer new
    squeaksource: 'MetacelloRepository';
    package: 'ConfigurationOfXMLSupport';
    load.

ConfigurationOfXMLSupport load.


Final code:
Update 16/01/2012: the snippet is a little obsolete (see tongadall comment below). Now should be:
...
xmlDoc allElementsNamed: #entry do: 
              [:entry| |title photoUrl|
              title := (entry findElementNamed: #title) contentString.
              photoUrl := (entry findElementNamed: #content) attributeAt: #src.
...

|xmlStream xmlDoc photos builder|
xmlStream := 'http://picasaweb.google.com/data/feed/api/all?q=miles+davis&max-results=10' asUrl retrieveContents contentStream.
xmlDoc := XMLDOMParser parseDocumentFrom: xmlStream.

photos := OrderedCollection new.
xmlDoc tagsNamed: #entry do: 
              [:entry| |title photoUrl|
               title := (entry firstTagNamed: #title) characterData.
               photoUrl := (entry firstTagNamed: #content) attributeAt: #src.
               photos add: (PicasaPhoto new
                                   title: title;
                                   photoUrl: photoUrl)].

builder := UITheme builder.
(builder 
    newRow: (photos collect: 
                     [:aPhoto|  
                      builder newColumn: {
                         builder newImage: aPhoto asForm  size: 128@128.
                         builder newLabel: aPhoto title.}]))
extent: 500@400;
wrapDirection: #topToBottom;
openInWindow.

The Flickr version (Thanks Gary !)
| xmlStream xmlDoc photos builder clickBlock |
xmlStream := 'http://api.flickr.com/services/feeds/photos_public.gne?id=12018791@N06&lang=en-us&format=rss_200' asUrl retrieveContents contentStream.
xmlDoc := XMLDOMParser parseDocumentFrom: xmlStream.

photos := OrderedCollection new.
xmlDoc tagsNamed: #item do:
   [:item| | title thumbUrl photoUrl |
    title := (item firstTagNamed: #title) characterData.
    thumbUrl := ((item firstTagNamed: #media:thumbnail) attributeAt: #url) asUrl.
    photoUrl := ((item firstTagNamed: #media:content) attributeAt: #url) asUrl.
    photos add: title -> (Form fromBinaryStream: thumbUrl retrieveContents contentStream) -> photoUrl].

clickBlock := [:url :title | | scrollPane |
scrollPane := GeneralScrollPane new
 scrollTarget: (builder
 newImage: (Form fromBinaryStream: url retrieveContents contentStream)).
scrollPane openInWindow
 setLabel: title;
 extent: 600@400.
scrollPane color: Color transparent].

builder := UITheme builder.
((builder
  newRow: (photos collect:
                   [:aPhoto|
                    (builder
   newButtonFor: clickBlock
   getState: nil
   action: #value:value:
   arguments: {aPhoto value. aPhoto key key}
   getEnabled: nil
   label: ((builder newColumn: {
     builder newImage: aPhoto key value.
     builder newLabel: aPhoto key key})
     cellPositioning: #center;
     layoutInset: 10)
   help: nil)]))
wrapDirection: #topToBottom;
openInWindow)
 setLabel: (xmlDoc firstTagNamed: #title) characterData;
 extent: 700@680.



17 comments:

  1. Excellent.
    Your screencasts capture the essence of Smalltalk programming and this is difficult to render that in books. Continue!

    ReplyDelete
  2. Nice! Just goes to show that this "web stuff" is not particularly tricky!

    ReplyDelete
  3. Awesome! This not only shows a master at work, but makes it clear why a live environment is like visiting a 3D world from Flatland.

    ReplyDelete
  4. (aside) Nice to see you getting really involved with the community Sean... Camp Smalltalk was good for you!

    ReplyDelete
  5. I really like squeak. I just want to know how I can make an actual application that I can sell though. Would anyone mind creating a tutorial of how to package for distribution?

    ReplyDelete
  6. Could you ask on Pharo / Squeak mailing-lists ?

    ReplyDelete
  7. Excellent - thank you!!

    At 1:24 you inspect the nodes/Elements - "title" and "content". If I try that with Pharo-1.1.1 on Linux the system almost freezes. Switching between the nodes in the inspector is unbelievably slow (10s), even with Cog.

    Is it really that fast on your system?

    I suspected a hardware problem with slow Radeon drivers but it's the same with Intel graphics on a different Linux system.

    Should I buy a faster machine or could it be related to recent changes in XML Parsing (deep #printOn: recursion)?

    ReplyDelete
  8. @Bernd Yes on Linux it is really slow on my 3 years old white macbook (core duo).

    On OSX on a recent MacBook Pro it is ok.

    See http://code.google.com/p/pharo/issues/detail?id=3172

    ReplyDelete
  9. thanks for the great tutorial, and a great view on how to use the environment as a programming tool..

    ReplyDelete
  10. Excelent video Laurent! I used this snippet of code to take photos from Picasa for used in a real site and works very fine :)

    I realize that this snippet is obsolete, here is the version updated for Picasa:

    xmlDoc allElementsNamed: #entry do:
    [:entry| |title photoUrl|
    title := (entry findElementNamed: #title) contentString.
    photoUrl := (entry findElementNamed: #content) attributeAt: #src.
    ...

    Regards.

    ReplyDelete
  11. Excelent video.

    Unfortunately I can't follow it because just on first steps I run into a MessageNotUnderstood (on Pharo 4.0) the #retrieveContents return an byteArray which does not understand the #contentStream message.

    Is there any updated version of this code or reference on how to make a form from an ByteArray?

    ReplyDelete
    Replies
    1. It works replacing #contentStream by #readStream.

      Delete
  12. Rapid Internet Connection - A fast Internet association permits you to make the best utilization of a site when you download motion pictures. Full-length motion picture documents are extensive and a rapid Internet association will download films quick. Download Movies
    Download Movies

    ReplyDelete