Happy Hatch’s Hoppalong Hootenanny

Bill Erickson, Software Development Engineer, King County Library System

Evergreen Conference, April 6, 2017

…And Technical Review

Thus concludes the whimsy.

Today’s Agenda

• What is Hatch?
• How Does It Work?
• Install Review
• Debugging
• Browser Client Interfaces
• What’s Next?

Hatch In a Nutshell

• Unmediated printing across multiple printers
• File storage free of browser restrictions or garbage collection

"Hatch is the bionic arm of the Evergreen browser client." --Anonymous.

Hatch Architecture

1. Browser AngularJS Service (egHatch)

   • Browser client print/storage abstraction layer.

2. Browser Extension

   • Relays messages between the browser and Native Application

3. Native Application

   • Read files, Write files, talk to printers.

Hatch Message Flow

JS Objects and JSON All The Way Down

{
    "action":"print",
    "content":"<b>Hello, World!</b>",
    "contentType":"text/html",
    "showDialog":true,
    "msgid":10,
    "from":"page",
    "clientid":5319,                   // set by extension
    "origin":"https://eg.example.org", // set by extension
    "settings":{"context":"default","printer":"HP-Deskjet-5100", ...}
}

Hatch Install Recap

1. Install Java runtime 8 or higher.

2. Install Java & Extension code (HatchInstaller.exe)

3. Register the Chrome extension

Install Instructions at evergreen-ils.org

HatchInstaller.exe

• Windows:
  • Puts Hatch files in C:\Program Files (x86)\Hatch
  • Add registry keys telling the browser where the Native Messaging manifest file can be found.
  • Native Messaging manifest tells the browser how to find hatch.bat
• Linux/Mac
  • Hatch files can live anywhere (e.g. Git checkout).
  • Native Messaging manifest is placed in a well-known directory.
  • Native Messaging manifest tells the browser how to find hatch.sh
• Settings Files: hatch.properties & logging.properties

chrome://extensions/

Developer Mode Beware!

Testing and Debugging

Testing the Java Install

# Linux
% ./hatch.sh test

# Windows
C:\Program Files (x86)\Hatch> hatch.bat test

2017-03-29 13:52:21 FINEST MessageWriter sending: {"clientid":1,"origin":"https://test.hatch...
2017-03-29 13:52:21 INFO   Using data directory: /home/berick/.evergreen
2017-03-29 13:52:21 FINEST MessageReader read: {"clientid":1,"origin":"https://test.hatch....
2017-03-29 13:52:21 INFO   Received message id=1 action=keys
2017-03-29 13:52:21 FINEST MessageWriter sending: {"clientid":1,"msgid":1,"message":"OK",...
2017-03-29 13:52:21 FINEST MessageReader read: {"clientid":1,"msgid":1,"message":"OK",...
2017-03-29 13:52:21 INFO   TestJSON:doReceive(): {"clientid":1,"msgid":1,"message":"OK",...
2017-03-29 13:52:22 FINEST MessageWriter sending: {"clientid":1,"origin":"https://test.hatch...
...

Debugging Extensions

Hatch UI Recap

1. Enable Hatch

2. Settings Data

3. Configure Printing

Enabling Hatch

Administration ⇒ Workstation ⇒ Print/Storage Service ("Hatch")

Stored Values

Administration ⇒ Workstation ⇒ Stored Preferences

Hatch Data Files

% cd ~/.evergreen
% ls
hatch.log  hatch.log.lck  https_eg-dev-local  https_test.hatch.evergreen-ils.org

% ls https_eg-dev-local
cat.holdings_show_copies         eg.audio.disable              ...
cat.holdings_show_empty          eg.auth.time                  ...
cat.holdings_show_vols           eg.auth.token                 ...
cat.marcedit.stack_subfields     eg.cat.last_record_retrieved  ...
circ.checkout.strict_barcode     eg.circ.last_patron           ...
current_tag_table_marc21_biblio  eg.grid.circ.patron.search    ...

% cat https_eg-dev-local/eg.workstation.all
[{"owning_lib":4,"name":"BR1-fizzzle","id":"4"}]

Hatch Printing UI

Administration ⇒ Workstation ⇒ Printer Settings

A Quick Word on Rendering Print HTML

• Print template is added to the DOM
• Print template is $digest’ed with context-specific data
  • <span>{{balance_owed | money}}<span> becomes <span>$2.25</span>
• Non-Hatch Mode
  • window.print()
  • Print CSS results in only the $digest’ed template being printed
• Hatch Mode
  • $digest’ed HTML string is extracted from DOM
  • HTML string is sent to Hatch
  • Hatch adds no JS or CSS. It uses only what’s added to or linked in the compiled HTML.

What’s Next?

• Publishing Browser Extension
• Firefox Support
• Using Hatch for printer negotiation only.
• Alternate Native Application Implementations
  • Render HTML
  • Communicate with printers