StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCycling images in a live tile
text
Body
copied!<p>I have a <strong>winJS</strong> app that is a working launcher for a steam game. I'd like to get it to cycle through 5 images even while not running.</p> <p>It uses <em>only</em> the small tile — there are no wide tiles images for this app. </p> <p>Here's the code:</p> <pre><code>(function () { "use strict"; WinJS.Namespace.define("Steam", { launch: function launch(url) { var uri = new Windows.Foundation.Uri(url); Windows.System.Launcher.launchUriAsync(uri).then( function (success) { if (success) { // File launched window.close(); } else { // File launch failed } } ); } }); WinJS.Namespace.define("Tile", { enqueue: function initialize() { var updaterHandle = Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication(); updaterHandle.enableNotificationQueue(true); return updaterHandle; }, update: function update () { var template = Windows.UI.Notifications.TileTemplateType.tileSquareImage; var tileXml = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(template); var randIndx = Math.floor(Math.random() * 5); var randUpdatetime = 1000 * 3 * (((randIndx == 0) ? 1 : 0) + 1); // let the base image stay longer var tileImageAttributes = tileXml.getElementsByTagName("image"); tileImageAttributes[0].setAttribute("src", "ms-appx:///images/Borderlands2/borderlands_2_" + randIndx + "_sidyseven.png"); tileImageAttributes[0].setAttribute("alt", "Borderlands 2"); var tileNotification = new Windows.UI.Notifications.TileNotification(tileXml); var currentTime = new Date(); tileNotification.expirationTime = new Date(currentTime.getTime() + randUpdatetime); tileNotification.tag = "newTile"; var updater = Tile.enqueue(); updater.update(tileNotification); setTimeout('Tile.update();', randUpdatetime); } }); WinJS.Binding.optimizeBindingReferences = true; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; app.onactivated = function (args) { if (args.detail.kind === activation.ActivationKind.launch) { setTimeout('Steam.launch("steam://rungameid/49520");', 800); args.setPromise(WinJS.UI.processAll().then(function () { return WinJS.Navigation.navigate("/default.html", args).then(function () { Tile.update(); }); })); } }; app.start(); })(); </code></pre> <p>Notes:</p> <ul> <li><p>The code currently does not cycle the image, instead either apparently never changing, or after launch replacing the <em>application name</em> text with a tiny view of the default image. This reverts to the text after a short time, and the cycle may repeat. It never shows a different image (neither in the small image it erroneously shows, nor in the main tile).</p></li> <li><p>When I run in debug and set a breakpoint at the <code>TileUpdater.update(TileNotification)</code> stage, I can verify in the console that the image <strong>src</strong> attribute is set to a random image just as I wanted:</p> <p><code>>>>>tileNotification.content.getElementsByTagName("image")[0].getAttribute("src")</code></p> <p><code>"ms-appx:///images/Borderlands2/borderlands_2_4_sidyseven.png"</code></p> <p>But this never actually displays on the tile.</p></li> <li><p>These image files are included in the solution, and they appear in the proper directory in the Solution Explorer.</p></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload