locked
tileSquareText01 tile updates work, tileSquareImage tile updates don't

    Question

  • My Win8 development machine is a Hyper-V virtual machine.  I am developing a WinJS app on it by remote desktop.

    I want to update my app's live tile from an image in an HTML5 canvas.  I have written code that successfully creates a 512 x 512 PNG file from the canvas and stores it in my app's local storage folder.  The PNG file is well under the maximum file size (9KB).  If I create a tileSquareImage XML referencing this PNG file ("ms-appdata:///local/myImage.png")  and call update(), the image in the live tile does not update.  If I right-click on the tile in the shell and turn live updates off and on again, the tile then displays the expected image.

    If repeat this test using a text template (tileSquareText01), the tile updates as expected when I call update().  

    I am really stumped by this one, have been stuck on it for a day or more.

    I have found some posts advising me to look for tile notification events in the Event Viewer to help figure out what is going on (see below).  I can't find Applications and Services Logs > Microsoft > Windows > Immersive-Shell in the Event Viewer.

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465391.aspx

    You can use the Event Log to check for errors when your toast notification does not display. Look for events involving your toast notification in the Event Viewer under Applications and Services Logs > Microsoft > Windows > Immersive-Shell > Microsoft-Windows-TWinUI > Operational.


    Kevin Woram


    • Edited by Kevin Woram Tuesday, October 02, 2012 6:55 PM
    Tuesday, October 02, 2012 6:50 PM

Answers

  • Thanks for your help but I figured it out this morning.  For each image update, I was over-writing the existing local image file with new contents and then sending a tile notification with the path to the over-written image file.  The live tile was ignoring the update because the path to the image file was the same from update to update.  Once I started generating a new file name each time, the live tile began to update as expected.

    Is this behavior documented anywhere?  It sure caused me some grief.


    Kevin Woram

    • Marked as answer by Kevin Woram Wednesday, October 03, 2012 5:31 PM
    Wednesday, October 03, 2012 1:47 PM

All replies

  • After your app calls update and you go back to the start screen, if you wait a little while does the tile still not show the image? I'm my experience of doing tile updates, the update doesn't happen instantly once you call update, but instead will happen several seconds later in a normal cadence with other tile updates.

    Nick Eubanks (MSFT)

    Tuesday, October 02, 2012 7:54 PM
  • I also noticed that slight delay of a second or two before the tile updates when using tileSquareText01.   When I use tileSquareImage, however, I wait for many seconds and the tile never updates.  If I right-click on the tile and toggle live updates off and on, the tile redraws with the expected image.



    Kevin Woram

    Tuesday, October 02, 2012 9:17 PM
  • I think this is a bug:  my tileSquareImage update must have been valid and the tile must have received it.  If it was invalid, the file would have ignored it.  If it never received it, how could it update to the proper image when I toggle live updates off and on?  

    Where should I report this bug?

     

    Kevin Woram

    Tuesday, October 02, 2012 10:14 PM
  • I just tried this out and it seems to be working as expected. I just created a canvas and drew something on it, saved it to the local folder as a png and then did the tile update in the done handler for saving the image (see code example below). What might be happening is that your tile notification is happening before the file is flushed if you don't wait on the async functions to finish saving the canvas to disk. That could explain why the path might not resolve on the first tile update but will on subsequent ones.

     

    // Create image
                var c = document.getElementById('canvas');
                var ctx = c.getContext("2d");
                var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
                grd.addColorStop(0, "red");
                grd.addColorStop(1, "black");
                ctx.fillStyle = grd;
                ctx.fillRect(0, 0, 512, 512);
    
    
                //Save blob to image
                var blob = c.msToBlob();
                var out = null;
                var blobStream = null;
                var outputStream = null;
    
                Windows.Storage.ApplicationData.current.localFolder.createFileAsync("picture.png", Windows.Storage.CreationCollisionOption.replaceExisting)
                    .then(function (file) {
                        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
                    })
                    .then(function (stream) {
                        outputStream = stream;
                        out = stream.getOutputStreamAt(0);
                        blobStream = blob.msDetachStream();
                        return Windows.Storage.Streams.RandomAccessStream.copyAsync(blobStream, out);
                    })
                    .then(function () {
                        return out.flushAsync();
                    })
                    .done(function () {
                        blobStream.close();
                        out.close();
                        outputStream.close();
    
                        //Do tile update
                        var notifications = Windows.UI.Notifications;
                        var template = notifications.TileTemplateType.tileSquareImage;
                        var tileXml = notifications.TileUpdateManager.getTemplateContent(template);
    
                        var tileImageAttributes = tileXml.getElementsByTagName("image");
                        tileImageAttributes[0].setAttribute("src", "ms-appdata:///local/picture.png");
    
                        var tileNotification = new notifications.TileNotification(tileXml);
                        notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
                    });

     

    Nick Eubanks (MSFT)

    Tuesday, October 02, 2012 10:56 PM
  • Thanks for your help but I figured it out this morning.  For each image update, I was over-writing the existing local image file with new contents and then sending a tile notification with the path to the over-written image file.  The live tile was ignoring the update because the path to the image file was the same from update to update.  Once I started generating a new file name each time, the live tile began to update as expected.

    Is this behavior documented anywhere?  It sure caused me some grief.


    Kevin Woram

    • Marked as answer by Kevin Woram Wednesday, October 03, 2012 5:31 PM
    Wednesday, October 03, 2012 1:47 PM