Skip to content

Building content services

Jump to bottom Edit New page
lazyatom edited this page Apr 11, 2012 · 6 revisions

While all the software architecture is really nice and all that, it's all pointless without engaging, interesting, useful and fun content to be printed.

(If you haven't already looked at the general system architecture, please take a look; it will make some of this make more sense.)

The beauty of this software is that it's very simple to turn content into printouts; you just need to produce some HTML, and the printer system will take care of the rest. But even with that said, there are a few things to be aware of that will make your life easier.

Printing from a static page

The simplest possible content service isn't even an application -- it's just a static HTML page that includes some Javascript from the printer backend.

The backend provides one such page, called sample.html

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- 1. --> <link rel="stylesheet" href="http://printer.gofreerange.com/stylesheets/print.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <!-- 2. --> <script src="http://printer.gofreerange.com/javascripts/printer.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {
        $("#previewPage").click(Printer.previewPage);
        $("#printPage").click(function() {
          var printerID = prompt("Enter the ID of the printer to target");
          Printer.printPage(printerID, function(result) {
            if (result.response == "ok") {
              alert("Page successfully sent for printing");
            } else {
              alert("There was a problem sending this content");
              console.log("Error response", result);
            }
          });
        });
      })
    </script>
  </head>
  <body class="preview"> <!-- 3. -->
    <div class="controls">
      <a id="previewPage" href="#">Preview</a>
      <a id="printPage" href="#">Print</a>
    </div>
    <div class="paper"> <!-- 4. -->
      <div class="content">
        <h1>Your content</h1>
        <p>(Put it here, yo.)</p>
      </div>
    </div>
  </body>
</html>

There are a few key features:

  1. including the print.css
  2. the printer.js javascript
  3. the preview class on the body element
  4. the paper and content divs.

print.css and page width

Little receipt printers have a very small page width -- normally 384 pixels. The backend server tries as hard as it can to constraint the width of the content for printing to fit in this space, but at the moment it's still possible for a page to accidentally grow to a greater width, which will cause printing to fail.

The print.css stylesheet provides a few small styles to help constrain your content to 384px. All you need to do is wrap your content in an element with the content class, and this will be set to the correct width.

I strongly recommend that you don't put any other content on your page outside of the content element (with the preview caveat I'll explain below.

Previewing

Designing inside a plain white div isn't very inspiring, and also doesn't communicate anything about the margins which will be present on the final printout.

To help give a more realistic preview, print.css also includes a style for a paper element, which is intended to wrap around the content element described above, like so:

<div class="paper">
  <div class="content">
    <h1>Your content</h1>
  </div>
</div>

If you give the body element of your page the preview class, your content will then appear centered and with approximate margins, making it much easier to design. When the backend server performs its rasterisation, it removes this preview class, reverting the page back to its plain, unadorned version.

You can also use this preview class to show elements while designing (such as the Javascript print controls which we'll discuss below), but hide those elements when preview is not present.

Sending content via Javascript

Since there's no way for the printer backend to request your local HTML page, we can send the content to it using the javascript in printer.js. This provides two functions -- Printer.previewPage and Printer.printPage -- which you can connect to links or buttons on your page.

(If you are running your own print backend, or a local one, you can also change the value of Printer.backendUrl to point to your server. The default is http://printer.gofreerange.com.)

The Printer.previewPage function simply posts the entire content of the current page to the backend server, and then redirects you to the preview page (which will reload until the preview is ready). This is a good way of checking how fonts will appear during the rasterisation process.

The Printer.printPage expects a printer ID and a callback, which is passed through to jQuery's ajax mechanism. It also posts the page content to the server at Printer.backendURL.

In this way, you can design, preview and test-print HTML without needing to deploy any content to publicly-accessible servers.

Add a custom footer
Add a custom sidebar

Clone this wiki locally