WP7 Small-text Tiles with PHP

Anyone who has worked with Windows Phone tile notifications should have found that while it’s great to be able to put text on the back of them, the font is very large and hardly useful for anything more than a few words. It would be great if we could easily choose a small font size, similar to the one used on the Me and contact tiles.

The solution presented below is not the easiest of methods, but it is a way to meet an identical replication of the Me tile back-side. You will need a back-end infrastructure running PHP (though I’m sure you could easily port it to .NET — if you do, please let me know and I’ll feature it here). If you already have a Linux server pushing notifications then you’ll be able to set this up in no time — if you don’t then I highly recommend you look at setting one up, because notifications done well from a server are so much more battery and resource efficient for the user than notifications created via a scheduled task.

I have spent a lot of time figuring out the exact margins, font-size, spacing, etc to make this look 100% native. It is important that we create a transparent PNG because it will then let the accent colour show through. I see plenty of apps with tiles created on-device using JPG libraries, and these have two major flaws:

1. JPG creates heavy artifacts with high contracts items like fine white text on colour
2. JPG doesn’t have transparency, so to get around this the app detects the current accent colour. If the user changes their accent colour then the JPG tile is incorrect until the background agent wakes up.

When creating PNG tiles on the server we get a 100% native look and feel, which cannot be understated when working on the Windows Phone platform.

Prerequisites:

• A web server running Apache & PHP
• A WP7 app with working tile notifications
• The Windows Phone SDK (for the Segoe WP font)

Setup

To create tile backgrounds with small text we’re going to need to generate an image on the server-side. This can be done via the GD library, or another library such as ImageMagick. I’ve gone for the latter, simply because the syntax is a lot cleaner for creating transparent PNGs and for implementing manual word-wrap.

Let’s install ImageMagick. On Ubuntu you can do this with:

Other distributions will be similar, and PHP on Windows shouldn’t be too hard.

You will then want to copy the Segoe WP font from the C:\Windows\Fonts directory on one of your WP7 development PCs. It’s copyrighted so I can’t host it here, but you will get it bundled with the Windows Phone SDK. Copy this to the same folder that you will create the back-tile script in below. You’ll only need the regular style: SEGOEWP.TTF

back-tile.php

Choose somewhere within your www folder to place back-tile.php. Using vim or your favourite editor, paste the following code:

Not only will this script generate your back-tile image, it will also cache it (going by the input string) for further use. This means that if you’re pushing the same tile out to multiple users it is only generated once, and future requests pass the cache right through.

You can run the script with:

http://yourdomain/your/path/back-tile.php?text=Text to go on the back of your tile

This is white text on a transparent background, so you’ll likely see nothing when viewing in-browser. However if you save the image and load it in an image editor (eg Photoshop) then you’ll be able to see if it worked or not. You should have a tile with up to five lines of small text, with a blank space left at the bottom for your BackTitle parameter (usually the name of your app or tile).

Why not use ImageMagick’s built-in word-wrap? I tried this first, but found that the line spacing was much too large. The Imagick library for PHP doesn’t have a line spacing option so I had to use the above code which I had found on a very helpful blog post regarding basic word wrapping with Imagick.

Sending the notifications is beyond the scope of this post, but suffice to say that you can push this tile back using data like so:

Where xml_safe_string is a function that replaces the restricted characters "<>'& with their (ht|x)ml entities.

Finally, the very last change to make is in your application itself. You need to change the ‘BindToShellTile’ call to approve yourdomain for access, otherwise these notifications will be flat-out ignored by the OS.

That’s it! A workaround requiring a bit of time to set up, but it is definitely worth the result. For all we know Windows Phone 8 may remove the need to do this at all, but only time will tell.

Did this work for you? Let me know in the comments. If you use this code in an app I’d love to hear about it!

Public Service Announcement Re: Windows Phone Toast/Tile Notifications

Over the last few nights I spent a while developing a notifications API, cross-platform but with Windows Phone as the testing bed. Many blogs and tutorials were read and were very helpful, but I noticed a concerning message on many of them.

Windows Phone supports three types of notifications: Toast, Tile, and Raw. Toast notifications bring up a banner alert on the device, Tile notifications update the count, pictures, etc on a tile, and Raw notifications are intercepted by the app (and only if it’s open). When invoking these notifications you specify (in the headers) what kind of notification it is and when you want it to be sent (immediately, within 7.5 minutes (450 seconds), or within 15 minutes (900 seconds)).

Most blogs I read only give examples using the ‘immediate’ option and omit the other options. Many even recommend the immediate option, saying they don’t see any reason to use the other ones.

But here’s the thing: this is very wasteful on the battery life and data.

Why? Because every time a web service decides to send your phone a notification with immediate mode, it has to gear up a data transfer and update the tile or show the toast notification (waking up the screen and vibrating the phone for the latter) instead of staying in sleep mode for a little longer. Whereas the other options group notifications (both yours and other applications’) into one package which is received every 7.5 or 15 minutes (depending on the type), and is much more battery efficient.

So here are my recommendations (and rule-of-thumb) when sending notifications to Windows Phone devices:

• Tile notifications: always within 15 minutes (900 seconds). Tile updates are hardly ever urgent, and should be batch-updated wherever possible.
• Toast notifications: usually within 7.5 minutes (15 if possible) unless urgent. Toast notifications are often used to give updates on new posts, your turn, etc, and are no more urgent than tile updates. Remember that these wake the phone screen and vibrate the device, and so are quite wasteful if going off all the time. The only time these should be immediate is if they are time critical, eg IM messages, Twitter Mentions/DMs (even in the Twitter case I would set them as periodic and let the user choose for them to be immediate).
• Raw notifications: always immediate. These are only processed if the application is open and awake. The usage model of Windows Phone is a very ‘snacky’ approach and apps are generally open for seconds instead of minutes, so Raw notifications need to arrive right away. This is OK because the phone is already awake and a data session is probably already established, so you’re not really doing much harm.

Do you agree? If you do things differently I’d love to hear in the comments below.

Timestamp to DateTime Converter for Silverlight

I’m working with DateTimePickers in Silverlight, with all my data coming from a PHP back-end. All times and dates in the API are served as timestamps, a value not automatically supported in C# and even less in XAML.

With the help of a post on codeclimber.net.nz, I’ve written up a simple converter for use in XAML binding.

You can then use this in XAML as so:

Fixing ListPickerPage’s Lack of Formatting

The Silverlight Toolkit’s ListPicker control is a fantastic replication of the combo box used in the Metro UI, however it has one surprising omission: when you have enough items to give a full-screen view, it has no formatting on the list items! Apart from a highlight colour for the selected item, there is no margin, font style or font size set and it doesn’t look like the real deal.

No fear, it’s easy to fix with a quick DataTemplate.

This code assumes you have the Silverlight Toolkit added to your project (find out how), and that your ListPicker is in a StackPanel – if not then replace ‘StackPanel.Resources’ with your equivalent. You could also place the resource somewhere else to make it available for the entire app. You may also need to change the TextBlock Text binding and ListPicker ItemsSource bindings depending on your data structure.

Stop Worrying About Windows 8

As one of the first to download Windows 8, I have used it religiously as my primary operating system, and have to say I’m a big fan. I do have some gripes, however they’re minor and I can see the reason behind them.

I’ll be posting a review of it soon, but until then here’s a very honest article by Sebastian Anthony where he talks about his initial ‘power-user’-centric fears about the OS and how he’s realised that he needn’t have worried in the first place.