From d5a12bf8389ac73ca63f972f93ce08d0bf618467 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Wed, 29 Mar 2017 15:15:07 -0400 Subject: [PATCH] eg 2017 hatch review doc Signed-off-by: Bill Erickson --- hatch-review.adoc | 103 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 69 insertions(+), 34 deletions(-) diff --git a/hatch-review.adoc b/hatch-review.adoc index 2bd28b1c3..24934f677 100644 --- a/hatch-review.adoc +++ b/hatch-review.adoc @@ -3,8 +3,9 @@ :email: berickxx@gmail.com :date: Evergreen Conference, April 7, 2017 :duration: 50 -:backend: slidy +:backend: deckjs :max-width: 45em +:deckjs_theme: web-2.0 == Hatch In a Nutshell @@ -16,8 +17,8 @@ == Hatch Install Recap * Install Java runtime 8 or higher. - * Install Java code - * Install the Chrome extension + * Install Java code (HatchInstaller.exe) + * Register the Chrome extension == Testing the Java Install @@ -27,20 +28,19 @@ % ./hatch.sh test # Windows -> C:\Users\berick> hatch.bat test - -2017-03-10 16:42:04 FINEST MessageWriter sending: {"clientid":1,... -2017-03-10 16:42:04 INFO Using data directory: /home/berick/.evergreen -2017-03-10 16:42:04 FINEST MessageReader read: {"clientid":1,... -2017-03-10 16:42:04 INFO Received message id=1 action=keys -2017-03-10 16:42:04 FINEST MessageWriter sending: {"clientid":1,... -2017-03-10 16:42:04 FINEST MessageReader read: {"clientid":1,... -2017-03-10 16:42:04 INFO TestJSON:doReceive(): {"clientid":1,... -2017-03-10 16:42:05 FINEST MessageWriter sending: {"clientid":1,... +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... ... --------------------------------------------------------------------------- - == chrome://extensions/ image:images/hatch_chrome_ext.png[Hatch Extension] @@ -53,30 +53,47 @@ image:images/hatch_icon.png[Hatch Diagram] image:images/hatch_ext_warning.png[Hatch Extension Warning] -== Hatch Config UI +== Hatch UI Recap + + * Enable Hatch + * Settings Data + * Configure Printing + +== Enabling Hatch + +Administration => Workstation => Print/Storage Service ("Hatch") image:images/hatch_settings.png[Hatch Config] +== Stored Values + +Administration => Workstation => Stored Preferences + +image:images/hatch_stored_data.png[Hatch Stored Values] + == Hatch Printing UI +Administration => Workstation => Printer Settings + image:images/hatch_print_config.png[Hatch Print Config] -== Hatch Message Flow +== Hatch Architecture -image:images/Hatch_Flow_Diagram.png[Hatch Diagram] +* Browser AngularJS Service +[source,js] +--------------------------------------------------------------------------- +egCore.hatch.setItem('eg.hatch.enable.settings', true); +egCore.hatch.getItem('eg.workstation.default').then( + function(ws) { console.log('default workstation: ' + ws) }); +--------------------------------------------------------------------------- +* Browser Extension + ** Relays messages between the browser and Native Application +* Native Application + ** Writes files, talks to printers. -== A Quick Word on Rendering Print Templates +== Hatch Message Flow -* Browser inserts template HTML into the page DOM. -* Browser digests the template, replacing placeholders - ** For example, replacing {{balance_owed | money}} with - $2.25 -* In non-Hatch mode, print CSS is added to the print DOM element and a call - to window.print() prints only the rendered template content from the page. -* In Hatch mode, the compiled HTML content is extracted from the DOM as - an HTML string and sent to Hatch with a 'print' command. - ** Hatch does not inject any JS or CSS (but it can load remote content, - i.e. scripts, css, images, etc.). +image:images/Hatch_Flow_Diagram.png[Hatch Diagram] == Native Messaging API @@ -99,6 +116,20 @@ egPrint.print({...}) is translated into: } --------------------------------------------------------------------------- +== A Quick Word on Rendering Print HTML + +* Print template is added to the DOM +* Print template is $digest'ed with context-specific data + ** {{balance_owed | money}} becomes $2.25 +* 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 + == Hatch Configuration Files == Hatch Data Files @@ -108,19 +139,23 @@ home directory. image:images/hatch_data_dir.png[Hatch Data Dir] - == Hatch Settings Files [source,js] --------------------------------------------------------------------------- --------------------------------------------------------------------------- +== What's Next? + +== Publish Browser Extension + * Chrome store == Alternate Implementations - Challenges - * headless HTML rendering + printing - * printer api (simpler if targeting one OS) -== Publish Browser Extension +Hatch native application (Java) could potentially be written in any +languag as long as it can do 3 things: + +* Read/Write via STDIO +* Render HTML +* Communicate with printers -* Chrome store -- 2.11.0