Customizing the Windows Phone 8.1 ‘Project my Screen’ app
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>
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.
PhoneConfiguration element has three attributes. The
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">
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:
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" />
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.
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.
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
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 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
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 😉