JSON data

Are you familiar with JSON, Ajax, jQuery and Javascript? Since jAlbum 12.2 you can create skins that uses JavaScript to read files with JSON data about the album, instead of having to learn the jAlbum specific Tags and Variables in index.htt and slide.htt. There is a developer API to help skin development.

In init.bsh, add the following code

jm = new JSONMaker(engine);
dataTree = jm.getTreeAsString(rootFolder);

This will generate a full JSON formatted data tree to the variable "dataTree". Now, this variable is only known during album-build time. You therefore need to pass it to a client-side javascript variable. To do so, in your index.htt, add the following:

<script>dataTree = ${dataTree};</script>

Now, just continue referring to javascript code snippets, like this:

<script src="res/js/main.js" type="text/javascript"></script>

These snippets can now simply refer to the dataTree variable via jQuery for instance.

If you like to have other custom variables added to the generated tree, just call setIncludes() on the JSONMaker and pass a string array of variable names. If you wish to switch off the recursive behavior of the generated tree, i.e. so it only lists objects in the current folder, call setMakeTree(false); prior to calling getTreeAsString().

You can also call getTree() which delivers an object tree that can be manipulated on the Java side (in init.bsh). When you're happy with the manipulation, call toJSONString() on the object returned by getTree().

Quick example

Create an album with the image "Clock.jpg" in the root and one folder called "Nature" with "Horses.jpg":

Add

jm = new JSONMaker(engine);
dataTree = jm.getTreeAsString(rootFolder);

to init.bsh

jAlbum will then generate the variable 'dataTree' which contains all of the data from the old '.jason' files method such as shown in these files (depending on the metadata in the images):

tree.json:

{
  "path": "JSON-example",
  "folders": [
    {
      "path": "Nature",
      "counters": {
        "total": 1,
        "images": 1,
        "files": 1
      },
      "thumb": {
        "path": "Nature\/thumbs\/Horses.jpg",
        "width": 232,
        "height": 160
      },
      "name": "Nature",
      "fileDate": "2015-02-12T15:57:07.0Z"
    }
  ],
  "counters": {
    "total": 2,
    "images": 1,
    "folders": 1,
    "files": 1
  },
  "name": "JSON-example",
  "comment": "Minimal JSON album.",
  "fileDate": "2015-02-12T15:57:27.0Z"
}

data1.json:

{
  "path": "JSON-example",
  "deepCounters": {
    "total": 3,
    "images": 2,
    "folders": 1,
    "files": 2
  },
  "counters": {
    "total": 2,
    "images": 1,
    "folders": 1,
    "files": 1
  },
  "album": {
    "description": "Minimal JSON album."
  },
  "objects": [
    {
      "path": "Clock.jpg",
      "image": {
        "path": "slides\/Clock.jpg",
        "width": 900,
        "height": 668
      },
      "creator": "Laza",
      "thumb": {
        "path": "thumbs\/Clock.jpg",
        "width": 216,
        "height": 160
      },
      "fileSize": 78560,
      "name": "Clock.jpg",
      "rating": 4,
      "fileDate": "2013-07-02T12:56:42.0Z",
      "category": "image",
      "title": "Clock",
      "camera": {
        "aperture": 4.5,
        "exposureTime": "1\/50s",
        "originalDate": "2009-08-09T15:46:18.0Z",
        "cameraModel": "Canon EOS 1000D",
        "focusDistance": "0.26m",
        "focalLength35mm": "29.2mm",
        "cameraMake": "Canon",
        "isoEquivalent": 400,
        "flash": "Flash did not fire, auto",
        "focalLength": "18.0mm"
      }
    },
    {
      "path": "Nature",
      "deepCounters": {
        "total": 1,
        "images": 1,
        "files": 1
      },
      "counters": {
        "total": 1,
        "images": 1,
        "files": 1
      },
      "thumb": {
        "path": "Nature\/thumbs\/Horses.jpg",
        "width": 232,
        "height": 160
      },
      "name": "Nature",
      "fileDate": "2015-02-12T15:57:07.0Z",
      "category": "folder"
    }
  ],
  "name": "JSON-example",
  "comment": "Minimal JSON album.",
  "fileDate": "2015-02-12T15:57:27.0Z"
}

Nature/data1.json:

{
  "path": "Nature",
  "deepCounters": {
    "total": 1,
    "images": 1,
    "files": 1
  },
  "counters": {
    "total": 1,
    "images": 1,
    "files": 1
  },
  "thumb": {
    "path": "Nature\/thumbs\/Horses.jpg",
    "width": 232,
    "height": 160
  },
  "album": {
    "description": "Minimal JSON album."
  },
  "objects": [
    {
      "path": "Horses.jpg",
      "image": {
        "path": "slides\/Horses.jpg",
        "width": 900,
        "height": 621
      },
      "thumb": {
        "path": "thumbs\/Horses.jpg",
        "width": 232,
        "height": 160
      },
      "fileSize": 167212,
      "name": "Horses.jpg",
      "rating": 4,
      "fileDate": "2013-07-02T13:08:20.0Z",
      "category": "image",
      "title": "Horses",
      "camera": {
        "aperture": 4.5,
        "exposureTime": "1\/800s",
        "originalDate": "2012-12-27T12:20:49.0Z",
        "cameraModel": "XZ-1",
        "focusDistance": "155.0m",
        "focalLength35mm": "77.0mm",
        "cameraMake": "OLYMPUS IMAGING CORP.",
        "isoEquivalent": 100,
        "flash": "Flash did not fire, auto",
        "focalLength": "16.6mm"
      }
    }
  ],
  "name": "Nature",
  "fileDate": "2015-02-12T15:57:07.0Z"
}

The format of these files are in reality compact and are prettified here for readabiliity.

If you use jQuery you can now read for example tree.json using

$.ajax({
	type: "GET",
	dataType: 'json',
	url: 'tree.json'
})
.done(function(data) {/* Process the data here! */});

Some browsers (for example Google Chrome) unfortunately blocks Ajax calls if previewing the local album. Either switch to another browser or Google on how to set the Google Chrome --allow-file-access-from-files flag. Using the built in browser in jAlbum will also work. And if you publish your album to a webserver it will work using any modern browser.

Todo:

• Complete JSON spec.
• SEO support in using seodatatags.inc.
• Include downloadable examples.

MinimalJSON.jaskin