fetching new images and documents from freebase.com

[ permalink ] [ download ] 
<head>
<script src="json.js"></script>
<script>
// These are a few important constants
var HOST = "http://www.freebase.com";
var READ = "/api/service/mqlread";
var RAW = "/api/trans/raw/";
var THUMB = "/api/trans/image_thumb/";
var BLURB = "/api/trans/blurb/";

/**
 * Send the queries named in the outer envelope object to Metaweb,
 * and pass the outer response envelope to the function f.  This is a
 * variant of the Metaweb.read() function that runs multiple queries.
 */ 
function sendQueries(queryEnvelope, f) {
    // Define a unique function name
    var callbackName = "_" + sendQueries.counter++

    // Create a function by that name, using sendQueries as a namespace.
    // This function expects to be passed the response to the query
    sendQueries[callbackName] = function(responseEnvelope) {
        document.body.removeChild(script);  // Remove <script> tag
        delete sendQueries[callbackName];   // Delete this function
        f(responseEnvelope);                // Pass response to user function
    };

    // Serialize and encode the query object
    var queries = encodeURIComponent(JSON.serialize(queryEnvelope));

    // Build the URL using encoded query text and the callback name
    var url = HOST + READ + "?queries=" + queries +
        "&callback=sendQueries." + callbackName

    // Create a script tag, set its src attribute and add it to the document
    // This triggers the HTTP request and submits the query
    var script = document.createElement("script");
    script.src = url
    document.body.appendChild(script);
};
sendQueries.counter = 0;  // Initialize the counter

// How many images and how many documents do we display?
var N = 10;                                          // This is the default
if (window.location.search.substring(0,3) == "?n=")  // URL argument overrides
    N = parseInt(window.location.search.substring(3));

// These are the queries we issue to find the n newest images and documents
var queries = {
  images: {
    query: [{
      type:"/common/image", id:null,         // Return image ids
      timestamp:null, sort:"-timestamp",     // Most recent first
      limit:N,                               // Only N of them
      "/type/content/media_type":null,       // Check image type, too
      "/type/content/media_type|=":[         // We only want images that are:
        "/media_type/image/gif",             // GIF or
        "/media_type/image/png",             // PNG or 
        "/media_type/image/jpeg"             // JPEG
      ]
    }]
  },
  docs: {
    query: [{
      type:"/common/document", id:null,      // Return document ids
      timestamp:null, sort:"-timestamp",     // Most recent first
      limit:N                                // Only N of them
    }]
  }
};

// When the document has loaded, send the queries above to freebase.com.
// Then call the function below with the results
window.onload = function() { sendQueries(queries, displayResults) }

// This function gets called with our query results
function displayResults(response) {
    // First, display image thumbnails
    var images = response.images.result;                // Array of images
    var container=document.getElementById("newimages"); // Where they go
    for(var i = 0; i < images.length; i++) {            // Loop through them
        var id = encodeURIComponent(images[i].id);      // Image id in URL form

        var thumbnail = document.createElement("img");  // Create <img> tag
        thumbnail.src = HOST + THUMB + id;      // url for image thumbnail
        thumbnail.title = images[i].timestamp;  // timestamp as tooltip
        
        var link = document.createElement("a"); // Hyperlink for image
        link.href = HOST + RAW + id;            // to a full-size image
        link.target = "_new";                   // displayed in a new window

        link.appendChild(thumbnail);            // Put thumbnail inside link
        container.appendChild(link);            // Put link inside container
    }

    // Next display document blurbs
    var docs = response.docs.result;                // Array of documents
    container = document.getElementById("newdocs"); // Where they go
    for(var i = 0; i < docs.length; i++) {          // Loop through them
        var id = encodeURIComponent(docs[i].id);      // Doc id in URL form
        var blurb = document.createElement("iframe"); // Create an iframe
        blurb.src = HOST + BLURB + id;                // to hold doc blurb
        var link = document.createElement("a");       // Hyperlink
        link.href = HOST + RAW + id;                  // To full document
        link.target = "_new";                         // In a new window
        link.innerHTML = docs[i].timestamp;           // Timestamp as link text
        var listitem = document.createElement("li");  // Create list item
        listitem.appendChild(blurb);                  // Put blurb in item
        listitem.appendChild(link);                   // Put link in item
        container.appendChild(listitem);              // Put item in container
    }
}
</script>
<style> /* Make it all look good with a stylesheet */
img { margin: 5px;}
iframe { width: 70%; height: 75px; vertical-align: top;}
li a { vertical-align: bottom; }
h2 { margin-bottom: 5px; }
</style>
</head>
<body><!--Static document body. Thumbnails and blurbs dynamically inserted-->
<h2>The Newest Images</h2><i>Click thumbnail for full-size image</i>
<div id="newimages"><!-- thumbnails will go here --></div>
<h2>The Newest Documents</h2><i>Click timestamp for full document</i>
<ol id="newdocs"><!-- document blurbs go here --></ol>
</body>
hits counter