The title of this post might make it sound fancier than it is. The question here is about loading up a custom image format without depending on some codec having been installed system-wide (which a Windows Store app can’t do anyway). It also answers the question about just getting to the bits of an image file generally.

The trick is to read the file contents into a buffer, and then read the bytes out of the buffer. For example, here’s a roundabout way to load a JPEG:

var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.fileTypeFilter.replaceAll([‘.jpg’, ‘.jpeg’]);

picker.pickSingleFileAsync().then(function (file) {
return Windows.Storage.FileIO.readBufferAsync(file);
}).done(function (buffer) {
var reader = Windows.Storage.Streams.DataReader.fromBuffer(buffer);
var bytes = new Uint8Array(buffer.length);
reader.readBytes(bytes);
var blob = new Blob([bytes], { type: ‘image/jpeg’ });

    var img = document.createElement(‘img’);
document.body.appendChild(img);
img.src = URL.createObjectURL(blob);
})

This is highly redundant for built-in formats, of course, because you can just take the StorageFile (in file) from pickSingleFileAsync and pass it direcly tro URL.createObjectURL at the last line of this snippet. (Better yet, if you don’t need the full image, use the StorageFile.getThumbnailAsync or getScaledImageAsThumbnailAsync to minimize overhead.)

For some other format that lacks built-in support, however, this snippet shows you how to load up the bits into the bytes variable, at which point you can do whatever you want with it. To display a custom image format, you’ll need to translate it into bits of a supported file type. If you converted bytes into an array of jpegBytes, then you could just pass the latter to new Blob and everything else is the same. (You could also write the jpegBytes to a new StorageFile and then display it like you would any other, if you want to preserve the conversion.)

Thanks to Luke Hoban for this snippet.


One of my few disappointments with the Surface RT that Microsoft gave me to play with last year is that it refuses to add music located on an SD card to my music library. (I’m sure Microsoft has heard the feedback many times by now, so hopefully it’ll be improved.) I encountered this because with a 32GB Surface model, there just wasn’t space to accomodate 19GB of music files on the built-in SSD, hence the add-on SD card.

Fortunately, I finally found a workaround that I’ll get to in a minute. What primarily prompted this post is more of my experience looking through the Windows Store for a media player that could play music directly from the SD card and not depend on it being in the music library.

In the Store, I searched for “Music Player” and got back over 1700 hits, but the top ones shown by relevance were appropriately relevant. Most of the top 10-15 apps have a price tag, so I started clicking through. This gave me a chance to make some observations about writing apps for the Windows Store.

The first thing I noticed almost counts as a cardinal sin: most of the paid apps did not offer at trial! Egads…very unlikely that I’m going to pay for an app just to see if it does what I’m trying to do (get music from an SD card)? Most apps clearly said, as expected, that they access the music library, but not (as yet) having a solution for the SD card problem, I wasn’t about to pay for any app that didn’t explicitly say that it would load music from an arbitrary location.

I did, some months ago, install an app called Metro Media Player (http://apps.microsoft.com/webpdp/app/8ea516f1-eada-4d0e-931c-557878093350) that does allow you to open and play arbitrary media files, but the downside it that it doesn’t (at least in the version I tried) give you an album view of a folder or let you play the folder contents as an album.

So the first lesson here is clearly: remember to offer a trial for a paid app, even if it’s just for a short period of time. And when the trial is installed, remember to appropriately nag the consumer to upgrade to the paid version. I say “appropriately” because you want the consumer to have a good experience of the app, but not ever forget that they’re freeloading. It’s a fine line to walk, but one that will help conversions.

The second observation is that a number of apps didn’t really fill out all the screen shots that you’re allowed to submit. Remember that your app’s page in the Store is the one and only place a consumer can learn about and get a clear sense of what the app does before deciding to purchase/install a trial. Truly, if you’ve spent many days or weeks writing an app, spend a few hours getting good screenshots and writing compelling copy.

With your app description, an important thing to know about the Windows 8.1 Store is that the first sentence or two of your description will surface in the search results. This means that any words in your copy that don’t immediately make a compelling case for your app are wasted words. For example, one app starts its description–which is what shows up on the search results page–with “This is my very first Metro app”. Um, that’s not very compelling to me :). A number of others start with a phrase like “This app” or “This application” which is inherent in browsing the Store.

So even just a simple change from “This app allows you to play music from your music library and sort by artist or title” to “Play music from your music library and sort by artist or title” says the same thing and gives you more words to show. Even so, you can make it more compelling with a little editing: “Enjoy browsing and listening to your music library and pin albums to your start screen” (the latter idea is in the second sentence, but doesn’t show on the 8.1 Store search results). Every word counts!

I highly recommend finding a friend or associate to help write and edit your copy–anyone who is not yourself can more readily take the viewpoint of a potential customer rather than a developer.

I did eventually install one app that looked promising, and was free, but limited itself to the Music Library. So no progress in solving my problem.

Then I came across Groove: Smart Music Player (http://apps.microsoft.com/webpdp/app/949988e3-de86-4e4e-9039-b261fdc56fd9). It didn’t have the open-a-folder capability I was looking for, but it did contain a note with a link to a blog post about how to get your SD card in your music library (and photos and videos). And with that solution I could get this app–and even the built-in Music app–to work with my SD card.

What I appreciated most is that Groove clearly understood and recognized an issue that many people have, it seems, and offered a solution right there on the Store page. Nice job of customer awareness and empathy!

To the solution now–see http://bit.ly/UrF44P for a process to mount an SD card to empty folder on the Surface’s primary drive through Disk Management, which can then be added to the libraries. To summarize:

  1. From the desktop (Windows Explorer), create a folder somewhere on the primary drive, e.g. c:sd or c:users<your name>sd. Doesn’t matter where.
  2. Hit Win+X and select Disk Management.
  3. Right click (or tap-hold) the SD card and select “Change Drive Letters and Paths” from the menu.
  4. In that dialog, tap “Add…”, select “Mount in the following empty NTFS folder”, and enter the path to the empty folder you created. Then OK out of the dialogs.
  5. Make sure that the folder names on the SD card match the library names under c:users<your name>. If your library is “My Music” make sure that your music on the SD card is in a “My Music” folder. Don’t know why this is needed, but it was essential for me.
  6. Back in Windows Explorer, select the Music Library, on the Library Tools/Manage ribbon tap the Manage Library button, then tap Add… and navigate to the mounted folder on c: with the appropriate media, e.g. c:users<your name>SDMy Music.
  7. Give Windows a little time to index the thing, and voila! Problem solved.

 


My associate David Roussett has been running a blog for some time on HTML5, Windows 8, and Gaming. The particular series I wanted to point to is Using WinJS & WinRT to build a fun HTML5 Camera Application in which he covers some core scenarios of media capture and then gets to details of applying effects, using web workers, and using WinRT components to get to GPU shader capabilities.