{"id":90,"date":"2014-05-25T19:41:23","date_gmt":"2014-05-25T19:41:23","guid":{"rendered":"http:\/\/blog.klug.me\/?p=90"},"modified":"2014-05-26T06:40:13","modified_gmt":"2014-05-26T06:40:13","slug":"connect-any-printer-to-your-homepage","status":"publish","type":"post","link":"https:\/\/blog.klug.me\/?p=90","title":{"rendered":"Connect any printer to your homepage"},"content":{"rendered":"<p>I recently had a very exciting client\u00a0project where I&#8217;ve created a theater booking system and one part of the requirements was a connection to their ticket printer.<\/p>\n<p>Cause it&#8217;s a client project I will not post some code in this article. It just describes my way throught this project, the ways I took,\u00a0the reasons\u00a0and what I&#8217;ve tried with or without success.\u00a0When I reference any free library or documentation it&#8217;s linked.<\/p>\n<p><!--more--><\/p>\n<p>A the beginning\u00a0I had the advantage that the system is used in the webbrowser and the guy who sits next the entrance checks the reservations, prints the tickets using the website\u00a0and hands it out to the visitor. Ok, that&#8217;s easy, let&#8217;s create an pdf or image which can be printed out. Unfortunately it&#8217;s not very usable because who visits a theater alone?<\/p>\n<p>Another requirement was\u00a0a\u00a0maximum of 10 seats per reservation. So it is possible that our printing guy has to create 10 PDFs\/images, opens each one, click on print (or press [shift]+[P]) and submit the printing dialog. Thats not very comfortable and will take a while.<\/p>\n<p>So I&#8217;ve searched for a way to print multiple tickets\u00a0automatically without getting forced to confirm this printing dialog.\u00a0The computer systems used are all using Windows 7 and as printer they gave me a <a title=\"BOCA Systems\" href=\"http:\/\/www.bocasystems.com\/lemur.html\" target=\"_blank\">Boca Lemur<\/a>.<br \/>\nBoca has plenty of drivers for all operating systems and very good documentation about their hardware. So I&#8217;ve worked myself through\u00a0all of them and had a few plans to solve my problem.<\/p>\n<p>The printer system is programmable using an easy to understand API and I&#8217;d just have to\u00a0create a file describing the ticket content and send it to the printer using an serial adapter or USB. There can also example code be found in their documentation but It&#8217;s written in basic. I&#8217;m a bit of an Linux inthusiastic so I have limited advantages using Windows but I think basic is also in the Windows world not state of the art.<\/p>\n<p>I&#8217;ve searched for a few other options to write data over a usb port to the printer, the serial port was not possible due to the used hardware at the theater.<br \/>\nMy decision\u00a0was java because I&#8217;ve written much more in Java (in special android) than in C\/C++ and consords.\u00a0But it was harder than I thought because I wasn&#8217;t able to list the available ports on my Windows8 system.<\/p>\n<p>On the other side the printer setup worked perfect and after minutes I was able to print a windows testpage on the ticket printer. When it&#8217;s possible to print a testpage it must also be possible to print something else. So I&#8217;ve tried to print a normal textdocument with &#8222;foobar&#8220; as content and it got also printed out. That was the point when I&#8217;ve changed my plans and I&#8217;ve found the <a href=\"http:\/\/docs.oracle.com\/javase\/7\/docs\/api\/java\/awt\/print\/Printable.html\" target=\"_blank\">Java printing API<\/a>.<\/p>\n<p>With this API it&#8217;s easy to send something to any installed printer. You\u00a0can define a new class extending\u00a0java.awt.print.Printable which implements a <a href=\"http:\/\/docs.oracle.com\/javase\/7\/docs\/api\/java\/awt\/print\/Printable.html#print(java.awt.Graphics,%20java.awt.print.PageFormat, int)\" target=\"_blank\">print<\/a> method which gets an Graphics object.<\/p>\n<p>This graphics object makes it possible to draw something on the ticket using java&#8217;s graphics API. It&#8217;s also possible to define a font and draw text on the area using left and top coordinates.<\/p>\n<p>I&#8217;ve used lots of the provided ticket blanks to generate the perfect result but finally I\u00a0made it. The next step was to think about how to send data from the homepage?<br \/>\nMy answer was json over\u00a0a http websocket connection. So the printing server gets started on client side (I&#8217;ve placed an icon showing the theaters logo in the windows taskbar\u00a0to show the status or\u00a0stop the server) and the homepage connects using javascripts websocket API.<\/p>\n<p>FIrst I&#8217;ve\u00a0made a few tries with\u00a0a\u00a0simple self written HTTP-Server and ajax polling requests on the browser site to communicate with the\u00a0printing server. It also worked but there I had problems with javascripts <a href=\"http:\/\/en.wikipedia.org\/wiki\/Same-origin_policy\" target=\"_blank\">same domain policy<\/a>\u00a0(sorted them out using the\u00a0<a href=\"http:\/\/www.w3.org\/TR\/cors\/\" target=\"_blank\">Access-Control-Allow-Origin <\/a>header) and of course it&#8217;s not very\u00a0usefull\u00a0to poll the client machine every second when the printing server is not started.\u00a0I&#8217;ve found\u00a0a wonderful\u00a0java websocket library at <a href=\"https:\/\/github.com\/TooTallNate\/Java-WebSocket\" target=\"_blank\">Github<\/a>\u00a0which performs the handshake itself and it was easy to create the websocket server.<\/p>\n<p>As next step the homepage had to speak with the client. Using 127.0.0.1 and the port the printing server listens to I was soon able to\u00a0create\u00a0a successfull connection between them.<\/p>\n<p>The last thing was to write the javascript client api which checks if the server is running and connects to it. If the connection is successfull the print button on the homepage appears and when our friend at the entrance clicks on it the javascript clients sends all relevant data as json string to the\u00a0printing server running on the his\u00a0computer.<\/p>\n<p>The print server performs a few checks if all needed data for the ticket\u00a0got\u00a0sent and their values and responds with an error on which the client can react or\u00a0create the ticket and send it to the printer.<\/p>\n<p>The printer is really fast and prints 3 tickets per second. In my tests is was possible to send 10 different tickets throught\u00a0the websocket and the printer threw all of them out without any delay.<\/p>\n<p>Success \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I recently had a very exciting client\u00a0project where I&#8217;ve created a theater booking system and one part of the requirements was a connection to their ticket printer. Cause it&#8217;s a client project I will not post some code in this article. It just describes my way throught this project, the ways I took,\u00a0the reasons\u00a0and what [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,16,1,15],"tags":[],"class_list":["post-90","post","type-post","status-publish","format-standard","hentry","category-java","category-javascript","category-uncategorized","category-websockets"],"_links":{"self":[{"href":"https:\/\/blog.klug.me\/index.php?rest_route=\/wp\/v2\/posts\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.klug.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.klug.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.klug.me\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.klug.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=90"}],"version-history":[{"count":11,"href":"https:\/\/blog.klug.me\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/blog.klug.me\/index.php?rest_route=\/wp\/v2\/posts\/90\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/blog.klug.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=90"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.klug.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=90"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.klug.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}