LeonZandman.com

I find I’m really liking the new Windows Phone 8.1 ‘Project my Screen’ feature. This feature enabled the projection of the handset to a secondary screen via wireless Miracast (newer handsets only, as it requires special hardware) or a wired USB connection. This is great for presentations and demos. It even works in the opposite direction: you can remote control your phone by interacting with the projection using your mouse or your touch screen! Also great is that it has support for displaying multiple touch points, so your audience can actually see where you touch your device. Great stuff!

If you haven’t already, I suggest you give the feature a try yourself. Microsoft’s Cliff Simpkins has done a great writeup on his blog on getting this thing to work.

In order to use the ‘Project my Screen’ feature on your Windows PC, you have to download and install the official ‘Project my Screen’ app. By default the app shows a pretty boring image of a nondescript Windows Phone, much like the Windows Phone SDK emulators do. Fortunately Microsoft included the ability to customize the appearance of the app, so it may suit our own needs. Here’s a short video that shows a quick customization I made using the application:

As you can see I’m using a custom background image featuring the Cortana logo. Also the projected phone’s skin matches my real phone (a yellow Nokia Lumia 920). Let me tell you how I did that:

If you look inside the ProjectMyScreenApp’s installation folder, which by default is located at C:\Program Files (x86)\ProjectMyScreenApp, you’ll notice there’s a file called config.xml. This is a XML configuration file that can be used to alter the appearance of the app. By default it’s not used by the app, though. To use it you need to explicitly launch the application with the configuration file passed in as a parameter. To complicate things a little further: in its original state the configuration file doesn’t work. It refers to images that don’t exist in the installation folder (they do exist, but are embedded as resources inside the application’s executable). So you HAVE to alter the config.xml (or create your own file based on it) to get it to work.

So, how do we configure this thingy? Fortunately the config.xml file itself contains instructions on how to use it. The basic structure of the file looks like this:

<?xml version="1.0" encoding="utf-8"?>

<Config>
  <PhoneConfigurations>

    <PhoneConfiguration>

      <Background />

      <PhoneImage />

      <VideoOutput />

      <!-- <TouchDots /> -->

    </PhoneConfiguration>

    <PhoneConfiguration>
    .
    .
    .
    </PhoneConfiguration>

  </PhoneConfigurations>
</Config>

The supplied config.xml file contains PhoneConfiguration elements for five different resolutions: WXGA (768×1280), HD1080 (1080×1920), HD720 (720×1280), WVGA (480×800) and FWVGA (480×854 with the new on-screen soft buttons). I suppose you can add additional resolutions as devices are released, but I’m currently not able to test this. The application will start up with a default configuration (which you can define; see below). When you connect an actual device and allow screen projection the application will switch to the configuration that matches the connected device’s resolution.

Each PhoneConfiguration element has three attributes. The resolutionX and resolutionY values are used to specify the resolution that this configuration belongs to. The default attribute is used to specify whether this is the default configuration to use when no device is connected.

<PhoneConfiguration
    resolutionX="768"
    resolutionY="1280"
    default="true">

For each phoneConfiguration section we can configure three settings: the background image, the phone’s skin and the size and placement of the projection. Actually, there is a fourth element, touchDots, that’s present in the file, but I couldn’t get it to work. I suspect it should be used for configuring the appearance of the dots that appear when you touch your device, but it didn’t seem to respond to changes I made to it.

Let’s go into detail about each element:

The Background element controls the application’s background. The entire app background will be filled with the specified color. On top of that you can place an image that will also be scaled to fit. Note that using a background image is optional. If you only want to use the solid background color, you still have to add the imageRelPath attribute, but just give it an empty (“”) value.

<Background color="0x00000000" imageRelPath="Cortana.png" />

Using the PhoneImage element you can control the appearance of the on-screen phone (i.e. the skin). The imageRelPath attribute specifies the path to the image to use. For my demo video I used one of the official Nokia Lumia 920 press images that I downloaded from the Nokia Press media library. I cropped the image, so it didn’t have any border, and saved it as a PNG. You need to specify the path to the image relative to the ProjectMyScreenApp’s executable file. The easiest way to do this is by adding your image file to the application’s installation folder, so you only need to supply the filename without any additional path information.

The scaleFactor attribute specifies the scale factor of the phone image as a fraction of the background image’s width or height, whichever is more constrained. If no background image was specified, the app window’s dimensions are used instead. I used a value of 0.9, so the phone is nice and large, but doesn’t go edge to edge.

Using the centerOffsetX and centerOffsetY values you can position the phone image relative to the background image. I’ve used this to place my phone on the right side of the screen, so it doesn’t obscure the Cortana logo of my background image. Interestingly, if you didn’t supply a background image, these values are ignored and the phone is always displayed in the center of the application’s window.

For devices that have physical buttons we can configure the location of the Back, Windows and Search buttons. For each button you need to supply the coordinates of its bounding box. This way the application can determine which button to press when you click on the skin image with your mouse/touch screen. The backButton, windowsButton and searchButton attributes accept a value that consists of four numbers that represent the left, top, right and bottom coordinates of the hardware back, Windows and search buttons.

Here’s my complete phoneImage section:

<PhoneImage
    imageRelPath="Lumia920-2.png"
    scaleFactor="0.9"
    centerOffsetX="350"
    centerOffsetY="0"
    backButton="128,2357,400,2600"
    windowsButton="610,2357,900,2600"
    searchButton="1160,2357,1370,2600"
          />

Next up we need to specify the location of the video output using the videoOutput element. Using the topLeftOffsetX and topLeftOffsetY you specify the top left coordinates of the video image. Unfortunately you cannot specify the width of the video window. Instead you have to do some math and calculate the weight value, which is defined as being ‘the width of the video output as a fraction of the phone image’s width’. So we need determine the width (in pixels) of the phone’s image display as it appears in the skin image (i.e. the bounding box where you want to projection to appear) and divide that by the total width of the skin image. For my Lumia image that results in the following formula: 1273 / 1535 = 0.8293159609120521.

Here it is:

<VideoOutput
     weight="0.8293159609120521"
     topLeftOffsetX="125"
     topLeftOffsetY="233"
          />

So the complete phoneConfiguration section for my Lumia 920 skin looks like this:

<PhoneConfiguration
    resolutionX="768"
    resolutionY="1280"
    default="true">

  <Background color="0x00000000" imageRelPath="Cortana.png" />

  <PhoneImage
      imageRelPath="Lumia920-2.png"
      scaleFactor="0.9"
      centerOffsetX="350"
      centerOffsetY="0"
      backButton="128,2357,400,2600"
      windowsButton="610,2357,900,2600"
      searchButton="1160,2357,1370,2600"
        />

  <VideoOutput
      weight="0.8293159609120521"
      topLeftOffsetX="125"
      topLeftOffsetY="233"
        />

</PhoneConfiguration>

Now launch the ProjectMyScreenApp using the config.xml file as an input parameter. One way to do this is starting it from a Command Prompt window like this:

C:\Program Files (x86)\ProjectMyScreenApp>ProjectMyScreenApp.exe Config.xml

You can also create a Shortcut with the parameter passed in. The ProjectMyScreenApp should start in full-screen mode. You can press the [ESC] key to switch to windowed mode.

You can download my sample Lumia 920 files here. Just unzip the files into the ProjectMyPhoneApp’s installation folder (consider making a backup of the original config.xml file, just in case). As a bonus I’ve extracted the default phone images that are contained within the ProjectMyPhoneApp executable and added them too.

Please note that if you connect using a device that has a different resolution than my Lumia 920, you won’t get to see the custom stuff I mentioned above. Instead the ProjectMyScreenApp will use one of the other phone configurations and I didn’t bother changing those.

Maybe someday someone will create a nice tool that assists in creating the config.xml and/or the image files, just like Geert vd Cruijsen has done in the past with his Windows Phone 7 Emulator Skin Switcher application. Or maybe we can build a repository of compatible skin images. I’m even willing to host/link to them from here.

In any case: have fun! You know I am 😉