Annotation Features

The Zoomify Image Viewer in the Zoomify HTML5 Enterprise product supports viewing and creating annotations, including freehand drawings, text-only captions, icons, rectangles, polygons, and measurements.  


XML and JSON

Zoomify uses XML for storing data about image properties, toolbar skins, hotspots, tours, slideshows, and annotations. XML is well supported by browsers and straightforward to use. Many web designers and developers find JSON easier to read and simpler to manipulate in JavaScript. Zoomify annotations can also be stored in JSON format. Several examples in the Zoomify HTML5 Enterprise product display annotations stored using JSON including the example '58-Storage-JSON-AnnotationsInFile'.


Annotation Graphics Files

The Zoomify Image Viewer supports the use of external graphics files for annotation labels. 
It is also a simple matter to create new annotation graphics using your own image files. The files should be small - icon sized, typically 50 to 150 pixels in either dimension.  The files must be in JPEG, PNG, or GIF format.  Also, many commonly used shapes are included as a starting point in the file: Assets/Annotations/SourceFiles/sourceFilesForIconExternalGraphics.zip. 

Special Note: in  Version 3 or later, external graphic files for certain common icon shapes - circles, triangles, squares, arrows, and lines - will be automatically ignored and replaced with canvas drawn vector graphics. This automatic substitution saves load time and bandwidth and provides a simple upgrade path for customers moving from Versions 1 and 2. The auto-substitution is based on filename. For example, files named 'circle.png', 'circle.jpg', or 'circle.gif' will be affected. Also affected: square, triangle, arrowDownRight, arrowUpLeft, arrowUpRight, arrowUp, arrowDown, arrowLeft, arrowRight, lineHorizontal, and lineVertical. To avoid this effect, simply rename your external graphics files, or use the HTML parameter zLabelIconsInternal=0.


Two Notes For Flash Customers

The HTML5 Viewer's support for editing of color assignments differs somewhat from that in the former Flash-based Viewer. The differences support more intuitive use and will be refined based on customer feedback in future versions. The HTML5 Viewer also supports HTML in hotspot/label captions - though not in tooltips in the current version.

In addition, the graphics in this HTML5-based product are standalone, external graphics files.  These separate files in the Assets/Annotations folder must be uploaded to your webserver to be available for use by the Annotations feature of the HTML5-based Zoomify Image Viewer. This is necessary because the HTML5-based Viewer is simply a small JavaScript file - a text file with special contents - rather than a 'binary' file like the Flash '.swf' file. There is therefore nowhere to 'include' vector graphics. The annotation graphics must therefore be stored externally, as separate files.  (Automatic creation of vector graphics on-the-fly by the JavaScript code of the Viewer is being considered for a future release. This would elminate the need for external graphics files.)