Creating a Useful and Awesome Screen Saver for Mac

This summer I spent a lot of time working in the Library and wanted to be able to keep my laptop open so I could quickly refer to it, whilst keeping it locked.  Of course, the obvious choice is a screensaver, but they’re all pretty boring – static content, never changing day-to-day, and never useful.  So, as someone who loves Google and has a problem with the size of their inbox, I came up with this – a screensaver that shows currently entered Google Searches (from Google Trends) and the number of items in my inbox, along with a coloured background to indicate if I’m doing well (it’s always always red at the moment).  Check it out below:

It’s very easy to create – all you need is:

  1. A Gmail inbox that you want to keep clear
  2. A PHP file to check how many emails are in your inbox and to change background colour (and a server to run it on, whether remote or local).
  3. A HTML file to bring this together with the Google searches.
  4. WebSaver

(1 and 2 could easily be combined to save the use of an iframe, and this is not great code – but it works).

For the PHP file, you’ll need to fetch the number of items in your inbox (using your mailbox password) and echo back the appropriate page background colour.  I do this with:

<?php
/* connect to gmail */
$hostname = '{imap.gmail.com:993/imap/ssl}';
$username = '<Your gmail or Google Apps email address>';
$password = '<Your Gmail Password or device-specific password (for 2 step)>';

/* try to connect */
$inbox = imap_open($hostname,$username,$password) or die('Cannot connect to Gmail: ' . imap_last_error());

/* grab emails */
$emails = imap_search($inbox,'ALL');

if($emails) {
        if (sizeof($emails) < 100) {
        echo '<body style="background-color:green">';
        } elseif (sizeof($emails) < 150) {
        echo '<body style="background-color:orange">';
        } else {
        echo '<body style="background-color:red">';
        }
        echo '<div style="width:200px; height:200px; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; color:white; font-family: Verdana; font-size: 50px;" align="center">' . sizeof($emails) . ' Emails</div>';
}
?>

Note, where I have set my username and password at the top, and that I have set the level for doing badly (a red background) as 150, and the level for doing OK (a orange background) as 100 (less than that is good, so I get a green background).

In the HTML file, I simply create an IFrame to this page and the page containing the cool Google searches (simply replace below):

<html>
<style>
iframe {
        display:inline-block;
        width: 49.89%;
    height: 100%;
}
body {
    margin: 0px;
    border: 0px;
}
</style>
<body>
<right>
<iframe src="<path to your PHP file>" frameborder="0"></iframe>
<iframe src="http://www.google.co.uk/trends/hottrends/visualize?nrow=5&ncol=3" frameborder="0"></iframe>
</right>
</body>
</body>
</html>

Finally, set your new webpage as your screensaver. Simply download the WebSaver, install it, open Screen Saver options from System Preferences on your Mac, and click on WebSaver on the left. Then click “Screen Saver Options” and enter the URL to the HTML webpage for your screen saver.

Voila, done! Enjoy your awesome screensaver.

(On a final note, I configured a keyboard shortcut on my system of “Command+Alt+.” to activate the screensaver, so I could quickly lock my screen.