10.4.41.4 - Gallery Example for Developers

This page provides a demonstration of how one might use the JSON output of the Notations operator. It presents sample Javascript code that reads an image and the JSON generated by iToolBox to annotate the image. You are certainly free to copy and modify this code; it's here for exactly that purpose.

For the demo, there are two files. These are in the gallery folder:

ben_airport.jpg — the image. The name, without the extension, is used to find the JSON, next:

Note: In this example, I have eliminated the database integration specifically to keep the demo both easier to grasp and the code free of database dependencies. Basically, the gallery folder will contain image files, likely either .png and/or .jpg/.jpeg, because those are the image formats the browsers understand, and JSON files with matching filenames generated by iToolBox. You'd modify the getData() function in the Javascript code and that's probably all.

Tip: This HTML and Javascript code depends on the HTML5canvas element. Modern browsers should have no trouble. Also, the HTML4 validation at the bottom of the page will fail because this element is included in the demo.

Mouse over the image to see the notes (or, in a touchscreen environment, touch the button underneath the image):

Here's the HTML code in the body of the page. You'll note there's nothing specific in it as to what image is to be displayed; that's taken care of in the Javascript. You just drop it on the page and that's the end of that. For use in an actual image gallery, you'd provide some way to feed the viewer's current location in the gallery to the database, and it would simply return the name of the image. From there, the rest of the process picks up the image and the notations and you're good to go. Here it is:

Lastly, (and just for reference, iToolBox builds this information, so you need not worry about it) here's the content of the JSON file, ben_airport.json — note that the filename matches the image name. The image name is stripped of its extension, then .json is added, and that's how the gallery locates the JSON data you see here: