Google App Engine: Adding JavaScript and Images

May 15, 2008

Bold lentil now has a dynamic graphical jump page.

It’s here.

Yes it’s hosted on app engine and yes it uses JavaScript. I was at a talk the other day by Dick Wall and there was speculation about what language might be supported after python. I think the question is what languages will be supported after python and JavaScript.

So assuming you have a useful JavaScript function in a thumbs.js file and it starts with an array of urls:

  function stepThumbnails(theSign) {
    var theURLs = new Array();
    theURLs[0] = "";
    theURLs[1] = "https://boldlentil.wordpress.com/2007/05/05/hello-world/";
    theURLs[2] = "https://boldlentil.wordpress.com/2007/05/05/cetacean-mutation/";
    theURLs[3] = "https://boldlentil.wordpress.com/2007/05/06/four-things-about-the-new-r2d2-mailboxes/";
    theURLs[4] = "https://boldlentil.wordpress.com/2007/05/09/domestic-politics/";
    theURLs[5] = "https://boldlentil.wordpress.com/2007/05/10/two-hundred-and-thirty-one-things-i-learned-using-the-internets/";
    theURLs[6] = "https://boldlentil.wordpress.com/2007/05/10/still-havent-finished-my-post-on-prcrastination/";
...
    theURLs[92] = "https://boldlentil.wordpress.com/2008/04/21/karl-attacks/";
    theURLs[93] = "https://boldlentil.wordpress.com/2008/04/23/toxoplasmosis-choose-your-own-post-ending/";
    theURLs[94] = "https://boldlentil.wordpress.com/2008/04/24/lenigme-by-gustave-dore/";
    theURLs[95] = "https://boldlentil.wordpress.com/2008/05/01/gm-to-cut-1000s-announces-failed-business-plan/";
    theURLs[96] = "https://boldlentil.wordpress.com/2008/05/01/dont-something-the-elephant-seals/";

Then add some code to define the width, height and size of the jump pages (in terms of number of thumbnail images). And then add some calculations for a starting and ending value for the specific array of thumbnails.

    var max = 96;
    var wide = 4;
    var high = 4;
    var theStep = (wide * high);
    var myStep = (theStep * theSign);
    if (theSign == 0) {
      var one = 1;
      var two = 1;
      var tre = theStep;
    }
    else {
      var one = parseInt(document.f1.theStartValue.value);
      var two = one + myStep;
      if (two < 1) two = 1;
      if (two > max) {
        two = one;
      }
      document.f1.theStartValue.value = two;
      var tre = two + myStep - 1;
      if (myStep < 0) tre = two - myStep - 1;
    }

Finally some more JavaScript to loop over the range to create a table of image thumbnails. Nothing fancy here.

    theText = '<p>';
    var theTable = '<table>';
    var twoPlus = two;
    for (i = 0; i < high; i++) {
      theTable += '<tr>';
      for (j = 0; j < wide; j++) {
        twoPlus = two + (i * wide) + j;
        if (twoPlus <= max) {
          theTable += '<td><a href=';
          theTable += theURLs[twoPlus];
          theTable += '><img src="/images/thumbnails/thumbnail-'+twoPlus+'.gif" border=0></a></td>\n';
        }
        else {
          thetable += '<td></td>\n';
        }
      }
      theTable += '</tr>';
    }
    theTable += '</table>';
    document.getElementById('theCurrentThumbnails').innerHTML = theText + theTable;
    document.f1.theStartValue.value = two;

Then save this file in a directory /static/js in the same directory as the root python code. Now I’m sure all this can be done more succinctly in python but if you already have some JavaScript handy why not use it?

The next step is to set up the images file. In this case I used /static/images/thumbnails. The thumbnails were created using a script file to be square and 128 by 128. Some experimentation seemed to lead me to believe that the /static for both the js and images was required. Anyways with the JavaScript code above in the /static/js directory and the GIF thumbnails in the /static/images/thumbnails directory it’s time to edit the app.yaml file to look something like:

application: 1boldlentil
version: 6
runtime: python
api_version: 1

handlers:
- url: /
  script: boldlentil.py

- url: /js
  static_dir: static/js

- url: /images/thumbnails
  static_dir: static/images/thumbnails

- url: /.*
  script: boldlentil.py

The two new handlers are for the JavaScript and for the images. Pretty easy once you know to add both of these to a /static directory and also know not to reference this /static in the code. Finally, the boldlentil.py file has to be edited to add a /jump page. This is pretty straightforward:

class jumpPage(webapp.RequestHandler):
  def get(self):
    self.response.headers['Content-Type'] = 'text/html'
    self.response.out.write('')
    self.response.out.write('')
    self.response.out.write('<head>');
    self.response.out.write('<script language="JavaScript" src="/js/thumbs.js">');
    self.response.out.write('</script>');
    self.response.out.write('</head>');
    self.response.out.write('<body onLoad="stepThumbnails(0)">');
    self.response.out.write('<form name="f1">');
    self.response.out.write('  <input type="hidden" name="theStartValue" value="1"><p>');
    self.response.out.write('  <input type="button" value="-15" onClick="stepThumbnails(-1)">');
    self.response.out.write('  <input type="button" value="+15" onClick="stepThumbnails(1)" ><p>');
    self.response.out.write('</form>');
    self.response.out.write('</body>');
    self.response.out.write('<div id="theCurrentThumbnails">');
    self.response.out.write('</div>');
    self.response.out.write('<a href=https://boldlentil.wordpress.com/><b>Bold Lentil</b> <a><p>');
    self.response.out.write('');
    self.response.out.write('</html>');

The final result is simple and appealing in a minimalist, wisenheimer way. And unlike computing randomish numbers the jump page even registers on the dashboard.

Advertisements

3 Responses to “Google App Engine: Adding JavaScript and Images”


  1. […] Google App Engine: Adding JavaScript and Images […]

  2. lordoftheweb Says:

    Thanks a lot..I was “writing” the javascript through the response..added a .js file and its now woking like a breeze..

  3. iphone apps Says:

    Very helpful for providing such code in java script that I can use.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: