Saturday, 7 January 2012

PHP to Paper.......... Getting a list of Printers

If you've read the first part of this little series of posts, you'll know the aim is to allow a PHP web app to print, the web app has just Authenticated with Google and is now ready to start working with the Google Cloud Print Interfaces.

In this post, we'll take the next step to get things up and running, getting a list of the users printers, so we have the needed ID to send print jobs to.
This is really the first stage, really getting stuck into the Google Cloud Print service. When you add a printer to your Google Cloud Print Manager (using the user details which the web app is getting the Authentication Token for) it is given an ID which up till this point is kept hidden but the system will need it.
HINT: To help things out down the line, I would strongly suggest, whenever you add a printer to the Google Cloud Print Manager you rename it to something nice and friendly - you'll see why shortly.
Ok now for a little bit of code. We will start with setting up the client object which will be used for communicating with the interfaces:

// Google User Email:
$G_Email = "your_google_acount@googlemail.com";
// Google User Password:
$G_Pass = "your_google_acount_password";
// Create a Gdata client for the Google Cloud Print service:
$client = Zend_Gdata_ClientLogin::getHttpClient($G_Email, $G_Pass, 'cloudprint');

You'll notice, this is the same object we used when we got the authentication token. But we now need to add the following two lines, these need to be present for the Google Cloud Print servers to interact with us.:

// Add the hadders to the Client:
$client->setHeaders('Authorization','GoogleLogin auth='.$Client_Login_Token);
$client->setHeaders('X-CloudPrint-Proxy','a-name-for-your-system');

Now that's done, we are ready to start using the interfaces. The next step towards being able to print, is getting a list of the printers which the user account can use. You need this list to get hold of the Google appointed ID for the printer you want to use. To get the list we need to use the search interface. The request will return a JSON object:

// GCP Interface to list printers:
$client->setUri('http://www.google.com/cloudprint/interface/search?output=json');
// Request the list of printers:
$response = $client->request(Zend_Http_Client::POST);

We can now perform a quick test on the object to see if there was an authentication error for example:

// Test the response for an auth error:
if ($response->getStatus() == 403) {
    // Handle the error here.........
}

Now we have the JSON object which contains a couple of details of each of the users printers we can decode it into a PHP Array and we have our list. If however you wanted to allow your user to select a printer to use, you could process the array a little to make it easier to work with, and make it a little more user friendly for your user:

// Decode the result:
$result = json_decode($response->getBody(), true);
// Store an array of printers:
$printerList = array();
// Loop through the printers and to get capabilities:
foreach ($result['printers'] as $printer) {
    // Store details about this printer:
    $currentPrinter = array();
    // Store the printers ID:
    $currentPrinter['id'] =  $printer['id'];
    // Try getting the display name, else get the default name:
    $currentPrinter['name'] = (empty($printer['displayName']))?$printer['name']:$printer['displayName'];
    // Add this printer to the overall list:
    $printerList[] = $currentPrinter;
}

Now remember above I said rename your printer in the Google Cloud Print Manager, if you did your user will see a user friendly name, if you didn't, they will get the generic printer name, normally its make and model.

So up to now we have:
The next step is......sending though something to print!

Thursday, 29 December 2011

PHP to Paper.......... Where to Start - Authenticating with Google

After being tasked with getting a PHP web application to print for itself, and deciding Google Cloud Print was looking like the best solution, I set about finding the solution to my problem.

After reading the official doc's and deciding either this really isn't how Google currently intended for the service to be used or they really just hadn't had chance to put much into the doc's I widened my search.
I came across a very useful chap called Kin Lane, he has made some excellent blog posts on the subject and turns out he works in the field of printing. After a quick email and him agreeing that I *should* be able to achieve what I wanted with Google Cloud Print, I set about solving my puzzle.

At the time of writing this, there is very little in the way of code examples using Google Cloud Print, in fact the only one I had found focusing on submitting a job was this sample. This however left some questions to which I found no useful answers!

To start with, Google have provided some interfaces for working with the service. Kin Lane has covered connecting to some these services (receiving print jobs, rather than submitting print jobs, but it was a very good jump start) with PHP on his blog. The solution focuses on the use of the Zend Framework, which was handy with it being the framework the web app uses!

The Pseudo Answer:
  • The web app has a dedicated Google user account (in my case, this is one of the Google App accounts which is a group email address) 
  • Setup some printers for the user account as described here.
  • The system requests an Authentication Token from Google to allow use of the service.
  • The system can now access the printers and use the interfaces.
    • The system can now get a list of printers, and
    • The system can now submit jobs to be printed!
The Start of the Real Answer:

After setting up the printers for a user account, as described here.
The first step the system needs to take is getting an Authentication Token from Google which allows us to use the users services, in this case, the printers you have setup.

// Google User Email:
$G_Email = "your_google_acount@googlemail.com";
// Google User Password:
$G_Pass = "your_google_acount_password";
// Create a Gdata client for the Google Cloud Print service:
$client = Zend_Gdata_ClientLogin::getHttpClient($G_Email, $G_Pass, 'cloudprint');
// Get the Authentication Token:
$Client_Login_Token = $client->getClientLoginToken();

Picture taken from Google

You'll notice, the use of the Zend Framework makes getting the Authentication Token extremely easy, however, and this is quite a big however, there is the potential Google will deny an Authentication Token, and instead request a captcha to be completed, this is covered by the Zend Doc's and other guides on the web, but I will try to come back to it later due to this causing an error for an automated system.
Another thing to note is, once Google has served an Authentication Token, it remains valid for several days, I have read this can be anywhere from 14 days to 28 days, so to play it safe, I request a new token every 10 days to play it safe.

In the next entry I will cover the use of the different interfaces to allow us to print.

Saturday, 24 December 2011

PHP to Paper..........The Introduction to Printing

Well I'm sure if you have found this blog entry, it's not because you need to be taught how to suck eggs! I recently ran into the brick wall that is, getting a PHP web application to print directly to a printer, no user dialogs, and the printer a sitting on the opposite side of the world to the server, I'm guessing if you have found this, you are looking for a solution to the very same thing.
Google Cloud Print
Imagine this for a situation, you run an online shop, the server is online in a far away place, the office is in one location where workers maintain the shop and your items listed, in another location is your warehouse, every day someone in your warehouse has to log in to print out a picking note and a delivery note.
Now how much easier would it be if every time an order came in, the printer sitting in the warehouse churned out the paperwork the minute your customer confirmed their order?!

Well this was a challenge I had been tasked with, allowing a PHP based back office system to print, no dialogs, no questions asked. So where to start, I wanted a solution which was both simple and easy to maintain. As printers come and go, I wanted a solution that was somewhat future proof and didn't need much code work to change or add printers and the possibility of printing to more than one location.

After a little thinking and a little bit of trawling, I kept coming back to one possibility which the more I thought about the more I thought it's got to hold the answer.
If you haven't heard about it yet, you soon will, the awesome giant that is Google have come up with an excellent new beta product, its called Google Cloud Print, and while at the moment I don't really think it's intended to be an answer to the problem, the more I thought about it, the more I thought it was going to be the answer. Over the next few blog posts I am going to share my findings, and show you how I've used Google Cloud Print to get my PHP system to print directly to my printers, that's the server (in this case) stateside printing directly to a printer roughly 2500 miles away from it!


So a final word to end the introduction, before I get stuck into the nitty gritty: What is Google Cloud Print I hear you ask:

Print anywhere, from any device.
Google Cloud Print is a new technology that connects your printers to the web. Using Google Cloud Print, you can make your home and work printers available to you and anyone you choose, from the applications you use every day. Google Cloud Print works on your phone, tablet, Chromebook, PC, and any other web-connected device you want to print from.
A diagram showing the workflow of Google Cloud Print

Looking for the official help? Click Here for the developers doc's, but be warned as at the time of writing this, the doc's are somewhat limited due to Google Cloud Print still being in beta.

Wednesday, 9 March 2011

Using jQuery to perform a Bing API search - explained.....

After a recent discussion, I was asked to explain how the jQuery Bing API search found on the site vynora.com worked , so decided, if its useful to one, it maybe useful to others, so in this post I will explain line by line what's happening.

Below is an example of what you will get if you used to code (except I've added a button to clear the results), all you need to do is type! This kind of search box does have one major downside, if the user has javascript turned off, it won't work!! But for majority of users out there it will 

The Example:
Search For:


The basics of the search are:
  1. An input box for your user to type what they are searching for.
  2. A container to show off the results that get returned.
  3. Some jQuery to perform the magic for you.
    1. NOTE: You will need to get an API ID from Bing to allow you to perform searches on your own site. You can get one here.
Lets see some code then:
The input box - straight forward enough:
<input type="text" class="search_input" />

NOTE: in jQuery if you want to reference a DOM element, if it has an ID attribute use #idName, if you want to reference an element by its class name use .className

The results box - again straight forward enough:
<div id="result"></div>

Finally the jQuery magic:
1. $(document).ready(function(){
2.  $(".search_input").focus();
3.  $(".search_input").keyup(function() {
4.   var search_input = $(this).val();
5.   var keyword = encodeURIComponent(search_input);
6.   var appID = "YOUR-OWN-APP-ID-FROM-BING";
7.   var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid='+appID+'&query='+keyword+'&sources=web'; 
8.   $.ajax({
9.    type: "GET",
10.    url: yt_url,
11.    dataType:"jsonp",
12.    success: function(response){
13.     $("#result").html('');
14.     if(response.SearchResponse.Web.Results.length){
15.      $.each(response.SearchResponse.Web.Results, function(i,data){
16.       var title=data.Title;
17.       var dis=data.Description;
18.       var url=data.Url;
19.       var final="<div class="webresult"><div class="title"><a href="http://www.blogger.com/%22+url+%22">"+title+"</a></div><div class="desc">"+dis+"</div><div class="url">"+url+"</div></div>";
20.       $("#result").append(final);
21.      });
22.     }
23.     else {
24.      $("#result").html("<div id="no">No results</div>");
25.     }
26.    }
27.   });
28.  });
29. }); 

OK let's break it down now......

  1. When the page has finished loading, run the following code.
  2. Focus the user on the input box so they can start typing straight away.
  3. Bind a function onto the input box, listening for a keypress.
  4. Store whats been written in the input box as a variable.
  5. Encode what was in the input box so it can be passed in a URL to Bing.
  6. Store your Bing application ID you got earlier on into a variable.
  7. Store the URL to query as a variable. To break this down a little, we are passing our application ID, the value from the input box and also informing Bing we want results from the web.
  8. Start a jQuery Ajax request.
  9. Set the ajax type to a GET request.
  10. Set the URL for the ajax call to contact.
  11. Set the data type as jsonp (a cross browser request for JSON formated results)
  12. If the ajax request was successful, perform the following (data that was returned will be available as response).
  13. Clear any previous results.
  14. Check we actually got some results (If there were none, the length would be 0 - 0 is equal to false. When queried like this, anything other than 0 is true)
  15. Now use the jQuery .each() function to loop through each result which was returned, performing the following for each result.
  16. Store this results title as a variable.
  17. Store this results description as a variable.
  18. Store this results URL as a variable.
  19. Store a HTML snippet to display this result, putting each part into a container (this allows our CSS to make the results look pretty).
  20. Use jQuery's .append() method to add the HTML snippet to the end of the results container.
  21. Finished looping through the results.
  22. Finished what happens if there were results.
  23. Perform the following in the case no results were returned.
  24. Use jQuerys .html() method to set the results container to show a message saying nothing came back. This method would clear everything else from the container leaving just what it sets.
  25. Finished what happens if nothing was returned.
  26. Finished what to do when the ajax is successful.
  27. Finished the ajax call.
  28. Finished what to do when a key is pressed on the input box.
  29. Finished what to do when the page has finished loading.
The final, but optional part for this, by now, rather long post is the CSS to style the results. I won't break this lot down, there is plenty of guides out there which will help you understand CSS if you need to know:
.title{
 color:#069;
 font-size:15px;
 padding-bottom:5px
}

.title a{
 color:#2200c1;
 text-decoration:none
}

.title a:hover{
 text-decoration:underline
}

.desc{
 color:#333;
 padding-bottom:5px
}

.url{
 color:#0e774a
}

.webresult{
 margin-top:10px;
 padding-bottom:10px;
 padding-left:5px;
 border-bottom:1px dashed #dedede
} 

#result {
 text-align: left;
 font-family: arial,helvetica,sans serif;
}


One final note:
The above code is what I was asked to explain, it isn't in my opinion a fully polished example I would put into production. When I have a moment, I will polish up the jQuery code a little so it gives somewhat of a nicer user experience - i.e. advising the user when the ajax fails, and performing just one request instead of one for every letter pressed (see the post for why this can be a problem).




Scoobler.

Some jQuery books from Amazon.com:

HTML5: Up and Running     HTML5 and CSS3: Develop with Tomorrow's Standards Today (Pragmatic Programmers)     jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)

Monday, 7 March 2011

Adding Fancybox to blogger.com

Fancybox for jQuery is another one of the plugins which I really like right now. I came across Fancybox one day in work whilst I was developing a web application where I wanted to show a map, but didn't really want to go down the route of using Google Maps API to showing my own map - that all seemed far too cumbersome when I could simply open Google Maps, but thats no fun now is it!!!

So along came Fancybox to save the day and make that really boring link to Google Maps so much more pleasurable.

OK so Fancybox can do so much more but for the purpose of this post I will show you how to set it up to open up a pretty iFrame popup when you click on a link you have added to your blog.

As ever with my jQuery posts, you can try this out on this very page - if you haven't clicked a link above already, go ahead and click this one below:


Pretty aint it?!?!

A little preparation is key:
First things first, Fancybox doesn't appear to have a CDN, so we are going to need to download the source files, extract them and store them somewhere online where you can reference them from.

  • Download from Fancybox.com
  • Extract the files, you will need (at the time of writing this):
    • jquery.fancybox-1.3.4.css
    • jquery.fancybox-1.3.4.pack.js
    • All images from the fancybox folder.
  • Now you need to store the files (all in the same directory) somewhere online where you can reference them.
  • You will need to know the web address in a moment (lookout for YOURDOMAIN.com)....

Let's take a look at the code:
Firstly we need to add the plugin:
  1. Login to your blog. At the top right of the page (for me anyway) click Design
  2. Click on the Edit HTML tab.
  3. Find the line </head>
  4. Just before the line, you need to add the following code:
  5. <script src='http://YOURDOMAIN.com/hosted/fancybox/jquery.fancybox-1.3.4.js' type='text/javascript'/> 
    <link href='http://YOURDOMAIN.com/hosted/fancybox/jquery.fancybox-1.3.4.css' rel='stylesheet' type='text/css'/>
    
  6. Now we need to add some jQuery code to the section we setup in: Adding jQuery to your blogger.com. Add the following lines:
  7. $("a.inlineLink").fancybox({
         'width'             : '75%',
         'height'            : '75%',
         'autoScale'         : true,
         'enableEscapeButton': true,
         'speedIn'  : 500,
         'speedOut'  : 500,
         'padding'  : 15,
         'overlayColor' : '#123',
         'transitionIn'      : 'fade',
         'transitionOut'     : 'fade',
         'type'              : 'iframe'
     });
    
That's the control's in place, now all you need to do is a little tweak in your post, and voila......
  1. Create your post as you normally would, including using the Link feature to add links within your post.
  2. Once completed, you will need to edit your HTML, so click on the Edit HTML tab.
  3. Now find the code for the link, taking the example above link to Google.com it will look something like this:
  4. <a href="http://www.google.com/">View: Google.com</a>
  5. Now we need to add the trigger, so when the user clicks the link it open Fancybox:
  6. class="inlineLink"
  7. The final code will look something like this:
  8. <a href="http://www.google.com/" class="inlineLink">View: Googlee.com</a>
    
Simple, but so effective! Great for when you want to show a reader something without them disappearing off from your blog!

NOTE: Make sure you check your links once you have added the effect, there are the odd sites out there which won't work in an iFrame, take YouTube.com for example (go on give it a click).....

Scoobler.

Some jQuery books from Amazon.com:
Professional Ajax, 2nd Edition (Programmer to Programmer)     Smashing jQuery (Smashing Magazine Book Series)     JavaScript: The Good Parts
Scroll to Top