MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

var tileContent = NotificationsExtensions.TileContent.TileContentFactory
.createTileWideImageAndText01();
tileContent.image.src = "ms-appx:///images/redWide.png";
tileContent.image.addImageQuery = true;
In all of these cases, the appended string will be of the form
?ms-scale=&ms-contrast=&ms-lang=
where is 80, 100, 140, or 180, is standard, black, or white, and is a
BCP-47 language tag such as en-US, jp-JP, de-DE, and so forth. All of these are described on the
Globalization and accessibility for tile and toast notifications in the documentation, including how to
localize update text.
Sidebar: PNG vs. JPEG Image Sizes
When considering tile images for the larger 140% and 180% scales, the encoding you use for your
images can make a big difference and keep them below the 200K size limit. As we saw in
“Branding Your App 101” in Chapter 3, a wide tile at 180% is 558x270 pixels and a square is
270x270 pixels. With the wide tile, a typical photographic PNG at this size will easily exceed 200K.
I encountered this when adding tile support to Here My Am! in this chapter, where it makes a
smaller version of the current photo in the local appdata folder and uses ms-appdata:///-local
URIs in the tile XML payload. At first, I borrowed code from Scenario 10 of the App tiles and
badges sample, as we’ve been working with here, to create a PNG from the img element using a
temporary canvas and the blob APIs. This worked fine for a 270x270 tile image (a 180% scale that
can be downsized), but for a 558x270 the file was too large. So I borrowed code from Scenario 3
of the Simple Imaging sample to directly transcode the StorageFile for the current image into a
JPEG, where the compression is much better and we don’t need to use the canvas. This code is in
the transcodeImageFile function in pages/home/home.js, a routine that we’ll also rewrite in
Chapter 17 using C# in a WinRT component.
Such considerations are certainly important for services that handle the addImageQuery
parameters for scale. For larger image sizes, it’s probably wise to stick with the JPEG format to
avoid going over the 200K limit.
Branding
If you’re the kind of person who likes to read XML schema specs (like the Tile schema reference I
pointed to a few moments ago), you might have noticed another attribute of the visual and binding
elements called branding. This can be set to none, logo (the default), or name to indicate whether to
include the app’s small logo or short name on the tile, both of which are provided in the app’s manifest.
Scenario 5 of the App tiles and badges sample lets you play with these variations.
584