Note: The file used to retrieve the stats is currently an unsupported file, designed to be used only by the Windows 7 desktop gadgets. PaperCut support will not assist you with using this file.
They are considering plans to support and document this file (or a version of it) in a future release, but it is not a priority.

This tutorial assumes you have a little knowledge of web programming languages, but you do have a PHP web server available to you.

Why PHP?

If you attempted to use jQuery to run a
$.getJSON()
command on the stats file you will be returned an error similar to this in your browsers javascript console:

This is because, for security reasons, most modern browsers restrict HTTP requests initiated within scripts that travel cross-origin. This means that an HTTP request from http://domain-a.com to http://domain-b.com will likely fail.
More information on this topic can be found here.

PHP, being a server-side script doesn’t follow these browser security standards and is therefore able to perform this cross-site request.

In this example, we are only using one line of PHP, which is to load the contents of the stats file.

So how do I do it?

This tutorial will help you create an extremely simple, one-page document to display a relatively unstyled “widget” like this.

PaperCut Stats Example - Results

Step 1

You need to create a basic page layout with two
<div>
elements. The first one will have the ID of
pStats
and the second
pData
. We will hide the second
<div>
by setting the style attribute to
display: none;

Step 2

We’ll load the stats JSON file into the second div with a single PHP line.

Update the
pData
<div>
so it looks like this:

Replace PAPERCUT_SERVER with the DNS name of your PaperCut server.

This is a really simple PHP command, but I’ll explain what is happening.

The
file_get_contents()
command, in this case, only requires one parameter, a path to a file. The file will be read by PHP (provided it is accessible) and all contents, no matter the file type will be returned.

The
echo
command simply writes strings. In this case the results of the read file.

If you are inquisitive, you could remove the style attribute from
pData
and view the page. The div will show the contents of the print-stats.json file.

Step 3

Include the jQuery Library just before the closing
</body>
tag. You can use one of the many available CDN libraries for this. E.G.

Step 4

We’re going to write a small javascript function which we will use to format the total pages number for display.

Below the last
<script>
tag that we just created in Step 3, create a new
<script>
tag that contains the following code.

I wont explain in depth how this works, but it will receive a number like 123456789 and return it like this 123,456,789 without formatting any numbers after the decimal point.

Step 5

Now is when we are going to read the JSON and display it in the
pStats
<div>
. We can use the same
<script>
tag that we created in Step 4 and insert this code above the previous code.

The first line uses jQuery to read the contents of the
pData
<div>
, parse the JSON to become a javascript object and store in the javascript variable of
pData
.

The following lines are what you may decide to change. They apply the available stats into
<p>
tags and store them in a javascript variable of
html
.

You may notice the that
pData.totalPages
is run through the previously created
formatNumber()
function.

The last line uses jQuery to set the HTML contents of the
pStats
<div>
to contain the created html variable.

Step 6

Apply some basic formatting the pStats <div> using the style attribute. This would normally be done through an externally loaded CSS file, but that is outside the scope of this tutorial.

 

 

Full List of available stats data

pData.monthlyPages
(Object)
pData.monthlyCost
(Object)
pData.treesFormatted
pData.gramsCO2Formatted
pData.totalUsers
pData.bulbHoursFormatted
pData.weeklySheets
(Object)
pData.weeklyPages
(Object)
pData.monthlyCostsFormatted
(Object)
pData.bulbHours
pData.sinceDateFormatted
pData.gramsCO2
pData.monthlySheets
(Object)
pData.trees
pData.sinceDate
pData.totalSheets
pData.totalPages
Data marked as  (Object) will require extra jQuery knowledge to display these stats, this is outside of the scope of this tutorial.


0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.