Anatomy of a Genie Add-In

by Peter Tyrrell Wednesday, October 20, 2010 1:18 PM

I was recently asked to add a feature to Inmagic Genie that would detect overdues and calculate fines on the Loans Checkin page, allow a staffperson to override fine values, and save the fine totals to the Loans database in order to generate overdue reports by borrower.

Here it is in action over the Loans Checkin page:

checkin_modal

Fig. 1 (above) - Overdues dialog appears when barcode input loses focus.

 

checkin_growl

Fig. 2 (above) - Growl-type message shows feedback.

 

Workflow

  1. Enter barcodes.
  2. Tab out.
  3. Overdues, if any, appear. Set and submit fines.
  4. Click Check In button.

One extra step isn't too bad, right?

Pros

  • Minimal impact on Genie: just one extra line in loans_checkin.aspx.
  • Easy to set up.
  • Supports IE7, IE8, IE9 beta, Firefox 3+, Chrome 5+, Opera 10+, Safari 5+
  • Supports 212 international currency formats.
  • AJAX-to-web-service-enabled
  • Blessed with good looks

Cons

  • It's not already part of Genie?

Anatomy

The key components are:

  • An ASP.NET user control: AndornotCheckinControl.ascx.
  • A jQuery plugin: jquery.genieCheckin-1.0.js.
  • A JSON-enabled .NET web service: checkin.asmx.
  • A .NET wrapper to the Webpublisher XML API: Andornot.Web.WebPublisherXml.dll
  • A supporting Genie AddIn assembly: Andornot.GenieAddIns.Web.dll

genie_checkin

Fig. 3 (above) - Diagram showing key components and workflow of the add-in.

 

Contact Us

Call or email or parachute in for a quote on adding this functionality to your Inmagic Genie installation.

1-866-2626-2525 toll free
info@andornot.com
Where to land your parachute or glider

Charting Change Atlas: the technical details

by Peter Tyrrell Wednesday, February 17, 2010 11:14 AM

The City of Burnaby just launched their Charting Change Atlas, a series of interactive maps showing historical points of interest for the past 100 years. See the news post here. Since I was responsible for its development, I thought I’d talk about some of the technical aspects.

Over 350 points of interest, held as records in an Inmagic database, are associated with four map images. Making those images look and act like current web-based map applications was a bit of a challenge, and it was critical to keep page size down and performance snappy.

Map images

Each map image originated as a 2700 x 3500 TIFF, and each point of interest was located as an X/Y coordinate in pixels relative to the image. These images were not maps, but pictures that looked like maps. That meant we couldn't place points of interest on them via address or latitude/longitude.

The large images were then sliced into PNG tiles by excitable chefs wielding ginsu knives. The tiles are loaded dynamically when they are pulled into the visible viewport to cut down on initial load time. A modified version of the jQuery plugin Lazy Load is used to determine when an unloaded tile has appeared within the viewport.

A map framework

The viewport resizes to fit the browser resolution, whatever it is, regardless of the size of the map within, and reveals only a portion of the map at a time. It contains a very large outer div tag that marks the boundaries of the drag area, and an inner div that contains the map tiles.

The map can be dragged or scrolled in any direction, but the majority of it is hidden outside the viewport bounds. jQuery UI Draggable powers the drag mechanism. The snap-back feature, which pops the map back to the viewport boundary when the edges are pulled in too far, was inspired by my iPhone.

The rest of the map UI is a nod to current web-based map applications - i.e. Google Maps and Bing Maps - in an effort to create an intuitive and comfortable experience for a visitor. We found the more the application looked and acted like these map applications, the less we had to explain to a first-time user. On the other hand, it perhaps worked too well, because users keep expecting the map to zoom! It doesn't zoom because it consists of just the one layer, while Google, Bing and Co. boast multiple vertical layers. Something to work on in future...

Points of interest

The point data are recursively loaded sector by sector upon page load via jQuery AJAX to a .NET web service, which performs the database query and returns the results as a JSON object. This load sequence considerably improves the perception of performance: large amounts of data are pushed over the wire, but they are spread over the first few seconds following page load.

Pins are cloned from a pin template, stuffed with point of interest data and positioned relative to the map container. The dialog that appears when a pin is hovered over or clicked is built from a dialog template bound to pin data on demand. A modified version of John Resig's Micro-Templating function is used for client-side templating and databinding.

All points of interest are held inside a Heritage Landmarks Inmagic CS/Textworks database, already in use at http://heritageburnaby.com/research/Landmarks/, which was extended to hold information specific to the Charting Change Atlas project: query URLs out to other databases, a blurb and primary image, coordinates, and a Google Street View URL.

Conclusion

It was a blast designing and building the Charting Change Atlas, and a privilege to work together with the far-seeing heritage team at the City of Burnaby. Kudos to them for leveraging their existing toolset and informational treasure trove to make history so alive and accessible.

 

Month List